/* ==========================================================================
   CASTIELLO GAMES · Base
   Paleta extraída del logo oficial (escudo yerba · dorado · rojo · madera).
   Light por defecto + Dark completo + soporte RTL real (árabe).
   ========================================================================== */

/* --- Marca ---------------------------------------------------------------- */
:root {
  --cg-verde:         #217A2B;
  --cg-verde-hondo:   #225127;
  --cg-verde-noche:   #0D2911;
  --cg-dorado:        #F7DD00;
  --cg-dorado-hondo:  #EED604;
  --cg-dorado-suave:  #FCF6C2;
  --cg-rojo:          #CF0105;
  --cg-rojo-vivo:     #DB0B15;
  --cg-madera:        #71654E;
  --cg-madera-hondo:  #56231F;
  --cg-oliva:         #928C3C;
  --cg-oliva-claro:   #A3AB5D;
  --cg-crema:         #F6F1DE;

  --radio-sm: 8px;
  --radio:    14px;
  --radio-lg: 22px;
  --tap:      44px;

  --fuente: "Inter", "Noto Sans Arabic", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-titulo: "Rubik", "Noto Sans Arabic", "Noto Sans SC", var(--fuente);

  --tr: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* --- Tokens de tema ------------------------------------------------------- */
[data-theme="light"] {
  --bg-primary:   #FFFFFF;
  --bg-secondary: var(--cg-crema);
  --bg-tertiary:  #ECE5CE;
  --surface:      #FFFFFF;
  --surface-alt:  #FBF8EE;
  --text-primary:  #16210F;
  --text-secondary:#4C5342;
  --text-muted:    #857E68;
  --border:       #DCD3B6;
  --border-fuerte:#C3B78F;
  --accent:       var(--cg-verde);
  --accent-hover: var(--cg-verde-hondo);
  --accent-text:  #FFFFFF;
  --oro:          var(--cg-dorado-hondo);
  --oro-text:     #2A2300;
  --danger:       var(--cg-rojo);
  --success:      #1A7A4A;
  --warning:      #B8650A;
  --shadow:       rgba(34, 81, 39, .12);
  --shadow-fuerte:rgba(34, 81, 39, .22);
  --glow:         rgba(247, 221, 0, .45);
  --header-bg:    rgba(255, 255, 255, .92);
}

[data-theme="dark"] {
  --bg-primary:   #0D1710;
  --bg-secondary: #121F16;
  --bg-tertiary:  #1A2C1E;
  --surface:      #16251A;
  --surface-alt:  #1D3021;
  --text-primary:  #F3EEDC;
  --text-secondary:#B6BBA4;
  --text-muted:    #7E8770;
  --border:       #2A4230;
  --border-fuerte:#3B5C43;
  --accent:       #3DA84B;
  --accent-hover: #52C260;
  --accent-text:  #06170A;
  --oro:          var(--cg-dorado);
  --oro-text:     #2A2300;
  --danger:       #E8544E;
  --success:      #3DBE7A;
  --warning:      #E8900A;
  --shadow:       rgba(0, 0, 0, .45);
  --shadow-fuerte:rgba(0, 0, 0, .6);
  --glow:         rgba(247, 221, 0, .35);
  --header-bg:    rgba(13, 23, 16, .92);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg-primary);
  color: var(--text-primary);
  overscroll-behavior-y: none;
  transition: background var(--tr), color var(--tr);
}

h1, h2, h3, h4 { font-family: var(--fuente-titulo); font-weight: 700; margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
p  { margin: 0 0 1em; }

a { color: var(--accent); text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }

.label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); font-weight: 600;
}

/* ==========================================================================
   RTL — el layout se invierte de verdad, no sólo el texto.
   Se usan propiedades lógicas; acá van los casos que no las tienen.
   ========================================================================== */
[dir="rtl"] { direction: rtl; }
[dir="rtl"] body { text-align: right; }
[dir="ltr"] body { text-align: left; }

/* Iconos direccionales y elementos que deben espejarse */
[dir="rtl"] .flip-rtl,
[dir="rtl"] .icono-direccional { transform: scaleX(-1); }

/* Números y códigos siempre LTR aunque el resto sea RTL */
.num, .cg-num, [dir="rtl"] .num { direction: ltr; unicode-bidi: isolate; }

/* Tipografía por idioma */
[lang="ar"] body { font-size: 16px; letter-spacing: 0; }
[lang="zh"] body { letter-spacing: .01em; }

/* ==========================================================================
   Contenedores y espaciado (nunca contenido pegado al borde)
   ========================================================================== */
.contenedor {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  padding-block: 2rem;
}
.contenedor-angosto { max-width: 760px; }
@media (max-width: 768px) {
  .contenedor { padding-inline: 1rem; padding-block: 1.25rem; }
}

/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--tap);
  padding: .7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  transition: transform var(--tr), background var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }

.btn-primario {
  background: linear-gradient(160deg, var(--accent) 0%, var(--cg-verde-hondo) 100%);
  color: #fff;
  box-shadow: 0 6px 18px var(--shadow), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primario:hover { background: linear-gradient(160deg, var(--accent-hover), var(--cg-verde-hondo)); }

.btn-oro {
  background: linear-gradient(160deg, var(--cg-dorado) 0%, var(--cg-dorado-hondo) 100%);
  color: var(--oro-text);
  box-shadow: 0 6px 20px var(--glow), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-oro:hover { filter: brightness(1.06); }

.btn-fantasma {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-fuerte);
}
.btn-fantasma:hover { background: var(--bg-secondary); }

.btn-bloque { width: 100%; }

/* Ripple (skill 31) */
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .38);
  transform: scale(0);
  animation: ripple-anim .6s linear;
  pointer-events: none;
}
[data-theme="light"] .btn-fantasma .ripple-wave,
[data-theme="light"] .btn-oro .ripple-wave { background: rgba(0, 0, 0, .13); }
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

/* ==========================================================================
   Formularios
   ========================================================================== */
.campo { margin-bottom: 1rem; }
.campo > label {
  display: block; margin-bottom: .35rem;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.input {
  width: 100%;
  min-height: var(--tap);
  padding: .7rem .95rem;
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radio-sm);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.input::placeholder { color: var(--text-muted); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.campo-pass { position: relative; }
.campo-pass .input { padding-inline-end: 3rem; }
.ojo {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: .5rem;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: none; border: none;
  color: var(--text-muted);
  border-radius: 50%;
}
.ojo:hover { color: var(--text-primary); background: var(--bg-tertiary); }

/* ==========================================================================
   Superficies / tarjetas con identidad (no cards genéricas)
   ========================================================================== */
.panel {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radio-lg);
  box-shadow: 0 10px 34px var(--shadow);
}
/* Filete dorado superior — sello Castiello */
.panel::before {
  content: "";
  position: absolute;
  inset-block-start: 0; inset-inline: 1.6rem;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--cg-dorado), transparent);
  border-radius: 0 0 3px 3px;
}

/* ==========================================================================
   Toasts (nunca alert)
   ========================================================================== */
#cg-toasts {
  position: fixed;
  inset-block-end: calc(84px + env(safe-area-inset-bottom));
  inset-inline: 0;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  z-index: 9999; pointer-events: none;
  padding-inline: 1rem;
}
.toast {
  max-width: min(92vw, 460px);
  padding: .7rem 1.15rem;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  color: #fff;
  box-shadow: 0 8px 26px var(--shadow-fuerte);
  animation: toast-in .28s cubic-bezier(.2,.9,.3,1.3);
}
.toast-error   { background: var(--danger); }
.toast-success { background: var(--success); }
.toast-warning { background: var(--warning); color: #1c1200; }
.toast-info    { background: var(--cg-verde-hondo); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* ==========================================================================
   Estados vacíos / error (skill 04 — nunca 404 ni pantalla en blanco)
   ========================================================================== */
.estado {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-secondary);
}
.estado h3 { color: var(--text-primary); }
.estado .estado-icono {
  width: 74px; height: 74px;
  margin: 0 auto 1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--accent);
}

/* ==========================================================================
   Selector de idioma y tema
   ========================================================================== */
.chip-lang {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 38px; padding: .3rem .8rem;
  background: var(--surface-alt);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 13px; font-weight: 600;
}
.chip-lang:hover { border-color: var(--accent); }

.menu-lang {
  position: absolute;
  inset-block-start: calc(100% + .5rem);
  inset-inline-end: 0;
  min-width: 190px;
  padding: .4rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radio);
  box-shadow: 0 14px 40px var(--shadow-fuerte);
  z-index: 1200;
}
.menu-lang button {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; width: 100%;
  min-height: 42px; padding: .45rem .7rem;
  background: none; border: none; border-radius: var(--radio-sm);
  color: var(--text-primary); font-size: 14px; text-align: start;
}
.menu-lang button:hover { background: var(--bg-secondary); }
.menu-lang button[aria-current="true"] { color: var(--accent); font-weight: 700; }

/* ==========================================================================
   Utilidades
   ========================================================================== */
.oculto { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fila { display: flex; align-items: center; gap: .75rem; }
.fila-entre { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.pila { display: flex; flex-direction: column; gap: .75rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}