/* ═══════════════════════════════════════════════════════════════
   Misael Kids — Temas
   ───────────────────────────────────────────────────────────────
   Cada tema es un bloque  :root[data-tema="id"] { ... }  que solo
   redefine variables de variables.css. El tema por defecto
   ("jardin", el look original) no necesita bloque.

   Se activa con  <html data-tema="id">  (lo hace js/tema.js).

   Para agregar un tema nuevo:
     1. Copia un bloque de abajo y cambia el id y los valores.
     2. Registra el id en js/tema.js (lista TEMAS).

   Variables que conviene redefinir:
     · Primario ....... --turquesa, -d (texto/acentos), -l (tinte), -xl,
                        --primario-rgb (sombras con transparencia) y
                        --primario-2 (2.º color de los degradados)
     · Acento ......... --violeta, -d, -l
     · Fondos ......... --fondo-panel, --fondo-grad (login/portal)
     · Banner ......... --grad-hero (cabecera dashboard/portal)
     · Forma .......... --radio-*, --sombra-*
     · Tipografía ..... --font-display, --font-body
     · Decoración ..... --deco-header (emojis del portal)
═══════════════════════════════════════════════════════════════ */

:root { color-scheme: var(--color-scheme); }


/* ═══ 🌊 OCÉANO ═══════════════════════════════════════════════ */
:root[data-tema="oceano"] {
  --turquesa:    #0EA5E9;
  --turquesa-d:  #0369A1;
  --turquesa-l:  #E0F2FE;
  --turquesa-xl: #F0F9FF;
  --primario-rgb: 14, 165, 233;
  --primario-2:  #22D3EE;

  --violeta:     #6366F1;
  --violeta-d:   #4338CA;
  --violeta-l:   #E0E7FF;

  --fondo-panel: linear-gradient(160deg, #F0F9FF 0%, #E3F2FB 100%);
  --fondo-grad:  linear-gradient(135deg, #E0F2FE 0%, #F0F9FF 40%, #ECFEFF 70%, #DBEAFE 100%);
  --grad-hero:   linear-gradient(135deg, #0369A1, #0E7490);
  --deco-header: '🐠🌊🐚';
}


/* ═══ 🌅 DULCE ATARDECER ══════════════════════════════════════ */
:root[data-tema="atardecer"] {
  --turquesa:    #D946EF;
  --turquesa-d:  #A21CAF;
  --turquesa-l:  #FAE8FF;
  --turquesa-xl: #FDF4FF;
  --primario-rgb: 217, 70, 239;
  --primario-2:  #FB923C;

  --fondo-panel: linear-gradient(135deg, #FFF7ED 0%, #FDF4FF 100%);
  --fondo-grad:  linear-gradient(135deg, #FFEDD5 0%, #FFE4F1 45%, #FAE8FF 75%, #FEF3C7 100%);
  --grad-hero:   linear-gradient(135deg, #C026D3, #EA580C);
  --deco-header: '🌅🦄🎈';

  /* más redondeado y "blandito" */
  --radio-md: 1rem;
  --radio-lg: 1.25rem;
  --radio-xl: 2rem;
}


/* ═══ MODO OSCURO (compartido por los temas oscuros) ═════════════
   tema.js pone data-modo="oscuro" en <html> cuando el tema es oscuro.
   Acá vive lo que NO depende del color de marca: estados, sombras y
   calendarios. Cada tema oscuro define solo su paleta, neutros y fondos. */
:root[data-modo="oscuro"] {
  --color-scheme: dark;

  /* estados: se aclaran para leerse sobre fondo oscuro */
  --verde:       #34D399;  --verde-d:    #6EE7B7;  --verde-l:    #0F3A2E;
  --coral:       #FB7185;  --coral-d:    #FDA4AF;  --coral-l:    #4A1D2C;  --coral-xl: #3A1824;
  --amarillo:    #FACC15;  --amarillo-d: #FDE047;  --amarillo-l: #42370C;  --amarillo-txt: #FDE68A;
  --naranja:     #FB923C;                          --naranja-l:  #4A2A12;

  /* colores que antes estaban fijos en las páginas */
  --txt-rojo:    #FCA5A5;   --txt-verde:   #86EFAC;   --txt-azul:    #93C5FD;   --txt-naranja: #FDBA74;
  --fila-deuda-bg: #3A1824; --ok-bg-suave: #0F3A2E;
  --amarillo-l2: #4A3E10;   --amarillo-l3: #5A4A10;   --amarillo-xl: #3A300A;
  --coral-xl2:   #3F1A28;
  --texto-sobre-amarillo: #1E1E1E;   /* el amarillo sigue siendo claro: su texto debe ser oscuro */

  --sombra-sm: 0 1px 3px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
  --sombra-md: 0 4px 8px rgba(0,0,0,.40), 0 2px 4px rgba(0,0,0,.30);
  --sombra-lg: 0 10px 18px rgba(0,0,0,.45), 0 4px 6px rgba(0,0,0,.30);
  --sombra-xl: 0 20px 28px rgba(0,0,0,.50), 0 10px 10px rgba(0,0,0,.30);
}
/* logo del login: su JPG tiene fondo blanco y usa mix-blend-mode:multiply para fundirse
   con una tarjeta clara; sobre una tarjeta oscura apagaría los colores → placa blanca */
:root[data-modo="oscuro"] .logo-img {
  mix-blend-mode: normal; background: #fff; border-radius: 1.5rem;
  padding: .6rem; box-sizing: border-box;
}
/* calendarios (flatpickr) en oscuro */
:root[data-modo="oscuro"] .flatpickr-calendar,
:root[data-modo="oscuro"] .flatpickr-months .flatpickr-month,
:root[data-modo="oscuro"] .flatpickr-monthSelect-month { background: var(--blanco); color: var(--texto); }
:root[data-modo="oscuro"] .flatpickr-calendar { border: 1px solid var(--gris-200); }
:root[data-modo="oscuro"] .flatpickr-current-month .flatpickr-monthDropdown-months,
:root[data-modo="oscuro"] .flatpickr-current-month input.cur-year,
:root[data-modo="oscuro"] .flatpickr-day,
:root[data-modo="oscuro"] .flatpickr-monthSelect-month { color: var(--texto); }
:root[data-modo="oscuro"] .flatpickr-day.prevMonthDay,
:root[data-modo="oscuro"] .flatpickr-day.nextMonthDay,
:root[data-modo="oscuro"] .flatpickr-day.flatpickr-disabled { color: var(--gris-300); }
:root[data-modo="oscuro"] span.flatpickr-weekday { color: var(--texto-suave); background: transparent; }
:root[data-modo="oscuro"] .flatpickr-months .flatpickr-prev-month svg,
:root[data-modo="oscuro"] .flatpickr-months .flatpickr-next-month svg { fill: var(--texto); }
:root[data-modo="oscuro"] .flatpickr-day.selected,
:root[data-modo="oscuro"] .flatpickr-day.selected:hover { color: #fff; }


/* ═══ 🚀 ESPACIO (oscuro) ═════════════════════════════════════ */
:root[data-tema="espacio"] {
  /* primario violeta · acento cian */
  --turquesa:    #8B5CF6;
  --turquesa-d:  #A78BFA;
  --turquesa-l:  #2B2158;
  --turquesa-xl: #241C4D;
  --primario-rgb: 139, 92, 246;
  --primario-2:  #22D3EE;
  --violeta:     #22D3EE;
  --violeta-d:   #67E8F9;
  --violeta-l:   #10394A;
  --violeta-xl:  #0C2A38;

  /* superficies y texto: escala de grises invertida (azul noche) */
  --tinta:       #E9E9FA;   --tinta-inv:   #1A1A3A;
  --texto-sobre-amarillo: #1A1A3A;
  --blanco:   #1A1A3A;
  --gris-50:  #12122B;
  --gris-100: #20204A;
  --gris-200: #2E2E5E;
  --gris-300: #44447A;
  --gris-400: #8B8BBA;
  --gris-500: #A3A3CE;
  --gris-600: #C3C3E2;
  --gris-700: #DADAF0;
  --gris-800: #ECECFA;
  --texto:       #E9E9FA;
  --texto-suave: #A3A3CE;

  --fondo-grad:     linear-gradient(135deg, #0B0B24 0%, #1B1245 40%, #0F2A4A 75%, #1A0B2E 100%);
  --grad-hero:      linear-gradient(135deg, #6D28D9, #0E7490);
  --login-card-bg:  rgba(26, 26, 58, .92);
  --deco-header:    '🚀🪐⭐';

  --font-display: 'Righteous', 'Fredoka One', cursive;
}
/* estrellitas de fondo en el panel */
:root[data-tema="espacio"] body {
  background-image:
    radial-gradient(1px   1px   at  20px  30px, rgba(255,255,255,.55), transparent),
    radial-gradient(1px   1px   at 120px  80px, rgba(255,255,255,.40), transparent),
    radial-gradient(1.5px 1.5px at 200px 150px, rgba(255,255,255,.60), transparent),
    radial-gradient(1px   1px   at  70px 170px, rgba(167,139,250,.60), transparent);
  background-size: 240px 200px;
}


/* ═══ 🌙 NOCHE SUAVE (oscuro, sobrio) ═════════════════════════ */
:root[data-tema="noche"] {
  /* primario verde-azulado (el turquesa de la marca, en versión noche) · acento índigo */
  --turquesa:    #0F766E;
  --turquesa-d:  #5EEAD4;
  --turquesa-l:  #12373A;
  --turquesa-xl: #0F2D31;
  --primario-rgb: 15, 118, 110;
  --primario-2:  #0E7490;
  --violeta:     #4F46E5;
  --violeta-d:   #A5B4FC;
  --violeta-l:   #25295A;
  --violeta-xl:  #1C1F47;
  --coral:       #E11D48;   /* rellenos de botón: texto blanco legible */
  --naranja:     #C2410C;

  /* superficies y texto: grises pizarra, sin tinte de color */
  --tinta:       #E2E8F0;   --tinta-inv:   #1E293B;
  --blanco:   #1E293B;
  --gris-50:  #0F172A;
  --gris-100: #263449;
  --gris-200: #334155;
  --gris-300: #475569;
  --gris-400: #94A3B8;
  --gris-500: #A8B5C9;
  --gris-600: #CBD5E1;
  --gris-700: #E2E8F0;
  --gris-800: #F1F5F9;
  --texto:       #E2E8F0;
  --texto-suave: #94A3B8;

  --fondo-grad:     linear-gradient(135deg, #0B1220 0%, #14213A 45%, #0F1A2E 75%, #0B1220 100%);
  --grad-hero:      linear-gradient(135deg, #0F766E, #155E75);
  --login-card-bg:  rgba(30, 41, 59, .92);
  --deco-header:    '🌙⭐☁️';

  /* formas tranquilas: radios medios, sin brillos */
  --radio-lg: .875rem;
  --radio-xl: 1.25rem;
}
/* sin burbujas ni estrellitas: es el tema para trabajar con poca luz */
:root[data-tema="noche"] .burbuja,
:root[data-tema="noche"] .estrellita,
:root[data-tema="noche"] .bg-burbujas::before,
:root[data-tema="noche"] .bg-burbujas::after { display: none; }


/* ═══ 📒 PAPEL (sobrio) ═══════════════════════════════════════ */
:root[data-tema="papel"] {
  --turquesa:    #2563EB;
  --turquesa-d:  #1D4ED8;
  --turquesa-l:  #DBEAFE;
  --turquesa-xl: #EFF6FF;
  --primario-rgb: 37, 99, 235;
  --primario-2:  #3B82F6;

  --fondo-panel: #F5F4F0;
  --fondo-grad:  linear-gradient(#F5F4F0, #F5F4F0);
  --grad-hero:   linear-gradient(135deg, #1E40AF, #2563EB);
  --deco-header: '';

  /* formas más serias: radios chicos y sombras casi planas */
  --radio-sm: .25rem;
  --radio-md: .375rem;
  --radio-lg: .5rem;
  --radio-xl: .75rem;
  --sombra-sm:    0 1px 2px rgba(0,0,0,.05);
  --sombra-md:    0 1px 3px rgba(0,0,0,.08);
  --sombra-lg:    0 2px 6px rgba(0,0,0,.08);
  --sombra-xl:    0 6px 16px rgba(0,0,0,.10);
  --sombra-color: 0 1px 2px rgba(0,0,0,.10);

  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
}
/* sin adornos: ni burbujas, ni estrellitas, ni líneas punteadas */
:root[data-tema="papel"] .burbuja,
:root[data-tema="papel"] .estrellita,
:root[data-tema="papel"] .bg-burbujas::before,
:root[data-tema="papel"] .bg-burbujas::after { display: none; }
:root[data-tema="papel"] .sidebar-logo,
:root[data-tema="papel"] .card-header,
:root[data-tema="papel"] .tabla-apilada tbody td { border-bottom-style: solid; }
:root[data-tema="papel"] .sidebar-footer,
:root[data-tema="papel"] .tn-datos,
:root[data-tema="papel"] .tn-acciones   { border-top-style: solid; }


/* ═══ 🌳 SELVA ════════════════════════════════════════════════ */
:root[data-tema="selva"] {
  /* verde musgo → lima · acento agua de río */
  --turquesa:    #4D7C0F;
  --turquesa-d:  #3F6212;
  --turquesa-l:  #ECFCCB;
  --turquesa-xl: #F7FEE7;
  --primario-rgb: 77, 124, 15;
  --primario-2:  #65A30D;
  --violeta:     #0E7490;
  --violeta-d:   #155E75;
  --violeta-l:   #CFFAFE;
  --violeta-xl:  #E3F8FB;

  --fondo-panel: linear-gradient(160deg, #F7FBEF 0%, #EAF3DC 100%);
  --fondo-grad:  linear-gradient(135deg, #ECFCCB 0%, #F7FEE7 40%, #FEF9C3 70%, #DCFCE7 100%);
  --grad-hero:   linear-gradient(135deg, #3F6212, #0F766E);
  --deco-header: '🦜🌴🐒';

  --radio-lg: 1.1rem;
  --radio-xl: 1.75rem;
}


/* ═══ 🦙 ALTIPLANO ════════════════════════════════════════════
   Inspirado en los colores de los textiles andinos (tierra, ocre y
   azul de lago). Usa bandas de color, no símbolos patrios ni sagrados. */
:root[data-tema="altiplano"] {
  --turquesa:    #B45309;
  --turquesa-d:  #9A3412;
  --turquesa-l:  #F5E6D3;
  --turquesa-xl: #FBF3E8;
  --primario-rgb: 180, 83, 9;
  --primario-2:  #D97706;
  --violeta:     #0369A1;
  --violeta-d:   #075985;
  --violeta-l:   #E0F2FE;
  --violeta-xl:  #E6F4FB;

  --fondo-panel: linear-gradient(160deg, #FBF5EA 0%, #F3E8D6 100%);
  --fondo-grad:  linear-gradient(135deg, #FDECD2 0%, #FBF5EA 40%, #E0F2FE 75%, #F5E6D3 100%);
  --grad-hero:   linear-gradient(135deg, #9A3412, #B45309 55%, #0369A1);
  --deco-header: '🦙⛰️🌄';

  --radio-md: .5rem;
  --radio-lg: .875rem;
  --radio-xl: 1.25rem;
}
/* banda de color tipo aguayo bajo la barra superior */
:root[data-tema="altiplano"] .topbar {
  border-bottom: 5px solid transparent;
  border-image: repeating-linear-gradient(90deg,
    #B45309 0 28px, #0369A1 28px 40px, #F59E0B 40px 68px, #7C2D12 68px 80px, #0E7490 80px 92px) 1;
}


/* ═══ 👁️ ALTO CONTRASTE (accesibilidad) ═══════════════════════
   Texto negro sobre blanco, bordes negros marcados, letra más grande,
   tipografía de alta legibilidad y sin animaciones ni adornos.
   Todos los pares texto/fondo superan 7:1 (nivel AAA). */
:root[data-tema="altocontraste"] {
  --turquesa:    #0B3BCC;
  --turquesa-d:  #00228F;
  --turquesa-l:  #DCE6FF;
  --turquesa-xl: #EEF3FF;
  --primario-rgb: 11, 59, 204;
  --primario-2:  #0B3BCC;
  --violeta:     #5B1FA8;
  --violeta-d:   #3B0D7A;
  --violeta-l:   #EBDDFF;
  --violeta-xl:  #F3EAFF;

  /* estados: oscuros para el texto, tintes claros para el fondo */
  --verde:       #0A7A2F;  --verde-d:    #064E1C;  --verde-l:    #D7F5E1;
  --coral:       #A80F16;  --coral-d:    #8A0A10;  --coral-l:    #FFE0E0;  --coral-xl: #FFF0F0;
  --amarillo:    #FFD000;  --amarillo-d: #5C4700;  --amarillo-l: #FFF0A6;  --amarillo-txt: #4A3800;
  --naranja:     #9A3412;  --naranja-l:   #FFE2C7;
  --txt-rojo:    #9B0F14;  --txt-verde:  #0A5C24;  --txt-azul:   #0B2FA0;  --txt-naranja: #6B2410;
  --amarillo-l2: #FFE97A;  --amarillo-l3: #FFD84D;  --amarillo-xl: #FFF5C2;

  /* texto: negro y grises muy oscuros */
  --texto:       #000000;
  --texto-suave: #262626;
  --gris-400:    #404040;
  --gris-500:    #333333;
  --gris-600:    #1F1F1F;
  --gris-700:    #111111;
  --gris-800:    #000000;

  --fondo-panel: #F2F2F2;
  --fondo-grad:  linear-gradient(#FFFFFF, #F2F2F2);
  --grad-hero:   linear-gradient(135deg, #00228F, #0B3BCC);
  --login-card-bg: #FFFFFF;
  --deco-header: '';

  /* sin sombras: los bordes definen las formas */
  --sombra-sm: 0 0 0 0 transparent;  --sombra-md: 0 0 0 0 transparent;
  --sombra-lg: 0 0 0 0 transparent;  --sombra-xl: 0 0 0 0 transparent;
  --sombra-color: 0 0 0 0 transparent;

  --font-body:    'Atkinson Hyperlegible', 'Nunito', system-ui, sans-serif;
  --font-display: 'Atkinson Hyperlegible', 'Nunito', system-ui, sans-serif;
}
:root[data-tema="altocontraste"] { font-size: 108%; }   /* base: 92% → ~17px */
:root[data-tema="altocontraste"] body { line-height: 1.7; }

/* bordes negros y marcados */
:root[data-tema="altocontraste"] .card,
:root[data-tema="altocontraste"] .stat-card,
:root[data-tema="altocontraste"] .tarjeta-nino,
:root[data-tema="altocontraste"] .tabla-wrap,
:root[data-tema="altocontraste"] .modal,
:root[data-tema="altocontraste"] .usuario-card { border: 2px solid #000; }
:root[data-tema="altocontraste"] .sidebar { border-right: 3px solid #000; }
:root[data-tema="altocontraste"] .topbar  { border-bottom: 3px solid #000; }
:root[data-tema="altocontraste"] .form-input,
:root[data-tema="altocontraste"] .form-select,
:root[data-tema="altocontraste"] .form-textarea { border: 2px solid #000; }
:root[data-tema="altocontraste"] .btn { border: 2px solid #000; }
:root[data-tema="altocontraste"] .chip,
:root[data-tema="altocontraste"] .alerta-info,
:root[data-tema="altocontraste"] .alerta-exito,
:root[data-tema="altocontraste"] .alerta-warn,
:root[data-tema="altocontraste"] .alerta-peligro { border: 2px solid currentColor; }
:root[data-tema="altocontraste"] .nav-item.activo { outline: 3px solid #000; outline-offset: -3px; }

/* títulos en negrita (Atkinson solo se pide en 400 y 700) y enlaces subrayados */
:root[data-tema="altocontraste"] .sidebar-logo .logo-texto h2,
:root[data-tema="altocontraste"] .topbar-titulo,
:root[data-tema="altocontraste"] .card-titulo,
:root[data-tema="altocontraste"] .stat-info .valor,
:root[data-tema="altocontraste"] .modal-titulo,
:root[data-tema="altocontraste"] .tn-nombre,
:root[data-tema="altocontraste"] .tn-monto,
:root[data-tema="altocontraste"] h1,
:root[data-tema="altocontraste"] h2,
:root[data-tema="altocontraste"] h3 { font-weight: 700; }
:root[data-tema="altocontraste"] a:not(.btn):not(.nav-item) { text-decoration: underline; }

/* foco muy visible para quien navega con teclado */
:root[data-tema="altocontraste"] :focus-visible { outline: 4px solid #FF8C00 !important; outline-offset: 2px !important; }

/* sin adornos ni movimiento */
:root[data-tema="altocontraste"] .burbuja,
:root[data-tema="altocontraste"] .estrellita,
:root[data-tema="altocontraste"] .bg-burbujas::before,
:root[data-tema="altocontraste"] .bg-burbujas::after { display: none; }
:root[data-tema="altocontraste"] *,
:root[data-tema="altocontraste"] *::before,
:root[data-tema="altocontraste"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }

/* el propio selector también en alto contraste */
:root[data-tema="altocontraste"] .tema-btn,
:root[data-tema="altocontraste"] .tema-menu { border: 2px solid #000; }


/* ═══ Decoración del portal controlada por tema ═══════════════ */
.portal-header::before { content: var(--deco-header, '🌸🌟🦋'); }


/* ═══════════════════════════════════════════════════════════════
   SELECTOR DE TEMA  (lo construye Tema.montar() en js/tema.js)
   Es autosuficiente: funciona también en login, que no carga base.css
═══════════════════════════════════════════════════════════════ */
.tema-selector { position: relative; font-family: var(--font-body); }

.tema-btn {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .45rem .65rem; margin-bottom: var(--gap-sm);
  border: 1.5px solid var(--gris-200); border-radius: var(--radio-lg);
  background: var(--blanco); color: var(--texto);
  font: 700 var(--text-sm) var(--font-body);
  cursor: pointer; text-align: left;
  transition: border-color var(--trans-fast), background var(--trans-fast);
}
.tema-btn:hover { border-color: var(--turquesa); }
.tema-btn:focus-visible, .tema-op:focus-visible { outline: 3px solid rgba(var(--primario-rgb), .45); outline-offset: 1px; }
.tema-btn .tema-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tema-btn .tema-flecha { font-size: .65rem; opacity: .6; }

.tema-puntos { display: inline-flex; flex-shrink: 0; }
/* en el sidebar no hay ancho: el nombre ya dice el tema y las muestras están en el menú */
.tema-selector:not([data-variante]) .tema-puntos { display: none; }
.tema-puntos i {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--blanco); margin-left: -4px;
}
.tema-puntos i:first-child { margin-left: 0; }

.tema-menu {
  display: none; position: absolute; z-index: 10000;
  bottom: calc(100% + 4px); left: 0; min-width: 232px;
  padding: .4rem; background: var(--blanco);
  border: 1.5px solid var(--gris-200); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-xl);
  max-height: min(82vh, 640px); overflow-y: auto;
}
.tema-selector.abierto .tema-menu { display: block; animation: temaPop .14s ease-out; }
@keyframes temaPop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.tema-menu-titulo + .tema-op, .tema-op + .tema-menu-titulo { margin-top: 0; }
.tema-menu-titulo:not(:first-child) { margin-top: .35rem; border-top: 1px solid var(--gris-100); padding-top: .55rem; }
.tema-menu-titulo {
  padding: .35rem .6rem .25rem; font-size: var(--text-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--gris-400);
}
.tema-op {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  padding: .45rem .6rem; border: none; border-radius: var(--radio-md);
  background: none; color: var(--texto); cursor: pointer; text-align: left;
  font: 700 var(--text-sm) var(--font-body);
}
.tema-op:hover { background: var(--gris-100); }
.tema-op[aria-checked="true"] { background: var(--turquesa-l); color: var(--turquesa-d); }
.tema-op .tema-muestra {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
  border: 2px solid var(--blanco); box-shadow: 0 0 0 1.5px var(--gris-200);
}
.tema-op .tema-txt { flex: 1; min-width: 0; line-height: 1.2; }
.tema-op .tema-txt small { display: block; font-weight: 600; font-size: var(--text-xs); color: var(--texto-suave); }
.tema-op .tema-check { visibility: hidden; font-weight: 900; }
.tema-op[aria-checked="true"] .tema-check { visibility: visible; }

/* Variante flotante (login): esquina inferior derecha */
.tema-selector[data-variante="flotante"] { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; }
.tema-selector[data-variante="flotante"] .tema-btn {
  width: auto; margin: 0; padding: .55rem .85rem; box-shadow: var(--sombra-md);
  border-radius: var(--radio-full);
}
.tema-selector[data-variante="flotante"] .tema-menu { left: auto; right: 0; }

/* Variante sobre color (portal): botón translúcido, menú hacia abajo */
.tema-selector[data-variante="sobre-color"] .tema-btn {
  width: auto; margin: 0; background: rgba(255,255,255,.2);
  color: #fff; border: 2px solid rgba(255,255,255,.3);
}
.tema-selector[data-variante="sobre-color"] .tema-btn:hover { background: rgba(255,255,255,.3); }
.tema-selector[data-variante="sobre-color"] .tema-puntos i { border-color: rgba(255,255,255,.7); }
.tema-selector[data-variante="sobre-color"] .tema-menu { bottom: auto; top: calc(100% + 6px); left: auto; right: 0; }

/* en el encabezado del portal el botón es compacto: solo 🎨 + muestras */
.tema-selector[data-variante="sobre-color"] .tema-nombre { display: none; }
@media (prefers-reduced-motion: reduce) {
  .tema-selector.abierto .tema-menu { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════
   ANIMACIONES — ambiente propio de cada tema
   ───────────────────────────────────────────────────────────────
   El movimiento común (entradas, botones, modales) está en base.css.
   Acá vive lo que cambia de un tema a otro: una capa decorativa
   DETRÁS del contenido, hecha con los 4 pseudo-elementos fijos de
   <html> y <body> (::before / ::after). No hay HTML extra, no recibe
   clics y no pasa por encima de tablas ni formularios.

   · Todo cuelga de  :not([data-anim="off"])  (interruptor en el selector).
   · Solo transform y opacity. Sin "reducir movimiento" del sistema
     no se pinta nada (ver el final de esta sección).
   · Para animar un tema nuevo: copiar un bloque, cambiar el id y los
     emojis/colores. Un tema sin bloque queda sin ambiente.
═══════════════════════════════════════════════════════════════ */

/* base común de las capas (sin "content" no se genera nada) */
:root::before, :root::after, body::before, body::after {
  position: fixed; pointer-events: none; z-index: -1;
  line-height: 1; will-change: transform, opacity;
}
/* el fondo animado del portal pasa detrás de las capas de ambiente */
.bg-burbujas { z-index: -2; }

/* pausa en segundo plano: si la pestaña no se ve, nada se mueve */
:root[data-oculto] *, :root[data-oculto] *::before, :root[data-oculto] *::after,
:root[data-oculto]::before, :root[data-oculto]::after { animation-play-state: paused !important; }

/* ── recorridos reutilizables ─────────────────────────────────── */
@keyframes mk-vuelo {            /* de izquierda a derecha, con vaivén (mariposas) */
  0%   { transform: translate3d(-8vw, 0, 0) rotate(8deg); }
  20%  { transform: translate3d(18vw, -5vh, 0) rotate(-6deg); }
  40%  { transform: translate3d(42vw, 3vh, 0) rotate(10deg); }
  60%  { transform: translate3d(66vw, -6vh, 0) rotate(-8deg); }
  80%  { transform: translate3d(90vw, 2vh, 0) rotate(6deg); }
  100% { transform: translate3d(112vw, -3vh, 0) rotate(0); }
}
@keyframes mk-nadar {            /* de izquierda a derecha, ondulando (peces) */
  0%   { transform: translate3d(-10vw, 0, 0); }
  25%  { transform: translate3d(22vw, -2vh, 0); }
  50%  { transform: translate3d(50vw, 1.5vh, 0); }
  75%  { transform: translate3d(78vw, -2vh, 0); }
  100% { transform: translate3d(112vw, 0, 0); }
}
@keyframes mk-caer {             /* pétalos: caen girando */
  0%   { transform: translate3d(0, -8vh, 0) rotate(0); opacity: 0; }
  8%   { opacity: .7; }
  50%  { transform: translate3d(-5vw, 50vh, 0) rotate(160deg); }
  92%  { opacity: .7; }
  100% { transform: translate3d(3vw, 112vh, 0) rotate(330deg); opacity: 0; }
}
@keyframes mk-globo {            /* suben con balanceo */
  0%   { transform: translate3d(0, 0, 0) rotate(-4deg); opacity: 0; }
  10%  { opacity: .85; }
  35%  { transform: translate3d(3vw, -40vh, 0) rotate(4deg); }
  65%  { transform: translate3d(-2vw, -80vh, 0) rotate(-4deg); }
  90%  { opacity: .85; }
  100% { transform: translate3d(2vw, -118vh, 0) rotate(3deg); opacity: 0; }
}
@keyframes mk-burbujas {         /* grupo de burbujas que sube y se desvanece */
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(1.5vw, -70vh, 0); opacity: 0; }
}
@keyframes mk-ola         { to   { transform: translate3d(-1200px, 0, 0); } }
@keyframes mk-ola-inversa { from { transform: translate3d(-1200px, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes mk-titilar     { from { opacity: .12; } to { opacity: 1; } }
@keyframes mk-pulso       { from { opacity: 0; } to { opacity: 1; } }
@keyframes mk-nube        { from { transform: translate3d(-15vw, 0, 0); } to { transform: translate3d(115vw, 0, 0); } }
@keyframes mk-hoja        { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }
@keyframes mk-hoja-b      { from { transform: scaleX(-1) rotate(-10deg); } to { transform: scaleX(-1) rotate(9deg); } }
@keyframes mk-luciernagas {      /* parpadean y derivan */
  0%   { opacity: .1; transform: translate3d(0, 0, 0); }
  30%  { opacity: 1; }
  60%  { opacity: .25; transform: translate3d(2vw, -3vh, 0); }
  100% { opacity: .9; transform: translate3d(-1.5vw, 2vh, 0); }
}
@keyframes mk-fugaz {            /* una estrella fugaz cada tanto (el resto del ciclo, quieta e invisible) */
  0%   { transform: translate3d(0, 0, 0) rotate(143deg); opacity: 0; }
  1%   { opacity: 1; }
  7%   { transform: translate3d(-55vw, 41vh, 0) rotate(143deg); opacity: 0; }
  100% { transform: translate3d(-55vw, 41vh, 0) rotate(143deg); opacity: 0; }
}
@keyframes mk-orbita {           /* elipse lenta: 8 puntos */
  0%     { transform: translate3d(0, 0, 0); }
  12.5%  { transform: translate3d(-2vw, 2.5vh, 0); }
  25%    { transform: translate3d(-7vw, 3.5vh, 0); }
  37.5%  { transform: translate3d(-12vw, 2.5vh, 0); }
  50%    { transform: translate3d(-14vw, 0, 0); }
  62.5%  { transform: translate3d(-12vw, -2.5vh, 0); }
  75%    { transform: translate3d(-7vw, -3.5vh, 0); }
  87.5%  { transform: translate3d(-2vw, -2.5vh, 0); }
  100%   { transform: translate3d(0, 0, 0); }
}
@keyframes mk-arcoiris {         /* se asoma desde abajo y se esconde */
  0%, 100% { transform: translate3d(0, 70%, 0); opacity: 0; }
  18%, 62% { transform: translate3d(0, 8%, 0); opacity: .7; }
  80%      { transform: translate3d(0, 70%, 0); opacity: 0; }
}
@keyframes mk-brillo {           /* destello que recorre la faja de aguayo */
  0%       { transform: translate3d(-30vw, 0, 0); }
  45%, 100%{ transform: translate3d(105vw, 0, 0); }
}
@keyframes mk-flotar-logo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }


/* ═══ 🌱 JARDÍN MÁGICO · mariposas y pétalos ══════════════════ */
:root[data-tema="jardin"]:not([data-anim="off"])::before {          /* mariposa */
  content: '🦋'; content: '🦋' / ''; top: 16vh; left: 0; font-size: 1.7rem; opacity: .55;
  animation: mk-vuelo 70s linear infinite;
}
:root[data-tema="jardin"]:not([data-anim="off"])::after {           /* mariposa (vuelve en sentido contrario) */
  content: '🦋'; content: '🦋' / ''; top: 64vh; left: 0; font-size: 1.3rem; opacity: .45;
  animation: mk-vuelo 95s linear -40s infinite reverse;
}
:root[data-tema="jardin"]:not([data-anim="off"]) body::before {     /* pétalo */
  content: '🌸'; content: '🌸' / ''; top: 0; left: 28%; font-size: 1.2rem;
  animation: mk-caer 38s linear infinite;
}
:root[data-tema="jardin"]:not([data-anim="off"]) body::after {      /* pétalo */
  content: '🌸'; content: '🌸' / ''; top: 0; left: 76%; font-size: .95rem;
  animation: mk-caer 52s linear -22s infinite;
}
:root[data-tema="jardin"]:not([data-anim="off"]) .sidebar-logo .logo-icon {   /* el 🌱 se mece */
  transform-origin: 50% 90%;
  animation: mk-aparecer .6s var(--ease-rebote, ease) .15s backwards, mk-mecer 4s ease-in-out .8s infinite;
}


/* ═══ 🐠 OCÉANO · olas, burbujas y un pez ═════════════════════ */
:root[data-tema="oceano"]:not([data-anim="off"]) body::before {     /* ola de atrás */
  content: ''; left: 0; bottom: 0; width: calc(100% + 1200px); height: 90px; opacity: .22;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath fill='%2338BDF8' d='M0 40Q300 0 600 40T1200 40V80H0Z'/%3E%3C/svg%3E") repeat-x;
  background-size: 1200px 100%;
  animation: mk-ola-inversa 26s linear infinite;
}
:root[data-tema="oceano"]:not([data-anim="off"]) body::after {      /* ola de adelante */
  content: ''; left: 0; bottom: 0; width: calc(100% + 1200px); height: 62px; opacity: .3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath fill='%230EA5E9' d='M0 40Q300 0 600 40T1200 40V80H0Z'/%3E%3C/svg%3E") repeat-x;
  background-size: 1200px 100%;
  animation: mk-ola 17s linear infinite;
}
:root[data-tema="oceano"]:not([data-anim="off"])::before {          /* burbujas que suben */
  content: ''; left: 8%; bottom: 8vh; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(186, 230, 253, .55);
  box-shadow: 14vw -10vh 0 1px rgba(186,230,253,.5),  31vw  4vh 0 3px rgba(186,230,253,.45),
              52vw -16vh 0 0   rgba(186,230,253,.55), 67vw  0   0 2px rgba(186,230,253,.45),
              84vw -7vh  0 1px rgba(186,230,253,.5);
  animation: mk-burbujas 15s ease-in infinite;
}
:root[data-tema="oceano"]:not([data-anim="off"])::after {           /* pez que cruza */
  content: '🐟'; content: '🐟' / ''; top: 46vh; left: 0; font-size: 1.5rem; opacity: .5;
  animation: mk-nadar 48s linear infinite;
}
:root[data-tema="oceano"]:not([data-anim="off"]) .sidebar-logo .logo-icon {
  animation: mk-aparecer .6s var(--ease-rebote, ease) .15s backwards, mk-flotar-logo 3.2s ease-in-out .8s infinite;
}


/* ═══ 🌅 DULCE ATARDECER · globos, degradado y arcoíris ═══════ */
:root[data-tema="atardecer"]:not([data-anim="off"]) body::before {  /* el degradado respira despacio */
  content: ''; inset: 0;
  background: linear-gradient(120deg, rgba(251,146,60,.22), rgba(217,70,239,.16) 50%, rgba(253,230,138,.24));
  animation: mk-pulso 13s ease-in-out infinite alternate;
}
:root[data-tema="atardecer"]:not([data-anim="off"]) body::after {   /* arcoíris que se asoma */
  content: '🌈'; content: '🌈' / ''; right: 3vw; bottom: 0; font-size: 5rem;
  animation: mk-arcoiris 30s ease-in-out infinite;
}
:root[data-tema="atardecer"]:not([data-anim="off"])::before {       /* globo */
  content: '🎈'; content: '🎈' / ''; left: 7%; bottom: 0; font-size: 2rem;
  animation: mk-globo 34s linear infinite;
}
:root[data-tema="atardecer"]:not([data-anim="off"])::after {        /* globo */
  content: '🎈'; content: '🎈' / ''; left: 90%; bottom: 0; font-size: 1.6rem;
  animation: mk-globo 46s linear -17s infinite;
}


/* ═══ 🌳 SELVA · hojas en las esquinas y luciérnagas ══════════ */
:root[data-tema="selva"]:not([data-anim="off"])::before {           /* hoja, esquina superior derecha */
  content: '🌿'; content: '🌿' / ''; top: -.5rem; right: 1rem; font-size: 3.4rem; opacity: .5;
  transform-origin: 85% 0; animation: mk-hoja 6s ease-in-out infinite alternate;
}
:root[data-tema="selva"]:not([data-anim="off"])::after {            /* hoja, esquina inferior derecha */
  content: '🍃'; content: '🍃' / ''; bottom: -.3rem; right: 2.2rem; font-size: 3rem; opacity: .45;
  transform-origin: 85% 100%; animation: mk-hoja-b 7s ease-in-out -3s infinite alternate;
}
:root[data-tema="selva"]:not([data-anim="off"]) body::before {      /* luciérnagas */
  content: ''; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #FACC15;
  box-shadow: 0 0 9px 3px rgba(250,204,21,.85),
              24vw 62vh 9px 3px rgba(250,204,21,.85), 41vw 18vh 9px 3px rgba(250,204,21,.85),
              63vw 74vh 9px 3px rgba(250,204,21,.85), 78vw 35vh 9px 3px rgba(250,204,21,.85),
              92vw 80vh 9px 3px rgba(250,204,21,.85), 12vw 88vh 9px 3px rgba(250,204,21,.85);
  transform: translate3d(8vw, 30vh, 0);
  animation: mk-luciernagas 9s ease-in-out infinite alternate;
}
:root[data-tema="selva"]:not([data-anim="off"]) body::after {       /* más luciérnagas, otro compás */
  content: ''; top: 0; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #BEF264;
  box-shadow: 0 0 8px 3px rgba(190,242,100,.85),
              18vw 40vh 8px 3px rgba(190,242,100,.85), 36vw 80vh 8px 3px rgba(190,242,100,.85),
              55vw 12vh 8px 3px rgba(190,242,100,.85), 71vw 58vh 8px 3px rgba(190,242,100,.85),
              88vw 22vh 8px 3px rgba(190,242,100,.85);
  transform: translate3d(5vw, 55vh, 0);
  animation: mk-luciernagas 12s ease-in-out -5s infinite alternate;
}


/* ═══ 🦙 ALTIPLANO · faja de aguayo con brillo y nubes ════════ */
:root[data-tema="altiplano"]:not([data-anim="off"]) body::before {  /* faja de aguayo */
  content: ''; top: 0; left: 0; right: 0; height: 6px; opacity: .9;
  background: repeating-linear-gradient(90deg, #B45309 0 28px, #F59E0B 28px 56px, #0369A1 56px 84px, #DC2626 84px 112px, #16A34A 112px 140px);
}
:root[data-tema="altiplano"]:not([data-anim="off"]) body::after {   /* brillo que la recorre */
  content: ''; top: 0; left: 0; width: 26vw; max-width: 320px; height: 6px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  animation: mk-brillo 8s ease-in-out infinite;
}
:root[data-tema="altiplano"]:not([data-anim="off"])::before {       /* nube */
  content: '☁️'; content: '☁️' / ''; top: 11vh; left: 0; font-size: 3.2rem; opacity: .5;
  animation: mk-nube 110s linear infinite;
}
:root[data-tema="altiplano"]:not([data-anim="off"])::after {        /* nube */
  content: '☁️'; content: '☁️' / ''; top: 34vh; left: 0; font-size: 2rem; opacity: .4;
  animation: mk-nube 150s linear -60s infinite;
}


/* ═══ 🚀 ESPACIO · estrellas que titilan, fugaz y planeta ═════ */
:root[data-tema="espacio"]:not([data-anim="off"]) body::before {    /* estrellas blancas */
  content: ''; top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%; background: #fff;
  box-shadow: 6vw 9vh #fff, 17vw 31vh #fff, 29vw 14vh #fff, 38vw 52vh #fff, 47vw 8vh #fff,
              58vw 38vh #fff, 66vw 66vh #fff, 74vw 21vh #fff, 83vw 47vh #fff, 91vw 12vh #fff,
              12vw 71vh #fff, 52vw 86vh #fff, 95vw 78vh #fff;
  animation: mk-titilar 2.8s ease-in-out infinite alternate;
}
:root[data-tema="espacio"]:not([data-anim="off"]) body::after {     /* estrellas violeta y cian */
  content: ''; top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%; background: #C4B5FD;
  box-shadow: 10vw 22vh #C4B5FD, 22vw 6vh #67E8F9, 33vw 41vh #C4B5FD, 44vw 27vh #67E8F9,
              55vw 61vh #C4B5FD, 63vw 11vh #67E8F9, 77vw 34vh #C4B5FD, 86vw 69vh #67E8F9,
              4vw 58vh #67E8F9, 26vw 83vh #C4B5FD, 69vw 90vh #67E8F9;
  animation: mk-titilar 3.7s ease-in-out -1.6s infinite alternate;
}
:root[data-tema="espacio"]:not([data-anim="off"])::before {         /* estrella fugaz */
  content: ''; top: 4vh; right: 4vw; width: 130px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95));
  box-shadow: 0 0 6px rgba(167,139,250,.8);
  animation: mk-fugaz 17s linear 3s infinite;
}
:root[data-tema="espacio"]:not([data-anim="off"])::after {          /* planeta en órbita lenta */
  content: '🪐'; content: '🪐' / ''; top: 14vh; right: 9vw; font-size: 2.6rem; opacity: .75;
  animation: mk-orbita 80s linear infinite;
}
:root[data-tema="espacio"]:not([data-anim="off"]) .sidebar-logo .logo-icon {
  animation: mk-aparecer .6s var(--ease-rebote, ease) .15s backwards, mk-flotar-logo 3.6s ease-in-out .8s infinite;
}


/* ═══ 🌙 NOCHE SUAVE · solo un respirar de luz, sin objetos ═══ */
:root[data-tema="noche"]:not([data-anim="off"]) body::before {
  content: ''; inset: 0;
  background: radial-gradient(70vmax 45vmax at 78% -5%, rgba(94,234,212,.11), transparent 70%),
              radial-gradient(60vmax 40vmax at 8% 105%, rgba(99,102,241,.10), transparent 70%);
  animation: mk-pulso 11s ease-in-out infinite alternate;
}


/* ═══ 📒 PAPEL · nada decorativo: subrayados que se dibujan ═══ */
:root[data-tema="papel"]:not([data-anim="off"]) .main-content a:not(.btn):not(.chip):not(.nav-item) {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .28s ease;
}
:root[data-tema="papel"]:not([data-anim="off"]) .main-content a:not(.btn):not(.chip):not(.nav-item):hover {
  background-size: 100% 1.5px;
}
:root[data-tema="papel"]:not([data-anim="off"]) .page-tab { position: relative; }

/* ═══ 👁️ ALTO CONTRASTE · ninguna animación, a propósito ═════════
   (sin bloque de ambiente; además su regla de arriba anula el movimiento común) */


/* Sistema en "reducir movimiento": nada de capas decorativas */
@media (prefers-reduced-motion: reduce) {
  :root::before, :root::after, body::before, body::after { display: none !important; }
}


/* ═══ Cambio de tema: reveal circular desde el botón ══════════════
   js/tema.js usa View Transitions; la animación del círculo la hace JS. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
/* navegadores sin View Transitions: fundido corto de colores */
:root.tema-fundiendo *, :root.tema-fundiendo *::before, :root.tema-fundiendo *::after {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease !important;
}


/* ═══ Interruptor "Animaciones" del selector de tema ══════════════ */
.tema-anim {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  padding: .45rem .6rem; border: none; border-radius: var(--radio-md);
  background: none; color: var(--texto); cursor: pointer; text-align: left;
  font: 700 var(--text-sm) var(--font-body);
}
.tema-anim:hover:not(:disabled) { background: var(--gris-100); }
.tema-anim:focus-visible { outline: 3px solid rgba(var(--primario-rgb), .45); outline-offset: 1px; }
.tema-anim:disabled { opacity: .65; cursor: not-allowed; }
.tema-anim .tema-txt { flex: 1; min-width: 0; line-height: 1.2; }
.tema-anim .tema-txt small { display: block; font-weight: 600; font-size: var(--text-xs); color: var(--texto-suave); }
.tema-anim .tema-muestra-anim {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: var(--turquesa-l);
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.tema-switch {
  position: relative; flex-shrink: 0; width: 38px; height: 22px; border-radius: 999px;
  background: var(--gris-300); transition: background .2s ease;
}
.tema-switch i {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .22s var(--ease-rebote, ease);
}
.tema-anim[aria-checked="true"] .tema-switch { background: var(--turquesa); }
.tema-anim[aria-checked="true"] .tema-switch i { transform: translateX(16px); }
:root[data-tema="altocontraste"] .tema-switch { border: 2px solid #000; }