/* Desarrollado para Webcomunica.solutions */
/* ============================
   TOKENS Y TEMAS
   ============================ */
:root {
    --marca:        #28156E;   /* el azul marino DEL LOGO de Logistransol (logistransol.es) */
    --marca-fuerte: #1C0E4C;   /* el mismo tono, mas oscuro, para estados activos */
    --barra:        #28156E;   /* fondo de la barra superior: SIEMPRE el azul del logo */
    --boton:        #28156E;   /* botones solidos: han de aguantar texto blanco encima */
    --boton-hover:  #1C0E4C;
    --acento:       #0e8f88;   /* teal: tendencias y estados activos, NO semantico */
    --fondo:        #f4f6f8;
    --superficie:   #ffffff;
    --superficie-2: #eef2f6;
    --borde:        #d5dde5;
    --texto:        #16202a;
    --texto-suave:  #5a6b7b;   /* gris TINTADO de azul, no gris puro */
    --ok:           #1f7a45;
    --aviso:        #9a6408;
    --error:        #a32a2a;
    --sombra:       0 1px 2px rgba(40, 21, 110, .10), 0 2px 8px rgba(40, 21, 110, .06);
    --radio:        6px;
}
[data-tema="oscuro"] {
    --marca:        #9481DA;   /* el azul del logo aclarado: mismo tono (253deg), legible en oscuro */
    --marca-fuerte: #7259CF;
    /* La barra se queda en el azul del logo tambien en oscuro: aclararla como
       los enlaces la volvia lila y dejaba el texto blanco en contraste 3.3. */
    --barra:        #1C0E4C;
    /* En oscuro el boton NO usa --marca: ese lila deja el texto blanco en
       contraste 3.3. Se baja a un tono con 5.2, que ya es legible. */
    --boton:        #7259CF;
    --boton-hover:  #5E41C8;
    --acento:       #35b5ad;
    --fondo:        #0f171e;
    --superficie:   #17222c;
    --superficie-2: #1e2b36;
    --borde:        #2c3d4c;
    --texto:        #e6edf3;
    --texto-suave:  #93a6b8;
    --ok:           #4bbd7a;
    --aviso:        #d9a441;
    --error:        #e07070;
    --sombra:       0 1px 2px rgba(0, 0, 0, .35);
}

/* ============================
   RESET Y BASE
   ============================ */
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--marca); }
h1, h2, h3 { margin: 0 0 12px; line-height: 1.25; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }

/* ============================
   CABECERA Y NAVEGACION
   ============================ */
.barra {
    display: flex; align-items: center; gap: 24px;
    padding: 10px 20px;
    background: var(--barra); color: #fff;
    box-shadow: var(--sombra);
}
.marca { display: flex; align-items: center; gap: 10px; }
.marca strong { display: block; font-size: 15px; }
.marca span { display: block; font-size: 11px; opacity: .78; }
.icono-marca {
    width: 26px; height: 26px;
    /* El isotipo lleva su propio azul marino, que sobre la barra azul del
       panel se pierde: se le da una pastilla clara para que el marco del
       logo se vea, como se hace con cualquier marca sobre fondo de color. */
    background: #fff; padding: 3px; border-radius: 7px;
    box-sizing: content-box;
}
.navegacion { display: flex; gap: 4px; margin-left: auto; }
.navegacion a {
    color: #fff; text-decoration: none; padding: 8px 14px;
    border-radius: var(--radio); font-size: 13px; opacity: .85;
    min-height: 44px; display: flex; align-items: center;
}
.navegacion a:hover { background: rgba(255, 255, 255, .12); opacity: 1; }
.navegacion a.activo { background: rgba(255, 255, 255, .18); opacity: 1; font-weight: 600; }
.acciones-barra { display: flex; align-items: center; gap: 10px; }
.usuario { font-size: 12px; opacity: .85; }
.boton-texto { color: #fff; font-size: 12px; text-decoration: none; opacity: .85; }
.boton-texto:hover { opacity: 1; text-decoration: underline; }

.contenido { padding: 18px 20px 40px; max-width: 1600px; margin: 0 auto; }
.pie {
    padding: 14px 20px; color: var(--texto-suave); font-size: 11px;
    border-top: 1px solid var(--borde); max-width: 1600px; margin: 0 auto;
}

/* ============================
   FORMULARIOS Y BUSQUEDA
   ============================ */
.panel {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 16px; margin-bottom: 16px;
}
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.campo input, .campo select {
    padding: 9px 10px; min-height: 40px;
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--superficie); color: var(--texto); font: inherit;
}
.campo input:focus, .campo select:focus { outline: 2px solid var(--marca); outline-offset: -1px; }
.campo-ancho input { min-width: 260px; }
.opciones { display: flex; gap: 14px; align-items: center; }
.opcion { display: flex; gap: 6px; align-items: center; font-size: 13px; }

.boton {
    padding: 10px 16px; min-height: 40px;
    background: var(--boton); color: #fff; border: 0;
    border-radius: var(--radio); font: inherit; font-weight: 600; cursor: pointer;
    transition: background 150ms ease-out;
}
.boton:hover { background: var(--boton-hover); }
.boton-secundario { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde); }
.boton-secundario:hover { background: var(--borde); }
.grupo-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.grupo-botones a { text-decoration: none; }

/* ============================
   BANDA DE TOTALES
   ============================ */
.totales { display: flex; flex-wrap: wrap; gap: 1px; background: var(--borde);
           border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.total { flex: 1 1 150px; background: var(--superficie); padding: 12px 16px; }
.total .etiqueta { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.total .cifra { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums;
                margin-top: 2px; white-space: nowrap; }   /* el simbolo € no salta de linea */
.total .cifra.negativo { color: var(--error); }
.total.destacado .cifra { color: var(--marca); }

/* ============================
   TABLAS
   ============================ */
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th { background: var(--superficie-2); font-size: 11px; text-transform: uppercase;
     letter-spacing: .03em; color: var(--texto-suave); position: sticky; top: 0; }
tbody tr:hover { background: var(--superficie-2); }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }
td.negativo { color: var(--error); }
tr.fila-abono td:first-child { box-shadow: inset 3px 0 0 var(--error); }
td a { text-decoration: none; font-weight: 600; }

/* ============================
   BADGES Y ESTADOS
   ============================ */
.badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600; border: 1px solid transparent;
}
.badge-efectivo      { background: #e8f0f6; color: #14496f; border-color: #c5dcec; }
.badge-transferencia { background: #e4f4f2; color: #0b5f5a; border-color: #bfe4e0; }
.badge-giro          { background: #eee9f7; color: #4a3a7a; border-color: #d8cdee; }
.badge-tarjeta       { background: #fdeee2; color: #8a4a12; border-color: #f4d6bd; }
.badge-talon         { background: #eef1e6; color: #4f5f26; border-color: #d9e0c6; }
.badge-sin           { background: var(--superficie-2); color: var(--texto-suave); border-color: var(--borde); }
/* En oscuro, cada medio conserva su tono con la luminosidad invertida. Antes una
   sola regla los dejaba los seis iguales y se perdia el escaneo por color que en
   claro si funciona (QA visual, 25/09/2026). Texto sobre fondo: 7,4 a 8,5. */
[data-tema="oscuro"] .badge-efectivo      { background: #16324a; color: #9cc7ea; border-color: #24496a; }
[data-tema="oscuro"] .badge-transferencia { background: #0f3a36; color: #7fd6cc; border-color: #1b5650; }
[data-tema="oscuro"] .badge-giro          { background: #2c2447; color: #c3b3ec; border-color: #43386b; }
[data-tema="oscuro"] .badge-tarjeta       { background: #3d2a17; color: #f0bf8f; border-color: #5c4025; }
[data-tema="oscuro"] .badge-talon         { background: #2c3319; color: #c7d69a; border-color: #444f28; }

.aviso {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; border-radius: var(--radio); margin-bottom: 16px;
    background: #fdf6e6; border: 1px solid #e8d9ae; color: #6b4e0c;
}
[data-tema="oscuro"] .aviso { background: #2a2413; border-color: #4d4224; color: #e0c98a; }
.aviso strong { display: block; }
.error-caja { background: #fbeaea; border: 1px solid #e6b9b9; color: var(--error);
              padding: 10px 12px; border-radius: var(--radio); margin-bottom: 14px; }
[data-tema="oscuro"] .error-caja { background: #2b1717; border-color: #5a2b2b; }

/* ============================
   PAGINACION
   ============================ */
.paginacion { display: flex; gap: 8px; align-items: center; justify-content: space-between;
              margin-top: 12px; flex-wrap: wrap; }
.paginacion .info { color: var(--texto-suave); font-size: 12px; }
.paginacion a, .paginacion span.actual {
    padding: 8px 12px; min-height: 40px; display: inline-flex; align-items: center;
    border: 1px solid var(--borde); border-radius: var(--radio);
    text-decoration: none; background: var(--superficie);
}
.paginacion span.actual { background: var(--marca); color: #fff; border-color: var(--marca); font-weight: 600; }

/* ============================
   LOGIN
   ============================ */
/* --barra, no --marca: en oscuro --marca es el lila de los enlaces y dejaba
   toda la pantalla de acceso en lila claro. El acceso es la primera imagen
   de la marca: va en su azul marino en los dos temas. */
.pantalla-login { min-height: 100vh; display: grid; place-items: center; background: var(--barra); padding: 20px; }
.caja-login { background: var(--superficie); border-radius: 10px; padding: 28px;
              width: 100%; max-width: 380px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.caja-login h1 { font-size: 18px; }
.caja-login p.sub { color: var(--texto-suave); font-size: 13px; margin: 0 0 20px; }
.caja-login .campo { margin-bottom: 14px; }
.caja-login .campo input { width: 100%; }
.caja-login .boton { width: 100%; }
.codigo-2fa { letter-spacing: .35em; text-align: center; font-size: 20px; font-variant-numeric: tabular-nums; }
.secreto { font-family: ui-monospace, monospace; background: var(--superficie-2);
           padding: 10px; border-radius: var(--radio); word-break: break-all; font-size: 13px; }

/* ============================
   FICHA DE FACTURA
   ============================ */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.dato .etiqueta { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.dato .valor { font-size: 15px; margin-top: 2px; }
.dato .valor.importe { font-variant-numeric: tabular-nums; font-weight: 600; }
.linea-envase td { color: var(--texto-suave); font-style: italic; }

/* Lineas de envase y deposito: son parte del documento pero no de la venta,
   asi que se ven en segundo plano en vez de esconderse. */
.fila-envase td { color: var(--texto-suave); font-style: italic; }

/* ============================
   GRAFICAS (SVG generado en PHP)
   ============================
   Rejilla y ejes RECESIVOS: nunca compiten con los datos. Las marcas son finas
   y el color lo pone el propio SVG (paleta validada en funciones/graficas.php). */
.grafica       { width: 100%; height: auto; display: block; overflow: visible; }
.grafica-cinta { width: 100%; height: 26px; display: block; }
.grafica-rejilla { stroke: var(--borde); stroke-width: 1; opacity: .55; }
.grafica-cero    { stroke: var(--texto-suave); stroke-width: 1.5; }
.grafica-eje      { fill: var(--texto-suave); font-size: 11px; }
.grafica-etiqueta { fill: var(--texto); font-size: 12px; }
.grafica-valor    { fill: var(--texto-suave); font-size: 12px; font-variant-numeric: tabular-nums; }
.grafica-barra    { transition: opacity .12s; }
/* Ranking en HTML: el texto no se encoge con el panel. Nombre, barra y valor en
   una fila; en movil la barra pasa debajo del nombre a todo el ancho. */
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ranking li {
    display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto;
    align-items: center; gap: 10px; font-size: 12px;
}
.ranking-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.ranking-etiqueta a { font-weight: 400; text-decoration: none; }
.ranking-etiqueta a:hover { text-decoration: underline; }
.ranking-barra { width: 100%; height: 12px; display: block; }
.ranking-valor { color: var(--texto-suave); font-variant-numeric: tabular-nums; text-align: right; }
.grafica-barra:hover { opacity: .78; }

/* Leyenda: la identidad NUNCA va solo por color, siempre lleva su nombre. */
.leyenda { list-style: none; margin: 12px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.leyenda li { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.leyenda .punto { width: 10px; height: 10px; flex: 0 0 10px; }
.leyenda-nombre { color: var(--texto); }
.leyenda-valor  { color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* Columna resaltada: se marca con fondo, no con color de texto, para que el
   numero siga leyendose igual (el color del texto lo reserva el signo). */
td.destacada, th.destacada { background: var(--superficie-2); font-weight: 600; }

/* ============================
   TARJETAS DE INFORME
   ============================ */
.rejilla-informes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px; margin-bottom: 16px;
}
.tarjeta-informe {
    display: block; padding: 18px; text-decoration: none; color: inherit;
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--radio); box-shadow: var(--sombra);
    transition: transform .12s, box-shadow .12s;
}
.tarjeta-informe:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(40,21,110,.14); }
.tarjeta-informe h2 { margin: 0 0 6px; font-size: 15px; color: var(--marca); }
.tarjeta-informe p  { margin: 0; font-size: 12px; color: var(--texto-suave); line-height: 1.5; }
.marca-validado {
    display: inline-block; margin-top: 10px; padding: 2px 8px; border-radius: 999px;
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
    background: var(--superficie-2); color: var(--ok); border: 1px solid var(--borde);
}

/* Aviso de tono bajo: informa sin alarmar (el .aviso rojo es para lo que duele). */
.aviso-suave {
    padding: 12px 14px; border-radius: var(--radio); font-size: 12.5px; line-height: 1.55;
    background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto-suave);
}
.aviso-suave strong { color: var(--texto); }

/* ============================
   SEPARACION ENTRE BLOQUES
   ============================
   mongolrulez-style prohibe el CSS inline: estas clases sustituyen a los
   style="margin-top:..." que se habian ido colando en las paginas. */
.separado      { margin-top: 16px; }
.separado-poco { margin-top: 12px; }
.separado-mas  { margin-top: 24px; }
.a-la-derecha  { margin-left: auto; }
.centrado      { text-align: center; }
.opciones      { margin-top: 12px; }

/* ============================
   COLUMNAS ORDENABLES
   ============================ */
th.ordenable { padding: 0; }
th.ordenable a {
    display: block; padding: 10px 12px; color: inherit; text-decoration: none;
    white-space: nowrap;
}
th.ordenable a:hover { background: var(--superficie-2); color: var(--acento); }
th.ordenable.numero a { text-align: right; }
th.ordenada a { color: var(--acento); }

/* ============================
   FICHA DE CLIENTE
   ============================ */
.subtitulo { margin: -8px 0 16px; color: var(--texto-suave); font-size: 13px; }
.nota { margin: -6px 0 10px; color: var(--texto-suave); font-size: 12px; }
.rejilla-dos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px; margin-top: 16px;
}
.rejilla-dos .panel { margin: 0; }
/* Un hijo de rejilla no encoge por debajo de su contenido (min-width: auto): una
   tabla ancha estiraba el panel y la pagina entera por fuera del movil. Con 0, la
   tabla se desplaza dentro de su .tabla-envoltorio, que es lo que debe pasar. */
.rejilla-dos > * { min-width: 0; }
/* Linea de contacto bajo el nombre: datos sueltos separados por un punto medio,
   que en movil saltan de linea sin romper ninguno por la mitad. */
.ficha-contacto {
    display: flex; flex-wrap: wrap; gap: 4px 18px;
    margin: -8px 0 16px; color: var(--texto-suave); font-size: 13px;
}
/* Separados por espacio y no por un punto medio: al saltar de linea en movil el
   punto se quedaba colgando al principio de la siguiente. */
.ficha-contacto span { white-space: nowrap; }

/* ============================
   SALTO DE PAGINA
   ============================ */
.salto-pagina { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; }
.salto-pagina label { color: var(--texto-suave); font-size: 12px; }
.salto-pagina input { width: 76px; padding: 6px 8px; }

/* Aviso de que la tabla se desplaza, en pantallas donde no cabe entera. */
.tabla-envoltorio { position: relative; }

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 780px) {
    .barra { flex-wrap: wrap; gap: 10px; }
    /* Nueve secciones no caben en una fila de 390 px: sin esto el menu se salia
       de la pantalla y TODAS las paginas tenian scroll horizontal (QA visual,
       25/09/2026: 821-829 px de ancho en 15 de 16). Rejilla de 3x3, siempre
       visible: ni JavaScript ni un menu escondido que pueda fallar. */
    .navegacion {
        margin-left: 0; width: 100%;
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
    }
    .navegacion a { justify-content: center; padding: 8px 6px; min-height: 40px; }
    .acciones-barra { width: 100%; flex-wrap: wrap; }
    .filtros { flex-direction: column; align-items: stretch; }
    .campo-ancho input { min-width: 0; width: 100%; }
    .total { flex-basis: 100%; }
    .rejilla-dos { grid-template-columns: 1fr; }
    .ranking li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
    .ranking-barra { grid-column: 1 / -1; grid-row: 2; }
    .salto-pagina { margin-left: 0; margin-top: 10px; }
    /* La tabla no cabe: se avisa de que hay que desplazarla, en vez de dejar
       que parezca cortada. */
    .tabla-envoltorio::after {
        content: "Desliza la tabla para ver el resto de columnas →";
        display: block; padding: 8px 12px; font-size: 11px;
        color: var(--texto-suave); border-top: 1px solid var(--borde);
    }
}

/* ============================
   IMPRESION
   ============================ */
@media print {
    .barra, .filtros, .paginacion, .pie, .grupo-botones { display: none; }
    body { background: #fff; }
    .tabla-envoltorio { border: 0; }
}

/* ============================
   MARCA EN EL ACCESO
   ============================ */
.logo-login {
    display: block; width: 100%; max-width: 260px; height: auto;
    margin: 0 auto 18px;
    /* El logo viene con fondo blanco: sobre la caja oscura del tema oscuro
       quedaria un rectangulo. Se le da su propia pastilla clara, como al
       isotipo de la barra. */
    background: #fff; padding: 10px 12px; border-radius: 8px;
    box-sizing: border-box;
}
/* El nombre sigue en el HTML para lectores de pantalla y buscadores, aunque
   ya no se vea: el logo es una imagen, no un encabezado. */
.solo-lectores {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Filo rojo de la marca, para que el acceso no sea solo azul. */
.caja-login { border-top: 3px solid #DA261D; }

/* ============================
   VARIACION INTERANUAL
   ============================ */
/* Verde y rojo NO van solos: llevan flecha, porque un 8 % de los hombres no
   distingue esos dos colores y la cifra se leeria al reves. */
.sube { color: var(--ok); font-weight: 600; }
.sube::before { content: "▲ "; font-size: 10px; }
.baja { color: var(--error); font-weight: 600; }
.baja::before { content: "▼ "; font-size: 10px; }
.etiqueta-nuevo {
    font-size: 11px; padding: 2px 7px; border-radius: 10px;
    background: var(--superficie-2); color: var(--texto-suave);
}

/* ============================
   BANDA DE KPI
   ============================ */
.banda-kpi { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 16px 0; }
.kpi {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra);
}
.kpi-etiqueta { display: block; font-size: 11px; text-transform: uppercase;
                letter-spacing: .04em; color: var(--texto-suave); }
.kpi-valor    { display: block; font-size: 30px; line-height: 1.15; margin: 4px 0 2px; }
/* El numero grande no lleva flecha: ahi el signo ya lo dice todo y la flecha
   ensucia. El color se mantiene para que la banda se lea de un vistazo. */
.kpi-valor.sube::before, .kpi-valor.baja::before { content: none; }
.kpi-nota     { display: block; font-size: 12px; color: var(--texto-suave); }
/* La fila del ejercicio que se esta viendo, para no perderse en la tabla. */
.fila-activa  { background: var(--superficie-2); }
.fila-activa td:first-child { box-shadow: inset 3px 0 0 var(--marca); }

/* Formularios de una sola linea dentro de una celda de tabla. */
.linea-form { display: inline; margin: 0; }
.linea-form select { padding: 4px 6px; font: inherit; }
.boton-texto-oscuro {
    background: none; border: 0; padding: 0 2px; font: inherit; font-size: 11px;
    color: var(--marca); cursor: pointer; text-decoration: underline;
}

/* La tabla de "que puede hacer cada perfil" lleva frases largas: sin esto el
   texto se corta por la derecha y el parrafo de abajo se le monta encima. */
.tabla-perfiles td { white-space: normal; vertical-align: top; }
.tabla-perfiles td:first-child { white-space: nowrap; width: 1%; }
.tabla-envoltorio + .nota { margin-top: 12px; }