/* ============================================================
   A30 — Kit de componentes reutilizables
   Basado en: https://a30.com.py/
   Paleta: morado → dorado sobre fondo beige/hueso
   Tipografía: Sora (títulos) + Inter (cuerpo)
   ============================================================ */

/* ===================== TOKENS ===================== */

:root{
  /* Tipografía */
  --font-head:'Sora','Segoe UI',Arial,sans-serif;
  --font-body:'Inter','Segoe UI',Arial,sans-serif;

  /* Marca (morado → dorado) */
  --p1:#7C3AED;
  --p2:#9B5BB7;
  --p3:#B97A81;
  --p4:#D6984A;
  --yellow:#F5B914;

  --accent:#7C3AED;
  --accent-strong:#6D28D9;
  --accent-soft:rgba(124,58,237,.10);

  --grad:linear-gradient(120deg, var(--p1) 0%, var(--p2) 25%, var(--p3) 50%, var(--p4) 75%, var(--yellow) 100%);

  /* Superficies claro */
  --bg:#F5F3EC;
  --surface:#ffffff;
  --surface-2:#EFECE2;
  --border:rgba(20,19,17,.12);
  --border-strong:rgba(20,19,17,.22);
  --text:#141311;
  --text-soft:#5C5A52;
  --text-muted:#8a887f;

  /* Estados */
  --ok:#0e9f6e; --ok-soft:#e2f6ed; --ok-tx:#0a7350;
  --no:#b91c1c; --no-soft:#fdeaea; --no-tx:#b42318;
  --warn:#d97706; --warn-soft:#fef6d9; --warn-tx:#8a6100;

  /* Radios */
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;

  /* Sombras */
  --shadow-glow:0 0 0 1px rgba(124,58,237,.08), 0 20px 50px rgba(245,185,20,.18);
  --shadow-btn:0 8px 30px rgba(124,58,237,.28);
  --shadow-card:0 1px 3px rgba(16,24,40,.07);

  --ease:cubic-bezier(.22,1,.36,1);
}

/* Tema oscuro */
:root[data-theme="dark"]{
  --accent:#B98BF2;
  --accent-strong:#A97BF2;
  --accent-soft:rgba(185,139,242,.16);
  --bg:#16130E;
  --surface:#211D16;
  --surface-2:#2A2519;
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.22);
  --text:#F3F0E8;
  --text-soft:#ABA599;
  --shadow-glow:0 12px 40px rgba(0,0,0,.45);
  --shadow-btn:0 8px 30px rgba(0,0,0,.35);
}

/* ===================== RESET BASE ===================== */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.a30-btn { font-family:var(--font-head); }
a { color:inherit; text-decoration:none; }

/* ===================== COMPONENTES ===================== */

/* ---------- Botones ---------- */
.a30-btn {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:none; cursor:pointer;
  border-radius:var(--radius-sm);
  padding:.8rem 1.7rem;
  font-weight:600; font-size:.95rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-position .35s var(--ease);
  white-space:nowrap;
}
.a30-btn:hover { transform:translateY(-3px) scale(1.02); }
.a30-btn:active { transform:translateY(-1px) scale(.98); }

.a30-btn--primary {
  background:var(--grad);
  background-size:200% auto;
  color:#171310;
  box-shadow:var(--shadow-btn);
}
.a30-btn--primary:hover { background-position:100% 0; box-shadow:0 12px 36px rgba(245,185,20,.30); }

.a30-btn--outline {
  background:transparent;
  border:1.5px solid var(--border-strong);
  color:var(--text);
}
.a30-btn--outline:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

.a30-btn--ghost {
  background:transparent;
  color:var(--accent);
}
.a30-btn--ghost:hover { background:var(--accent-soft); }

.a30-btn--sm { padding:.55rem 1.2rem; font-size:.85rem; }
.a30-btn--lg { padding:1rem 2.2rem; font-size:1rem; }

/* ---------- Tarjetas ---------- */
.a30-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2rem 1.7rem;
  display:flex; flex-direction:column; gap:.8rem;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s ease;
}
.a30-card:hover {
  transform:translateY(-8px);
  box-shadow:var(--shadow-glow);
  border-color:rgba(124,58,237,.35);
}
.a30-card__icon {
  width:56px; height:56px; border-radius:16px; padding:10px;
  display:grid; place-items:center;
  background:var(--surface-2);
  transition:transform .45s var(--ease);
}
.a30-card:hover .a30-card__icon { transform:scale(1.14) rotate(-6deg); }
.a30-card__title { font-size:1.12rem; font-weight:700; }
.a30-card__text { color:var(--text-soft); font-size:.94rem; flex:1; }
.a30-card__link { font-weight:600; font-size:.9rem; color:var(--accent); display:inline-flex; align-items:center; gap:.3rem; }
.a30-card__link span { transition:transform .2s ease; }
.a30-card:hover .a30-card__link span { transform:translateX(4px); }

/* ---------- Formularios ---------- */
.a30-field { position:relative; }
.a30-field input,
.a30-field select,
.a30-field textarea {
  width:100%; font-family:var(--font-body); font-size:.96rem; color:var(--text);
  background:var(--surface-2); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); padding:1.05rem .9rem .5rem;
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.a30-field select { appearance:none; color-scheme:light; }
.a30-field textarea { resize:vertical; min-height:90px; }
.a30-field label {
  position:absolute; left:.9rem; top:1rem; font-size:.95rem; color:var(--text-soft);
  pointer-events:none; transition:all .2s ease; background:transparent;
}
.a30-field input:focus,.a30-field select:focus,.a30-field textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,58,237,.15);
}
.a30-field input:focus+label,.a30-field input:not(:placeholder-shown)+label,
.a30-field textarea:focus+label,.a30-field textarea:not(:placeholder-shown)+label,
.a30-field select:focus+label,.a30-field select:valid+label {
  top:-.55rem; left:.7rem; font-size:.72rem; padding:0 .4rem;
  background:var(--surface); color:var(--accent); border-radius:4px;
}

/* ---------- Badges / chips ---------- */
.a30-badge {
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.82rem; font-weight:600;
  padding:.5rem 1rem; border-radius:999px;
  background:var(--accent-soft); border:1px solid rgba(124,58,237,.25);
  color:var(--accent);
}
.a30-chip {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.9rem; font-weight:500;
  padding:.55rem 1.1rem; border-radius:999px;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text-soft);
  transition:transform .3s var(--ease), border-color .25s ease, color .25s ease;
}
.a30-chip:hover { transform:translateY(-3px); border-color:var(--accent); color:var(--accent); }

/* ---------- Tablas ---------- */
.a30-table { width:100%; border-collapse:collapse; min-width:700px; }
.a30-table thead th {
  font-size:10px; font-weight:700; color:var(--text-soft);
  text-transform:uppercase; letter-spacing:.07em;
  padding:13px 12px; border-bottom:2px solid var(--border);
  text-align:right; white-space:nowrap;
}
.a30-table thead th:first-child { text-align:left; padding-left:25px; }
.a30-table tbody td {
  padding:11px 12px; border-bottom:1px solid var(--border);
  text-align:right; white-space:nowrap; font-size:12.5px;
}
.a30-table tbody td:first-child { text-align:left; padding-left:25px; white-space:normal; }
.a30-table tbody tr:hover td { background:rgba(124,58,237,.03); }
.a30-table .a30-tot td {
  background:rgba(124,58,237,.04); border-top:1.5px solid var(--accent-soft);
  font-weight:700; color:var(--accent);
}

/* ---------- Navegación ---------- */
.a30-nav {
  display:flex; align-items:center; gap:1.5rem;
  padding:1.1rem clamp(1rem,4vw,3rem);
  background:rgba(245,243,236,.82); /* se adapta con var(--bg) en dark */
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:padding .3s ease, border-color .3s ease;
}
:root[data-theme="dark"] .a30-nav { background:rgba(22,19,14,.80); }

.a30-nav__brand { display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.15rem; letter-spacing:.01em; }
.a30-nav__logo { width:34px; height:34px; transition:transform .4s ease; }
.a30-nav__brand:hover .a30-nav__logo { transform:rotate(90deg); }

.a30-nav__links { display:flex; gap:1.35rem; margin:0 auto; }
.a30-nav__links a {
  position:relative; font-size:.89rem; font-weight:500; color:var(--text-soft);
  padding:.3rem 0; transition:color .2s ease; white-space:nowrap;
}
.a30-nav__links a::after {
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--accent); transition:width .35s var(--ease);
}
.a30-nav__links a:hover,.a30-nav__links a.is-active { color:var(--text); }
.a30-nav__links a:hover::after,.a30-nav__links a.is-active::after { width:100%; }

/* ---------- Footer ---------- */
.a30-footer {
  max-width:1180px; margin:0 auto; padding:4rem clamp(1.2rem,5vw,2.5rem) 7rem;
  display:flex; flex-direction:column; align-items:center; gap:1.6rem;
  text-align:center; border-top:1px solid var(--border);
}
.a30-footer__brand { display:flex; align-items:center; gap:.8rem; }
.a30-footer__logo { width:46px; }
.a30-footer__word { font-size:1.2rem; font-weight:800; }
.a30-footer__tag { font-style:italic; color:var(--accent); font-size:.85rem; }
.a30-footer__links { display:flex; gap:1.6rem; flex-wrap:wrap; justify-content:center; }
.a30-footer__links a { color:var(--text-soft); font-size:.9rem; transition:color .2s ease; }
.a30-footer__links a:hover { color:var(--text); }

/* ---------- Utilidades ---------- */
.a30-grad {
  background:var(--grad);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.a30-wrap { max-width:1180px; margin:0 auto; padding:0 clamp(1.2rem,5vw,2.5rem); }
.a30-section { padding:clamp(3.5rem,8vw,7rem) 0; }
.a30-tscroll { overflow-x:auto; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .a30-nav__links { display:none; }
  .a30-table { min-width:560px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}