/* ═══════════════════════════════════════════════════════════════════
   cd-skin.css — EL IDIOMA COINDROP · "Oro sobre Carbón"  (v1)
   ───────────────────────────────────────────────────────────────────
   Capa 100% visual, aditiva y sin lógica. Extiende el lenguaje del
   salón del inicio (luz ambiental oro-izquierda · morado-derecha, la
   dualidad streamers/droppers) a TODA la aplicación.

   Reglas del idioma:
     · ORO    = dinero, Drops, acciones principales, la corona.
     · MORADO = lo social: droppers, chat, comunidad.
     · CARBÓN = todo lo demás. El oro escasea para que el dinero brille.

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

:root{
  --cdl-gold:#f5c842; --cdl-gold2:#e8a020; --cdl-vio:#7c5cff; --cdl-vio2:#a06ff5;
  --cdl-ink:#0b0e17;  --cdl-line:rgba(255,255,255,.07);
}

/* ── LUZ AMBIENTAL DEL SALÓN, en cada habitación ─────────────────────
   El mismo reflejo del reloj del inicio: oro a la izquierda, morado a
   la derecha. Sutil — se siente, no se ve. */
body:not(.cd-keep-bg){
  background-image:
    radial-gradient(1100px 560px at -6% -10%, rgba(245,200,66,.075), transparent 60%),
    radial-gradient(1000px 620px at 106% 108%, rgba(124,92,255,.09), transparent 62%) !important;
  background-attachment: fixed;
}

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

/* ── La selección de texto es dorada (nadie más hace esto) ── */
::selection{ background:rgba(245,200,66,.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(245,200,66,.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(245,200,66,.45) !important;
  box-shadow:0 0 0 3px rgba(245,200,66,.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(245,200,66,.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(245,200,66,.045); }

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

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

/* Chip de la corona (cuenta regresiva del día CoinDrop) */
.cd-crown-chip{
  display:flex; align-items:center; gap:6px; padding:5px 11px; border-radius:20px;
  background:linear-gradient(135deg, rgba(245,200,66,.14), rgba(245,166,35,.07));
  border:1px solid rgba(245,200,66,.28);
  font-size:11px; font-weight:800; color:#ffd98a; white-space:nowrap;
  font-variant-numeric:tabular-nums; cursor:default;
  animation:cd-chip-in .5s cubic-bezier(.2,.9,.3,1.2);
}
.cd-crown-chip .cd-crown-ico{ font-size:12px; filter:drop-shadow(0 0 5px rgba(245,200,66,.6)); }
@media (max-width:520px){ .cd-crown-chip span.cd-crown-label{ display:none; } }
@keyframes cd-chip-in{ from{opacity:0; transform:translateY(-6px) scale(.92);} to{opacity:1; transform:none;} }

/* La Moneda Viva: loader oficial de CoinDrop */
.cd-coin-loader{
  width:26px; height:26px; border-radius:50%; display:inline-block;
  background:radial-gradient(circle at 34% 32%, #ffe9a8, var(--cdl-gold) 46%, var(--cdl-gold2) 78%, #9a6a10);
  box-shadow:0 0 14px rgba(245,200,66,.45), inset -2px -3px 6px rgba(0,0,0,.3);
  animation:cd-coinspin 1s linear infinite; position:relative;
}
.cd-coin-loader::after{
  content:'C'; position:absolute; inset:0; display:grid; place-items:center;
  font:800 13px Sora,sans-serif; color:#6b4a08;
}
@keyframes cd-coinspin{ 0%{transform:rotateY(0)} 100%{transform:rotateY(360deg)} }

/* 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(245,200,66,.32), 0 0 14px rgba(245,200,66,.20);
  border-radius:12px;
}
.cdrail .sb-item.on .sb-ico{ filter:drop-shadow(0 0 5px rgba(245,200,66,.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, [class*="-overlay"]{ 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; }
}