/* ============================================================
   OPOSITIVE · DESIGN SYSTEM v1
   Fuente única de verdad para color, tipografía, espaciado y componentes.
   Uso: <link rel="stylesheet" href="/opositive-ds.css">
   NO rompe nada: incluye alias de los nombres antiguos
   (--verde/--oro/--txt y --green/--gold/--ink) apuntando a los canónicos.
   ============================================================ */

:root{
  /* --- Marca --- */
  --brand:            #154734;   /* verde principal */
  --brand-dark:       #0f3325;   /* verde oscuro (fondos, texto sobre claro) */
  --brand-tint:       #e7f0e9;   /* verde muy claro (iconos, fondos suaves) */
  --accent:           #e1bf00;   /* oro / CTA */
  --accent-dark:      #b89a00;   /* oro oscuro (hover, texto) */

  /* --- Semánticos --- */
  --ok:               #2e7d32;
  --bad:              #c62828;
  --warn:             #b8860b;
  --danger:           #d52b1e;   /* rojo marca */

  /* --- Neutros --- */
  --bg:               #f4f6f4;   /* fondo página */
  --surface:          #ffffff;   /* tarjetas, paneles */
  --ink:              #1d2b22;   /* texto principal */
  --ink-soft:         #5d6b62;   /* texto secundario */
  --line:             #e3e6e2;   /* bordes, separadores */
  --surface-soft:     #f7f9f6;   /* filas dentro de tarjeta (rediseno) */
  --warn-bg:          #fff8e0;   /* aviso / recomendacion (rediseno) */
  --bad-bg:           #fdf3f3;   /* error o prueba no apta (rediseno) */

  /* --- Tipografía --- */
  --font-head: 'Poppins','Open Sans',system-ui,sans-serif;
  --font-body: 'Open Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-hero: clamp(32px,5.2vw,54px);
  --lh-tight: 1.15;
  --lh-body:  1.6;

  /* --- Espaciado (escala 4/8) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* --- Radios --- */
  --r-sm: 8px; --r-md: 14px; --r-lg: 16px; --r-pill: 999px;

  /* --- Sombras (suaves y en capas para dar profundidad real) --- */
  --sh-sm:    0 1px 2px rgba(21,71,52,.05), 0 3px 10px rgba(21,71,52,.06);
  --sh-md:    0 4px 12px rgba(21,71,52,.08), 0 14px 30px rgba(21,71,52,.10);
  --sh-hover: 0 6px 16px rgba(21,71,52,.10), 0 18px 36px rgba(21,71,52,.14);
  --sh-cta:   0 4px 14px rgba(225,191,0,.35);

  /* --- Layout --- */
  --wrap: 1080px;

  /* ===== ALIAS RETROCOMPATIBLES (no usar en código nuevo) ===== */
  --verde: var(--brand);      --verde-osc: var(--brand-dark);
  --oro:   var(--accent);     --oro-osc:  var(--accent-dark);
  --rojo:  var(--danger);     --crema:    var(--bg);
  --txt:   var(--ink);        --gris:     var(--ink-soft);
  --linea: var(--line);
  --green: var(--brand);      --green2:   #1c6b46;
  --gold:  var(--accent);     --navbg:    var(--brand-dark);
  --card:  var(--surface);    --mut:      var(--ink-soft);
  --br:    var(--r-md);
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);color:var(--ink);background:var(--bg);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--brand-dark);line-height:var(--lh-tight)}
a{color:inherit}
.ds-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-5)}

/* Accesibilidad: foco visible solo con teclado (no molesta al ratón) */
*:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}

/* ============================================================
   BOTONES
   ============================================================ */
.ds-btn{
  display:inline-block;background:var(--accent);color:var(--brand-dark);
  font-weight:700;border:none;border-radius:var(--r-pill);
  padding:var(--sp-3) var(--sp-6);font-size:var(--fs-base);cursor:pointer;
  text-decoration:none;letter-spacing:.3px;box-shadow:var(--sh-cta);
  transition:transform .08s,filter .2s,box-shadow .2s;
}
.ds-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.ds-btn:active{transform:translateY(1px);box-shadow:none}
.ds-btn--outline{
  background:transparent;color:var(--brand);
  border:2px solid var(--brand);box-shadow:none;
}
.ds-btn--outline:hover{background:var(--brand);color:#fff;filter:none}
.ds-btn--sm{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm)}
.ds-btn:disabled,.ds-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}

/* ============================================================
   TARJETAS
   ============================================================ */
.ds-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-5);box-shadow:var(--sh-sm);
  transition:box-shadow .2s,transform .2s;
}
.ds-card--hover:hover{box-shadow:var(--sh-hover);transform:translateY(-2px)}
.ds-card__ico{
  width:46px;height:46px;border-radius:var(--r-md);background:var(--brand-tint);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);
}
.ds-card h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2)}
.ds-card p{color:var(--ink-soft);font-size:var(--fs-base)}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.ds-input{
  border:2px solid var(--brand);border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-base);width:100%;
  background:#fff;color:var(--ink);
}
.ds-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(21,71,52,.12)}
.ds-input--error{border-color:var(--bad)}
.ds-label{display:block;font-weight:600;font-size:var(--fs-sm);margin-bottom:var(--sp-1);color:var(--ink)}

/* ============================================================
   BADGES / ETIQUETAS
   ============================================================ */
.ds-badge{
  display:inline-block;font-weight:600;font-size:var(--fs-xs);
  padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);
  background:var(--brand-tint);color:var(--brand-dark);
}
.ds-badge--ok  {background:#e3f2e4;color:var(--ok)}
.ds-badge--bad {background:#fdecea;color:var(--bad)}
.ds-badge--warn{background:#fdf4e3;color:var(--warn)}

/* ============================================================
   SECCIONES
   ============================================================ */
.ds-section{padding:var(--sp-8) 0}
.ds-sec-title{text-align:center;font-size:var(--fs-2xl);font-weight:800;margin-bottom:var(--sp-2)}
.ds-sec-sub{text-align:center;color:var(--ink-soft);max-width:640px;margin:0 auto var(--sp-6)}

/* ============================================================
   ESTADOS (vacío / carga / error) — reutilizables
   ============================================================ */
.ds-state{text-align:center;padding:var(--sp-8) var(--sp-5);color:var(--ink-soft)}
.ds-state__title{font-family:var(--font-head);color:var(--ink);font-size:var(--fs-lg);margin-bottom:var(--sp-2)}
.ds-spinner{
  width:32px;height:32px;border-radius:50%;margin:0 auto var(--sp-4);
  border:3px solid var(--line);border-top-color:var(--brand);
  animation:ds-spin .8s linear infinite;
}
@keyframes ds-spin{to{transform:rotate(360deg)}}