/*
 * Tema corporativo Synersight (rollout visual, ver plan de implementacion).
 * Se carga DESPUES de main.css/sweetalert2.min.css en templates/header.php, asi
 * puede sobrescribir por cascada sin tocar las 3000 lineas de main.css.
 *
 * Design tokens: cambiar la marca (color, acento...) = editar las variables de
 * abajo, no buscar el valor por todo el CSS.
 */
:root {
	--c-primary: #002664;
	--c-primary-700: #013a99;
	--c-accent: #f6b600;
	--c-ink: #1b2238;
	--c-muted: #69718a;
	--c-line: #e3e6ee;
	--c-ok: #2e7d32;
	--c-danger: #b3261e;
	--c-cal-cab: #888;
	--c-cal-semana: grey;
}

/* Fase 4: colores de ESTADO real (validado/pendiente/rechazado/festivo/fin de semana),
   antes palabras de color CSS genericas (green/orange/red/purple) sueltas en tablas y
   calendarios de fichajes/vacaciones/coches. "Pendiente" reutiliza --c-accent con texto
   OSCURO (--c-primary), no blanco: amarillo+blanco es dificil de leer (ya establecido en
   el resto del tema). "Fin de semana" reutiliza --c-muted (gris azulado, no es "bueno" ni
   "malo", solo un dia sin actividad). No confundir con las clases .btn-accion.rojo/.verde
   (esas son para botones, con su propia paleta de hover). */
.estado-ok { background-color: var(--c-ok); color: #fff; }
.estado-pendiente { background-color: var(--c-accent); color: var(--c-primary); }
.estado-danger { background-color: var(--c-danger); color: #fff; }
.estado-neutro { background-color: var(--c-muted); color: #fff; }
/* Variantes de solo texto (sin fondo), para avisos/columnas SI-NO que hoy usan
   "color:red" suelto en vez de fondo de celda completo. */
.estado-texto-ok { color: var(--c-ok); }
.estado-texto-danger { color: var(--c-danger); }
/* Dia con horas pendientes Y validadas a la vez (calendarios de vacaciones): degradado
   diagonal verde/ambar. Sustituye un bloque de ~6 lineas con prefijos de vendor de 2013
   (rgba crudo, sin relacion con los tokens) duplicado en verVacas.php y vacaciones.php;
   los navegadores actuales no necesitan los prefijos -moz-/-webkit-/-o-/-ms-. */
.estado-pendiente-validado {
	background: linear-gradient(45deg, var(--c-ok) 0%, var(--c-accent) 24%, var(--c-ok) 50%, var(--c-accent) 77%, var(--c-ok) 100%);
	color: #fff;
}
/* Leyenda de colores del calendario (vacaciones.php/verVacas.php/export.php): antes
   un <div> por caja con ancho en % + float (pensado para repartir 3-5 cajas de
   50x50px a lo ancho de la pagina) y el texto heredando el tamaño de fuente base
   sin mas -> con Montserrat se veia sobredimensionado (caja enorme + texto enorme
   al lado). Flex en vez de floats+porcentaje (no hay que recalcular el ancho segun
   el numero de cajas) y swatch/texto a un tamaño fijo, mas pequeño. */
.leyenda { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 14px 0; }
.leyenda-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-ink); }
.leyenda-swatch { width: 18px; height: 18px; flex: none; border-radius: 3px; }

/* Tipografia corporativa: Montserrat, auto-alojada (un unico .woff2 VARIABLE, subset
   latin, cubre pesos 100-900 -> no hacen falta ficheros sueltos por peso) en vez de
   Google Fonts por CDN, para no depender de una peticion externa en cada carga.
   "body, input, textarea, select, button", "h1..h6"/"a"/"strong,b" y "form label"
   en main.css son selectores de ELEMENTO simple (0-0-1, o 0-0-2 "form label" por
   ser dos elementos) sin atributos ni ID de por medio -> a diferencia del bug de
   ".btn-accion" de mas abajo, aqui SI basta con declarar el MISMO selector: al
   empatar en especificidad, gana tema.css por cargarse despues. "form label" hacia
   falta aparte de "strong/b": main.css la fija en su propia regla (0-0-2), mas
   especifica que un "label" suelto (0-0-1) hubiera sido. Colores: --c-ink (azul
   muy oscuro, casi negro) para el texto normal/tablas -mejor para lectura larga
   que un azul saturado en bloques largos-, --c-primary reservado para titulos,
   enlaces, enfasis (strong/b) y las etiquetas de formulario (label, que en esta
   app suelen hacer de "titulo" de una tabla/select justo debajo). Los colores mas
   especificos de header/nav/dropotron/footer (ID o clase) no se ven afectados. */
@font-face {
	font-family: 'Montserrat';
	src: url('/assets/fonts/montserrat/montserrat-latin-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
body, input, textarea, select, button {
	font-family: 'Montserrat', 'Source Sans Pro', sans-serif;
	color: var(--c-ink);
	/* main.css trae "font-size:14pt" (~18.7px), pensado para el hero/tema original;
	   con Montserrat (letras mas anchas/altas que Source Sans Pro a igual tamaño)
	   se notaba sobredimensionado en una app de gestion densa. No hace falta tocar
	   el "line-height:1.75em" de main.css: al ser relativo (em), se recalcula solo
	   sobre el nuevo tamaño y mantiene la misma proporcion. */
	font-size: 15px;
}
h1, h2, h3, h4, h5, h6, strong, b, form label {
	color: var(--c-primary);
}
a {
	color: var(--c-primary);
}
a:hover {
	color: var(--c-primary-700);
}

/* main.css estiliza "form input[type=text|email|password], form select, form textarea"
   (fondo gris claro, sin borde, esquinas redondeadas, padding) pero NUNCA
   "input[type=number]" -> todos los precios/cantidades de la app (setUsers/modUsers2
   "Precio hora extra...", rrhh/convenio.php "€/h...", coches/visorEstadoCoches.php Km...)
   caian al estilo nativo del navegador (cuadrado, sin padding, con flechitas). Mismo
   selector+propiedades que main.css usa para text/email/password, solo que aqui basta
   con "form input[type=number]" a secas (0-1-1 elemento+atributo) porque no compite con
   nada mas especifico -no hace falta el truco de clase doblada de ".btn-accion". */
form input[type="number"],
form input[type="tel"] {
	-webkit-appearance: none;
	display: block;
	border: 0;
	background: #eee;
	box-shadow: inset 0px 0px 1px 0px #a0a1a7;
	border-radius: 0.35em;
	width: 100%;
	padding: 0.75em 1em 0.75em 1em;
	line-height: 1em;
}
form input[type="number"]:focus,
form input[type="tel"]:focus {
	background: #f8f8f8;
}

/* Selects/inputs al 25% de fichajes/setFichajes.php (dieta, guardia, horas de
   entrada/salida, KMs, tiempo de comida...): en movil ese 25% se queda muy
   estrecho para tocar con el dedo (aunque el texto ya no se corta, ver el ancho
   al 20% de la Fase de legibilidad). Sube a 42% SOLO en movil; en escritorio seria
   demasiado ancho y descuadraria la alineacion en linea del formulario. Antes era
   un "width:25%" repetido inline en cada control -no se podia sobrescribir con un
   @media sin convertirlo primero en clase.
   Clase DOBLADA (".input-25.input-25", especificidad 0-2-0): los controles
   type="number" de este grupo (tComida, nKm, hConexGuardia) compiten con
   "form input[type=number]" de arriba (0-1-2, elemento+atributo), que le ganaria a
   una clase sola -mismo bug de especificidad ya visto en ".btn-accion" (ver
   TEMA.md/memoria de la Fase 3): sin doblar, esos 3 inputs se quedaban al 100%. */
.input-25.input-25 { width: 25%; }
@media screen and (max-width: 980px) {
	.input-25.input-25 { width: 42%; }
}

/* Tabla de datos reutilizable: sustituye el "#tabla th, td {border...}" duplicado
   en ~25 ficheros. El original tenia un bug de scoping (el selector "td" sin
   "#tabla" por delante aplicaba a CUALQUIER celda de la pagina, no solo la de la
   tabla) que desaparece al usar una clase. No se toca el color de CABECERA aqui
   (cada fichero lo fija con .tabla-cab-oscura -Fase 4-bis- o inline): un
   ".tabla-datos th{background:...}" generico le ganaria a ".tabla-cab-oscura" por
   especificidad (elemento+clase > clase sola) y pintaria mal las cabeceras ya
   migradas. Rediseño "tarjeta" (bordes negros -> divisores suaves, esquinas
   redondeadas, sombra, sin rejilla vertical): border-collapse pasa a "separate"
   porque un <table> con "collapse" no deja clipar las esquinas con
   "overflow:hidden" en la mayoria de navegadores. */
.tabla-datos {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 38, 100, .1);
}
.tabla-datos th,
.tabla-datos td {
	border: none;
	border-bottom: 1px solid var(--c-line);
	text-align: center;
	padding: 10px 14px;
}
.tabla-datos tr:last-child > td,
.tabla-datos tr:last-child > th {
	border-bottom: 0;
}
/* Zebra + hover a nivel de FILA: no chocan con cabeceras/estados ya coloreados
   porque en una tabla el fondo de la celda (.tabla-cab-oscura, .estado-x, inline)
   se pinta POR ENCIMA del fondo de su <tr> y lo tapa por completo -no es una
   cuestion de especificidad CSS, es el orden de pintado de fondos de tabla-;
   solo se ve en celdas "normales" sin color propio. ESTO NO VALE cuando el
   ".estado-*" esta puesto en el propio <tr> (coches/listadoCoches.php,
   fichajes/export.php): ahi compiten por la MISMA propiedad del MISMO elemento, y
   ".tabla-datos tbody tr:hover" (2 clases) le gana en especificidad a ".estado-ok"
   suelto (1 clase) -> al pasar el raton la fila perdia su color de estado y se
   quedaba gris-azulada, con un aspecto "a medias" si ademas alguna celda suya SI
   tenia su propio ".estado-*" (esas si se veian bien, tapando el hover). Las reglas
   de abajo reafirman el color de estado en :hover cuando esta en el <tr>. */
/* Zebra sutil (tono original: con la regla por fin viva -ver aviso del "*" y "/" en
   TEMA.md SS6- el gris franco de la 2a bateria resulto demasiado; el usuario pidio
   volver a la idea inicial). */
.tabla-datos tbody tr:nth-child(even) {
	background: #f5f7fb;
}
.tabla-datos tbody tr:hover {
	background: #eef1f8;
}
/* Filas con ESTADO en el propio <tr> (coches/listadoCoches.php, fichajes/export.php):
   el zebra de arriba (0-2-2) le gana a ".estado-*" suelto (0-1-0) en el MISMO elemento
   -> con el zebra ya vivo, las filas pares perdian su verde/rojo tambien SIN hover.
   Se reafirma el color de estado con la misma especificidad que el zebra + orden. */
.tabla-datos tbody tr.estado-ok { background: var(--c-ok); }
.tabla-datos tbody tr.estado-pendiente { background: var(--c-accent); }
.tabla-datos tbody tr.estado-danger { background: var(--c-danger); }
.tabla-datos tbody tr.estado-neutro { background: var(--c-muted); }
/* PLAN-RETOQUES.md Fase 4: reafirmar el color de estado en :hover (arriba) ya evitaba
   el gris generico, pero no daba ningun feedback visual al pasar el raton; se aclara
   un poco el mismo color en vez de dejarlo identico. */
.tabla-datos tbody tr.estado-ok:hover { background: var(--c-ok); filter: brightness(1.12); }
.tabla-datos tbody tr.estado-pendiente:hover { background: var(--c-accent); filter: brightness(1.12); }
.tabla-datos tbody tr.estado-danger:hover { background: var(--c-danger); filter: brightness(1.12); }
.tabla-datos tbody tr.estado-neutro:hover { background: var(--c-muted); filter: brightness(1.12); }
/* PLAN-RETOQUES.md Fase 10: portada (index.php) — la imagen de la gama en una tarjeta
   comedida (mismos radio/sombra que .tabla-datos), en vez de width/height 100% a pelo.
   Base ya modernizada sobre la que montara la Fase 12 (panel personalizable). */
.portada-card {
	max-width: 980px;
	margin: 14px 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 38, 100, .1);
}
.portada-card img { display: block; width: 100%; height: auto; }

/* PLAN-RETOQUES.md Fase 8.1 + 2a bateria punto A: filas de subtotal/total de la tabla de
   importes del SMP (fichajes/export.php), antes rgb(100,100,100)/rgb(33,33,33) inline. El
   primer intento (--c-muted/--c-ink) era casi identico a esos grises y no se percibia el
   cambio: ahora subtotal = tono CLARO de la paleta (fondo --c-line, texto tinta, bold) y
   total = navy de marca, claramente distintos entre si y del original. Con el prefijo
   .tabla-datos tbody para empatar (y ganar por orden) al zebra tr:nth-child(even) y al
   tr:hover genericos de arriba — mismo patron que las filas .estado-*. */
.tabla-datos tbody tr.fila-subtotal { background: var(--c-line); color: var(--c-ink); font-weight: bold; }
.tabla-datos tbody tr.fila-total { background: var(--c-primary); color: #fff; font-weight: bold; }
.tabla-datos tbody tr.fila-subtotal:hover { background: var(--c-line); filter: brightness(.96); }
.tabla-datos tbody tr.fila-total:hover { background: var(--c-primary); filter: brightness(1.12); }

/* Fase 4-bis + PLAN-RETOQUES.md Fase 5: cabecera oscura de tabla, antes
   "background-color:#222f6b" hardcodeado inline en ~12 ficheros y luego token propio
   --c-tabla-cab. Modernizada al navy de marca (--c-primary), como el resto del tema. */
.tabla-cab-oscura { background-color: var(--c-primary); color: #fff; }
/* .tabla-fila-alt (teal #008ba1 por celda, alternancia manual de filas): NEUTRALIZADA
   a proposito (PLAN-RETOQUES.md Fase 5). Las 8 tablas que la usan llevan TODAS tambien
   .tabla-datos, cuyo zebra automatico (tbody tr:nth-child(even), arriba) ya alterna las
   filas; como los dos mecanismos van desfasados (la cabecera cuenta como fila 1 para
   nth-child pero no para el contador manual del PHP), darle aqui el mismo gris que el
   zebra pintaria TODAS las filas de datos y aplanaria la alternancia. La clase se queda
   en el markup (las paginas no se tocan) pero ya no pinta nada: manda el zebra, y de
   paso el hover de fila funciona uniforme (antes el teal por celda lo tapaba). */


/* Insertar fichaje (fichajes/setFichajes2.php): tarjeta de resumen del dia + lista
   plegable de proyectos/tareas. Sustituye las <label> sueltas con estilo inline (bordes
   negros, fondo navy fijo aunque estuviera cerrado) por un patron "acordeon": tarjeta
   blanca cerrada, cabecera navy solo mientras esta abierta, tareas como filas indentadas
   con acento lateral (mismo --c-accent que el resto del tema usa como detalle puntual). */
.fichaje-resumen {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	background: var(--c-primary);
	color: #fff;
	border-radius: 10px;
	border-bottom: 3px solid var(--c-accent);
	padding: 16px 22px;
	margin-bottom: 18px;
	box-shadow: 0 2px 10px rgba(0, 38, 100, .15);
}
.fichaje-resumen-item { display: flex; align-items: center; gap: 12px; }
.fichaje-resumen-item i { font-size: 20px; color: var(--c-accent); width: 1.2em; text-align: center; }
.fichaje-resumen-item > div { display: flex; flex-direction: column; }
.fichaje-resumen-label { font-size: 12px; color: var(--c-accent); text-transform: uppercase; letter-spacing: .03em; }
.fichaje-resumen-valor { font-weight: 700; color: #fff; }

/* Cada <label class="fichaje-proyecto"|"fichaje-tarea"> es el disparador (onclick
   "cambiar()"/"cambiar2()", JS sin tocar salvo añadir el toggle de esta clase) del
   <div id="bloque..."> que le sigue justo debajo en el markup. */
.fichaje-proyecto {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #fff;
	color: var(--c-primary);
	border: 1px solid var(--c-line);
	border-radius: 8px;
	padding: 12px 16px;
	margin: 8px 0;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 38, 100, .06);
}
.fichaje-proyecto:hover { border-color: var(--c-primary); }
.fichaje-proyecto.abierto {
	background: var(--c-primary);
	color: #fff;
	border-color: var(--c-primary);
}
.fichaje-chevron { transition: transform .2s ease, color .2s ease; font-size: 13px; opacity: .7; }
.fichaje-proyecto.abierto .fichaje-chevron,
.fichaje-tarea.abierto .fichaje-chevron { transform: rotate(180deg); color: var(--c-accent); opacity: 1; }

.fichaje-panel { padding: 14px 16px 4px; }
.fichaje-tareas { padding: 4px 0 4px 18px; }

.fichaje-tarea {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #eef1f8;
	color: var(--c-primary);
	border-left: 4px solid var(--c-accent);
	border-radius: 4px;
	padding: 10px 14px;
	margin: 6px 0;
	font-weight: 500;
	cursor: pointer;
}
.fichaje-tarea:hover { background: #e3e8f5; }
.fichaje-tarea.abierto { background: #dfe6f5; }

/* Clase doblada (0-2-0): "form input[type=number]" de arriba es elemento+atributo+elemento
   (0-1-2) y le ganaria a esta clase suelta en la columna de clases si no se dobla (mismo
   gotcha de especificidad que .btn-accion/.input-25, ver TEMA.md SS6). */
.fichaje-horas-input.fichaje-horas-input { text-align: center; display: inline-block; width: 6em; }
/* Fase 5: calendario de vacaciones.php/verVacas.php/export.php (fichajes). Las 3
   paginas metian este MISMO <style> (con el titulo en "#002664" hardcodeado en vez
   de --c-primary) dentro de su $headExtra -> triplicado byte a byte. Se centraliza
   aqui (tema.css se carga siempre via header.php) y se retira de las 3 paginas.
   Las reglas de "td[onclick]" solo las usa vacaciones.php (dias clicables para
   pedir vacaciones); en verVacas.php/export.php simplemente no hay ningun <td
   onclick> y no se aplican. La celda de numero de semana (antes
   "style=background-color:grey;color:white" repetido 8 veces entre las 3) pasa a
   .cal-semana. Dos tokens propios (--c-cal-cab/--c-cal-semana) porque, aunque
   visualmente parecidos, son grises DISTINTOS (#888 vs grey/#808080) y no se
   unifican para no cambiar el color exacto ya validado en produccion. */
.cal-cont { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 12px; align-items: start; }
@media (max-width: 980px) { .cal-cont { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cal-cont { grid-template-columns: 1fr; } }
/* border-collapse:separate (antes "collapse"): un <table> en modo collapse no deja
   clipar las esquinas con overflow:hidden en la mayoria de navegadores (mismo motivo
   que .tabla-datos, Fase 6). border-spacing:0 evita que "separate" abra huecos entre
   celdas; verificado con arnes que el grosor de los bordes internos no cambia
   perceptiblemente (a diferencia de .tabla-datos, aqui SI se conservan los bordes
   verticales: es una rejilla de dias, no filas de datos). */
.cal-mes {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 38, 100, .12);
}
.cal-mes td { border: 1px solid #ccc; height: 28px; text-align: center; font-size: 12px; }
.cal-mes .cal-titulo { background: var(--c-primary); color: #fff; font-weight: bold; }
.cal-mes .cal-cab td { background: var(--c-cal-cab); color: #fff; }
/* td[data-detalle]: dias con desglose clicable en verVacas.php (PLAN-RETOQUES Fase 8.3,
   abren un Swal via listener JS, no onclick inline) — mismo cursor/hover que los
   clicables de vacaciones.php. */
.cal-mes td[onclick], .cal-mes td[data-detalle] { cursor: pointer; }
.cal-mes td[onclick]:hover, .cal-mes td[data-detalle]:hover { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.cal-semana { background-color: var(--c-cal-semana); color: #fff; }
/* Dia elegido para una NUEVA solicitud de vacaciones (vacaciones.php, antes de enviar
   el formulario): antes "blue"/"white" sueltos en JS (elemento.style.backgroundColor),
   ni de la paleta de la app. --c-primary (en vez de un neutro): es el color de marca
   para "eleccion/accion activa" y no choca con los estados ya existentes de este mismo
   calendario (verde=validado, ambar=pendiente, rojo=festivo, gris=fin de semana). */
.cal-mes td.selected { background: var(--c-primary); color: #fff; }
.cal-mes td.non-selected { background: #fff; color: var(--c-muted); }

/* --- Movido tal cual desde templates/header.php (mismo CSS, solo cambia donde vive) --- */

/* sweetalert2.min.css fija ".swal2-title{color:#595959}" (gris de la libreria):
   esa regla es una CLASE (0-1-0), mas especifica que el "h1,h2,...{color:var(--c-primary)}"
   generico de tipografia de arriba (0-0-1 por elemento), asi que gana ella y el
   titulo del popup se queda en gris en vez del azul corporativo. Se sobrescribe aqui. */
.swal2-popup .swal2-title { color: var(--c-primary); }
/* Mismo motivo que el titulo: sweetalert2.min.css fija ".swal2-content{color:#545454}"
   (el texto del mensaje/aviso, no solo el titulo) en un gris de libreria ajeno a la
   tipografia del resto de la app (--c-ink). Sin esta regla, el titulo ya sale en azul
   pero el cuerpo del texto ("¿Seguro que...?", avisos de exito/error) se sigue viendo
   gris, que es justo lo que se seguia notando tras el fix del titulo. */
.swal2-popup .swal2-content { color: var(--c-ink); }
/* sweetalert2.min.css fija el icono "warning" (confirmarSwal/confirmarEnvio, TODAS las
   confirmaciones de la app) en un naranja palido generico de la libreria
   (".swal2-icon.swal2-warning{border-color:#facea8;color:#f8bb86}"), que desentona con
   el azul intenso del titulo/boton de confirmar. --c-accent es del mismo family
   naranja/amarillo (mantiene la semantica universal de "aviso") pero ya es el color que
   esta app usa para ese mismo significado (".estado-pendiente"), asi que el icono queda
   coherente con la marca en vez de con el naranja por defecto de la libreria. */
.swal2-popup .swal2-icon.swal2-warning { border-color: var(--c-accent); color: var(--c-accent); }
/* Los botones del Swal son <button> y heredarian los estilos de boton del sitio
   (height/line-height 4em, fondo #444, mayusculas), que los descentran y los dejan
   en gris. Se normalizan y se colorea el de confirmar con el corporativo. */
.swal2-popup .swal2-styled {
	height: auto;
	line-height: normal;
	min-width: 0;
	padding: 0.625em 1.5em;
	letter-spacing: normal;
	text-transform: none;
}
/* Mismo ancho minimo en confirmar y cancelar para que los botones salgan iguales
   aunque su texto difiera (Si/Cancelar, Rechazar/Cancelar...). */
.swal2-popup .swal2-styled.swal2-confirm,
.swal2-popup .swal2-styled.swal2-cancel { min-width: 7em; }
.swal2-popup .swal2-styled.swal2-confirm { background-color: #002664; color: #fff; }
.swal2-popup .swal2-styled.swal2-confirm:hover { background-color: #013a99; }
.swal2-popup .swal2-styled.swal2-cancel { background-color: #6e7881; color: #fff; }
.swal2-popup .swal2-styled.swal2-cancel:hover { background-color: #5a636b; }
/* Boton-icono: un <button> que se ve como un simple icono (sin el chrome del boton del
   tema: fondo #444, mayusculas, 4em de alto...), para acciones en linea como la papelera
   de borrado. La especificidad de la clase gana al selector de elemento "button". */
.btn-icono {
	background: none; border: 0; padding: 0; margin: 0;
	min-width: 0; width: auto; height: auto; line-height: 1;
	letter-spacing: normal; text-transform: none; box-shadow: none;
	display: inline-block; vertical-align: middle; cursor: pointer;
	color: #002664; font-size: 18px;
}
/* amarillo de acento; sin fondo/sombra (el tema mete background-color en button:hover). */
.btn-icono:hover { color: #f6b600; background: none; box-shadow: none; }
/* Variante destructiva (papeleras de borrado): hover en rojo, mismo tono que .btn-accion.rojo. */
.btn-icono.rojo:hover { color: #b3261e; }
/* Boton de accion compacto (link o <button>), sin el chrome del boton del tema
   (que es full-width en movil). Variante .rojo para acciones destructivas.
   Selector duplicado (".btn-accion.btn-accion") a proposito: en main.css
   "input[type=submit]" es elemento+atributo (especificidad 0-1-1), que gana a
   una clase sola (0-1-0) aunque tema.css se cargue despues -> sin la clase
   repetida (0-2-0) el boton normal (no .rojo/.verde) se queda con el look
   antiguo (gris, mayusculas, boton grande) pese a llevar la clase puesta. */
.btn-accion.btn-accion {
	display: inline-block; width: auto; min-width: 0; height: auto;
	padding: 12px 24px; border: 0; border-radius: 4px;
	background: var(--c-primary); color: #fff; text-decoration: none; cursor: pointer;
	font-size: 16px; line-height: 1; letter-spacing: normal;
	text-transform: none; box-shadow: none; vertical-align: middle;
}
.btn-accion.btn-accion:hover { color: #fff; background: var(--c-primary-700); }
.btn-accion.rojo { background: var(--c-danger); }
.btn-accion.rojo:hover { background: #9a1f18; }
.btn-accion.verde { background: var(--c-ok); }
.btn-accion.verde:hover { background: #256528; }
/* Tablas anchas (export, verRechazados, listados...) en movil: que desborden con
   scroll horizontal DENTRO de #content, en vez de empujar el ancho del body (que
   dejaba ver el fondo oscuro de #main al hacer scroll lateral de toda la pagina). */
#content { max-width: 100%; overflow-x: auto; }

/* --- Fase 1: cabecera corporativa ---
   El header original es un "hero" de 24em con foto de fondo (banner.jpg + overlay
   oscuro) y el logo/menu centrados encima. Se sustituye por una barra azul compacta
   con el logo real a la izquierda y el menu a la derecha; el submenu desplegable
   (dropotron, JS sin tocar) no se toca, solo el color/tamaño de los items de 1er nivel. */
#header {
	height: auto;
	background: var(--c-primary);
	padding: 14px 22px;
	justify-content: flex-start;
	/* Fija arriba al hacer scroll (escritorio Y movil): el menu queda siempre
	   disponible, y de paso el toggle de #titleBar (fixed, fondo transparente)
	   siempre tiene el azul de la barra detras en vez de quedar contra el fondo
	   blanco de la pagina segun el scroll. */
	position: sticky;
	top: 0;
	z-index: 500;
}
#header:before { content: none; }

#logo {
	width: auto;
	text-align: left;
	position: static;
	top: 0;
	display: flex;
	align-items: center;
	gap: 14px;
}
/* El h1 ahora solo envuelve la imagen del logo (ver templates/header.php); se le
   quita el tamaño/mayusculas de texto que traia por ser el "titulo" del tema. */
#logo h1 {
	font-size: 0;
	letter-spacing: normal;
	text-transform: none;
}
#logo h1 img { display: block; height: 30px; width: auto; }
#logo p {
	color: rgba(255, 255, 255, .75);
	text-transform: none;
	letter-spacing: normal;
	font-size: 13px;
	margin: 0;
	padding-left: 14px;
	border-left: 1px solid rgba(255, 255, 255, .25);
}

/* Menu de primer nivel: de "pildora" centrada y flotante a fila integrada en la
   barra, empujada a la derecha (el logo se queda a la izquierda). */
#nav {
	position: static;
	width: auto;
	margin-left: auto;
	text-align: left;
	/* OJO: no tocar "display" aqui (el original vale "block") porque a <=980px
	   main.css pone #nav{display:none} para dejar paso al menu movil (#navPanel);
	   una regla nuestra sin @media pisaria ese display:none por venir despues en
	   la cascada, y el menu de escritorio se veria tambien en movil. */
}
/* Solo >980px (ver aviso de arriba): #nav pasa a flex de UNA fila (nowrap) con dos
   columnas -- menu principal (se encoge) y Perfil (tamano fijo, min-width:0 en el menu
   para que SI pueda encogerse por debajo de su ancho natural) -- en vez de que las dos
   listas fluyan como texto. Antes, si el menu principal no cabia en una fila y sus <li>
   se envolvian (pantallas ~980-1250px, el hueco entre el punto de corte a movil y el
   ancho de escritorio comodo), el bloque de Perfil se quedaba sin sitio en esa "linea de
   texto" y cambiaba de posicion: unas veces caia suelto a la izquierda en su propia
   linea, otras quedaba centrado bajo el menu. flex-wrap:nowrap en el CONTENEDOR reserva
   SIEMPRE el hueco de Perfil a la derecha (nunca se desplaza ni cambia de fila): el que
   se encoge y envuelve sus propios <li> en mas lineas si hace falta es el menu
   principal, dentro del espacio que le queda. align-items:center centra Perfil respecto
   a la altura TOTAL de la franja del nav (la marca el menu, que es quien crece cuando
   envuelve a varias lineas) en vez de fijarlo arriba del todo; al ser el menu el
   elemento mas alto de la fila, centrarlo a el mismo no le mueve nada (ya ocupa toda la
   altura disponible). Probado hasta el propio punto de corte a movil (981px): el menu
   baja a 3 lineas cortas pero sigue legible, sin que haga falta adelantar el punto de
   corte a movil. */
@media screen and (min-width: 981px) {
	#nav {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}
	#nav > ul:not(.nav-perfil-menu) {
		flex: 1 1 auto;
		min-width: 0;
	}
	#nav > ul.nav-perfil-menu {
		flex: 0 0 auto;
	}
}
#nav > ul {
	/* Sin este reset, el margen inferior por defecto del <ul> se sumaba a la altura
	   real de #nav (y por tanto a la de #header), dejando la barra mas alta de lo
	   que sus items necesitan. Se aplica a las DOS listas (menu principal + perfil,
	   ver mas abajo). */
	margin: 0;
	box-shadow: none;
}
/* Sombreado translucido SOLO del menu principal, como en el tema original. La
   lista de Perfil (.nav-perfil-menu) no lo lleva: flota aparte, sin caja compartida. */
#nav > ul:not(.nav-perfil-menu) {
	background: rgba(255, 255, 255, .08);
	border-radius: 6px;
}
/* Perfil vive en su PROPIA lista, hermana de la principal (ambas hijas directas de
   #nav): dropotron ya la detecta sola (selecciona "$('#nav > ul')", que devuelve las
   DOS), sin tocar main.js. Flota separada del menu principal con un margen, sin
   divisor ni fondo compartido. */
#nav > ul.nav-perfil-menu {
	/* Selector con la MISMA "fuerza" (ID + elemento) que "#nav > ul { margin:0 }" de
	   arriba + la clase: si no, ese margin:0 (mas especifico que una clase sola) le
	   ganaba a este margin-left y el hueco no se aplicaba. Con #nav en flex nowrap
	   (>980px, ver arriba) Perfil ya tiene su propia columna reservada; este margen es
	   solo el hueco fijo respecto al menu, igual que en el layout original. */
	margin-left: 18px;
}
#nav > ul > li > a, #nav > ul > li > span {
	height: auto;
	line-height: normal;
	padding: 18px 0;
	/* El original trae "transition: all .25s" (pensado solo para el fundido de color
	   al hover), pero "all" tambien anima el layout: al reducir la ventana cerca del
	   punto de ruptura movil, el reflow del ancho/alto de estos items se ve como si
	   el menu "se cerrara" antes de ocultarse. Se acota a la propiedad que de verdad
	   se anima. */
	transition: color .25s ease-in-out;
}
#nav > ul > li.current > a {
	text-decoration: none;
	font-weight: 600;
	border-bottom: 3px solid var(--c-accent);
}
/* Los items de 1er nivel (barra azul) NO llevan indicador extra: ya se sobreentiende
   que despliegan algo. El indicador es para las opciones QUE ESTAN DENTRO de un
   desplegable y a su vez abren OTRO desplegable (p.ej. "Coches..." dentro de
   "Gestion Fichajes...", o "Usuarios..." dentro de "Administrar..."): a simple
   vista, dentro de la tarjeta blanca, se confunden con un enlace normal. Icono de
   Font Awesome (ya cargado en toda la app) en vez de un caracter suelto: mismo
   lenguaje visual que el resto de iconos del sitio. Mismo convenio href="#". */
.dropotron a[href="#"]:after {
	content: '\f054';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 9px;
	opacity: .4;
	float: right;
	margin-left: 12px;
}

@media screen and (max-width: 980px) {
	/* #nav se oculta (regla original) y entra el boton hamburguesa de #titleBar, fijo
	   en la esquina superior izquierda (0-60px): sin este hueco se solaparia con el logo. */
	#header { padding-left: 70px; }
}

/* --- Fase 1b: titulo de pagina + submenus (desktop y movil) ---
   .wrapper .title era una "cinta" con position:absolute y top:-3.25em pensada para
   clavarse sobre el hero de 24em original; con la barra compacta ese hueco negativo
   la mete DENTRO del menu. Se aplana a una barra normal, en flujo, bajo la barra. */
#main {
	/* .wrapper trae padding-top:6em pensado para dejar aire bajo el hero de 24em
	   (el title, antes position:absolute, "cancelaba" ese hueco con su top negativo).
	   Ahora que el title esta en flujo normal, ese padding superior sobra: dejaba un
	   hueco enorme entre la barra y el titulo. El padding inferior (9em) no se toca. */
	padding-top: 0;
}
#main .title {
	position: static;
	top: auto;
	left: auto;
	width: auto;
	height: auto;
	line-height: normal;
	margin: 0 0 1em 0;
	padding: 16px 22px;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	font-size: 20px;
	font-weight: 700;
	color: var(--c-primary);
	background: none;
	border-bottom: 1px solid var(--c-line);
}
#main .title:before, #main .title:after { content: none; }

/* Submenu desplegable de escritorio (dropotron): de tarjeta oscura semitransparente
   a tarjeta blanca con sombra, a juego con el resto del tema. Los items de 1er nivel
   (barra azul) NO se tocan aqui. */
.dropotron {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 38, 100, .18);
	padding: 6px 0;
	min-width: 15em;
}
/* Con el hueco de 8px queda "flotando", no pegado al menu: se le devuelven las
   esquinas superiores redondeadas que el original quitaba (border-top-*-radius:0)
   para la version pegada/sin hueco. */
.dropotron.level-0 { margin-top: 8px; border-radius: 8px; }
.dropotron a, .dropotron span {
	color: var(--c-ink);
	text-transform: none;
	letter-spacing: normal;
	font-size: 13.5px;
	line-height: normal;
	padding: 10px 18px;
	border-top: 1px solid var(--c-line);
}
.dropotron li:first-child a, .dropotron li:first-child span { border-top: 0; }
.dropotron li:hover > a, .dropotron li:hover > span {
	color: var(--c-primary);
	background: #eef1f8;
}

/* Panel de menu movil (#navPanel, deslizante): de gris oscuro generico a azul
   corporativo; items en minusculas (mas legibles en un arbol largo con muchos
   niveles) en vez de las mayusculas espaciadas del menu de escritorio. */
#navPanel {
	background: var(--c-primary);
}
/* display:flex SOLO en movil (importante): main.css define "#navPanel{display:none}"
   SIN media query, y position:fixed/transform/etc SOLO dentro de este mismo punto
   de ruptura. Poner "display:flex" sin acotar (aunque sea el mismo ID, tema.css
   carga despues) le ganaba al display:none de escritorio: el panel se renderizaba
   en flujo normal, visible por debajo del footer, Y ademas saltaba de flujo normal
   a position:fixed+transition en el mismo instante de cruzar el punto de ruptura
   al redimensionar -> el efecto de "el menu se cierra" que se seguia viendo. */
@media screen and (max-width: 980px) {
	#navPanel {
		/* Columna flex: el <nav> principal (navPanel-scroll) se lleva todo el alto
		   disponible y su propio scroll; el de Perfil (navPanel-perfil) no encoge,
		   asi que queda fijo abajo del panel sin desplazarse con el resto. */
		display: flex;
		flex-direction: column;
	}
}
.navPanel-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	/* Necesario para que un flex-item pueda encogerse por debajo del alto de su
	   contenido y active su propio scroll (si no, empuja el alto del panel entero). */
	min-height: 0;
}
.navPanel-perfil {
	flex: none;
	border-top: 1px solid rgba(255, 255, 255, .15);
	background: rgba(0, 0, 0, .12);
}
/* Colapsado por defecto: solo se ve el disparador (nombre); Editar Perfil/Cerrar
   Sesion aparecen al clicarlo (ver el click handler en main.js). El disparador usa
   href="#" (no navega), asi que no cierra el panel entero al pulsarlo (ese caso ya
   esta contemplado en el hideOnClick de panel(), en util.js). */
/* Prefijado con "#navPanel" (no solo clases): main.css define "#navPanel .link"
   con un ID, que por especificidad le gana a una regla de solo-clases aunque esta
   venga despues en la hoja (mismo gotcha ya visto con el margen de #nav > ul). */
#navPanel .navPanel-perfil .link.depth-1 { display: none; }
#navPanel .navPanel-perfil.open .link.depth-1 { display: block; }
/* Pequeño caret en el disparador, igual que en el menu de escritorio: gira al abrir. */
.navPanel-perfil > .link[href="#"]:after {
	content: '\25BE';
	float: right;
	margin-right: 4px;
	opacity: .7;
	transition: transform .2s ease;
}
.navPanel-perfil.open > .link[href="#"]:after {
	transform: rotate(180deg);
}
/* Avatar (iniciales) clonado del menu de escritorio (ver main.js): fila flex para
   que quede separado del nombre con un hueco, en vez de pegado sin espacio. */
#navPanel .navPanel-perfil > .link[href="#"] {
	display: flex;
	align-items: center;
	gap: 9px;
}
.navPanel-perfil .nav-avatar { flex: none; }
#navPanel .link {
	/* Enlaces "hoja" (destino real): atenuados por defecto. */
	color: rgba(255, 255, 255, .55);
	text-transform: none;
	letter-spacing: normal;
	font-size: 14px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}
/* Los "abridores" de categoria (Gestion Fichajes..., Coches..., Administrar...) usan
   href="#" en TODO el menu: no navegan, solo agrupan lo que sigue debajo (indentado).
   Se resaltan un poco para que se note que son cabecera de grupo y no un destino,
   ya que el panel movil no colapsa/expande: ensena el arbol entero de una vez. */
#navPanel .link[href="#"] {
	color: rgba(255, 255, 255, .9);
	font-weight: 600;
}
/* Primer nivel: la mayor prominencia, sea o no "abridor" (va despues en la hoja
   -> gana sobre la regla anterior en las propiedades que comparten). */
#navPanel .link.depth-0 {
	color: #fff;
	font-weight: 700;
	font-size: 15px;
}
#navPanel .link:hover, #navPanel .link:active {
	color: var(--c-accent);
}

/* Boton hamburguesa (#titleBar): de caja gris oscura a caja blanca translucida
   (mejor integrada sobre la barra azul; el icono ya era blanco). */
#titleBar .toggle:before {
	color: #fff;
	background-color: rgba(255, 255, 255, .18);
}
#titleBar .toggle:active:before {
	background-color: rgba(255, 255, 255, .3);
}

/* Perfil: look de "chip" de usuario flotante (avatar con iniciales + nombre) en su
   propia lista (.nav-perfil-menu, ver arriba). El submenu (Editar Perfil/Cerrar
   Sesion) lo sigue gestionando dropotron sin cambios, solo se restyla el disparador. */
#nav > ul > li#m4 > a.nav-perfil {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: auto;
	padding: 8px 14px 8px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	text-transform: none;
	letter-spacing: normal;
	font-size: 13px;
}
#nav > ul > li#m4:hover > a.nav-perfil { background: rgba(255, 255, 255, .18); }
.nav-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--c-accent);
	color: var(--c-primary);
	font-weight: 700;
	font-size: 11px;
}

/* --- Tablas densas (.tabla-mejorada) ---
   El JS de ui.js (inicializarTablasMejoradas) inserta una barra con el boton "Columnas"
   encima de cada tabla con esta clase y hace clicable cada fila (abre el detalle en Swal).
   Aqui solo el aspecto de la barra/boton y la pista visual de fila clicable. */
.tabla-toolbar { display: flex; justify-content: flex-end; margin: 0 0 8px; }
/* Boton "Columnas": es un <button>, asi que main.css lo pinta grande/mayusculas
   (input[type=submit],button {...}). Una clase (0-1-0) le gana al selector de elemento
   (0-0-1), pero hay que RESETEAR explicitamente lo que no redeclaramos (text-transform,
   min-width, height, line-height, letter-spacing, font-weight) o se cuela el look viejo. */
.tabla-cols-btn {
	display: inline-flex; align-items: center; gap: 6px;
	min-width: 0; height: auto; line-height: 1;
	padding: 6px 14px; border: 1px solid var(--c-line); border-radius: 4px;
	background: #fff; color: var(--c-primary); cursor: pointer;
	font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: normal;
}
.tabla-cols-btn:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
/* Fila clicable: el cursor lo pone el JS (style.cursor); el hover ya lo da .tabla-datos. */

/* --- Pie de pagina ---
   Antes: gris casi negro generico del tema (#282b34), sin relacion con el azul
   corporativo de la cabecera; titulos en un teal suelto (.feature-list h3, !important,
   ver mas abajo); insignias de icono en gris (#3d4249); redes sociales como 5 PNG en
   crudo con calidad/tamano dispares. Ahora todo en el azul corporativo, coherente con
   la cabecera. Reglas de aqui abajo migradas del <style> inline que llevaba
   templates/footer.php (mismo criterio que Fase 5 con los calendarios: todo el CSS del
   tema vive en tema.css, no en las paginas). */
html { background-color: var(--c-primary); }
/* El tema trae padding:6em 0 9em 0 (heredado de .wrapper, pensado para separar
   secciones "hero" con su propio titulo flotante encima). Footer mucho mas compacto y
   SIN depender de ese hueco reservado: ya no hay titulo flotando sobre el borde
   main/footer (ver Fase 6e en TEMA.md -- la pill "Contacto" no convencia y encima
   obligaba a mantener ese padding-top grande para dejarle sitio). El limite entre
   pagina y footer es ahora simplemente el cambio de color, sin etiqueta. */
#footer {
	background: var(--c-primary);
	padding: 32px 0 18px;
}
/* Con 3 columnas en una sola fila, la 3a tambien va SIN el borde/sangrado superior (la
   regla del tema solo se lo quita a las 2 primeras), para que las redes sociales se
   alineen con direccion/email. Solo en escritorio; apilado en movil conserva el
   separador. */
@media screen and (min-width: 981px) {
	#footer .feature-list > .row > :nth-child(3) > section {
		border-top: 0;
		padding-top: 0;
	}
}
/* Compactar cada bloque (Direccion/Email-Telefono/Redes Sociales): el tema trae
   padding-top:3em pensado para un footer mucho mas alto. padding-top:0 tambien en
   movil (apilado): la separacion entre bloques ya la da el espaciado normal de
   titulo+parrafo, no hace falta el hueco extra. */
#footer .feature-list.small section {
	padding-top: 0;
}
/* Insignias de icono (antes 2.5em*0.8=2em como variante "small" del tema) un poco
   mas pequeñas, a juego con el resto de proporciones compactas. */
#footer .feature-list h3 {
	margin: -0.1em 0 0.5em 0;
	font-size: 1.05em;
}
#footer .feature-list h3:before {
	width: 2em;
	height: 2em;
	line-height: 2em;
	font-size: 0.75em;
	margin-top: -0.15em;
}
#footer hr {
	margin: 1.2em 0;
}
#footer p.copyright {
	margin: 0;
	font-size: 12.5px;
}
/* .feature-list h3 (main.css) fija un teal suelto con !important, pensado para usarse
   sobre fondo claro en otras partes del tema original; aqui hace falta la MISMA
   especificidad + !important para pisarlo (#footer + la clase +el elemento le gana en
   especificidad a ".feature-list h3", y basta para superar el empate de !important). */
#footer .feature-list h3 {
	color: #fff !important;
}
/* Insignias circulares de icono (Direccion/Email/Telefono/Redes Sociales): antes un
   gris generico (#3d4249) con textura de fondo (overlay.png) ajena a la paleta. Tono
   sobre tono (--c-primary-700 sobre el --c-primary del footer) en vez de acento: son 4
   insignias simultaneas, y el acento esta pensado para detalles puntuales, no para
   repetirse en bloque (ver §5). */
#footer .feature-list h3:before {
	background: var(--c-primary-700);
	background-image: none;
	color: #fff;
}
#footer hr {
	/* Un poco mas visible que el 0.05 original: el azul corporativo tiene mas
	   luminosidad que el gris casi negro de antes y el separador se perdia. */
	border-top-color: rgba(255, 255, 255, .15);
}
/* Redes sociales: 5 <img> PNG (logos de marca a tamano/calidad dispares) -> iconos
   Font Awesome en insignias circulares, mismo tratamiento tono sobre tono que los
   iconos de arriba (coherencia visual) y el mismo hover a acento que ya usa
   .btn-icono en el resto de la app (unico sitio del footer donde SI aparece el acento,
   y solo en :hover, nunca en reposo). */
.footer-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9em;
	height: 1.9em;
	border-radius: 50%;
	background: var(--c-primary-700);
	color: #fff;
	font-size: 0.95em;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.footer-social:hover { background: var(--c-accent); color: var(--c-primary); }

/* PLAN-RETOQUES.md Fase 12: panel de inicio (index.php) — tarjetas de widget personales
   (pendiente de fichar, vacaciones, rechazados, reservas, coger/dejar coche...). Grid CSS
   auto-fill: reparte las tarjetas en tantas columnas como quepan (minimo ~220px cada una),
   asi se adapta SOLO a cualquier numero de widgets (clave para ir anadiendo mas y para la
   futura personalizacion) y en movil cae a 1 columna sin media queries. El look de la
   tarjeta va en linea con .portada-card/.tabla-datos. Render en lib/own/dashboard.php. */
.dashboard {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin: 14px 0;
}
.widget {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 38, 100, .1);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* Cabecera navy con el icono + titulo, como las cabeceras de tabla del tema. */
.widget-cab {
	background: var(--c-primary);
	color: #fff;
	font-weight: bold;
	padding: 10px 14px;
}
.widget-cab i { margin-right: 6px; }
/* Cuerpo: crece para igualar alturas entre tarjetas de la misma fila. */
.widget-cuerpo {
	flex: 1 1 auto;
	padding: 16px 14px;
	color: var(--c-ink);
}
/* Cifra destacada (saldo/recuento) + su unidad al lado. */
.widget-cifra { font-size: 34px; font-weight: bold; line-height: 1; color: var(--c-primary); }
.widget-unidad { margin-left: 8px; color: var(--c-muted); }
/* El widget de rechazados recolorea la cifra con .estado-texto-danger/.estado-texto-ok. */
.widget-cifra.estado-texto-danger { color: var(--c-danger); }
.widget-cifra.estado-texto-ok { color: var(--c-ok); }
.widget-vacio { color: var(--c-muted); margin: 0; }
/* Desglose bajo la cifra (p.ej. "de ellas, N extra" en horas del mes). */
.widget-desglose { margin: 8px 0 0; color: var(--c-muted); font-size: 13px; }
/* Lista de reservas: sin vinetas, separadores sutiles entre filas. */
.widget-lista { list-style: none; margin: 0; padding: 0; }
.widget-lista li { padding: 6px 0; border-bottom: 1px solid var(--c-line); }
.widget-lista li:last-child { border-bottom: 0; }
.widget-fechas { color: var(--c-muted); font-size: 13px; }
/* Items clicables (coger/dejar coche): nombre a la izquierda, chip de accion a la derecha. */
.widget-lista a { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--c-ink); text-decoration: none; }
.widget-lista a:hover { color: var(--c-primary); }
.widget-coche-nombre { min-width: 0; overflow-wrap: anywhere; }
/* Pastilla de accion: verde "Coger" (disponible), ambar "Dejar" (pendiente de devolver). */
.widget-accion { flex: 0 0 auto; font-size: 12px; font-weight: bold; padding: 1px 8px; border-radius: 10px; }
.widget-accion.coger { background: var(--c-ok); color: #fff; }
.widget-accion.dejar { background: var(--c-accent); color: var(--c-primary); }
/* Pie con el enlace a la pagina de la funcionalidad. */
.widget-pie { padding: 10px 14px; border-top: 1px solid var(--c-line); }
.widget-pie a { color: var(--c-primary); font-weight: bold; text-decoration: none; }
.widget-pie a:hover { color: var(--c-primary-700); }
.widget-pie a i { font-size: 0.85em; margin-left: 2px; }