/* ============================================================================
   El panel administrativo.

   Densidad de herramienta de trabajo, no de página de marketing: quien lo abre
   quiere saber en cinco segundos si hoy hay algo que arreglar.
   ============================================================================ */

.disposicion {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

@media (min-width: 1024px) {
    .disposicion { grid-template-columns: 256px 1fr; }
}

/* --- Barra lateral -------------------------------------------------------- */

.lateral {
    display: flex;
    flex-direction: column;
    gap: var(--e6);
    padding: var(--e6) var(--e4);
    background: var(--surface);
    border-right: 1px solid var(--borde);
}

@media (max-width: 1023px) {
    .lateral {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: var(--z-menu);
        width: min(280px, 84vw);
        transform: translateX(-100%);
        transition: transform var(--transicion-lenta);
        box-shadow: var(--sombra-lg);
        overflow-y: auto;
    }
    .lateral[data-abierta] { transform: translateX(0); }
}

.lateral__marca {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding-inline: var(--e2);
    text-decoration: none;
    color: inherit;
}

/* El símbolo de Gelatos ya trae sus propios colores y su forma redonda: no
   necesita una caja de fondo detrás, que solo le restaría contraste. */
.lateral__logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
}

/* `display:block` explícito: son `span` dentro de un contenedor flex, y sin
   esto el nombre y el subtítulo se pegan en la misma línea. */
.lateral__nombre { display: block; font-family: var(--fuente-titulo); font-weight: 800; line-height: 1.2; }
.lateral__sub    { display: block; font-size: 0.75rem; color: var(--text-secondary); }

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav__enlace {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--e3);
    min-height: 44px;
    padding: 0 var(--e3);
    border-radius: var(--radio);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: background-color var(--transicion), color var(--transicion);
}

.nav__enlace:hover { background: var(--surface-suave); color: var(--text-primary); }

.nav__enlace[aria-current="page"] {
    background: var(--primary-tenue);
    color: var(--primary);
    font-weight: 600;
}

/* La marca del elemento activo: una barra a la izquierda, para que el estado
   se vea aunque el color no se distinga. */
.nav__enlace[aria-current="page"]::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
    transform: translateY(-50%);
}

.nav__icono { width: 18px; height: 18px; flex-shrink: 0; }

.lateral__pie { margin-top: auto; }

.usuario {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3);
    border-radius: var(--radio);
    background: var(--surface-suave);
}

.usuario__inicial {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: var(--radio-full);
    background: var(--primary);
    color: var(--text-inverso);
    font-weight: 700;
    font-size: 0.875rem;
}

.usuario__nombre { display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.2; }
.usuario__rol    { display: block; font-size: 0.75rem; color: var(--text-secondary); }

/* --- Velo del menú en móvil ---------------------------------------------- */

.velo {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-menu) - 1);
    background: rgba(41, 35, 43, 0.4);
    backdrop-filter: blur(2px);
}
.velo[hidden] { display: none; }

/* --- Contenido ----------------------------------------------------------- */

.principal { min-width: 0; padding-bottom: var(--e12); }

.barra-superior {
    position: sticky;
    top: 0;
    z-index: var(--z-pegado);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e3);
    padding: var(--e4) var(--e5);
    background: rgba(255, 249, 247, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borde);
}

.barra-superior__titulo { flex: 1; min-width: 180px; font-size: 1.25rem; }

.menu-boton {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: var(--radio);
    border: 1px solid var(--borde);
    background: var(--surface);
}
@media (min-width: 1024px) { .menu-boton { display: none; } }

.contenido { padding: var(--e6) var(--e5); display: grid; gap: var(--e5); }

/* `min-width: 0` en todo lo que vive dentro de una rejilla.
   ---------------------------------------------------------
   Un elemento de grid o de flex tiene `min-width: auto`, que significa «no te
   encojas por debajo de tu contenido». Dentro hay tablas con `min-width: 640px`
   y un mapa de calor aún más ancho; sin esta regla, la columna crece hasta
   caber esos 640 px, el `overflow-x: auto` del contenedor no llega a activarse
   nunca y quien abre el panel desde el móvil arrastra la página entera de lado.

   Es el fallo de CSS más fácil de pasar por alto: en escritorio no se nota, y
   en el móvil parece que «la tabla está mal hecha» cuando el problema está dos
   niveles más arriba. */
.contenido > *,
.rejilla > *,
.panel-caja,
.tabla-envoltura { min-width: 0; }

/* --- Filtros -------------------------------------------------------------- */

.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
}

.segmentado {
    display: inline-flex;
    padding: 3px;
    background: var(--surface-suave);
    border: 1px solid var(--borde);
    border-radius: var(--radio-full);
}

.segmentado__opcion {
    min-height: 44px;
    padding: 0 var(--e4);
    border-radius: var(--radio-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background-color var(--transicion), color var(--transicion);
}

.segmentado__opcion[aria-current="true"] {
    background: var(--surface);
    color: var(--primary);
    font-weight: 600;
    box-shadow: var(--sombra-sm);
}

.selector {
    min-height: 44px;
    padding: 0 var(--e8) 0 var(--e3);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B6259' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right var(--e3) center;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    font-size: 0.875rem;
    appearance: none;
    cursor: pointer;
}

/* --- Rejillas ------------------------------------------------------------- */

.rejilla { display: grid; gap: var(--e4); }
.rejilla--kpi  { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rejilla--2    { grid-template-columns: 1fr; }
.rejilla--3    { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (min-width: 900px) {
    .rejilla--2 { grid-template-columns: 1.4fr 1fr; }
    .rejilla--2-inv { grid-template-columns: 1fr 1.4fr; }
}

/* --- Tarjeta KPI ---------------------------------------------------------- */

.kpi {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    padding: var(--e5);
    background: var(--surface);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    /* Aparecen suavemente al cargar (sección 53). */
    animation: sube 400ms ease-out both;
}

@keyframes sube {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kpi__icono { width: 20px; height: 20px; color: var(--primary-grafico); }

.kpi__etiqueta {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.kpi__valor {
    font-family: var(--fuente-titulo);
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1.1;
}
.kpi__valor small { font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary); }

.kpi__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); font-size: 0.75rem; color: var(--text-secondary); }

/* --- Gráficas ------------------------------------------------------------- */

.panel-caja {
    display: flex;
    flex-direction: column;
    padding: var(--e5);
    background: var(--surface);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
}

.panel-caja__cabecera { margin-bottom: var(--e5); }
.panel-caja__titulo { font-size: 1rem; }
.panel-caja__sub { margin-top: 2px; font-size: 0.8125rem; color: var(--text-secondary); }

/* Altura reservada de antemano: sin esto la página salta cuando Chart.js
   termina de dibujar (sección 52, «content jumping»). */
.lienzo { position: relative; width: 100%; }
.lienzo--alto   { height: 320px; }
.lienzo--medio  { height: 260px; }
.lienzo--bajo   { height: 200px; }

/* --- Barras horizontales por atributo ------------------------------------- */

.barras { display: flex; flex-direction: column; gap: var(--e4); }

.barra__fila { display: grid; grid-template-columns: 1fr auto; gap: var(--e2) var(--e3); align-items: center; }

.barra__nombre { font-size: 0.875rem; font-weight: 500; }

.barra__valor {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sem-color);
}

.barra__pista {
    grid-column: 1 / -1;
    height: 10px;
    border-radius: var(--radio-full);
    background: var(--surface-suave);
    overflow: hidden;
}

.barra__relleno {
    height: 100%;
    border-radius: var(--radio-full);
    background: var(--sem-color);
    transform-origin: left;
    animation: crece 620ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

@keyframes crece { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- «Qué mejorar primero» ------------------------------------------------ */

.mejoras { display: flex; flex-direction: column; }

.mejora {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--e2) var(--e4);
    padding-block: var(--e4);
    border-bottom: 1px solid var(--borde);
}
.mejora:last-child { border-bottom: none; }

.mejora__orden {
    font-family: var(--fuente-titulo);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--borde-fuerte);
    line-height: 1;
}

.mejora__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2); }
.mejora__nombre { font-family: var(--fuente-titulo); font-weight: 700; }
.mejora__nota { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sem-color); }
.mejora__cuerpo { grid-column: 2; font-size: 0.875rem; color: var(--text-secondary); }

.mejora__recomendacion {
    grid-column: 2;
    margin-top: var(--e2);
    padding: var(--e3) var(--e4);
    background: var(--surface-suave);
    border-left: 3px solid var(--primary-grafico);
    border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
    font-size: 0.875rem;
}

/* --- Alertas -------------------------------------------------------------- */

.alertas { display: flex; flex-direction: column; gap: var(--e3); }

.alerta {
    display: flex;
    gap: var(--e3);
    padding: var(--e4);
    border-radius: var(--radio);
    border: 1px solid var(--sem-color);
    background: var(--sem-fondo);
}

.alerta__icono { width: 20px; height: 20px; flex-shrink: 0; color: var(--sem-color); margin-top: 2px; }
.alerta__titulo { font-weight: 600; font-size: 0.9375rem; }
.alerta__detalle { margin-top: 2px; font-size: 0.875rem; color: var(--text-secondary); }

/* --- Tablas --------------------------------------------------------------- */

/* El contenedor se desplaza, no la página: en móvil una tabla ancha no debe
   arrastrar todo el documento a lo lejos. */
.tabla-envoltura { overflow-x: auto; margin-inline: calc(var(--e5) * -1); padding-inline: var(--e5); }

.tabla { min-width: 640px; font-size: 0.875rem; }

.tabla th {
    padding: var(--e3);
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}

.tabla th a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
}
.tabla th a:hover { color: var(--primary); }

.tabla td { padding: var(--e3); border-bottom: 1px solid var(--borde); }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: var(--surface-suave); }

.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

.producto-celda { display: flex; align-items: center; gap: var(--e3); }

.producto-punto {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: var(--radio-full);
    background: var(--primary-tenue);
    color: var(--primary);
}

/* La foto ocupa exactamente el sitio del icono, para que las filas con foto y
   sin ella se alineen igual. */
.producto-foto {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: var(--radio-full);
    object-fit: cover;
}

/* --- Mapa de calor -------------------------------------------------------- */

.mapa { display: grid; gap: 3px; font-size: 0.75rem; }
.mapa__celda {
    display: grid;
    place-items: center;
    min-height: 34px;
    border-radius: var(--radio-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.mapa__celda--vacia { background: var(--surface-suave); color: var(--borde-fuerte); }
.mapa__eje { display: grid; place-items: center; color: var(--text-secondary); font-weight: 500; }

.mapa__leyenda { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e4); font-size: 0.75rem; color: var(--text-secondary); }
.mapa__muestra { width: 22px; height: 12px; border-radius: 3px; }

/* --- Comentarios ---------------------------------------------------------- */

.comentario {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    padding: var(--e5);
    background: var(--surface);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--sem-color);
    border-radius: var(--radio);
}

.comentario__meta { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; font-size: 0.75rem; color: var(--text-secondary); }
.comentario__texto { font-size: 0.9375rem; }
.comentario__texto + .comentario__texto { padding-top: var(--e3); border-top: 1px dashed var(--borde); }
.comentario__quien { font-weight: 600; font-size: 0.75rem; color: var(--text-secondary); display: block; margin-bottom: 2px; }
.comentario__etiquetas { display: flex; flex-wrap: wrap; gap: var(--e1); }

/* --- Matriz de prioridades ------------------------------------------------ */

.matriz {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    aspect-ratio: 1.35;
    background: var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
}

.matriz__cuadrante { position: relative; padding: var(--e4); background: var(--sem-fondo); }
.matriz__titulo { font-size: 0.8125rem; font-weight: 700; color: var(--sem-color); }
.matriz__detalle { margin-top: var(--e1); font-size: 0.75rem; color: var(--text-secondary); line-height: 1.45; }
.matriz__fichas { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e3); }

.ficha {
    padding: 3px var(--e2);
    background: var(--surface);
    border: 1px solid var(--sem-color);
    border-radius: var(--radio-full);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sem-color);
}

.matriz__ejes { display: flex; justify-content: space-between; margin-top: var(--e2); font-size: 0.75rem; color: var(--text-secondary); }

/* --- Objetivos ------------------------------------------------------------ */

.objetivo { display: grid; gap: var(--e2); padding-block: var(--e3); border-bottom: 1px solid var(--borde); }
.objetivo:last-child { border-bottom: none; }
.objetivo__linea { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); }
.objetivo__nombre { font-size: 0.875rem; font-weight: 500; }
.objetivo__cifras { font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.objetivo__cifras strong { color: var(--text-primary); }

.objetivo__pista { height: 8px; border-radius: var(--radio-full); background: var(--surface-suave); overflow: hidden; }
.objetivo__relleno { height: 100%; border-radius: var(--radio-full); background: var(--sem-color); animation: crece 620ms ease-out both; transform-origin: left; }

/* --- Estados vacíos (sección 54) ------------------------------------------ */

.vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e3);
    padding: var(--e12) var(--e5);
    text-align: center;
}

.vacio__icono {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    border-radius: var(--radio-full);
    background: var(--surface-suave);
    color: var(--text-secondary);
}

.vacio__titulo { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.125rem; }
.vacio__texto { max-width: 46ch; color: var(--text-secondary); font-size: 0.9375rem; }

/* --- Esqueletos de carga (sección 55) ------------------------------------- */

.esqueleto {
    background: linear-gradient(90deg, var(--surface-suave) 25%, var(--borde) 37%, var(--surface-suave) 63%);
    background-size: 400% 100%;
    border-radius: var(--radio-sm);
    animation: brillo 1.4s ease-in-out infinite;
}

@keyframes brillo { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

.esqueleto--linea  { height: 12px; }
.esqueleto--titulo { height: 26px; width: 45%; }
.esqueleto--bloque { height: 100%; min-height: 180px; }

/* Mientras el panel recarga datos, se atenúa en vez de desaparecer: así no
   salta el diseño y se ve que algo está pasando. */
.contenido[data-cargando] { opacity: 0.55; pointer-events: none; transition: opacity 120ms; }

/* --- Mensajes ------------------------------------------------------------- */

.mensaje {
    display: flex;
    gap: var(--e3);
    padding: var(--e4);
    border-radius: var(--radio);
    font-size: 0.9375rem;
    border: 1px solid var(--sem-color);
    background: var(--sem-fondo);
    color: var(--text-primary);
}

/* --- Formularios del panel ------------------------------------------------ */

.formulario { display: grid; gap: var(--e4); }
.formulario__fila { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.entrada {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--e3);
    background: var(--surface);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    font-size: 0.9375rem;
}
.entrada:focus { border-color: var(--primary); }

/* --- Impresión (sección 48) ----------------------------------------------- */

@media print {
    .lateral, .barra-superior, .velo, .no-imprimir { display: none !important; }
    .disposicion { grid-template-columns: 1fr; }
    body { background: #fff; }

    .panel-caja, .kpi, .tarjeta {
        border: 1px solid #ccc;
        box-shadow: none;
        break-inside: avoid;
    }

    /* Sin esto el navegador quita los fondos al imprimir y el semáforo, que es
       justamente lo que hay que leer, desaparece. */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}