@import url('/css/tikitago-deai-phase1.css?v=1&goldp1=1');
@import url('/css/tikitago-deai-phase2.css?v=1&goldp1=1');
@import url('/css/tikitago-deai-phase3.css?v=1');
/* ═══════════════════════════════════════════════════════════════════
   cd-skin.css — EL IDIOMA TIKITAGO · "Oro sobre Carbón"  (v1)
   ───────────────────────────────────────────────────────────────────
   Capa 100% visual, aditiva y sin lógica. Extiende el lenguaje del
   lenguaje visual oro sobre superficies carbón a TODA la aplicación.

   Reglas del idioma:
     · ORO    = acciones principales y énfasis.
     · DORADO = interacción social, selección y comunidad.
     · CARBÓN = superficies y estructura.

   No se monta en overlays OBS ni botoneras (deben quedar limpios).
   Excepción: body.cd-keep-bg conserva su ambiente propio (chat).
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Compatibilidad de cd-skin con la identidad vigente de WEB + Studio. */
  --cdl-gold:var(--tk-brand,#e5bd59); --cdl-gold2:var(--tk-brand-strong,#F2D98C);
  --cdl-vio:var(--tk-social,#E5BD59); --cdl-vio2:var(--tk-social,#E5BD59);
  --cdl-ink:var(--tk-rail,#0d0f12); --cdl-line:var(--tk-line,#292e35);
}

/* ── LUZ AMBIENTAL DEL SALÓN, en cada habitación ─────────────────────
   El mismo reflejo del reloj del inicio: oro muy tenue a la izquierda y oro
   muy tenue a la derecha. Sin degradados multicolor ni superficies saturadas. */
body:not(.cd-keep-bg){
  background-image:
    radial-gradient(1100px 560px at -6% -10%, rgba(229,189,89,.075), transparent 60%),
    radial-gradient(1000px 620px at 106% 108%, rgba(229,189,89,.09), transparent 62%) !important;
  background-attachment: fixed;
}

/* ── Tipografía del reino: los títulos hablan Sora ── */
h1,h2,h3{ font-family:'Geist','Inter',system-ui,sans-serif; letter-spacing:.1px; }

/* ── La selección de texto es dorada (nadie más hace esto) ── */
::selection{ background:rgba(229,189,89,.28); color:#fff; }

/* ── Scrollbars ────────────────────────────────────────────────────────────
   RETIRADO (2026-07-27). Aquí vivía un SEGUNDO sistema de barras que pisaba al
   de cd-aurora.css: esta hoja se carga después (línea 224 del index frente a
   la 36 de aurora), así que ganaba. Y usaba `background:` (atajo), que
   reinicia `background-clip` a border-box y anulaba el borde transparente con
   el que aurora afina el pulgar: el resultado era un bloque macizo de 8px de
   lado a lado del canal. Dos hojas pintando lo mismo = la barra tosca de las
   capturas. Ahora sólo manda cd-aurora.css. No añadir reglas de scrollbar
   aquí: si hay que retocar la barra, se retoca allí. */

/* ── Foco accesible en oro ── */
:focus-visible{ outline:2px solid rgba(229,189,89,.55); outline-offset:2px; border-radius:6px; }

/* ── Todo botón se hunde 1px al tocarlo (respuesta física) ── */
button:not(.no-press):active{ transform:translateY(1px); }
button{ font-family:inherit; }

/* ── Campos que se encienden al recibirte ── */
input:not([type=range]):focus, textarea:focus, select:focus{
  border-color:rgba(229,189,89,.45) !important;
  box-shadow:0 0 0 3px rgba(229,189,89,.10);
  transition:border-color .15s, box-shadow .15s;
}

/* ── Tarjetas y paneles: el borde se enciende al pasar (ignición) ── */
.card:hover,.panel:hover,.crd:hover{
  border-color:rgba(229,189,89,.22) !important;
  transition:border-color .2s;
}

/* ── Tablas admin: cabecera dorada, filas que responden ── */
table thead th{ color:var(--cdl-gold); font-weight:700; }
table tbody tr{ transition:background .12s; }
table tbody tr:hover{ background:rgba(229,189,89,.045); }

/* ── Enlaces ── */
a{ color:var(--cdl-vio2); }
a:hover{ color:var(--cdl-gold); }

/* ═══ UTILIDADES DEL IDIOMA ═══ */

/* Brillo que barre superficies doradas (regalos, celebraciones) */
@keyframes cd-shimmer{ 0%{transform:translateX(-130%) skewX(-18deg)} 100%{transform:translateX(230%) skewX(-18deg)} }

/* Aparición con rebote suave — para elementos que celebran */
@keyframes cd-pop{ 0%{transform:scale(.85); opacity:0} 70%{transform:scale(1.04)} 100%{transform:scale(1); opacity:1} }

/* Pulso de "en vivo" — corazón del directo */
@keyframes cd-live-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(255,92,122,.5)} 55%{box-shadow:0 0 0 7px rgba(255,92,122,0)} }
.cd-live-dot{ width:8px; height:8px; border-radius:50%; background:#ff5c7a; display:inline-block; animation:cd-live-pulse 1.6s ease-out infinite; }

/* ── El rail habla el idioma: ítem activo con aura dorada ── */
.cdrail .sb-item.on{
  box-shadow:0 0 0 1px rgba(229,189,89,.32), 0 0 14px rgba(229,189,89,.20);
  border-radius:12px;
}
.cdrail .sb-item.on .sb-ico{ filter:drop-shadow(0 0 5px rgba(229,189,89,.45)); }


/* ── Capas: los modales/drawers deben ir SOBRE la cabecera (z-index 999) ──
   La cabecera unificada tapaba overlays de páginas admin y toasts. Se elevan
   los patrones de superposición conocidos por encima de la cabecera. */
.overlay, .modal-overlay, .drawer-overlay, .modal, .drawer,
.sa-toast, .rg-ov, #gal-ov, .cd-modal{ z-index:100000 !important; }
header.cdhead{ z-index:9990; }   /* debajo de modales, sobre el contenido */


/* ── Accesibilidad + rendimiento: quien pida menos movimiento, lo recibe.
   También alivia el encoder en equipos de gama baja durante el live. ── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001s !important; animation-iteration-count:1 !important;
    transition-duration:.05s !important; }
}