/* assets/css/theme-pages.css - Identidad «Ácido y Asfalto» aplicada a vistas concretas: perfil y ajustes, garaje, registros y acceso.
   Va después de theme.css. account.css se carga dentro de <body> (después de este archivo), por eso sus reglas llevan el prefijo .acct.
   Índice: 1 perfil y ajustes · 2 garaje · 3 registros · 4 acceso (login, registro, recuperar) · 5 movimiento reducido */


/* ==========================================================================
   1. PERFIL Y AJUSTES (mi-cuenta.php, ajustes.php)
   ========================================================================== */
.acct .acct-card, .acct .acct-stat {
  border-radius: var(--r-card); background-color: var(--card); background-image: var(--noise);
  box-shadow: 0 0 0 1px var(--border), inset 0 1px 0 var(--glass-edge), var(--lift-1);
}

/* Identidad: pieza oscura con nombre enorme y avatar de lima */
.acct .acct-hero {
  gap: 1.3rem; padding: 1.6rem; color: #f1f3ea; border-radius: 2.25rem 2.25rem 2.25rem 0.6rem;
  background-color: #11140e; -webkit-backdrop-filter: none; backdrop-filter: none;
  background-image: radial-gradient(90% 90% at 100% 0%, rgb(var(--acid) / 0.28), transparent 58%), var(--noise-dark), linear-gradient(160deg, #20241b 0%, #0f110d 100%);
  box-shadow: 0 0 0 1px rgb(241 243 234 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.1), 0 28px 50px -26px rgb(0 0 0 / 0.8);
}
.acct .acct-avatar {
  width: 5.25rem; height: 5.25rem; border-radius: 1.6rem 1.6rem 1.6rem 0.5rem; color: rgb(var(--ink)); background: rgb(var(--acid));
  font-size: 2.2rem; letter-spacing: -0.05em;
  box-shadow: 0 0 0 3px #11140e, 0 0 0 4.5px rgb(var(--acid) / 0.55), inset 0 -3px 0 rgb(0 0 0 / 0.1);
}
.acct .acct-avatar img { border-radius: inherit; }
.acct .acct-id h1 { font: 800 clamp(2rem, 1.3rem + 2.8vw, 3.2rem)/0.95 var(--font-display); letter-spacing: -0.06em; }
.acct .acct-mail { color: rgb(241 243 234 / 0.66); }
.acct .acct-meta { gap: 0.3rem 1rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(241 243 234 / 0.5); }

/* Cifras: etiqueta en microcapitales, número grande, índice 01-04 y dos variaciones */
.acct .acct-stats { counter-reset: acctstat; }
.acct .acct-stat { position: relative; min-height: 6.6rem; display: flex; flex-direction: column; justify-content: flex-end; counter-increment: acctstat; padding: 1rem 1.1rem; }
.acct .acct-stat::after { content: counter(acctstat, decimal-leading-zero); position: absolute; top: 0.95rem; right: 1.1rem; font: 700 0.625rem/1 var(--font-body); letter-spacing: var(--tracking-eyebrow); color: var(--muted-foreground); opacity: 0.6; }
.acct .acct-stat b { font: 800 clamp(2.2rem, 1.6rem + 2vw, 3rem)/0.9 var(--font-display); letter-spacing: -0.06em; }
.acct .acct-stat span { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.acct .acct-stat svg { color: var(--primary-text); }
.acct .acct-stat:nth-child(2) { color: #f1f3ea; background-color: #11140e; background-image: var(--noise-dark); }
.acct .acct-stat:nth-child(2) b { color: rgb(var(--acid)); }
.acct .acct-stat:nth-child(2) span, .acct .acct-stat:nth-child(2)::after { color: rgb(241 243 234 / 0.6); }
.acct .acct-stat:nth-child(3) { background-color: rgb(var(--acid) / 0.2); box-shadow: 0 0 0 1px rgb(var(--acid) / 0.55), inset 0 1px 0 var(--glass-edge), var(--lift-1); }
.dark .acct .acct-stat:nth-child(2) { background-color: #1e221a; box-shadow: 0 0 0 1px rgb(var(--acid) / 0.28), var(--lift-1); }
.dark .acct .acct-stat:nth-child(3) { background-color: rgb(var(--acid) / 0.09); }

/* Secciones y campos */
.acct .acct-section > header h2 { font: 800 1.4rem/1 var(--font-display); letter-spacing: -0.045em; }
.acct .acct-field > label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.acct .acct-input {
  min-height: 3rem; border: 0; border-radius: var(--r-control); background: var(--card-sunken);
  box-shadow: inset 0 1px 2px rgb(var(--ink) / 0.07), 0 0 0 1px var(--border-strong);
  transition: box-shadow 0.22s var(--ease-out), background-color 0.2s;
}
.acct .acct-input:focus { background: var(--card); box-shadow: 0 0 0 1.5px rgb(var(--a-500)), 0 0 0 0.3rem rgb(var(--acid) / 0.3), 0 10px 24px -14px rgb(var(--glow) / 0.8); }
.acct .acct-rows { border-radius: 1.3rem; }
.acct .acct-row:hover { background: rgb(var(--acid) / 0.12); }
.acct .acct-row-text strong { font-weight: 700; letter-spacing: -0.01em; }

/* Interruptor, selector segmentado y contador con la lima de marca */
.acct .ios-switch input:checked + i { background: rgb(var(--acid)); box-shadow: inset 0 0 0 1px rgb(var(--ink) / 0.12); }
.acct .ios-switch input:checked + i::after { background: rgb(var(--ink)); }
.acct .ios-switch input:focus-visible + i { outline-color: var(--primary-text); }
.acct .seg { border-radius: var(--r-pill); background: var(--card-sunken); box-shadow: inset 0 0 0 1px var(--border); }
.acct .seg-opt span { border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 700; }
.acct .seg-opt input:checked + span { color: var(--chip-on-fg); background: var(--chip-on-bg); box-shadow: 0 6px 14px -8px rgb(var(--ink) / 0.6); }
.acct .seg-opt input:focus-visible + span { outline-color: var(--primary-text); }
.acct .stepper { border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--border); }
.acct .stepper button { color: var(--primary-text); }
.acct .acct-spin { border-color: rgb(var(--ink) / 0.25); border-top-color: rgb(var(--ink)); }
.acct .acct-logout, .acct .acct-danger-btn { color: var(--bad-text); border-radius: var(--r-pill); }
.acct .acct-danger > header h2 { color: var(--bad-text); }


/* ==========================================================================
   2. GARAJE (vehiculos.php)
   ========================================================================== */
.gv-card {
  border-radius: var(--r-card); background-color: var(--card); background-image: var(--noise);
  box-shadow: 0 0 0 1px var(--border), inset 0 1px 0 var(--glass-edge), var(--lift-1);
}
.gv-media { border-radius: var(--r-card) var(--r-card) 0 0; }
@media (hover: hover) { .gv-card:hover { box-shadow: 0 0 0 1px var(--border-strong), inset 0 1px 0 var(--glass-edge), var(--lift-3); } }
.gv-body h3 { font: 800 1.5rem/1 var(--font-display); letter-spacing: -0.055em; }
.gv-sub { margin-top: 0.35rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.gv-stats dt { font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-eyebrow); }
.gv-stats dd { margin-top: 0.3rem; font: 800 1.2rem/1 var(--font-display); letter-spacing: -0.05em; }
.gv-primary { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--ink)); background: rgb(var(--acid)); box-shadow: 0 6px 14px -6px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.5); }
.gv-card.is-primary { box-shadow: 0 0 0 2px rgb(var(--acid)), inset 0 1px 0 var(--glass-edge), var(--lift-2); }
.gv-add { border-radius: var(--r-card); }
.gv-add strong { font-weight: 800; letter-spacing: -0.04em; }
.gv-add-icon { color: rgb(var(--ink)); background: rgb(var(--acid)); border-radius: 1.3rem 1.3rem 1.3rem 0.4rem; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.1); transition: rotate 0.4s var(--ease-out); }
@media (hover: hover) { .gv-add:hover .gv-add-icon { rotate: 90deg; } }
/* Tres columnas escalonadas: la del centro baja, el garaje deja de ser una rejilla perfecta */
@media (min-width: 64rem) {
  .gv-grid { padding-bottom: 1.75rem; }
  .gv-grid > .gv-card:nth-child(3n + 2), .gv-grid > .gv-add:nth-child(3n + 2) { translate: 0 1.75rem; }
}


/* ==========================================================================
   3. REGISTROS (repostajes, gastos, mantenimientos)
   ========================================================================== */
.record-card .record-mark { border-radius: 0.95rem; color: var(--primary-text); background: rgb(var(--acid) / 0.3); }
.record-figure { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.05em; }
.compact-kpi-value { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.05em; }


/* ==========================================================================
   4. ACCESO: siempre sobre asfalto (el cuerpo puede ser claro, la pista no)
   ========================================================================== */
.login-shell {
  --a-200: 56 79 15; --a-300: 216 246 115; --a-400: 198 240 53; --a-500: 179 230 18; --a-600: 150 199 10; --a-700: 117 160 6;
  --foreground: #f1f3ea; --muted-foreground: #a3a998; --card: #151812; --card-sunken: #10130e; --accent: #1e221a;
  --muted: rgb(241 243 234 / 0.06); --border: rgb(241 243 234 / 0.09); --border-strong: rgb(241 243 234 / 0.18);
  --primary-text: #b3e612; --glass: rgb(241 243 234 / 0.05); --glass-edge: rgb(241 243 234 / 0.08);
  background-color: #0c0e0a;
  background-image: radial-gradient(50rem 28rem at 50% 105%, rgb(var(--acid) / 0.16), transparent 65%), radial-gradient(34rem 20rem at 12% -6%, rgb(var(--acid) / 0.09), transparent 70%), var(--noise-dark);
  background-size: auto, auto, 10rem 10rem;
  overflow: hidden;
}
/* Fuera el cuentarrevoluciones y la bandera de cuadros: una «F» enorme de contorno */
.login-shell::before {
  content: 'F'; left: 50%; top: 50%; width: auto; aspect-ratio: auto; border-radius: 0; transform: translate(-50%, -50%);
  -webkit-mask: none; mask: none; background: none; opacity: 1;
  font: 800 min(46rem, 130vw)/1 var(--font-display); letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgb(var(--acid) / 0.18);
}
.login-shell::after { display: none; }
.login-card {
  border-radius: 2.25rem 2.25rem 2.25rem 0.6rem; background-color: #151812; background-image: var(--noise-dark);
  box-shadow: 0 0 0 1px rgb(241 243 234 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.08), 0 40px 80px -30px rgb(0 0 0 / 0.9);
}
.login-card::after { height: 0.25rem; background: linear-gradient(90deg, rgb(var(--acid)), transparent 55%); }
.auth-title { font: 800 clamp(2rem, 1.5rem + 2.2vw, 2.8rem)/0.96 var(--font-display); letter-spacing: -0.06em; }
.auth-link, .auth-switch a { color: var(--primary-text); font-weight: 700; }
.auth-flash.is-ok { color: #d8f673; background: rgb(var(--acid) / 0.1); border-color: rgb(var(--acid) / 0.35); }
.auth-done-icon { color: rgb(var(--ink)); background: rgb(var(--acid)); border-radius: 1.1rem 1.1rem 1.1rem 0.35rem; }
.auth-back:hover { background: rgb(var(--acid) / 0.12); }


/* ==========================================================================
   5. MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .gv-add-icon { transition: none; }
  .gv-add:hover .gv-add-icon { rotate: none; }
}