/* ==========================================================
   Grupo Grávalos · Automatización de Facturas con IA
   Rediseño: minimalismo real al estilo Apple.
   Principio: mucho blanco, tipografía ligera y grande,
   un único acento de color usado con moderación, sombras
   casi imperceptibles, nada de gradientes ruidosos.
   Identidad Grávalos: azul marino (texto/marca) + dorado
   (acento puntual, nunca protagonista).
   ========================================================== */

:root{
  --navy:#13294B;
  --navy-soft:#2a3f5f;
  --gold:#C8962C;
  --gold-soft:#E8C77A;
  --sky:#3E7CB1;

  --bg:#fbfbfd;
  --surface:#ffffff;
  --text:#1d1d1f;
  --text-soft:#6e6e73;
  --text-faint:#8a8a8e;
  --border:#e8e8ed;
  --border-soft:#f0f0f3;

  --danger:#c0392b;
  --success:#1d7a52;
  --warning:#b8860b;
  --info:#2f6fa8;

  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow-xs:0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:0 2px 8px rgba(0,0,0,0.05);
  --shadow-md:0 8px 24px rgba(0,0,0,0.06);

  --ease:cubic-bezier(.25,.8,.25,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.011em;
  line-height:1.5;
}

a{color:inherit;text-decoration:none;}
::selection{background:rgba(200,150,44,0.25);}

/* ---------- Header / Nav ---------- */
.topbar{
  background:rgba(251,251,253,0.82);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--border-soft);
}
.topbar-inner{
  max-width:1120px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:60px;
  padding:0 24px;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand img.mark{
  width:28px;height:28px;border-radius:8px;display:block;
}
.brand .brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand .brand-text b{font-weight:600;font-size:.95rem;color:var(--navy);letter-spacing:-0.01em;}
.brand .brand-text small{font-weight:400;font-size:.68rem;color:var(--text-faint);}

nav.main-nav{
  display:flex;
  gap:2px;
}
nav.main-nav a{
  padding:8px 14px;
  border-radius:980px;
  font-size:.84rem;
  font-weight:500;
  color:var(--text-soft);
  transition:.2s var(--ease);
  display:flex;align-items:center;gap:6px;
}
nav.main-nav a:hover{color:var(--navy);background:rgba(19,41,75,0.04);}
nav.main-nav a.active{color:var(--navy);background:rgba(19,41,75,0.06);font-weight:600;}

@media(max-width:600px){
  .topbar-inner{padding:0 16px;}
  .brand .brand-text small{display:none;}
  nav.main-nav a span{display:none;}
  nav.main-nav a{padding:8px 11px;}
}

/* ---------- Layout ---------- */
.page{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px 80px;
  width:100%;
  flex:1;
}
.page-header{
  margin:48px 0 40px;
  text-align:left;
  animation:fadeUp .5s var(--ease);
}
.page-header h1{
  font-size:clamp(1.9rem, 3.2vw, 2.6rem);
  margin:0 0 10px;
  color:var(--navy);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.1;
}
.page-header p{
  margin:0;
  color:var(--text-soft);
  font-size:1.08rem;
  max-width:600px;
  font-weight:400;
}
.breadcrumb-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--gold);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.02em;
  margin-bottom:12px;
}
.breadcrumb-tag::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
  display:inline-block;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
  border:1px solid var(--border-soft);
  padding:28px;
  transition:box-shadow .3s var(--ease);
  animation:fadeUp .5s var(--ease);
}
.grid{
  display:grid;
  gap:16px;
}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:980px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .grid.cols-3{grid-template-columns:repeat(1,1fr);}
  .grid.cols-2{grid-template-columns:repeat(1,1fr);}
}
@media(max-width:560px){
  .grid.cols-4{grid-template-columns:1fr;}
}

/* KPI cards */
.kpi-card{
  background:var(--surface);
  border-radius:var(--radius-md);
  border:1px solid var(--border-soft);
  padding:22px 22px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--border);}
.kpi-card .kpi-icon-badge{
  width:34px;height:34px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:.88rem;
  margin-bottom:2px;
  background:rgba(19,41,75,0.05);
  color:var(--navy);
}
.kpi-card .kpi-label{font-size:.76rem;color:var(--text-faint);font-weight:500;letter-spacing:.01em;}
.kpi-card .kpi-value{font-size:1.9rem;font-weight:700;color:var(--navy);letter-spacing:-0.03em;}
.kpi-card .kpi-sub{font-size:.78rem;color:var(--text-soft);font-weight:500;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  border:none;border-radius:980px;
  padding:11px 20px;
  font-size:.88rem;font-weight:600;
  cursor:pointer;
  transition:.2s var(--ease);
  font-family:inherit;
  letter-spacing:-0.01em;
}
.btn:active{transform:scale(0.97);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover:not(:disabled){background:var(--navy-soft);}
.btn-accent{background:var(--navy);color:#fff;position:relative;}
.btn-accent:hover:not(:disabled){background:var(--navy-soft);}
.btn-accent::after{
  content:'';
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--gold);
  display:none;
}
.btn-sky{background:var(--sky);color:#fff;}
.btn-sky:hover:not(:disabled){filter:brightness(1.08);}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text);}
.btn-outline:hover:not(:disabled){border-color:var(--navy);color:var(--navy);background:rgba(19,41,75,0.03);}
.btn-danger{background:#fbeae8;color:var(--danger);}
.btn-danger:hover:not(:disabled){background:var(--danger);color:#fff;}
.btn-sm{padding:7px 13px;font-size:.78rem;}
.btn-block{width:100%;justify-content:center;}

/* ---------- Forms ---------- */
label{font-size:.8rem;font-weight:600;color:var(--text);display:block;margin-bottom:6px;letter-spacing:-0.005em;}
input[type=text],input[type=number],input[type=date],select,textarea{
  width:100%;
  padding:11px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:.92rem;
  font-family:inherit;
  background:#fcfcfd;
  transition:.2s var(--ease);
  color:var(--text);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--navy);background:#fff;box-shadow:0 0 0 3.5px rgba(19,41,75,0.08);
}
.form-row{margin-bottom:18px;}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
@media(max-width:700px){.form-grid{grid-template-columns:1fr;}}

/* ---------- Upload dropzone ---------- */
.dropzone{
  border:1.5px dashed var(--border);
  border-radius:var(--radius-lg);
  padding:52px 20px;
  text-align:center;
  background:#fcfcfd;
  cursor:pointer;
  transition:.25s var(--ease);
}
.dropzone:hover{border-color:var(--navy);background:#fafafc;}
.dropzone.dragover{border-color:var(--gold);background:#fdfaf3;}
.dropzone .dz-icon{
  width:56px;height:56px;border-radius:50%;
  background:rgba(19,41,75,0.05);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  color:var(--navy);font-size:1.3rem;
}
.dropzone p{margin:4px 0;color:var(--text-soft);}
.dropzone strong{color:var(--navy);}
.file-chip{
  display:inline-flex;align-items:center;gap:10px;
  background:#f3f3f5;color:var(--navy);
  padding:8px 15px;border-radius:999px;font-weight:500;font-size:.84rem;
  margin-top:14px;
  border:1px solid var(--border);
}
.file-chip i.fa-xmark{color:var(--danger);cursor:pointer;}

/* ---------- Status badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:999px;
  font-size:.72rem;font-weight:600;
  text-transform:capitalize;
  letter-spacing:-0.005em;
}
.badge-pendiente{background:#fdf3e3;color:#9a6a05;}
.badge-validada{background:#e9f1f8;color:var(--info);}
.badge-exportada{background:#e6f5ee;color:var(--success);}
.badge-rechazada{background:#fbeae8;color:var(--danger);}
.badge-ai{background:#f7f1e3;color:var(--gold);border:1px solid #efdfb8;}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius-md);}
table.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:.87rem;
}
table.data-table th{
  text-align:left;
  background:transparent;
  color:var(--text-faint);
  padding:12px 14px;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
table.data-table td{
  padding:14px;
  border-bottom:1px solid var(--border-soft);
  vertical-align:middle;
}
table.data-table tr{transition:background .15s;}
table.data-table tr:hover td{background:#fafafc;}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;}

.empty-state{
  text-align:center;
  padding:64px 20px;
  color:var(--text-soft);
}
.empty-state .es-icon{
  width:64px;height:64px;border-radius:50%;
  background:#f4f4f6;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  font-size:1.6rem;color:var(--text-faint);
}

/* ---------- Toast ---------- */
#toast-container{
  position:fixed;bottom:24px;right:24px;
  display:flex;flex-direction:column;gap:10px;
  z-index:999;
}
.toast{
  background:rgba(29,29,31,0.92);
  backdrop-filter:blur(12px);
  color:#fff;
  padding:13px 18px;border-radius:14px;
  font-size:.86rem;font-weight:500;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
  display:flex;align-items:center;gap:10px;
  min-width:250px;
  animation:slideIn .3s var(--ease);
}
.toast.success{background:rgba(29,122,82,0.95);}
.toast.error{background:rgba(192,57,43,0.95);}
.toast.info{background:rgba(47,111,168,0.95);}
@keyframes slideIn{from{transform:translateX(40px);opacity:0;}to{transform:translateX(0);opacity:1;}}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(29,29,31,0.35);
  backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;
  z-index:200;padding:20px;
}
.modal-overlay.open{display:flex;animation:fadeIn .2s var(--ease);}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-box{
  background:#fff;border-radius:22px;
  max-width:560px;width:100%;
  max-height:88vh;overflow-y:auto;
  padding:30px;
  box-shadow:0 20px 60px rgba(0,0,0,0.22);
  animation:popIn .25s var(--ease);
  border:1px solid var(--border-soft);
}
@keyframes popIn{from{opacity:0;transform:scale(0.97) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
.modal-box h2{margin-top:0;color:var(--navy);font-size:1.2rem;font-weight:700;letter-spacing:-0.02em;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;}

/* ---------- Footer ---------- */
footer.site-footer{
  text-align:center;
  padding:28px;
  color:var(--text-faint);
  font-size:.78rem;
  border-top:1px solid var(--border-soft);
  background:var(--surface);
}
footer.site-footer .footer-brand{color:var(--navy);font-weight:600;}
footer.site-footer .footer-dot{color:var(--gold);}

/* ---------- Hero (dashboard) ---------- */
.hero{
  padding:64px 0 40px;
  position:relative;
  text-align:left;
}
.hero-content{max-width:680px;}
.hero h1{
  font-size:clamp(2.1rem, 4vw, 3.2rem);
  font-weight:700;
  letter-spacing:-0.035em;
  margin:0 0 16px;
  color:var(--navy);
  line-height:1.08;
}
.hero p{
  color:var(--text-soft);
  font-size:1.15rem;
  margin:0 0 28px;
  max-width:560px;
  font-weight:400;
  line-height:1.5;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--gold);
  padding:0;
  font-size:.82rem;font-weight:600;letter-spacing:.01em;
  margin-bottom:18px;
}
.hero-tag::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
  display:inline-block;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- Misc ---------- */
.section-title{
  font-size:1rem;
  font-weight:700;
  color:var(--navy);
  margin:0 0 18px;
  display:flex;align-items:center;gap:9px;
  letter-spacing:-0.015em;
}
.section-title i{color:var(--text-faint);font-size:.85em;}
.chart-box{position:relative;height:270px;}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.muted{color:var(--text-soft);font-size:.85rem;}
.spinner{
  width:16px;height:16px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,0.4);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
  display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}
.ai-banner{
  background:#faf7ef;
  border:1px solid #efdfb8;
  color:var(--navy);
  border-radius:var(--radius-md);padding:14px 18px;font-size:.85rem;
  display:flex;gap:10px;align-items:flex-start;margin-bottom:24px;
}
.ai-banner i{margin-top:2px;color:var(--gold);}
.filters-bar{
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;align-items:flex-end;
}
.filters-bar .form-row{margin-bottom:0;min-width:170px;}
.text-right{text-align:right;}
.amount{font-variant-numeric:tabular-nums;font-weight:600;color:var(--navy);}
.ghost-link{color:var(--navy);font-weight:600;font-size:.85rem;transition:.2s;opacity:0.7;}
.ghost-link:hover{opacity:1;}

.step-card{
  display:flex;flex-direction:column;gap:10px;
  padding:4px;
}
.step-num{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.82rem;color:var(--navy);
  background:rgba(19,41,75,0.06);
}
.step-card strong{font-size:.95rem;color:var(--navy);font-weight:600;}

hr.divider{border:none;border-top:1px solid var(--border-soft);margin:48px 0;}