/* ==========================================================================
   Tema de marca Dance Academy para el sistema de gestión (admin de Django).
   Colores: Fucsia #E4107F · Turquesa #18A5A3 · letras Poppins/Inter.
   Basado en la GUÍA DE ESTILO (v1, 10/07/2026).
   ========================================================================== */

:root,
html[data-theme="light"] {
  --primary: #18A5A3;              /* turquesa: cabeceras de módulo */
  --secondary: #18A5A3;
  --accent: #E4107F;              /* fucsia: acentos */
  --primary-fg: #ffffff;

  --body-fg: #1E2430;
  --body-quiet-color: #6B7280;
  --body-loud-color: #1E2430;
  --body-bg: #F6F7F9;

  /* Cabecera en VERDE SECUNDARIO del manual (#9AD1D1, verde agua claro).
     Al ser claro, el texto va en verde oscuro para que se lea bien. */
  --header-color: #0B5B59;
  --header-branding-color: #0B5B59;
  --header-bg: #9AD1D1;
  --header-link-color: #0B5B59;

  --breadcrumbs-fg: #ffffff;
  --breadcrumbs-link-fg: #ffffff;
  --breadcrumbs-bg: #128280;

  --link-fg: #128280;
  --link-hover-color: #E4107F;
  --link-selected-fg: #E4107F;

  --button-bg: #18A5A3;           /* botones normales */
  --button-fg: #ffffff;
  --button-hover-bg: #128280;
  --default-button-bg: #E4107F;   /* botón de la acción principal (Guardar) */
  --default-button-hover-bg: #C20E6C;
  --close-button-bg: #6B7280;
  --close-button-hover-bg: #4B5563;
  --delete-button-bg: #DC3545;
  --delete-button-hover-bg: #B92534;

  --object-tools-bg: #E4107F;     /* botones de "Añadir", "Historial"... */
  --object-tools-fg: #ffffff;
  --object-tools-hover-bg: #C20E6C;

  --selected-bg: #E7F5F5;
  --selected-row: #FCE3F0;
  --border-color: #E6E8EC;
  --darkened-bg: #FBFBFC;

  --message-success-bg: #E6F6EC;
  --message-warning-bg: #FCF1E1;
  --message-error-bg: #FBE7E9;

  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Tipografía de marca */
body, td, th, input, select, textarea, .button, input[type=submit], a.button {
  font-family: var(--font-family-primary);
}
h1, h2, h3, h4, .module h2, .module caption, #site-name, .dashboard #content h1,
#content h1, #content h2, .object-tools a {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif !important;
  letter-spacing: -.01em;
}

/* Botones más redondeados y con la letra de marca */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 8px;
  font-weight: 600;
}
.object-tools a { border-radius: 999px; font-weight: 600; }

/* Cabecera de la web con un punto más de aire */
#header { box-shadow: 0 1px 6px rgba(30,36,48,.10); }
#site-name a:hover { color: #E7F5F5; }

/* Los botones de acción de la cabecera se reparten en varias FILAS SIEMPRE (no solo
   en móvil). Antes solo se ordenaban en pantallas ≤1024px, así que en el PORTÁTIL
   (más ancho) se amontonaban y desbordaban. Con flex-wrap fluyen ordenados en cualquier
   ancho y el hueco entre ellos es uniforme (gap), sin depender de los márgenes de cada uno. */
#branding { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#branding a[style] { margin-left:0 !important; }

/* Tablas del listado: encabezado limpio */
#changelist table thead th {
  background: #FBEFF5;
}
#changelist table thead th a { color: #128280; }

/* Fila seleccionada / al pasar el ratón */
#changelist tbody tr:hover { background: #F5FBFB; }

/* Enlaces del índice de aplicaciones (los módulos) */
.app-list .model th a, .dashboard .module a { color: #128280; }

/* Mensajes (avisos arriba) con el color de la marca */
ul.messagelist li.success { border-left: 4px solid #15A34A; }
ul.messagelist li.warning { border-left: 4px solid #E0952B; }
ul.messagelist li.error   { border-left: 4px solid #DC3545; }

/* Etiquetas de estado (badges) usadas en nuestras vistas */
.da-badge { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600;
  padding:3px 12px; border-radius:999px; }
.da-badge.ok   { background:#E6F6EC; color:#0F7C38; }
.da-badge.pend { background:#FCF1E1; color:#9A6212; }
.da-badge.err  { background:#FBE7E9; color:#A71D2A; }
.da-badge.info { background:#E7F5F5; color:#128280; }

/* --- Barra de desplazamiento horizontal ARRIBA de las tablas del listado --- */
/* La zona de resultados scrollea en horizontal (antes scrolleaba toda la página) */
#changelist .results { overflow-x: auto; max-width: 100%; }
/* Barra gemela, FINA, justo encima de la tabla (ver dance_academy_admin.js) */
.da-topscroll { overflow-x: auto; overflow-y: hidden; height: 10px; margin: 0 0 2px; }
.da-topscroll > div { height: 1px; }
.da-topscroll::-webkit-scrollbar { height: 9px; }
.da-topscroll::-webkit-scrollbar-track { background: #EDEFF2; border-radius: 6px; }
.da-topscroll::-webkit-scrollbar-thumb { background: #B9BEC6; border-radius: 6px; }
.da-topscroll::-webkit-scrollbar-thumb:hover { background: #18A5A3; }

/* --- Logo de Dance Academy en la cabecera (transparente, pequeño, sin caja) --- */
#da-logo { display:inline-flex; align-items:center; margin-right:14px; vertical-align:middle;
  max-height:38px; overflow:hidden; }
#da-logo img { height:34px !important; width:auto !important; max-height:34px; display:block; }

/* --- Cajita de ayuda desplegable (ℹ️) arriba de los listados --- */
details.da-ayuda { background:#E7F5F5; border:1px solid #9AD1D1; border-radius:10px;
  padding:10px 16px; margin:0 0 16px; }
details.da-ayuda > summary { cursor:pointer; font-weight:700; color:#0B5B59; list-style:none;
  display:flex; align-items:center; gap:8px; }
details.da-ayuda > summary::-webkit-details-marker { display:none; }
details.da-ayuda > summary::after { content:"▸"; margin-left:auto; color:#0B5B59; }
details.da-ayuda[open] > summary::after { content:"▾"; }
.da-ayuda-cuerpo { margin-top:8px; color:#1F2937; line-height:1.6; font-size:.92rem; }
.da-ayuda-cuerpo b { color:#0B5B59; }

/* --- Botón "← Volver" flotante (ver dance_academy_admin.js) ---
   En el ORDENADOR sale discreto y semitransparente abajo a la izquierda; en el
   MÓVIL se agranda (más abajo, en el bloque @media) para pulsarlo con el dedo. */
#da-volver {
  display:inline-flex; align-items:center; gap:6px;
  position:fixed; left:14px; bottom:14px; z-index:1000;
  background:#18A5A3; color:#fff; text-decoration:none;
  font-weight:600; font-size:.82rem; padding:8px 15px;
  border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.22);
  opacity:.85;
}
#da-volver:hover { opacity:1; background:#128280; }

/* ==========================================================================
   AJUSTES PARA MÓVIL Y TABLET
   El admin de Django está pensado para ordenador. En pantallas estrechas:
   - la cabecera (logo + botones) se coloca en filas que se ajustan, sin amontonarse;
   - las tablas de los listados se deslizan de lado dentro de su caja;
   - aparece un botón "← Volver" grande abajo a la izquierda para navegar fácil.
   ========================================================================== */
@media (max-width: 1024px) {
  /* Cabecera: los botones se reparten en varias filas y se hacen algo más pequeños */
  #branding { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:6px 0; }
  #branding a[style] {
    margin-left:0 !important;
    font-size:.72rem !important;
    padding:5px 11px !important;
  }
  #da-logo { margin-right:6px; }
  #da-logo img { height:28px !important; max-height:28px; }

  /* Las tablas de los listados no desbordan la página: se deslizan dentro de su caja */
  #changelist .results { max-width:100%; }
  #content-main, #content { overflow-x:hidden; }

  /* Botón "← Volver" flotante y grande, fácil de pulsar con el dedo */
  #da-volver {
    display:inline-flex; align-items:center; gap:6px;
    position:fixed; left:12px; bottom:16px; z-index:1000;
    background:#18A5A3; color:#fff; text-decoration:none;
    font-weight:700; font-size:.95rem; padding:11px 20px;
    border-radius:999px; box-shadow:0 3px 12px rgba(0,0,0,.30);
  }
  #da-volver:active { background:#128280; }

  /* Filtros llevados arriba dentro de un desplegable (ver dance_academy_admin.js) */
  details.da-filtros-movil {
    background:#F0FBFB; border:1px solid #9AD1D1; border-radius:10px;
    margin:0 0 14px; padding:2px 14px;
  }
  details.da-filtros-movil > summary {
    cursor:pointer; font-weight:700; color:#0B5B59; padding:10px 0;
    list-style:none; font-size:1rem;
  }
  details.da-filtros-movil > summary::-webkit-details-marker { display:none; }
  details.da-filtros-movil > summary::after { content:"▸"; float:right; }
  details.da-filtros-movil[open] > summary::after { content:"▾"; }
  details.da-filtros-movil #changelist-filter {
    position:static !important; width:auto !important; min-width:0 !important;
    margin:0 !important; float:none !important; background:transparent !important;
    top:auto !important;
  }
  details.da-filtros-movil #changelist-filter > h2 { display:none; }
}