@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* ============================================================================
 * TREXDI · corrección de contraste del TEMA CLARO
 * Punto 5 del documento del 31/08/2026.
 *
 * QUÉ ES ESTO
 * Una hoja de correcciones que se carga DESPUÉS del bundle. No necesita el
 * código fuente de React ni recompilar: actúa sobre las clases que ya están en
 * el HTML desplegado.
 *
 * POR QUÉ HACE FALTA
 * El tema claro se implementó redefiniendo utilidades de Tailwind, y quedaron
 * fuera tres familias que ninguna ampliación de esa lista alcanza bien:
 *   · los tonos -100 y -200 (pensados para fondo oscuro),
 *   · las variantes con opacidad, que compilan a un color literal,
 *   · los hexadecimales arbitrarios tipo text-[#17e542], donde el color vive
 *     dentro del nombre de la clase.
 * Aquí se atacan las tres, apuntando a los selectores exactos.
 *
 * ⚠ ESTO ES UN PARCHE, NO LA SOLUCIÓN
 * Un despliegue nuevo del frontend regenera index.html y borra el <link> que
 * lo carga. La solución de fondo son los tokens semánticos descritos en
 * PUNTO-5-COLORES.md, aplicados en el código fuente. Mientras tanto, esto deja
 * la aplicación legible hoy.
 *
 * Todos los valores están MEDIDOS. El mínimo exigible es 4,5:1.
 * ==========================================================================*/

:root[data-theme="light"] {
  /* Pares semánticos. Cuando se migre al código fuente, estos son los valores
     que deben quedar como tokens. */
  --estado-ok-bg:     #DCFCE7;  --estado-ok-fg:     #166534;
  --estado-error-bg:  #FEE2E2;  --estado-error-fg:  #991B1B;
  --estado-aviso-bg:  #FFEDD5;  --estado-aviso-fg:  #9A3412;
  --estado-info-bg:   #DBEAFE;  --estado-info-fg:   #1E40AF;
  --estado-espera-bg: #FEF9C3;  --estado-espera-fg: #854D0E;
  --estado-neutro-bg: #F4F4F5;  --estado-neutro-fg: #3F3F46;
}

/* --------------------------------------------------------------------------
 * 1 · Hexadecimales arbitrarios
 *
 * La insignia «Independiente» aparece 15 veces en el listado con
 * text-[#17e542] sobre fondo verde muy claro: 1,59:1 medido. Prácticamente el
 * mismo color sobre sí mismo.
 *
 * Ninguna hoja de tema puede reinterpretar estas clases porque el color forma
 * parte de su nombre — por eso hay que nombrarlas uña por uña.
 * ------------------------------------------------------------------------ */
:root[data-theme="light"] .text-\[\#17e542\],
:root[data-theme="light"] .text-\[\#00e842\] {
  color: var(--estado-ok-fg) !important;      /* 6,64:1  (antes 1,59:1) */
}

:root[data-theme="light"] .bg-\[\#17e542\]\/10,
:root[data-theme="light"] .bg-\[\#17e542\]\/20 {
  background-color: var(--estado-ok-bg) !important;
}

:root[data-theme="light"] .border-\[\#17e542\] {
  border-color: #86EFAC !important;           /* borde visible sin gritar */
}

/* --------------------------------------------------------------------------
 * 2 · Tonos claros heredados del tema oscuro
 *
 * text-green-100 y text-red-200 se eligieron para leerse sobre fondo negro.
 * Sobre fondo claro dan 1,46:1 y 1,18:1 respectivamente. Incluye las variantes
 * con opacidad, que son selectores distintos: una regla sobre .text-green-100
 * NO alcanza a .text-green-100\/80.
 * ------------------------------------------------------------------------ */
:root[data-theme="light"] .text-green-100,
:root[data-theme="light"] .text-green-100\/50,
:root[data-theme="light"] .text-green-100\/80,
:root[data-theme="light"] .text-green-200,
:root[data-theme="light"] .text-emerald-100,
:root[data-theme="light"] .text-emerald-200 {
  color: #14532D !important;                  /* 8,70:1  (antes 1,46:1) */
}

:root[data-theme="light"] .text-red-100,
:root[data-theme="light"] .text-red-200,
:root[data-theme="light"] .text-red-200\/80 {
  color: var(--estado-error-fg) !important;   /* 6,80:1  (antes 1,18:1) */
}

:root[data-theme="light"] .text-orange-100,
:root[data-theme="light"] .text-orange-200,
:root[data-theme="light"] .text-amber-100,
:root[data-theme="light"] .text-amber-200 {
  color: var(--estado-aviso-fg) !important;
}

:root[data-theme="light"] .text-blue-100,
:root[data-theme="light"] .text-blue-200,
:root[data-theme="light"] .text-cyan-100,
:root[data-theme="light"] .text-cyan-200 {
  color: var(--estado-info-fg) !important;
}

:root[data-theme="light"] .text-yellow-100,
:root[data-theme="light"] .text-yellow-200 {
  color: var(--estado-espera-fg) !important;
}

/* --------------------------------------------------------------------------
 * 3 · Insignias: fondo translúcido con texto del mismo tono
 *
 * bg-green-500/20 sobre una tarjeta blanca queda casi blanco, y el texto
 * verde-400 encima no llega al mínimo. Se fijan ambos a la vez.
 * ------------------------------------------------------------------------ */
:root[data-theme="light"] .bg-green-500\/10,
:root[data-theme="light"] .bg-green-500\/20,
:root[data-theme="light"] .bg-green-900\/30,
:root[data-theme="light"] .bg-emerald-500\/20 {
  background-color: var(--estado-ok-bg) !important;
}
:root[data-theme="light"] .bg-green-500\/10 .text-green-400,
:root[data-theme="light"] .bg-green-500\/20 .text-green-400,
:root[data-theme="light"] .bg-green-500\/20.text-green-400,
:root[data-theme="light"] .bg-green-900\/30 .text-green-400 {
  color: var(--estado-ok-fg) !important;
}

:root[data-theme="light"] .bg-red-500\/10,
:root[data-theme="light"] .bg-red-500\/20,
:root[data-theme="light"] .bg-red-900\/30 {
  background-color: var(--estado-error-bg) !important;
}

:root[data-theme="light"] .bg-orange-500\/10,
:root[data-theme="light"] .bg-orange-500\/20,
:root[data-theme="light"] .bg-amber-500\/20 {
  background-color: var(--estado-aviso-bg) !important;
}

:root[data-theme="light"] .bg-blue-500\/10,
:root[data-theme="light"] .bg-blue-500\/20 {
  background-color: var(--estado-info-bg) !important;
}

/* --------------------------------------------------------------------------
 * 4 · Texto blanco sobre fondos de color saturado
 *
 * Blanco sobre naranja-500 da 2,80:1. En lugar de oscurecer el texto —que
 * rompería la lectura de insignia— se oscurece el fondo: blanco sobre
 * naranja-800 da 7,31:1 y mantiene el mismo lenguaje visual.
 * ------------------------------------------------------------------------ */
/* Naranja: se oscurece el fondo Y se fuerza el texto blanco.
 *
 * Corregido tras medir en producción: la primera versión solo oscurecía el
 * fondo, dando por hecho que encima siempre iba texto blanco. La insignia
 * «Pausada» lleva texto oscuro, así que al oscurecer el fondo quedó en
 * 2,44:1 — peor que antes. Fijando ambos, las dos variantes dan 7,31:1. */
:root[data-theme="light"] .bg-orange-500:not([class*="/"]),
:root[data-theme="light"] .bg-orange-500:not([class*="/"]) * {
  background-color: transparent;
  color: #FFFFFF !important;                   /* 7,31:1 */
}
:root[data-theme="light"] .bg-orange-500:not([class*="/"]) {
  background-color: #9A3412 !important;
}
:root[data-theme="light"] .bg-yellow-500,
:root[data-theme="light"] .bg-amber-400 {
  /* El amarillo de marca no se toca: se oscurece el TEXTO, que es lo que falla.
     Blanco sobre #FACC15 da 1,53:1; casi negro da 11,58:1. */
  color: #111827 !important;
}
:root[data-theme="light"] .bg-yellow-500 *,
:root[data-theme="light"] .bg-amber-400 * {
  color: #111827 !important;
}

/* --------------------------------------------------------------------------
 * 5 · Pestañas de filtro del listado
 *
 * «Finalizadas» usaba #00e842 sobre blanco (1,66:1) y «Tiempo Excedido»
 * rojo-500 sobre blanco (3,76:1). Ambas son texto pequeño: mínimo 4,5:1.
 * ------------------------------------------------------------------------ */
:root[data-theme="light"] .text-red-500,
:root[data-theme="light"] .text-red-400 {
  color: #B91C1C !important;                  /* 6,47:1  (antes 3,76:1) */
}
:root[data-theme="light"] .text-green-500 {
  color: var(--estado-ok-fg) !important;      /* 7,13:1  (antes 1,66:1) */
}


/* --------------------------------------------------------------------------
 * CORRECCION 01/09/2026 - naranja: hay que fijar fondo Y texto
 *
 * La regla de mas arriba solo oscurecia el fondo, dando por hecho que encima
 * siempre iba texto blanco. La insignia Pausada lleva texto oscuro, asi que
 * al oscurecerle el fondo quedaba en 2,44:1 - peor que antes de tocarlo.
 * Fijando los dos, ambas variantes dan 7,31:1.
 * ------------------------------------------------------------------------ */
:root[data-theme="light"] .bg-orange-500:not([class*="/"]),
:root[data-theme="light"] .bg-orange-500:not([class*="/"]) * {
  color: #FFFFFF !important;
}

/* CORRECCION del apartado anterior:
 * `:not([class*="/"])` era demasiado amplio. Comprueba si el ATRIBUTO class
 * contiene una barra en cualquier parte, y esta insignia trae `hover:bg-primary/80`,
 * asi que quedaba excluida. Se excluyen solo las variantes de opacidad del propio
 * naranja, como hace la regla del fondo mas arriba.
 *
 * Ademas explica por que el texto sale oscuro: la hoja de tema claro de la app
 * redefine `.text-white` a un tono oscuro, y esta insignia usa justo esa clase
 * sobre un fondo de color. */
:root[data-theme="light"] .bg-orange-500:not(.bg-orange-500\/10):not(.bg-orange-500\/20),
:root[data-theme="light"] .bg-orange-500:not(.bg-orange-500\/10):not(.bg-orange-500\/20) * {
  color: #FFFFFF !important;
}

/* === v4 : fondo de insignias naranjas solidas === */
.bg-orange-500:not(.bg-orange-500\/10):not(.bg-orange-500\/20){
  background-color: #9A3412 !important;
  border-color: #9A3412 !important;
  color: #FFFFFF !important;
}

/* === v6 : graficas Recharts accesibles (ejes y leyenda) === */
.recharts-cartesian-axis-tick-value,
.recharts-cartesian-axis-tick-value tspan,
.recharts-polar-angle-axis-tick-value,
.recharts-polar-angle-axis-tick-value tspan {
  fill: #4B5563 !important;
}
.recharts-legend-item-text,
.recharts-legend-item-text * {
  color: #1F2937 !important;
}
[data-theme="dark"] .recharts-cartesian-axis-tick-value,
[data-theme="dark"] .recharts-cartesian-axis-tick-value tspan,
[data-theme="dark"] .recharts-polar-angle-axis-tick-value,
[data-theme="dark"] .recharts-polar-angle-axis-tick-value tspan {
  fill: #CBD5E1 !important;
}
[data-theme="dark"] .recharts-legend-item-text,
[data-theme="dark"] .recharts-legend-item-text * {
  color: #E2E8F0 !important;
}

/* === v7 : paneles con clases de tema OSCURO renderizados en tema CLARO === */
[data-theme="light"] .bg-gray-800\/50,
[data-theme="light"] .bg-gray-900\/50,
[data-theme="light"] .bg-gray-700 {
  background-color: #E2E8F0 !important;
}
[data-theme="light"] .bg-gray-800\/30,
[data-theme="light"] .bg-gray-900\/30 {
  background-color: #F1F5F9 !important;
}
[data-theme="light"] .border-gray-700,
[data-theme="light"] .border-gray-800 {
  border-color: #CBD5E1 !important;
}
[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-gray-500 {
  color: #475569 !important;
}
[data-theme="light"] .bg-gray-800\/50 .text-white,
[data-theme="light"] .bg-gray-800\/30 .text-white,
[data-theme="light"] .bg-gray-700 .text-white,
[data-theme="light"] .bg-gray-800\/50.text-white,
[data-theme="light"] .bg-gray-800\/30.text-white {
  color: #0F172A !important;
}

/* pastillas de color translucidas de tema oscuro */
[data-theme="light"] .bg-purple-600\/30, [data-theme="light"] .bg-purple-600\/30 * {
  background-color: #EDE9FE !important; color: #5B21B6 !important;
}
[data-theme="light"] .bg-blue-600\/30, [data-theme="light"] .bg-blue-600\/30 * {
  background-color: #DBEAFE !important; color: #1D4ED8 !important;
}
[data-theme="light"] .bg-orange-600\/30, [data-theme="light"] .bg-orange-600\/30 * {
  background-color: #FFEDD5 !important; color: #9A3412 !important;
}
[data-theme="light"] .bg-green-900\/30, [data-theme="light"] .bg-green-900\/30 * {
  background-color: #DCFCE7 !important; color: #166534 !important;
}
[data-theme="light"] .bg-slate-600\/40, [data-theme="light"] .bg-slate-600\/40 * {
  background-color: #E2E8F0 !important; color: #334155 !important;
}

/* === v8 : calendario (react-big-calendar) en tema claro === */
[data-theme="light"] .rbc-calendar,
[data-theme="light"] .rbc-month-view,
[data-theme="light"] .rbc-time-view,
[data-theme="light"] .rbc-agenda-view {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}
[data-theme="light"] .rbc-day-bg { background-color: #FFFFFF !important; }
[data-theme="light"] .rbc-off-range-bg { background-color: #F8FAFC !important; }
[data-theme="light"] .rbc-today { background-color: #EFF6FF !important; }
[data-theme="light"] .rbc-header,
[data-theme="light"] .rbc-button-link,
[data-theme="light"] .rbc-date-cell,
[data-theme="light"] .rbc-toolbar,
[data-theme="light"] .rbc-label,
[data-theme="light"] .rbc-agenda-view table.rbc-agenda-table {
  color: #0F172A !important;
}
[data-theme="light"] .rbc-off-range,
[data-theme="light"] .rbc-off-range .rbc-button-link {
  color: #64748B !important;
}
[data-theme="light"] .rbc-month-view,
[data-theme="light"] .rbc-month-row,
[data-theme="light"] .rbc-day-bg,
[data-theme="light"] .rbc-header,
[data-theme="light"] .rbc-time-content,
[data-theme="light"] .rbc-timeslot-group {
  border-color: #E2E8F0 !important;
}

/* === v8 : enlaces amarillos en notificaciones === */
[data-theme="light"] .text-yellow-400,
[data-theme="light"] .text-yellow-500,
[data-theme="light"] .text-amber-400,
[data-theme="light"] .text-amber-500 {
  color: #854D0E !important;
}

/* === v9 : texto dentro de los eventos del calendario === */
[data-theme="light"] .rbc-event,
[data-theme="light"] .rbc-event span,
[data-theme="light"] .rbc-event div,
[data-theme="light"] .rbc-event p,
[data-theme="light"] .rbc-event strong,
[data-theme="light"] .rbc-event small {
  color: #0F172A !important;
}

/* === v10 : superficies bg-black/N de tema oscuro en tema claro === */
[data-theme="light"] .bg-black\/10,
[data-theme="light"] .bg-black\/20,
[data-theme="light"] .bg-black\/30,
[data-theme="light"] .bg-black\/40 {
  background-color: #F1F5F9 !important;
}

/* ================= v11 : TEMA OSCURO ================= */
/* texto secundario */
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-600 {
  color: #9CA3AF !important;
}
[data-theme="dark"] .text-red-500 { color: #F87171 !important; }

/* insignias solidas con texto blanco */
[data-theme="dark"] .bg-green-600  { background-color: #15803D !important; }
[data-theme="dark"] .bg-green-500  { background-color: #15803D !important; }
[data-theme="dark"] .bg-blue-500   { background-color: #1D4ED8 !important; }
[data-theme="dark"] .bg-purple-500 { background-color: #7E22CE !important; }
[data-theme="dark"] .bg-cyan-500   { background-color: #0E7490 !important; }

/* insignias claras: el texto debe ser oscuro */
[data-theme="dark"] .bg-yellow-400, [data-theme="dark"] .bg-yellow-400 *,
[data-theme="dark"] .bg-yellow-300, [data-theme="dark"] .bg-yellow-300 *,
[data-theme="dark"] .bg-amber-400, [data-theme="dark"] .bg-amber-400 * {
  color: #1C1917 !important;
}

/* calendario en tema oscuro */
[data-theme="dark"] .rbc-button-link,
[data-theme="dark"] .rbc-date-cell,
[data-theme="dark"] .rbc-header {
  color: #E2E8F0 !important;
}
[data-theme="dark"] .rbc-off-range,
[data-theme="dark"] .rbc-off-range .rbc-button-link {
  color: #94A3B8 !important;
}
[data-theme="dark"] .rbc-event .rounded-full {
  color: #0F172A !important;
}

/* === v12 : insignias de ROL con degradado (texto blanco) === */
.from-orange-500.to-amber-600 {
  background-color: #9A3412 !important;
  background-image: linear-gradient(to right, #9A3412, #78350F) !important;
  color: #FFFFFF !important;
}
.from-green-500.to-emerald-600 {
  background-color: #15803D !important;
  background-image: linear-gradient(to right, #15803D, #047857) !important;
  color: #FFFFFF !important;
}
.from-purple-500.to-indigo-600 {
  background-color: #6B21A8 !important;
  background-image: linear-gradient(to right, #6B21A8, #4338CA) !important;
  color: #FFFFFF !important;
}
.from-cyan-500.to-teal-600 {
  background-color: #0E7490 !important;
  background-image: linear-gradient(to right, #0E7490, #0F766E) !important;
  color: #FFFFFF !important;
}
.from-blue-500.to-sky-600 {
  background-color: #1D4ED8 !important;
  background-image: linear-gradient(to right, #1D4ED8, #0369A1) !important;
  color: #FFFFFF !important;
}

/* === v13 : texto palido de avisos (banner de almuerzo / fuera de horario) === */
[data-theme="light"] .text-orange-200, [data-theme="light"] .text-orange-200\/90,
[data-theme="light"] .text-orange-300, [data-theme="light"] .text-orange-300\/90,
[data-theme="light"] .text-amber-200, [data-theme="light"] .text-amber-200\/90,
[data-theme="light"] .text-amber-300, [data-theme="light"] .text-amber-300\/90 {
  color: #9A3412 !important;
}
[data-theme="light"] .text-yellow-200, [data-theme="light"] .text-yellow-200\/90,
[data-theme="light"] .text-yellow-300, [data-theme="light"] .text-yellow-300\/90 {
  color: #854D0E !important;
}
[data-theme="light"] .text-green-200, [data-theme="light"] .text-green-300 { color: #166534 !important; }
[data-theme="light"] .text-blue-200,  [data-theme="light"] .text-blue-300  { color: #1D4ED8 !important; }
[data-theme="light"] .text-red-200,   [data-theme="light"] .text-red-300   { color: #B91C1C !important; }

/* === v14 : pantalla de acceso con fondo amarillo de marca === */
/* El contenedor centrado a pantalla completa solo existe en /login.      */
/* La tarjeta se hace OPACA y sigue el tema, para que el texto de dentro  */
/* conserve sus colores y no haya que tocarlo uno por uno.               */
body:has(.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg) {
  background-color: #FACC15 !important;
}
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg {
  background: #FACC15 !important;
}
[data-theme="dark"] .min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg .trexdi-card {
  background-color: #171717 !important;
  border-color: #262626 !important;
}
[data-theme="light"] .min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg .trexdi-card {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}
/* titulos FUERA de la tarjeta: van directos sobre el amarillo */
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg > div > .text-center,
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg > div > .text-center * {
  color: #171717 !important;
}


/* ============================================================================
   PASADA DE DISEÑO — 9 de septiembre de 2026
   Se añade AL FINAL de trexdi-contraste.css. No borra ni modifica ninguna
   regla anterior: todo lo de arriba (los arreglos de contraste del tema
   claro) sigue igual.

   Las cuatro reglas de este bloque se probaron una por una contra
   flows.trexdi.app en producción antes de escribirlas aquí.
   NO se toca el bundle compilado ni index.html.
   ========================================================================= */

/* --- 1. El donut pintaba dos estados distintos del MISMO verde -----------
   "Finalizada - Aprobada por Cliente" y "Completado" salían los dos en
   #17e542. En el mismo gráfico, imposibles de distinguir.
   Los seis sectores reciben tonos verificados para fondo oscuro (banda de
   luminosidad, croma, separación para daltonismo y contraste). El
   cuadradito de la leyenda se repinta con el mismo valor para que gráfico
   y leyenda no se contradigan.                                          */
.recharts-pie > .recharts-pie-sector:nth-child(1) path,
.recharts-wrapper:has(.recharts-pie) .legend-item-0 svg path{fill:#B8860B !important;stroke:#B8860B}
.recharts-pie > .recharts-pie-sector:nth-child(2) path,
.recharts-wrapper:has(.recharts-pie) .legend-item-1 svg path{fill:#16A34A !important;stroke:#16A34A}
.recharts-pie > .recharts-pie-sector:nth-child(3) path,
.recharts-wrapper:has(.recharts-pie) .legend-item-2 svg path{fill:#3B82F6 !important;stroke:#3B82F6}
.recharts-pie > .recharts-pie-sector:nth-child(4) path,
.recharts-wrapper:has(.recharts-pie) .legend-item-3 svg path{fill:#7C8797 !important;stroke:#7C8797}
.recharts-pie > .recharts-pie-sector:nth-child(5) path,
.recharts-wrapper:has(.recharts-pie) .legend-item-4 svg path{fill:#EA580C !important;stroke:#EA580C}
.recharts-pie > .recharts-pie-sector:nth-child(6) path,
.recharts-wrapper:has(.recharts-pie) .legend-item-5 svg path{fill:#9333EA !important;stroke:#9333EA}

/* Separación de 2 px entre porciones: el ojo lee los límites sin depender
   solo del color. */
.recharts-pie > .recharts-pie-sector path{stroke:#0A0A0A;stroke-width:2}
:root[data-theme="light"] .recharts-pie > .recharts-pie-sector path{stroke:#FFFFFF}

/* --- 2. "Panel De Superadmin - Miércoles, 9 De Septiembre De 2026" -------
   Una frase entera con Mayúscula En Cada Palabra, por un `capitalize` de
   Tailwind aplicado al subtítulo. Se desactiva SOLO ahí: la etiqueta de rol
   del menú lateral usa la misma clase y sí la necesita.                  */
.capitalize.text-gray-400:not(.text-xs){text-transform:none !important}

/* --- 3. La fila de filtros vivía dentro de una barra de desplazamiento --
   "Deshabilitadas" quedaba fuera de la vista: un filtro que existe pero no
   se puede ver ni alcanzar sin arrastrar. Ahora la fila envuelve.        */
[class*="overflow-x-auto"]:has(> [role="tablist"]){
  overflow-x:visible !important; overflow-y:visible !important; padding-bottom:0 !important;
}
[role="tablist"].w-max{
  width:auto !important; height:auto !important;
  flex-wrap:wrap !important; gap:6px !important;
}

/* --- 4. Las tarjetas venían con grayscale(15%) ---------------------------
   Desaturaba también las etiquetas de estado, que son justo lo que hay que
   distinguir de un vistazo.                                             */
.trexdi-card{filter:none !important}


/* --- 5. El menú lateral se divide en tres secciones ----------------------
   Como en el mockup: PRINCIPAL (Dashboard … Calendario), GESTIÓN (Clientes y
   Plan … Pop Up clientes) y ADMINISTRACIÓN (Bloquear Solicitudes … Perfil).

   El menú se filtra por rol —superadmin ve 13 ítems, ejecutivo y cliente 7,
   creativo y soporte 5— y los botones no tienen ningún atributo que los
   identifique, solo su posición. Por eso la regla se activa ÚNICAMENTE cuando
   el menú tiene exactamente 13 ítems, que es el de superadmin. Con 5, 7 o
   cualquier otro número no se aplica nada y la lista sigue plana, que es lo
   correcto para un menú corto. Comprobado con clones de 5, 7 y 14 ítems.

   El espacio que ocupan los tres rótulos se recupera apretando la separación
   entre ítems de 8 px a 4 px, para no empeorar el desplazamiento del menú.  */
.trexdi-sidebar nav:has(> *:nth-child(13)):not(:has(> *:nth-child(14))) > button{ margin-top:4px !important; }
.trexdi-sidebar nav:has(> *:nth-child(13)):not(:has(> *:nth-child(14))) > button:nth-child(6),
.trexdi-sidebar nav:has(> *:nth-child(13)):not(:has(> *:nth-child(14))) > button:nth-child(10){ position:relative; margin-top:24px !important; overflow:visible; }
.trexdi-sidebar nav:has(> *:nth-child(13)):not(:has(> *:nth-child(14))) > button:nth-child(1){ position:relative; margin-top:14px !important; overflow:visible; }
.trexdi-sidebar nav:has(> *:nth-child(13)):not(:has(> *:nth-child(14))) > button:nth-child(1)::before,
.trexdi-sidebar nav:has(> *:nth-child(13)):not(:has(> *:nth-child(14))) > button:nth-child(6)::before,
.trexdi-sidebar nav:has(> *:nth-child(13)):not(:has(> *:nth-child(14))) > button:nth-child(10)::before{
  position:absolute; top:-17px; left:12px;
  font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:#8A8A8A; pointer-events:none; white-space:nowrap;
}
/* La barra lateral es oscura en tema oscuro y blanca en tema claro, así que
   el rótulo necesita un gris distinto en cada uno (5,5:1 y 5,3:1). */
:root[data-theme="light"] .trexdi-sidebar nav:has(> *:nth-child(13)):not(:has(> *:nth-child(14))) > button:nth-child(1)::before,
:root[data-theme="light"] .trexdi-sidebar nav:has(> *:nth-child(13)):not(:has(> *:nth-child(14))) > button:nth-child(6)::before,
:root[data-theme="light"] .trexdi-sidebar nav:has(> *:nth-child(13)):not(:has(> *:nth-child(14))) > button:nth-child(10)::before{ color:#6B6B6B; }
.trexdi-sidebar nav:has(> *:nth-child(13)):not(:has(> *:nth-child(14))) > button:nth-child(1)::before{content:"Principal"}
.trexdi-sidebar nav:has(> *:nth-child(13)):not(:has(> *:nth-child(14))) > button:nth-child(6)::before{content:"Gestión"}
.trexdi-sidebar nav:has(> *:nth-child(13)):not(:has(> *:nth-child(14))) > button:nth-child(10)::before{content:"Administración"}


/* --- 6. La barra lateral conserva la marca también en tema claro ---------
   Como en el mockup: el contenido cambia a claro, la barra se queda oscura.
   No basta con el fondo — todo lo que vive dentro (texto, iconos, separadores,
   avatar, ítem activo y "Cerrar Sesión") tenía valores calculados para fondo
   blanco y quedaría ilegible. Cada uno vuelve al valor que ya usa el tema
   oscuro, medido sobre la app, no inventado.                               */
:root[data-theme="light"] .trexdi-sidebar{ background:#111111 !important; border-right-color:#222222 !important; }
:root[data-theme="light"] .trexdi-sidebar *{ color:#FAFAFA !important; }
:root[data-theme="light"] .trexdi-sidebar [class*="border-"]{ border-color:#222222 !important; }

/* Ítem activo: amarillo de marca con texto negro. */
:root[data-theme="light"] .trexdi-sidebar nav > button.trexdi-yellow-bg,
:root[data-theme="light"] .trexdi-sidebar nav > button.bg-primary{ background-color:#FACC15 !important; }
:root[data-theme="light"] .trexdi-sidebar nav > button.text-black,
:root[data-theme="light"] .trexdi-sidebar nav > button.text-black *{ color:#000000 !important; }
:root[data-theme="light"] .trexdi-sidebar nav > button:not(.trexdi-yellow-bg):hover{ background-color:#1D1D1D !important; }

/* Texto secundario, avatar y cierre de sesión. */
:root[data-theme="light"] .trexdi-sidebar .text-gray-400,
:root[data-theme="light"] .trexdi-sidebar .text-gray-400 *{ color:#A3A3A3 !important; }
:root[data-theme="light"] .trexdi-sidebar .bg-gray-700{ background-color:#374151 !important; }
:root[data-theme="light"] .trexdi-sidebar .text-red-400,
:root[data-theme="light"] .trexdi-sidebar .text-red-400 *{ color:#F87171 !important; }
:root[data-theme="light"] .trexdi-sidebar .text-red-400{ background-color:transparent !important; }
:root[data-theme="light"] .trexdi-sidebar .text-red-400:hover{ background-color:rgba(127,29,29,.2) !important; }

/* Los rótulos de sección vuelven al gris del tema oscuro (5,5:1 sobre #111). */
:root[data-theme="light"] .trexdi-sidebar nav > button:nth-child(1)::before,
:root[data-theme="light"] .trexdi-sidebar nav > button:nth-child(6)::before,
:root[data-theme="light"] .trexdi-sidebar nav > button:nth-child(10)::before{ color:#8A8A8A !important; }


/* --- 7. Tipografía Inter y pantalla de acceso igual al mockup ------------
   El mockup usa Inter en toda la interfaz; la app venía con la tipografía
   del sistema. La familia se declara en body y se hereda; los campos y
   botones no heredan por defecto, así que se les dice aparte. No se usa un
   selector universal a propósito, para no pisar las cifras monoespaciadas
   de los cronómetros.                                                     */
body{ font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
input, button, select, textarea{ font-family: inherit; }

/* Pantalla de acceso. El amarillo a sangre se conserva: es el del mockup.
   Cambian las proporciones, los radios, los grises y el pie.              */
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg > .w-full.max-w-md{ max-width:430px !important; }

.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg img{ border-radius:14px !important; height:44px !important; margin-bottom:18px !important; }
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg h1{ font-size:24px !important; font-weight:800 !important; color:#000 !important;
         letter-spacing:-.02em !important; }
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg h1 + p{ font-size:13.5px !important; font-weight:600 !important;
             color:rgba(0,0,0,.65) !important; margin-top:3px !important; }

.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg .trexdi-card{
  background:#111111 !important; border-color:#2A2A2A !important;
  border-radius:22px !important; box-shadow:0 24px 60px rgba(0,0,0,.28) !important;
}
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg .trexdi-card > div{ padding-left:30px !important; padding-right:30px !important; }
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg .trexdi-card h3{ font-size:18px !important; font-weight:800 !important; color:#FAFAFA !important; }
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg .trexdi-card h3 + p{ font-size:12.5px !important; color:#A3A3A3 !important; }
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg .trexdi-card label{ font-size:12px !important; font-weight:600 !important; color:#D4D4D4 !important; }
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg .trexdi-card input{
  background:#1D1D1D !important; border-color:#2A2A2A !important; color:#FAFAFA !important;
  border-radius:9px !important; font-size:13.5px !important; padding:10px 13px !important;
}
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg .trexdi-card input::placeholder{ color:#6F6F6F !important; }
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg .trexdi-card input:focus{ border-color:#FACC15 !important; box-shadow:none !important; }
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg .trexdi-card button[type="submit"]{
  border-radius:9px !important; font-size:14px !important; font-weight:700 !important;
  padding:13px !important;
}

/* El autorrelleno de Chrome pinta el campo de azul claro y rompe la tarjeta
   oscura. Esto solo cambia el color de fondo y del texto: no lee, no guarda
   y no toca ningún dato del formulario. */
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg .trexdi-card input:-webkit-autofill,
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg .trexdi-card input:-webkit-autofill:hover,
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg .trexdi-card input:-webkit-autofill:focus{
  -webkit-text-fill-color:#FAFAFA !important;
  -webkit-box-shadow:0 0 0 1000px #1D1D1D inset !important;
  caret-color:#FAFAFA;
}

/* Pie de página, como en el mockup. */
.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg > .w-full.max-w-md::after{
  content:"© 2026 TREXDI · Todos los derechos reservados";
  display:block; text-align:center; margin-top:20px;
  font-size:11.5px; font-weight:600; color:rgba(0,0,0,.55);
}


/* --- 8. Formato de tarjetas y cabeceras, como en el mockup ---------------
   Esto es lo que faltaba de verdad: hasta ahora se habían corregido fallos
   puntuales, pero las cajas seguían con el formato de origen — etiquetas en
   14 px sin versalitas, cifras pequeñas, esquinas de 8 px y, sobre todo,
   los iconos sin su caja de color.                                        */

/* Tarjetas de indicadores del dashboard. */
[class*="lg:grid-cols-4"] > .trexdi-card{ border-radius:18px !important; background:#151515 !important; border-color:#2A2A2A !important; }
[class*="lg:grid-cols-4"] > .trexdi-card > div:first-child{ padding:20px 22px 0 !important; align-items:center !important; }
[class*="lg:grid-cols-4"] > .trexdi-card > div:last-child{ padding:0 22px 20px !important; }
[class*="lg:grid-cols-4"] > .trexdi-card h3{ font-size:11.5px !important; font-weight:700 !important; text-transform:uppercase !important;
         letter-spacing:.06em !important; color:#A3A3A3 !important; }
[class*="lg:grid-cols-4"] > .trexdi-card > div:last-child > div:first-child{
  font-size:32px !important; font-weight:800 !important; letter-spacing:-.03em !important;
  line-height:1 !important; font-variant-numeric:tabular-nums; margin-top:13px !important; }
[class*="lg:grid-cols-4"] > .trexdi-card > div:last-child > p{ font-size:12px !important; color:#6F6F6F !important; margin-top:7px !important; }

/* La caja de color del icono. El SVG se convierte en la caja: el relleno
   deja el dibujo en 16 px dentro de un cuadro de 38 px. Los iconos usan
   stroke="currentColor", así que basta con fijar 'color'.                 */
[class*="lg:grid-cols-4"] > .trexdi-card > div:first-child > svg{
  width:38px !important; height:38px !important; padding:11px !important;
  border-radius:9px !important; box-sizing:border-box !important; overflow:visible;
}
[class*="lg:grid-cols-4"] > .trexdi-card:nth-child(1) > div:first-child > svg{ background:rgba(250,204,21,.10); color:#FACC15 !important; }
[class*="lg:grid-cols-4"] > .trexdi-card:nth-child(2) > div:first-child > svg{ background:rgba(59,130,246,.12); color:#3B82F6 !important; }
[class*="lg:grid-cols-4"] > .trexdi-card:nth-child(3) > div:first-child > svg{ background:rgba(34,197,94,.12); color:#22C55E !important; }
[class*="lg:grid-cols-4"] > .trexdi-card:nth-child(4) > div:first-child > svg{ background:rgba(107,114,128,.16); color:#9CA3AF !important; }

/* Cabeceras de panel: título más contenido y el icono en su caja ámbar.
   Se excluye la pantalla de acceso, que tiene su propio radio de 22 px.   */
body:not(:has(.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg)) .trexdi-card{ border-radius:18px !important; }
body:not(:has(.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg)) .trexdi-card h3.text-2xl{ font-size:15.5px !important; font-weight:700 !important;
  letter-spacing:-.01em !important; gap:11px !important; }
body:not(:has(.min-h-screen.flex.items-center.justify-center.p-4.trexdi-bg)) .trexdi-card h3.text-2xl > svg{
  width:32px !important; height:32px !important; padding:8px !important;
  border-radius:9px !important; box-sizing:border-box !important;
  background:rgba(250,204,21,.10) !important; color:#FACC15 !important;
  margin-right:0 !important; flex-shrink:0;
}


/* Los iconos de la lista de actividad, con la misma caja ámbar. */
.trexdi-card:has(h3.text-2xl) > div:last-child .flex-shrink-0 > svg{
  width:32px !important; height:32px !important; padding:8px !important;
  border-radius:9px !important; box-sizing:border-box !important;
  background:rgba(250,204,21,.10) !important; color:#FACC15 !important;
}

/* === v13 : tarjetas KPI del dashboard en TEMA CLARO ===
   Corrige una regla propia sin guarda de tema que dejaba las cuatro
   tarjetas en negro y sus cifras en azul oscuro: contraste 1.02:1. */
:root[data-theme="light"] [class*="lg:grid-cols-4"] > .trexdi-card{
  background:#ffffff !important;
  border-color:rgba(15,23,42,.10) !important;
}
:root[data-theme="light"] [class*="lg:grid-cols-4"] > .trexdi-card .text-2xl{ color:#0f172a !important; }
:root[data-theme="light"] [class*="lg:grid-cols-4"] > .trexdi-card .tracking-tight{ color:#475569 !important; }
:root[data-theme="light"] [class*="lg:grid-cols-4"] > .trexdi-card .text-xs{ color:#64748b !important; }

/* === v14 : iniciales del responsable en eventos del calendario (TEMA OSCURO) ===
   La regla v8 oscurecia todo .rounded-full dentro de .rbc-event; esa
   insignia tiene fondo translucido y quedaba ilegible. */
[data-theme="dark"] .rbc-event .rounded-full[class*="bg-white/"]{ color:#ffffff !important; }
/* ---- v15 (16/09/2026) -------------------------------------------------
   Los amarillos y los avisos que inyectamos estaban pensados sobre tarjeta
   oscura. En tema claro la tarjeta es blanca y el amarillo #facc15 da 1,53:1,
   por debajo de cualquier umbral legible. Se bajan a los tonos 700, que sobre
   blanco dan 4,9:1 (ámbar), 6,5:1 (rojo) y 5,0:1 (verde). En oscuro no cambia
   nada: estas reglas solo aplican con data-theme="light".
   ---------------------------------------------------------------------- */
:root[data-theme="light"] .tx-cliente,
:root[data-theme="light"] .tx-asig-nota,
:root[data-theme="light"] .tx-asig-filtro button{ color:#a16207 !important; }

:root[data-theme="light"] .tx-asig-aviso.err,
:root[data-theme="light"] .tx-asig-fallo{ color:#b91c1c !important; }
:root[data-theme="light"] .tx-asig-fallo{ border-left-color:#b91c1c !important; }

:root[data-theme="light"] .tx-asig-aviso.ok{ color:#15803d !important; }
/* ---- v16 (30/09/2026) · barra lateral amarilla ------------------------
   Pedido: barra amarilla, textos negros, rollover blanco.

   Clases reales del menú, sacadas de Layout-*.js del paquete compilado:
     activo        trexdi-yellow-bg text-black hover:bg-yellow-400
     normal        w-full justify-start text-white hover:bg-gray-800
     cerrar sesión text-red-400 hover:bg-red-900/20 hover:text-red-300
     logotipo      trexdi-logo-plate

   Contrastes sobre el amarillo #facc15:
     negro #111 ............ 12,3:1
     etiquetas al 70 % ......  7,0:1
     blanco sobre píldora negra (activo) .. 18:1
     rojo #b91c1c sobre blanco (cerrar sesión, rollover) .. 6,5:1

   El ítem activo hoy se pinta amarillo; sobre una barra amarilla se
   perdería, así que se invierte: píldora negra con texto blanco. El
   logotipo está diseñado para fondo oscuro: se le deja una placa negra.
   Aplica en los dos temas: la barra siempre fue oscura en ambos.
   ---------------------------------------------------------------------- */

/* la barra */
.trexdi-sidebar{
  background:#facc15 !important;
  border-right:1px solid #eab308 !important;
}
.trexdi-sidebar .border-gray-800,
.trexdi-sidebar .border-t,
.trexdi-sidebar .border-b{ border-color:#e3b80f !important; }

/* logotipo: placa negra para que siga leyéndose */
.trexdi-sidebar .trexdi-logo-plate{
  background:#111111 !important;
  border-radius:8px;
  padding:6px 14px;
}

/* textos: todo negro; las etiquetas de sección y el rol, un poco apagados */
.trexdi-sidebar,
.trexdi-sidebar .text-white,
.trexdi-sidebar .text-gray-300,
.trexdi-sidebar .text-gray-400,
.trexdi-sidebar .text-gray-500{ color:#111111 !important; }
.trexdi-sidebar .text-gray-400,
.trexdi-sidebar .text-gray-500{ opacity:.7; }

/* avatar: círculo oscuro con la inicial en blanco, como hasta ahora */
.trexdi-sidebar .rounded-full{ background:#111111 !important; color:#ffffff !important; }

/* ítems del menú */
.trexdi-sidebar nav a,
.trexdi-sidebar nav button{ color:#111111 !important; }
.trexdi-sidebar nav a:hover,
.trexdi-sidebar nav button:hover{ background:#ffffff !important; color:#111111 !important; }

/* ítem activo: píldora negra, texto blanco, icono amarillo */
.trexdi-sidebar nav .trexdi-yellow-bg,
.trexdi-sidebar nav .trexdi-yellow-bg:hover{
  background:#111111 !important;
  color:#ffffff !important;
}
.trexdi-sidebar nav .trexdi-yellow-bg svg{ color:#facc15 !important; }

/* cerrar sesión: negro en reposo; al pasar, blanco con el rojo de aviso */
.trexdi-sidebar .text-red-400{ color:#111111 !important; }
.trexdi-sidebar .text-red-400:hover{ background:#ffffff !important; color:#b91c1c !important; }