/**
 * mod_tacografo — estilos propios.
 * Se apoya en unified-legal-calculator.css, que aporta la base común del
 * ecosistema. Aquí solo va lo específico del analizador.
 */

.ci-tacografo {
    --tg-limg: #7f1d1d;
    --tg-img: #b91c1c;
    --tg-ig: #c2410c;
    --tg-il: #a16207;
    --tg-ok: #15803d;
    --tg-borde: #d8dee6;
    --tg-fondo-suave: #f6f8fa;

    /* Colores del timeline por tipo de actividad — los MISMOS valores que ya
       usa tg_color() en apdf-tacografo.php. Variables PROPIAS, no las de
       gravedad de arriba: aunque algún tono coincida por casualidad de
       paleta, son dos conceptos distintos y conviene que se puedan cambiar
       por separado. */
    --tg-act-conduccion: #b91c1c;
    --tg-act-trabajo: #c2410c;
    --tg-act-disponibilidad: #ca8a04;
    --tg-act-descanso: #15803d;
    --tg-act-desconocido: #9ca3af;
}

.ci-tacografo__cabecera {
    margin-bottom: 1.25rem;
    position: relative;
}

/* Icono de ayuda: alineado a la derecha de la cabecera. position:relative en
   .ci-tacografo__cabecera de arriba es lo que ancla este absolute. */
.ci-tacografo__btn-ayuda {
    position: absolute;
    top: .25rem;
    right: 0;
    display: inline-flex;
    align-items: center;
    border: 0;
    background: none;
    padding: .2rem .4rem;
    line-height: 1;
    color: #0d6efd;
}

.ci-tacografo__btn-ayuda:hover,
.ci-tacografo__btn-ayuda:focus {
    color: #0a58ca;
}

/* -------------------------------------------------- resumen en lenguaje llano */
/* Veredicto + desglose por tema — Analisis::resumenLlano() en PHP,
   pintarResumenLlano() aquí. Va antes que el resto del resultado: es lo
   primero que debe leer quien no conoce los códigos del anexo III. */

.ci-tacografo__resumen-llano {
    border: 1px solid var(--tg-borde);
    border-radius: .5rem;
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
}

.ci-tacografo__resumen-llano--ok {
    background: #f0f9f1;
    border-color: #bfe3c4;
}

.ci-tacografo__resumen-llano--con-infracciones {
    background: #fdf2eb;
    border-color: #f0cba8;
}

.ci-tacografo__resumen-llano-veredicto {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

.ci-tacografo__resumen-llano-temas {
    list-style: none;
    padding: 0;
    margin: .6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
}

.ci-tacografo__resumen-llano-temas li {
    font-size: .92rem;
}

/* Título y subtítulo del módulo: mismas clases de utilidad de Bootstrap 5 que
   ya usa el resto del ecosistema (card-title/fs-3/fs-6/text-secondary) —
   ver mod_calcindemni_2026 y familia en el espejo (C:\Claude\2026-06-23\).
   Sin reglas propias: son utilidades de Bootstrap, cargado por la plantilla
   del sitio, no por este módulo. */

/* ------------------------------------------------------------- pestañas */

.ci-tacografo__pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 2px solid var(--tg-borde);
    margin-bottom: 1rem;
}

.ci-tacografo__pestana {
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: .6rem 1rem;
    font-weight: 600;
    color: #55606e;
    cursor: pointer;
}

.ci-tacografo__pestana.is-activa {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
}

.ci-tacografo__panel {
    display: none;
}

.ci-tacografo__panel.is-activa {
    display: block;
}

.ci-tacografo__ayuda,
.ci-tacografo__nota {
    font-size: .85rem;
    color: #55606e;
    margin-top: .5rem;
}

/* Las notas son párrafos aparte: un `<small class="ci-tacografo__nota">` que
   sigue a un `<button>` suelto (Todo el historial, Ventana legal…) se pegaba
   a su misma línea porque `<small>` es inline (10.9.2026). */
.ci-tacografo__nota {
    display: block;
}

/* Dentro de la lista de vehículos la clase solo ATENÚA la fila que no es el
   conductor analizado: ahí sigue siendo un ítem de lista, con su viñeta. */
li.ci-tacografo__nota {
    display: list-item;
}

.ci-tacografo__ayuda code {
    background: var(--tg-fondo-suave);
    padding: .1rem .3rem;
    border-radius: 3px;
}

/* --------------------------------------------------------------- tabla */

/* La tabla de filas se desborda en móvil: scrolla dentro de su caja para que
   la página nunca scrolle en horizontal. */
.ci-tacografo__panel {
    overflow-x: auto;
}

.ci-tacografo__tabla {
    min-width: 40rem;
}

.ci-tacografo__tabla input[type="time"],
.ci-tacografo__tabla input[type="date"] {
    min-width: 8rem;
}

/* --------------------------------------------------------------- opciones */

.ci-tacografo__opciones {
    border: 1px solid var(--tg-borde);
    border-radius: 6px;
    padding: 1rem;
    margin: 1.25rem 0;
}

.ci-tacografo__opciones legend {
    font-size: 1rem;
    font-weight: 600;
    padding: 0 .5rem;
    width: auto;
}

/* <details> nativo (v1.41.0, generalizado a cualquier .ci-tacografo__opciones
   plegable en v1.41.2 — el glosario de códigos reutiliza el mismo aspecto):
   mismo aspecto que el <legend> de los demás fieldsets, con el marcador de
   expandir/plegar del propio navegador — sin JS, sin duplicar el patrón ya
   usado para listas largas (data-acordeon). */
.ci-tacografo__opciones summary {
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.ci-tacografo__opciones[open] summary {
    margin-bottom: 1rem;
}

.ci-tacografo__opcion {
    margin-bottom: 1rem;
}

.ci-tacografo__opcion--checks {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ci-tacografo__acciones {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Spinner del botón «Analizar» mientras dura la petición AJAX (v1.30.5). El
   botón ya quedaba deshabilitado y con el texto «Analizando…», pero un
   análisis de 15+ ficheros reales tarda varios segundos y ese cambio de
   texto, sombreado por el estado disabled, pasaba casi desapercibido — el
   usuario no tenía ninguna señal de que algo seguía en marcha. SVG en línea
   (nunca icon font, ver la lección de v1.22.0 sobre bootstrap-icons no
   cargado) girado con CSS puro, sin librería de animación. */
.ci-tacografo__girando {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .4rem;
    vertical-align: -0.125em;
    animation: ci-tacografo-girar .75s linear infinite;
}

@keyframes ci-tacografo-girar {
    to { transform: rotate(360deg); }
}

/* Ocultar SIEMPRE con clase, nunca con style.display: calc-responsive.js hace
   removeProperty('display') sobre los grupos del formulario al ajustar el
   layout, y lo ocultado con estilo en línea reaparece ~300 ms después. */
.ci-oculto {
    display: none !important;
}

/* ------------------------------------------------------------- resultado */

.ci-tacografo__resultado {
    margin-top: 1.5rem;
}

.ci-tacografo__periodo {
    margin-bottom: .75rem;
}

.ci-tacografo__utc {
    color: #55606e;
    font-size: .85rem;
}

.ci-tacografo__tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.ci-tacografo__tarjeta {
    background: var(--tg-fondo-suave);
    border: 1px solid var(--tg-borde);
    border-radius: 6px;
    padding: .75rem;
    text-align: center;
}

.ci-tacografo__tarjeta-valor {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
}

.ci-tacografo__tarjeta-etiqueta {
    display: block;
    font-size: .8rem;
    color: #55606e;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ci-tacografo__gravedades {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.25rem;
}

.ci-tacografo__pastilla {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
    background: #55606e;
}

.ci-tacografo__pastilla--limg { background: var(--tg-limg); }
.ci-tacografo__pastilla--img  { background: var(--tg-img); }
.ci-tacografo__pastilla--ig   { background: var(--tg-ig); }
.ci-tacografo__pastilla--il   { background: var(--tg-il); }
.ci-tacografo__pastilla.is-vacia { background: #adb5bd; }

.ci-tacografo__bloque {
    margin-bottom: 1.5rem;
}

.ci-tacografo__bloque h3 {
    font-size: 1.1rem;
    border-bottom: 1px solid var(--tg-borde);
    padding-bottom: .35rem;
    margin-bottom: .75rem;
}

/* Aviso de acotar período: listas de avisos/incidencias por encima del
   umbral, sin «ceñirse estrictamente» marcado (v1.29.1). */
.ci-tacografo__aviso-acotar {
    background: var(--tg-fondo-suave);
    border: 1px solid var(--tg-borde);
    border-left: 4px solid var(--tg-il);
    border-radius: 4px;
    padding: .6rem .9rem;
    font-size: .9rem;
    margin-bottom: .75rem;
}

/* Acordeones nativos para listas largas (v1.29.1): sin JS para
   plegar/desplegar cada uno, solo el control de «todos» necesita script. */
.ci-tacografo__colapsable > summary {
    cursor: pointer;
    font-weight: 600;
    padding: .35rem 0;
    list-style: revert;
}

.ci-tacografo__colapsable > summary:hover {
    color: #0d6efd;
}

.ci-tacografo__acordeon-controles {
    margin-bottom: 1rem;
}

.ci-tacografo__acordeon-controles button {
    font-size: .82rem;
    padding: .25rem .6rem;
}

/* Identificación del conductor: primer bloque del resultado, con relieve
   propio para que un uso pericial la vea sin buscarla. */
.ci-tacografo__identificacion {
    background: var(--tg-fondo-suave);
    border: 1px solid var(--tg-borde);
    border-radius: .35rem;
    padding: .75rem 1rem;
}

.ci-tacografo__identificacion h3 {
    border-bottom: none;
    margin-bottom: .35rem;
    padding-bottom: 0;
}

.ci-tacografo__identificacion p {
    margin: 0;
}

.ci-tacografo__identificacion p.ci-tacografo__control {
    color: #55606e;
    margin-top: .35rem;
}

.ci-tacografo__vacio {
    color: var(--tg-ok);
    font-weight: 600;
}

.ci-tacografo__hallazgo {
    border: 1px solid var(--tg-borde);
    border-left: 5px solid #adb5bd;
    border-radius: 4px;
    padding: .75rem 1rem;
    margin-bottom: .6rem;
    background: #fff;
}

.ci-tacografo__hallazgo--limg { border-left-color: var(--tg-limg); }
.ci-tacografo__hallazgo--img  { border-left-color: var(--tg-img); }
.ci-tacografo__hallazgo--ig   { border-left-color: var(--tg-ig); }
.ci-tacografo__hallazgo--il   { border-left-color: var(--tg-il); }

/* Blindaje contra la plantilla anfitriona.
   El módulo se sirve también empotrado en iframe de un sitio ajeno tras proxy
   inverso, donde no controlamos la hoja de estilos del anfitrión. Las etiquetas
   semánticas sueltas son las que más se decoran (en calcularindemnizacion.es,
   `header` lleva el azul marino de la barra de navegación), así que los bloques
   propios fijan su fondo y su color en lugar de heredarlos. */
.ci-tacografo__hallazgo-cab,
.ci-tacografo__bloque,
.ci-tacografo__resumen {
    background: transparent;
    color: inherit;
}

.ci-tacografo__hallazgo-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .4rem;
    padding: 0;
}

.ci-tacografo__codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    background: #1f2937;
    color: #fff;
    padding: .15rem .5rem;
    border-radius: 3px;
    font-size: .8rem;
}

/* Es la cita legal del hallazgo: hace de título y tiene que leerse como tal,
   no como texto secundario. */
.ci-tacografo__precepto {
    font-size: .85rem;
    font-weight: 600;
    color: #3b4453;
}

.ci-tacografo__descripcion {
    margin: 0 0 .35rem;
    font-weight: 500;
}

.ci-tacografo__momento,
.ci-tacografo__tipificacion {
    font-size: .85rem;
    color: #55606e;
    margin: 0 0 .25rem;
}

.ci-tacografo__prescripcion {
    font-size: .82rem;
    font-style: italic;
    color: #55606e;
    margin: .35rem 0 0;
}

.ci-tacografo__notas {
    font-size: .82rem;
    color: #55606e;
    margin: .35rem 0 0;
    padding-left: 1.1rem;
}

.ci-tacografo__errores ul,
.ci-tacografo__criterios ul {
    font-size: .88rem;
    padding-left: 1.1rem;
}

.ci-tacografo__errores h3 {
    color: var(--tg-img);
}

.ci-tacografo__pie {
    margin-top: 1.5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--tg-borde);
    font-size: .8rem;
    color: #55606e;
}

@media (max-width: 576px) {
    .ci-tacografo__acciones .btn { flex: 1 1 100%; }
}

/* ------------------------------------------------- mapeo de columnas (CSV) */

.ci-tacografo__mapeo {
    border: 1px solid var(--tg-borde);
    border-radius: 6px;
    padding: 1rem;
    margin-top: 1rem;
    background: var(--tg-fondo-suave);
}

.ci-tacografo__mapeo-titulo {
    font-size: 1rem;
    margin: 0 0 .35rem;
}

.ci-tacografo__mapeo-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
    margin: .75rem 0;
}

.ci-tacografo__mapeo-campo {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .85rem;
    font-weight: 600;
}

/* La muestra del fichero puede tener muchas columnas: scrolla en su caja para
   que la página nunca scrolle en horizontal. */
.ci-tacografo__mapeo-muestra {
    overflow-x: auto;
    max-height: 12rem;
    overflow-y: auto;
}

.ci-tacografo__mapeo-muestra table {
    font-size: .78rem;
    margin: 0;
    white-space: nowrap;
}

/* El input de fichero va oculto dentro de la etiqueta, que hace de botón. */
.ci-tacografo__abrir {
    cursor: pointer;
    margin: 0;
}

/* Rótulo de las clases que NO son infracción (cumplimiento, laguna, no
   verificable): color propio para que no se lean como una gravedad. */
.ci-tacografo__pastilla--nc {
    background: #475569;
}

.ci-tacografo__vehiculos {
    font-size: .88rem;
    margin: .5rem 0;
    padding-left: 1.1rem;
}

/* Firma que no cuadra: es una acusación de manipulación, tiene que verse.
   Color propio y no heredado, porque dentro del iframe empresarial la
   plantilla es de un tercero y puede teñir cualquier etiqueta. */
.ci-tacografo__firma-mal {
    background: #fdecea;
    border-left: 3px solid #b02a37;
    color: #842029;
    padding: .3rem .5rem;
}

/* ------------------------------------------------ discos diagrama (fase 6) */

/* Cada disco es una unidad visual cerrada: al transcribir a mano se salta de
   uno a otro y confundirlos mezcla dos días. Fondo propio y no heredado: dentro
   del iframe empresarial la plantilla es de un tercero. */
.ci-tacografo__disco {
    background: #fbfcfd;
    border: 1px solid #d7dde5;
    border-radius: .4rem;
    margin-bottom: 1rem;
    padding: .75rem;
}

.ci-tacografo__disco-cabecera {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.ci-tacografo__disco-titulo {
    color: #1f3050;
    font-size: .95rem;
    font-weight: 700;
}

.ci-tacografo__disco-campos {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    margin-bottom: .6rem;
}

.ci-tacografo__disco-campos label {
    display: flex;
    flex-direction: column;
    font-size: .8rem;
    gap: .15rem;
}

/* La tabla de tramos scrollea dentro de su caja; la página nunca en horizontal. */
.ci-tacografo__disco .ci-tacografo__tabla {
    display: block;
    overflow-x: auto;
}

/* Tipificación española del hecho. Va visualmente separada de la europea
   porque son dos calificaciones distintas del mismo hecho, y confundirlas
   en un dictamen es un error de fondo, no de estilo. */
.ci-tacografo__lott {
    background: #f6f8fa;
    border-left: 3px solid #55606e;
    font-size: .84rem;
    margin: .5rem 0 .35rem;
    padding: .4rem .6rem;
}

/* ------------------------------------------------------------- timeline */

.ci-tacografo__timeline {
    margin-bottom: 1.5rem;
}

.ci-tacografo__timeline-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.ci-tacografo__timeline-ir {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 600;
    margin: 0;
}

.ci-tacografo__timeline-ir input {
    width: auto;
}

.ci-tacografo__timeline-pastillas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.ci-tacografo__timeline-filas {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.ci-tacografo__timeline-fila {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .3rem .5rem;
    border-radius: 4px;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.ci-tacografo__timeline-fila:hover {
    background: var(--tg-fondo-suave);
}

.ci-tacografo__timeline-fila.is-activa {
    background: var(--tg-fondo-suave);
}

/* Solo los días con INFRACCIÓN llevan el filete rojo — no lagunas ni no
   verificables, que no son una imputación y no deben leerse como una. */
.ci-tacografo__timeline-fila.tiene-infraccion {
    border-left-color: var(--tg-img);
}

.ci-tacografo__timeline-fecha {
    flex: 0 0 5.5rem;
    font-size: .82rem;
    font-weight: 600;
}

.ci-tacografo__timeline-barra {
    position: relative;
    flex: 1 1 auto;
    height: 1.3rem;
    background: var(--tg-fondo-suave);
    border: 1px solid var(--tg-borde);
    border-radius: 3px;
    overflow: visible;
}

.ci-tacografo__timeline-tramo {
    position: absolute;
    top: 1px;
    bottom: 1px;
    border-radius: 1px;
}

/* Punto de infracción sobre la barra: un triángulo simple con CSS, sin
   ninguna imagen — mismo criterio que el «icono» del semáforo del PDF. */
.ci-tacografo__timeline-marca {
    position: absolute;
    top: -6px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--tg-img);
    transform: translateX(-50%);
}

/* Panel de detalle: a ANCHO COMPLETO debajo de la fila, nunca lateral — un
   panel realmente lateral obliga a columnas estrechas o a scroll horizontal
   en móvil, que este módulo evita siempre (ver tabla de filas). */
.ci-tacografo__timeline-panel {
    margin: .4rem 0 .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--tg-borde);
    border-radius: 6px;
    background: #fff;
}

.ci-tacografo__timeline-panel-barra {
    position: relative;
    height: 2.2rem;
    background: var(--tg-fondo-suave);
    border: 1px solid var(--tg-borde);
    border-radius: 4px;
    margin-bottom: .85rem;
}

.ci-tacografo__timeline-panel-barra .ci-tacografo__timeline-tramo {
    top: 1px;
    bottom: 1px;
    border-radius: 2px;
}

.ci-tacografo__timeline-panel-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

/* ------------------------------------------ velocidad (dato contextual) */

.ci-tacografo__sin-datos {
    font-size: .85rem;
    color: #55606e;
    font-style: italic;
    margin: 0 0 1rem;
}

.ci-tacografo__tarjeta-valor--alerta {
    color: var(--tg-img);
}

/* Ancho fijo del <canvas> (760px) dentro de una caja que scrolla en su
   propio eje horizontal: la página nunca scrolla en horizontal, ni siquiera
   en el móvil más estrecho de la convención del proyecto (375 px). */
.ci-tacografo__velocidad-grafico-caja {
    overflow-x: auto;
    margin-bottom: .75rem;
}

.ci-tacografo__velocidad-grafico {
    display: block;
    max-width: none;
    background: var(--tg-fondo-suave);
    border: 1px solid var(--tg-borde);
    border-radius: 6px;
    cursor: crosshair;
}

/* Tooltip del zoom pericial (18.8.2026): un único elemento reutilizado por
   todos los gráficos de velocidad de la página, posicionado junto al cursor.
   `pointer-events: none` para que nunca intercepte el propio arrastre del
   canvas que tiene debajo. */
.ci-tacografo__velocidad-tooltip {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    background: #1f2937;
    color: #fff;
    font-size: .75rem;
    line-height: 1.2;
    padding: .3rem .5rem;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.ci-tacografo__tabla-excesos {
    width: 100%;
    font-size: .82rem;
    margin-bottom: .75rem;
}

.ci-tacografo__tabla-excesos th,
.ci-tacografo__tabla-excesos td {
    padding: .3rem .5rem;
    text-align: center;
    border-bottom: 1px solid var(--tg-borde);
}

/* Consulta puntual de velocidad: segundo sin dato dentro del tramo pedido —
   nunca se rellena, se marca. */
.ci-tacografo__fila-sin-dato td {
    color: #adb5bd;
    font-style: italic;
}

.ci-tacografo__disclaimer-velocidad {
    font-size: .78rem;
    font-style: italic;
    color: #55606e;
    margin: 0 0 1rem;
}

/* Aviso de «Tipo de servicio» posiblemente equivocado, deducido del
   calibrado real del limitador (26.8.2026) — no itálico, para distinguirlo
   del disclaimer neutro de arriba: es un aviso a revisar, no una nota de
   método. Mismo tono ámbar que .ci-tacografo__aviso-acotar. */
.ci-tacografo__aviso-servicio {
    font-style: normal;
    color: var(--tg-il);
    background: var(--tg-fondo-suave);
    border-left: 4px solid var(--tg-il);
    border-radius: 4px;
    padding: .5rem .8rem;
}

/* Art. 140 LOTT candidato junto a una incidencia (18.8.2026) — mismo tono
   de aviso que el resto de notas, sin usar rojo/alerta: es orientativo,
   no una calificación afirmada por el motor. */
.ci-tacografo__posible-infraccion {
    display: inline-block;
    margin-top: .2rem;
    font-size: .78rem;
    font-style: italic;
    color: #6a4a00;
}

@media (max-width: 576px) {
    .ci-tacografo__timeline-fila {
        flex-wrap: wrap;
    }

    .ci-tacografo__timeline-fecha {
        flex-basis: 100%;
    }

    .ci-tacografo__timeline-barra {
        flex-basis: 100%;
    }
}

.ci-tacografo__horquilla {
    color: #55606e;
    display: inline-block;
    margin-top: .2rem;
}