/* ---------------------------------------------------------------------------
   farmearaura.com — primitivas reutilizables ("cosmic arcade")
   Depende de /css/tokens.css. Se sirve como /css/components.css.

   OJO CON EL ORDEN DE ADOPCION: .btn y .card ya existen inline en app.html,
   evento.tpl.html y duelos.css con otra definicion. Como el <style> inline va
   despues del <link>, el inline gana en las propiedades que declara, pero las
   que NO declara (p.ej. text-transform) se filtrarian desde aca y cambiarian
   botones existentes sin querer. Por eso este archivo todavia NO se enlaza en
   las plantillas de produccion: cada plantilla lo adopta en su fase, borrando
   sus reglas duplicadas en el mismo commit. Mientras tanto vive en
   docs/design/styleguide.html, que es la superficie de prueba.

   Regla de la casa: ningun valor de color/espacio/tipografia literal aca.
   Todo sale de tokens.css.
--------------------------------------------------------------------------- */

/* ===== Botones ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:14px 26px;border-radius:var(--r-pill);
  font-family:var(--font-body);font-weight:700;font-size:var(--t-sm);
  text-transform:uppercase;letter-spacing:.04em;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--t-fast) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out),
             background var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease-out);
}
.btn:active{transform:translateY(0) scale(.98)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn__icon{flex:none;width:1.1em;height:1.1em}

/* Primario: la accion que importa en cada pantalla. Uno por vista. */
.btn--primary{
  background:var(--grad-cta);color:var(--ink-hi);
  border-color:transparent;box-shadow:var(--glow-cta);
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 40px -10px rgba(168,85,247,.85),
             0 0 0 1px rgba(232,121,249,.5) inset;
}

/* Fantasma: acciones secundarias. Lleva flecha final opcional (.btn__arrow) */
.btn--ghost{
  background:transparent;color:var(--ink-hi);border-color:var(--line-strong);
}
.btn--ghost:hover{
  border-color:var(--aura-400);background:rgba(139,92,246,.10);
}
.btn__arrow{
  flex:none;display:inline-block;
  transition:transform var(--t-fast) var(--ease-out);
}
.btn--ghost:hover .btn__arrow{transform:translateX(3px)}

/* Cyan: reservado para "ver/entrar" sobre datos (entradas, fuentes). */
.btn--cyan{
  background:var(--ion-300);color:var(--void);border-color:var(--ion-300);
  text-transform:none;letter-spacing:0;
}
.btn--cyan:hover{background:var(--ion-200);transform:translateY(-2px)}

.btn--sm{padding:9px 16px;font-size:var(--t-xs)}
.btn--block{display:flex;width:100%}

/* ===== Badges ============================================================= */
/* Nunca mas de uno por tarjeta. */
.badge{
  display:inline-flex;align-items:center;gap:var(--s-1);
  padding:6px 12px;border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:var(--t-eyebrow);font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;
  border:1px solid var(--line-strong);color:var(--ink-body);
  background:rgba(255,255,255,.03);
}
.badge--hot{
  color:var(--flare-300);border-color:var(--line-glow);
  background:rgba(217,70,239,.14);
}
.badge--popular{
  color:var(--aura-300);border-color:var(--line-strong);
  background:rgba(139,92,246,.14);
}
.badge--historic{
  color:var(--bronze);border-color:rgba(251,122,60,.4);
  background:rgba(251,122,60,.12);
}
/* Eventos futuros en los mapas de batallas */
.badge--upcoming{
  color:var(--void);background:var(--ion-300);border-color:var(--ion-300);
}
.badge--guide{color:var(--ion-200);border-color:rgba(34,211,238,.35);background:rgba(34,211,238,.10)}
.badge--culture{color:var(--flare-300);border-color:var(--line-glow);background:rgba(217,70,239,.12)}
.badge--list{color:var(--gold);border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.12)}

/* ===== Cards ============================================================== */
.card{
  position:relative;
  background-color:var(--surface);background-image:var(--grad-card);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--glow-sm);overflow:hidden;
}
.card__head{
  padding:var(--s-4) var(--s-5) var(--s-3);
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-weight:600;font-size:var(--t-eyebrow);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-lo);
}
.card__body{padding:var(--s-5)}

/* Solo las tarjetas que son un link entero levantan en hover. */
.card--interactive{
  transition:transform var(--t-base) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease-out);
}
.card--interactive:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);box-shadow:var(--glow-md);
}
.card--glow{border-color:var(--line-glow);box-shadow:var(--glow-md)}

/* Toda media dentro de una card declara aspect-ratio: es el arreglo de CLS.
   .card__media va en el wrapper; la relacion se elige con un modificador. */
.card__media{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.card__media--wide{aspect-ratio:16/10}
.card__media--square{aspect-ratio:1/1}
.card__media img,.card__media svg{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Campos de formulario =============================================== */
.field{
  display:block;width:100%;
  padding:14px 16px;border-radius:var(--r-md);
  background:var(--surface-3);border:1px solid var(--line);
  color:var(--ink-hi);font-family:var(--font-body);
  font-size:16px; /* minimo 16px: abajo de eso iOS hace zoom al enfocar */
  transition:border-color var(--t-fast) var(--ease-out),
             box-shadow var(--t-fast) var(--ease-out);
}
.field::placeholder{color:var(--ink-xlo)}
.field:focus{
  outline:none;border-color:var(--aura-400);
  box-shadow:0 0 0 3px rgba(139,92,246,.22);
}
.field__label{
  display:block;margin-bottom:var(--s-2);
  font-size:var(--t-eyebrow);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-lo);
}

/* ===== Progreso =========================================================== */
/* Marcado esperado:
   <div class="progress" role="progressbar" aria-valuenow="1" aria-valuemin="0"
        aria-valuemax="7"><i style="width:14%"></i></div>
   El numero visible ("1 / 7") va al lado, no dentro. */
.progress{
  height:4px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);overflow:hidden;
}
.progress>i{
  display:block;height:100%;border-radius:var(--r-pill);
  background:var(--grad-aura);box-shadow:0 0 12px rgba(168,130,255,.55);
  transition:width var(--t-slow) var(--ease-out);
}
.progress__label{
  font-family:var(--font-mono);font-size:var(--t-xs);color:var(--ink-lo);
  font-variant-numeric:tabular-nums;
}

/* ===== Cabecera de seccion ================================================ */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--font-body);font-size:var(--t-eyebrow);font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-lo);
}
.eyebrow__glyph{color:var(--aura-400);font-size:1.1em;line-height:1}
.section-head{display:flex;flex-direction:column;gap:var(--s-3);max-width:58ch}
.section-head h2{
  font-family:var(--font-display);font-weight:600;font-size:var(--t-h2);
  line-height:1.02;letter-spacing:-.02em;color:var(--ink-hi);margin:0;
  text-wrap:balance;
}
.section-head p{
  font-size:var(--t-lead);line-height:1.65;color:var(--ink-body);margin:0;
}
.section-head .btn{align-self:flex-start;margin-top:var(--s-2)}

/* ===== Chips de features (hero) =========================================== */
.chip{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);
  max-width:12ch;
}
.chip__icon{
  display:grid;place-items:center;width:40px;height:40px;
  border-radius:var(--r-sm);background:rgba(139,92,246,.12);
  color:var(--aura-300);
}
.chip__icon svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none}
.chip__label{font-size:var(--t-xs);line-height:1.3;color:var(--ink-lo)}

/* ===== Aura ring ==========================================================
   El medidor circular de score, la firma visual del sitio. SVG y no un truco
   con conic-gradient: el arco se anima con stroke-dashoffset, escala sin
   pixelarse y el texto del centro queda como HTML real (seleccionable, con la
   tipografia del sistema) en vez de <text> dentro del SVG.

   Markup esperado:
     <div class="aura-ring aura-ring--md" data-value="237" data-max="700">
       <svg class="aura-ring__svg" viewBox="0 0 120 120" aria-hidden="true">
         <circle class="aura-ring__track" cx="60" cy="60" r="52"/>
         <circle class="aura-ring__glow"  cx="60" cy="60" r="52"/>
         <circle class="aura-ring__arc"   cx="60" cy="60" r="52"/>
       </svg>
       <div class="aura-ring__center">
         <span class="aura-ring__label">Tu aura actual</span>
         <b class="aura-ring__num score-num">237</b>
         <span class="aura-ring__max">/ 700</span>
       </div>
     </div>

   El SVG va aria-hidden: lo que se anuncia es el texto del centro, asi no se
   lee dos veces. El degradado y el filtro de glow viven una sola vez por
   pagina en <svg class="aura-ring-defs"> (ver aura-ring.js / styleguide).
   Sin JS el arco no se dibuja pero el numero se lee igual.
--------------------------------------------------------------------------- */
.aura-ring-defs{position:absolute;width:0;height:0;overflow:hidden}

.aura-ring{
  --ring-size:200px;
  position:relative;flex:none;
  width:var(--ring-size);height:var(--ring-size);
  display:grid;place-items:center;
}
.aura-ring--sm{--ring-size:64px}
.aura-ring--md{--ring-size:200px}
.aura-ring--lg{--ring-size:260px}

.aura-ring__svg{
  position:absolute;inset:0;width:100%;height:100%;
  transform:rotate(-90deg); /* el arco arranca arriba, no a las 3 en punto */
}
.aura-ring__track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:8}
.aura-ring__arc,.aura-ring__glow{
  fill:none;stroke-width:8;stroke-linecap:round;
  stroke:url(#aura-ring-grad);
  /* JS fija dasharray/dashoffset segun data-value */
  stroke-dasharray:327;stroke-dashoffset:327;
  transition:stroke-dashoffset 900ms var(--ease-out);
}
.aura-ring__glow{filter:url(#aura-ring-glow);opacity:.75}

.aura-ring__center{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:2px;text-align:center;line-height:1;
}
.aura-ring__label{
  font-size:calc(var(--ring-size) * .055);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-lo);
}
.aura-ring__num{font-size:calc(var(--ring-size) * .26);line-height:1}
.aura-ring__max{font-size:calc(var(--ring-size) * .07);color:var(--ink-lo);
  font-variant-numeric:tabular-nums}

/* Aura negativa: el arco se vacia en rojo en vez de llenarse. La calculadora
   admite puntajes bajo cero ("bancarrota de aura") y es parte del chiste. */
.aura-ring--neg .aura-ring__arc,.aura-ring--neg .aura-ring__glow{stroke:var(--danger)}
.aura-ring--neg .aura-ring__num{color:var(--danger);text-shadow:0 0 28px rgba(255,77,109,.45)}

/* A 64px solo entra el numero. */
.aura-ring--sm .aura-ring__label,.aura-ring--sm .aura-ring__max{display:none}
.aura-ring--sm .aura-ring__num{font-size:calc(var(--ring-size) * .3)}

/* ===== Utilidades minimas ================================================= */
.h-display{
  font-family:var(--font-display);font-weight:700;font-size:var(--t-display);
  line-height:.88;letter-spacing:-.03em;text-transform:uppercase;
  text-wrap:balance;color:var(--ink-hi);margin:0;
}
.h-poster{
  font-family:var(--font-display);font-weight:700;font-size:var(--t-poster);
  line-height:.88;letter-spacing:-.03em;text-transform:uppercase;
  color:var(--ink-hi);margin:0;transform:skewX(-7deg);
}
.lead{font-size:var(--t-lead);line-height:1.65;color:var(--ink-body);max-width:58ch}
.marker{font-family:var(--font-marker);color:var(--ink-lo);transform:rotate(-6deg);display:inline-block}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}