/* =============================================================
   Rendix — Auditoría de viáticos y gastos con IA
   Estilo: Dashboard Corporativo SaaS — denso, estructurado,
   neutros cálidos, alertas semánticas claras, botones muy definidos.
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* Neutros — grises fríos, profesionales (sin café ni dorado) */
  --bg: #f4f5f7;
  --bg-soft: #eceef1;
  --surface: #ffffff;
  --surface-2: #f2f3f5;
  --border: #dde1e6;
  --border-strong: #c2c8d0;
  --text: #1b1e22;
  --text-mute: #5b6169;
  --text-faint: #868c94;
  --cream: #ffffff;

  /* Acento profesional (marca) */
  --accent: #1f4e79;
  --accent-ink: #15375a;
  --accent-soft: #dbe6f2;
  --accent-contrast: #f5f9fc;

  /* Oro del logo (solo el isotipo, no botones ni texto) */
  --gold: #e8ae00;

  /* Semántica */
  --ok: #2f7d4f;
  --ok-soft: #e3f1e6;
  --ok-border: #a9d4b6;
  --warn: #5c6b47;
  --warn-solid: #7a8a63;
  --warn-soft: #eef0e8;
  --warn-border: #c7d0b8;
  --block: #b3261e;
  --block-solid: #a8241d;
  --block-soft: #fbe4e1;
  --block-border: #e8938c;
  --info: #3b5b8c;
  --info-soft: #e6edf7;

  --radius-s: 6px;
  --radius: 10px;
  --radius-l: 16px;
  --shadow-s: 0 1px 2px rgba(20, 23, 28, .08);
  --shadow: 0 2px 10px rgba(20, 23, 28, .10);
  --shadow-l: 0 12px 32px rgba(20, 23, 28, .16);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Manrope", var(--sans);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1b1d;
    --bg-soft: #212123;
    --surface: #252527;
    --surface-2: #2b2b2e;
    --border: #3a3a3d;
    --border-strong: #4a4a4e;
    --text: #eceae7;
    --text-mute: #a6a3a0;
    --text-faint: #7a7876;
    --cream: #252527;
    --accent-soft: #1c2c3f;
    --accent-contrast: #f5f9fc;
    --ok-soft: #1c2e21;
    --ok-border: #33553f;
    --warn-soft: #362a10;
    --warn-border: #6b501e;
    --block-soft: #351814;
    --block-border: #7a352e;
    --info-soft: #1c2636;
    --shadow-s: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow: 0 4px 18px rgba(0, 0, 0, .45);
    --shadow-l: 0 18px 44px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  --bg: #1b1b1d;
  --bg-soft: #212123;
  --surface: #252527;
  --surface-2: #2b2b2e;
  --border: #3a3a3d;
  --border-strong: #4a4a4e;
  --text: #eceae7;
  --text-mute: #a6a3a0;
  --text-faint: #7a7876;
  --cream: #252527;
  --accent-soft: #1c2c3f;
  --accent-contrast: #f5f9fc;
  --ok-soft: #1c2e21;
  --ok-border: #33553f;
  --warn-soft: #362a10;
  --warn-border: #6b501e;
  --block-soft: #351814;
  --block-border: #7a352e;
  --info-soft: #1c2636;
  --shadow-s: 0 1px 3px rgba(0, 0, 0, .35);
  --shadow: 0 4px 18px rgba(0, 0, 0, .45);
  --shadow-l: 0 18px 44px rgba(0, 0, 0, .55);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.1; letter-spacing: -0.01em; font-family: var(--display); }
::selection { background: var(--accent-soft); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 1rem; padding: .6rem 1rem; background: var(--cream); color: var(--text); z-index: 9999; border-radius: 8px; font-weight: 600; box-shadow: var(--shadow); }
.skip-link:focus { top: 1rem; }
.stack { display: flex; flex-direction: column; gap: var(--gap, 12px); }
.row { display: flex; align-items: center; gap: var(--gap, 12px); }
.muted { color: var(--text-mute); }
.faint { color: var(--text-faint); font-size: .85em; }
[hidden] { display: none !important; }
.only-mobile { display: none; }
@media (max-width: 719px) { .only-mobile { display: block; } .hide-mobile { display: none !important; } }

/* =============================================================
   4. Typography
   ============================================================= */
.eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 12px; }
.h1-hero { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; max-width: 20ch; margin-bottom: 18px; }
.h2-section { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; }
.lede { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--text-mute); max-width: 60ch; line-height: 1.6; }

/* =============================================================
   5. Components
   ============================================================= */

/* --- Buttons: muy definidos (bordes claros, relleno sólido, sombra) --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: .72em 1.3em; border-radius: var(--radius-s);
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  border: 1.5px solid transparent; transition: transform .12s var(--ease-out), box-shadow .16s var(--ease-out), background-color .16s var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent-ink); box-shadow: var(--shadow-s); }
.btn-primary:hover { background: var(--accent-ink); box-shadow: var(--shadow); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-s); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn-ok { background: var(--ok); color: #fff; border-color: #245f3d; box-shadow: var(--shadow-s); }
.btn-ok:hover { background: #245f3d; }
.btn-block { background: var(--block-solid); color: #fff; border-color: #7c1a14; box-shadow: var(--shadow-s); }
.btn-block:hover { background: #7c1a14; }
.btn-ghost { background: transparent; color: var(--text-mute); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: .5em 1em; font-size: .85rem; }
.btn-lg { padding: .95em 1.7em; font-size: 1.05rem; }
.btn-block-w { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }

/* --- Cards --- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  box-shadow: var(--shadow);
}
.card-pad { padding: 24px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.card-body { padding: 20px; }

/* --- Badges / chips semánticos --- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: .3em .7em; border-radius: 999px; font-size: .78rem; font-weight: 700; border: 1.5px solid transparent; }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-border); }
.badge-block { background: var(--block-soft); color: var(--block); border-color: var(--block-border); }
.badge-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-border); }
.badge-pending { background: var(--info-soft); color: var(--info); border-color: #b7c8e3; }
.badge-neutral { background: var(--surface-2); color: var(--text-mute); border-color: var(--border); }
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* --- Alert banners (infracciones) --- */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-s); border: 1.5px solid; font-size: .9rem; }
.alert-warn { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn); }
.alert-block { background: var(--block-soft); border-color: var(--block-border); color: #7a1a13; }
.alert strong { font-weight: 700; }

/* --- Toasts (nunca alert()) --- */
.toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--text); color: var(--cream); padding: 12px 16px; border-radius: var(--radius); box-shadow: var(--shadow-l); font-size: .9rem; opacity: 0; transform: translateY(8px); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.toast-warn { background: var(--warn-solid); }
.toast.toast-block { background: var(--block-solid); }
.toast.toast-ok { background: var(--ok); }

/* --- Forms --- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .82rem; font-weight: 700; color: var(--text-mute); }
.field input, .field select, .field textarea {
  padding: .68em .85em; border-radius: var(--radius-s); border: 1.5px solid var(--border-strong);
  background: var(--surface); color: var(--text); transition: border-color .15s var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field.is-edited input, .field.is-edited select { border-color: var(--info); background: var(--info-soft); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }

/* --- Segmented toggle (idioma / moneda) --- */
.segmented { display: inline-flex; background: var(--surface-2); border: 1.5px solid var(--border-strong); border-radius: 999px; padding: 3px; gap: 2px; }
.segmented button { padding: .4em 1em; border-radius: 999px; font-weight: 700; font-size: .82rem; color: var(--text-mute); }
.segmented button.is-active { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-s); }

/* --- Pill (créditos) --- */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: .45em .9em; border-radius: 999px; background: var(--surface-2); border: 1.5px solid var(--border-strong); font-weight: 700; font-size: .85rem; }
.pill-low { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn); }
.pill-empty { background: var(--block-soft); border-color: var(--block-border); color: var(--block); }

/* --- Dropzone --- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; width: 100%;
  border: 2px dashed var(--border-strong); border-radius: var(--radius-l); padding: 36px 20px;
  text-align: center; background: var(--surface-2); transition: border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone[data-state="working"] { opacity: .7; pointer-events: none; }

/* --- Modal --- */
dialog.modal { border: none; border-radius: var(--radius-l); padding: 0; max-width: 460px; width: calc(100vw - 32px); box-shadow: var(--shadow-l); background: var(--surface); color: var(--text); }
dialog.modal::backdrop { background: rgba(16, 18, 22, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal-head { padding: 20px 22px 0; }
.modal-body { padding: 16px 22px 22px; }
.modal-foot { padding: 0 22px 22px; display: flex; gap: 10px; justify-content: flex-end; }

/* --- Demo mode badge --- */
/* Neutro a propósito: ámbar/rojo quedan reservados para veredictos de la IA
   (advertencia/bloqueo de una boleta) — un badge de estado del producto no
   debe competir visualmente con esas señales. */
.demo-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--info-soft); border: 1.5px solid #b7c8e3; color: var(--info); font-weight: 700; font-size: .8rem; padding: .5em .9em; border-radius: var(--radius-s); }

/* --- Stat tiles --- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.stat-num { font-family: var(--display); font-size: 1.8rem; font-weight: 800; line-height: 1; }
.stat-label { font-size: .8rem; color: var(--text-mute); margin-top: 6px; }

/* --- Expense review card --- */
.expense-card { border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); overflow: hidden; }
.expense-card[data-estado="aprobado"] { border-color: var(--ok-border); }
.expense-card[data-estado="rechazado"] { border-color: var(--block-border); opacity: .75; }
.expense-top { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 16px; border-bottom: 1px solid var(--border); }
.expense-thumb { width: 96px; height: 96px; border-radius: var(--radius-s); object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); }
.expense-infractions { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--bg-soft); }
.expense-fields { padding: 16px; }
.expense-actions { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--surface-2); }
.expense-state-row { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: .82rem; }

/* --- Policy row (politicas.html) --- */
.policy-row { display: grid; grid-template-columns: 1fr 2fr auto auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }

/* --- Pricing table --- */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; align-items: stretch; }
.plan-card { border: 1.5px solid var(--border); border-radius: var(--radius-l); background: var(--surface); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.plan-card.is-featured { border-color: var(--accent); box-shadow: var(--shadow); position: relative; }
.plan-price { font-family: var(--display); font-size: 2.2rem; font-weight: 800; }
.plan-price small { font-size: .9rem; font-weight: 600; color: var(--text-mute); }
.plan-list { display: flex; flex-direction: column; gap: 8px; font-size: .92rem; }
.plan-list li { display: flex; gap: 8px; align-items: flex-start; list-style: none; }

/* =============================================================
   6. Sections — Landing
   ============================================================= */
.topnav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.topnav-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; flex: none; filter: drop-shadow(0 2px 5px rgba(20, 23, 28, .18)); }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.nav-links { display: flex; gap: 22px; font-weight: 600; font-size: .92rem; }
.nav-actions { display: flex; align-items: center; gap: 10px; }

.hero { padding-block: 64px 40px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero-proof { display: flex; gap: 18px; margin-top: 28px; flex-wrap: wrap; }
.hero-proof .stat-num { font-size: 1.3rem; }

.mock-window { border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-l); background: var(--surface); }
.mock-titlebar { display: flex; gap: 6px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }

.section { padding-block: 56px; }
.section-head { max-width: 640px; margin-bottom: 32px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.feature-card { padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.feature-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; margin-bottom: 12px; }

.steps-list { counter-reset: step; display: grid; gap: 16px; }
@media (min-width: 720px) { .steps-list { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding: 20px 18px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.step::before { counter-increment: step; content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-contrast); font-weight: 800; margin-bottom: 10px; }

.faq-item { border-bottom: 1px solid var(--border); padding-block: 14px; }
.faq-item summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--accent-ink); }

.footer { border-top: 1px solid var(--border); padding-block: 32px; }
.footer-grid { display: grid; gap: 24px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr repeat(3, 1fr); } }
.footer-links { display: flex; flex-direction: column; gap: 8px; font-size: .9rem; color: var(--text-mute); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--text-faint); }

/* =============================================================
   7. App shell (dashboard) — denso, calmo, cero animación decorativa
   ============================================================= */
.app-shell { min-height: 100svh; display: flex; flex-direction: column; background: var(--bg); }
.app-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; }
.app-main { flex: 1; padding: 22px 20px 60px; }
.app-container { max-width: 1080px; margin-inline: auto; display: flex; flex-direction: column; gap: 20px; }
.app-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); }
.app-tab { padding: 10px 6px; font-weight: 700; font-size: .9rem; color: var(--text-mute); border-bottom: 2px solid transparent; }
.app-tab.is-active { color: var(--accent-ink); border-color: var(--accent); }
.account-menu { position: relative; }
.account-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-l); min-width: 200px; padding: 6px; display: none; }
.account-menu.is-open .account-menu-panel { display: block; }
.account-menu-item { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: var(--radius-s); font-size: .9rem; }
.account-menu-item:hover { background: var(--surface-2); }

/* =============================================================
   8. Auth (login / registro embebidos)
   ============================================================= */
.auth-card { max-width: 420px; margin-inline: auto; }
.auth-switch { text-align: center; font-size: .88rem; color: var(--text-mute); margin-top: 14px; }

/* =============================================================
   9. Effects — reveals mínimos (sin GSAP; CSS + IO)
   ============================================================= */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =============================================================
   10. Responsive helpers
   ============================================================= */
@media (min-width: 540px) { .container { padding-inline: 28px; } }
@media (min-width: 720px) {
  .expense-top { grid-template-columns: 120px 1fr; }
}
@media (min-width: 960px) {
  .app-main { padding: 30px 32px 70px; }
}
@media (min-width: 1280px) {
  .container { padding-inline: 32px; }
}

/* =============================================================
   11. Print (para exportaciones visuales, opcional)
   ============================================================= */
@media print {
  .app-topbar, .app-tabs, .expense-actions, .dropzone { display: none !important; }
}