/* ============================================================
   SCAE · DESIGN SYSTEM v6  —  "Aurora"
   Sistema Comercial Abogado Empresario
   Pegar este archivo y usar las variables. No inventar colores.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ---- Verdes: el fondo, la autoridad ---- */
  --tinta:#0B1F19;        /* fondo más profundo */
  --tinta-2:#102A22;
  --verde:#0F2E25;        /* verde institucional, texto sobre claro */
  --verde-2:#173A30;      /* superficies verdes elevadas */

  /* ---- Oro: jerarquía y acción. Nunca para datos ---- */
  --champan:#FBF0CD;
  --oro-claro:#E3C568;
  --oro:#C8A03B;          /* el dorado de la marca */
  --bronce:#8F6E22;       /* bordes del metal */
  --oro-texto:#7E611A;    /* dorado legible sobre fondo claro */

  /* ---- Claros: donde vive el contenido ---- */
  --blanco:#F8F8F5;
  --lienzo:#EFEFEA;
  --crema:#F6EFDC;        /* destacados sobre claro */
  --borde:#C6C6BD;
  --gris:#4B4B4B;

  /* ---- Funcionales: SOLO para estado y datos ---- */
  --ok:#2F7D5A;
  --alerta:#B8791C;
  --error:#8C2F2F;
  --neutro:#6B7A73;

  /* ---- Radios ---- */
  --r-l:20px; --r-m:14px; --r-s:10px; --r-pill:999px;

  /* ---- Sombras (profundidad, no contorno) ---- */
  --s-1:0 1px 2px rgba(0,0,0,.16);
  --s-2:0 10px 30px -12px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.10);
  --s-3:0 40px 90px -40px rgba(0,0,0,.75), 0 10px 26px -14px rgba(0,0,0,.35);

  /* ---- Movimiento: una sola curva en todo el sistema ---- */
  --ease:cubic-bezier(.16,1,.3,1);

  /* ---- Oro metálico: el degradado exacto, no aproximarlo ---- */
  --metal:linear-gradient(180deg,#FBF0CD 0%,#EBD289 18%,#D8B451 46%,#C8A03B 64%,#AD8629 88%,#8F6E22 100%);
}

/* ============ TIPOGRAFÍA ============
   Cormorant Garamond = títulos y cifras grandes. Nada más.
   Inter = todo lo demás. Números siempre tabulares.        */
body{
  font-family:'Inter',system-ui,sans-serif;
  font-size:17px; line-height:1.55;
  color:var(--verde); background:var(--tinta);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600}
h1{font-size:42px;line-height:1.12;letter-spacing:-.4px}
h2{font-size:30px}
h3{font-size:23px;font-weight:700}
.kicker{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600;color:var(--oro-texto)}
.cifra{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* Título con acabado de metal (solo H1 sobre fondo oscuro) */
.h-metal{
  background:linear-gradient(180deg,#FFFEF9 0%,#F3EBD6 46%,#CFC1A0 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.55));
}

/* ============ FONDO ============ */
.fondo-scae{
  background:var(--tinta);
  background-image:
    radial-gradient(1100px 520px at 50% -8%, rgba(200,160,59,.16), transparent 62%),
    radial-gradient(760px 480px at 92% 12%, rgba(23,58,48,.85), transparent 60%),
    radial-gradient(680px 420px at 4% 62%, rgba(200,160,59,.06), transparent 60%);
  background-attachment:fixed;
}
/* Retícula tenue que se desvanece: da textura sin ruido */
.fondo-scae::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(200,160,59,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,160,59,.05) 1px,transparent 1px);
  background-size:70px 70px;
  -webkit-mask-image:radial-gradient(circle at 50% -5%, #000, transparent 68%);
          mask-image:radial-gradient(circle at 50% -5%, #000, transparent 68%);
}

/* Haces de luz que suben. Portada y login. NUNCA detrás de tablas o gráficos. */
.fondo-lineas{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 68%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 68%,transparent 100%);
}
.fondo-lineas i{
  position:absolute;bottom:-40vh;display:block;width:1px;height:30vh;will-change:transform,opacity;
  background:linear-gradient(to top,transparent,rgba(200,160,59,.30) 25%,rgba(227,197,104,.95) 78%,rgba(255,247,222,.9) 92%,transparent);
  animation:scae-subir linear infinite;
}
@keyframes scae-subir{
  0%{transform:translate3d(0,0,0);opacity:0}
  9%{opacity:.85} 76%{opacity:.5}
  100%{transform:translate3d(0,-150vh,0);opacity:0}
}
/* Repartir con left/animation-duration/delay distintos por elemento (10s–36s). */

/* ============ SUPERFICIES ============
   Regla: el contenido SIEMPRE vive en tarjeta clara sobre el verde.
   Texto largo o números sobre verde = ilegible.                     */
.tarjeta{
  background:linear-gradient(180deg,#FCFCFA,#F4F4EF);
  border:1px solid rgba(200,160,59,.28);
  border-radius:var(--r-l);
  padding:40px;
  box-shadow:var(--s-3), 0 0 0 1px rgba(200,160,59,.10), inset 0 1px 0 rgba(255,255,255,.85);
  position:relative;
}
/* Hilo de oro superior: la firma del sistema */
.tarjeta::before{
  content:'';display:block;height:2px;margin:-40px -40px 26px;
  border-radius:var(--r-l) var(--r-l) 0 0;
  background:linear-gradient(90deg,transparent,var(--oro),transparent);opacity:.85;
}
/* Panel de cristal sobre el verde: cabeceras, avisos, barras laterales */
.cristal{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(200,160,59,.22);
  border-radius:var(--r-l);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:var(--s-2), inset 0 1px 0 rgba(255,255,255,.06);
  color:#E7EAE4;
}

/* ============ BOTONES ============ */
.btn{
  font-family:'Inter',sans-serif;font-size:16px;font-weight:600;
  padding:15px 32px;border-radius:var(--r-pill);cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);
}
/* Oro metálico. UNO por pantalla: es la acción principal. */
.btn-oro{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--metal); color:#0B1F19; font-weight:700; letter-spacing:.4px;
  border:1px solid rgba(120,92,26,.75);
  text-shadow:0 1px 0 rgba(255,255,255,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 16px 34px -16px rgba(200,160,59,.95),
    0 3px 8px rgba(0,0,0,.28);
}
/* Destello diagonal al pasar el mouse */
.btn-oro::after{
  content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.62) 48%,rgba(255,255,255,.15) 56%,transparent 66%);
  transform:translateX(-130%);transition:transform .85s var(--ease);
}
.btn-oro:hover::after{transform:translateX(130%)}
.btn-oro:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.22),0 22px 44px -18px rgba(200,160,59,1),0 4px 10px rgba(0,0,0,.3)}
.btn-oro:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(90,66,12,.5),inset 0 -1px 0 rgba(255,255,255,.35)}

/* Secundario de cristal: sobre fondo verde */
.btn-cristal{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(200,160,59,.45);color:#EFE7D2;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 26px -16px rgba(0,0,0,.8);
}
.btn-cristal:hover{border-color:rgba(227,197,104,.8);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05))}

/* Terciario sobre tarjeta clara */
.btn-linea{background:linear-gradient(180deg,#fff,#F1F1EA);border:1px solid rgba(15,46,37,.28);color:var(--verde);box-shadow:var(--s-1);padding:10px 18px;font-size:13.5px}
.btn:disabled{transform:none;box-shadow:none;filter:grayscale(.35);opacity:.5;cursor:not-allowed}

/* Chip / etiqueta metálica */
.chip{
  display:inline-block;font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;font-weight:700;
  padding:7px 18px;border-radius:var(--r-pill);
  background:var(--metal);color:#0B1F19;border:1px solid rgba(120,92,26,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 8px 20px -10px rgba(200,160,59,.9);
}

/* ============ CAMPOS ============ */
input[type=text],input[type=number],input[type=email],textarea,select{
  width:100%;padding:13px 14px;font-family:'Inter',sans-serif;font-size:16px;color:var(--verde);
  background:#fff;border:1px solid #D6D6CC;border-radius:var(--r-s);
  box-shadow:inset 0 1px 2px rgba(15,46,37,.05);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--oro);box-shadow:0 0 0 4px rgba(200,160,59,.16)}
label{display:block;font-weight:600;font-size:14.5px;margin-bottom:7px}
label small{display:block;font-weight:400;color:var(--gris);margin-top:2px}

/* ============ PROGRESO ============ */
.prog-bar{height:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);overflow:hidden}
.prog-fill{
  height:4px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,#A9812A,#C8A03B,#F6E7B4,#C8A03B,#A9812A);
  background-size:280% 100%;
  animation:scae-brillo 5s linear infinite;
  transition:width .7s var(--ease);
  box-shadow:0 0 14px rgba(200,160,59,.6);
}
@keyframes scae-brillo{from{background-position:280% 0}to{background-position:0 0}}

/* ============ DETALLES ============ */
::selection{background:rgba(200,160,59,.35);color:#FFFDF6}
html{scrollbar-width:thin;scrollbar-color:var(--oro) rgba(255,255,255,.05)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--tinta)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#EBD289,#A9812A);border-radius:var(--r-pill);border:3px solid var(--tinta)}
:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px}

/* Entrada escalonada de bloques */
.rise{opacity:0;transform:translateY(24px);animation:scae-rise .9s var(--ease) forwards}
@keyframes scae-rise{to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .fondo-lineas{display:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}