/* =============================================================================
   Mate ERP — Sistema de diseño
   Todo el look sale de tokens (CSS variables). El color de marca del tenant
   sobreescribe --marca en runtime; el resto se deriva de ahí.
   Convención: nombres en español, coherente con el resto del proyecto.
   ============================================================================= */

/* -------- 1. Tokens base -------- */
:root {
  /* Marca (se sobreescribe por tenant en runtime) */
  --marca: #0EA5E9;
  --marca-suave: color-mix(in srgb, var(--marca) 12%, transparent);
  --marca-fuerte: color-mix(in srgb, var(--marca) 80%, black);

  /* Superficies y texto — TEMA CLARO */
  --fondo: #FFFFFF;
  --fondo-alt: #F7F8FA;
  --superficie: #FFFFFF;
  --superficie-hover: #F4F6F8;
  --texto: #14181F;
  --texto-suave: #5B6472;
  --texto-tenue: #9AA3B2;
  --borde: #E7EAEF;
  --borde-fuerte: #D3D8E0;

  /* Semánticos */
  --exito: #16A34A;
  --exito-suave: #DCFCE7;
  --error: #DC2626;
  --error-suave: #FEE2E2;
  --alerta: #D97706;
  --alerta-suave: #FEF3C7;
  --info: #2563EB;
  --info-suave: #DBEAFE;

  /* Escala de espaciado (múltiplos de 4) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Radios */
  --radio-sm: 6px; --radio: 10px; --radio-lg: 14px; --radio-full: 999px;

  /* Tipografía */
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;

  /* Sombras (elevación) */
  --sombra-sm: 0 1px 2px rgba(16,24,40,.06);
  --sombra: 0 2px 8px rgba(16,24,40,.08);
  --sombra-lg: 0 12px 32px rgba(16,24,40,.14);

  /* Layout */
  --ancho-sidebar: 248px;
  --alt-topbar: 60px;

  /* Transiciones */
  --t-rapida: .12s ease;
  --t: .2s ease;
}

/* -------- Tema oscuro -------- */
[data-tema="oscuro"] {
  --fondo: #0F1216;
  --fondo-alt: #14181D;
  --superficie: #191E24;
  --superficie-hover: #20262E;
  --texto: #EDF0F4;
  --texto-suave: #9AA3B0;
  --texto-tenue: #6B7482;
  --borde: #262D36;
  --borde-fuerte: #333C47;
  --marca-suave: color-mix(in srgb, var(--marca) 22%, transparent);
  --exito-suave: color-mix(in srgb, var(--exito) 20%, transparent);
  --error-suave: color-mix(in srgb, var(--error) 20%, transparent);
  --alerta-suave: color-mix(in srgb, var(--alerta) 20%, transparent);
  --info-suave: color-mix(in srgb, var(--info) 20%, transparent);
  --sombra-sm: 0 1px 2px rgba(0,0,0,.4);
  --sombra: 0 2px 10px rgba(0,0,0,.5);
  --sombra-lg: 0 16px 40px rgba(0,0,0,.6);
}

/* -------- 2. Reset ligero -------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fuente);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo-alt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t), color var(--t);
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4 { line-height: 1.25; font-weight: 650; }
a { color: var(--marca); text-decoration: none; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; }

/* -------- 3. App shell (sidebar + topbar + contenido) -------- */
.app {
  display: grid;
  grid-template-columns: var(--ancho-sidebar) 1fr;
  grid-template-rows: var(--alt-topbar) 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  min-height: 100vh;
}
.sidebar {
  grid-area: sidebar;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  display: flex; flex-direction: column;
  padding: var(--sp-4);
  gap: var(--sp-1);
}
.sidebar__marca {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-lg); font-weight: 700;
  padding: var(--sp-2) var(--sp-3) var(--sp-5);
}
.sidebar__marca .logo {
  width: 34px; height: 34px; border-radius: var(--radio-sm);
  display: grid; place-items: center; font-size: 20px;
  background: var(--marca-suave);
}
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radio-sm);
  color: var(--texto-suave); font-weight: 550;
  cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.nav-item svg { width: 18px; height: 18px; }
.nav-item:hover { background: var(--superficie-hover); color: var(--texto); }
.nav-item.activo { background: var(--marca-suave); color: var(--marca-fuerte); }
[data-tema="oscuro"] .nav-item.activo { color: var(--texto); }
.sidebar__pie { margin-top: auto; padding-top: var(--sp-4); }

.topbar {
  grid-area: topbar;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-6);
}
.topbar h2 { font-size: var(--fs-lg); }
.topbar__acciones { display: flex; align-items: center; gap: var(--sp-3); }

.main { grid-area: main; padding: var(--sp-8); overflow-y: auto; }
.contenido { max-width: 1080px; margin: 0 auto; }

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .sidebar { display: none; }
  .main { padding: var(--sp-4); }
}

/* -------- 4. Botones -------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radio-sm); border: 1px solid transparent;
  font-size: var(--fs-base); font-weight: 600; cursor: pointer;
  transition: background var(--t-rapida), border-color var(--t-rapida), transform var(--t-rapida), opacity var(--t-rapida);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--primario { background: var(--marca); color: #fff; box-shadow: var(--sombra-sm); }
.btn--primario:hover:not(:disabled) { background: var(--marca-fuerte); }
.btn--secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
.btn--secundario:hover:not(:disabled) { background: var(--superficie-hover); }
.btn--ghost { background: transparent; color: var(--texto-suave); }
.btn--ghost:hover:not(:disabled) { background: var(--superficie-hover); color: var(--texto); }
.btn--peligro { background: var(--error); color: #fff; }
.btn--peligro:hover:not(:disabled) { filter: brightness(1.08); }
.btn--sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.btn--icono { padding: var(--sp-2); border-radius: var(--radio-sm); }

/* -------- 5. Formularios -------- */
.campo { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.campo label { font-size: var(--fs-sm); font-weight: 600; color: var(--texto-suave); }
.campo .ayuda { font-size: var(--fs-xs); color: var(--texto-tenue); }
input, select, textarea {
  width: 100%; padding: var(--sp-3);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
  background: var(--fondo); color: var(--texto);
  font-size: var(--fs-base); transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
input::placeholder, textarea::placeholder { color: var(--texto-tenue); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-suave);
}
input[aria-invalid="true"] { border-color: var(--error); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--sp-4); }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* -------- 6. Tarjetas -------- */
.card {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra-sm);
}
.card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--borde);
}
.card__head h3 { font-size: var(--fs-md); }
.card__body { padding: var(--sp-6); }
.card__body--flush { padding: 0; }

/* -------- 7. KPIs / estadísticas -------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--sp-5); box-shadow: var(--sombra-sm); }
.kpi__label { font-size: var(--fs-sm); color: var(--texto-suave); display: flex; align-items: center; gap: var(--sp-2); }
.kpi__valor { font-size: var(--fs-2xl); font-weight: 700; margin-top: var(--sp-2); letter-spacing: -.02em; }
.kpi__delta { font-size: var(--fs-xs); margin-top: var(--sp-1); }
.kpi__delta.sube { color: var(--exito); } .kpi__delta.baja { color: var(--error); }

/* -------- 8. Tablas -------- */
.tabla-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
thead th {
  text-align: left; font-size: var(--fs-xs); font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; color: var(--texto-tenue);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--borde);
  background: var(--fondo-alt); position: sticky; top: 0;
}
tbody td { padding: var(--sp-4); border-bottom: 1px solid var(--borde); }
tbody tr { transition: background var(--t-rapida); }
tbody tr:hover { background: var(--superficie-hover); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* -------- 9. Badges / pills -------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radio-full);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--exito { color: var(--exito); background: var(--exito-suave); }
.badge--error { color: var(--error); background: var(--error-suave); }
.badge--alerta { color: var(--alerta); background: var(--alerta-suave); }
.badge--info  { color: var(--info);  background: var(--info-suave); }
.badge--neutro { color: var(--texto-suave); background: var(--superficie-hover); }

/* -------- 10. Estados: vacío, carga, skeleton -------- */
.vacio { text-align: center; padding: var(--sp-12) var(--sp-6); color: var(--texto-suave); }
.vacio svg { width: 44px; height: 44px; margin: 0 auto var(--sp-4); color: var(--texto-tenue); }
.vacio h4 { font-size: var(--fs-md); color: var(--texto); margin-bottom: var(--sp-2); }
.skeleton {
  background: linear-gradient(90deg, var(--superficie-hover) 25%, var(--borde) 37%, var(--superficie-hover) 63%);
  background-size: 400% 100%; border-radius: var(--radio-sm);
  animation: sk 1.4s ease infinite; height: 14px;
}
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.spinner {
  width: 18px; height: 18px; border: 2px solid var(--marca-suave);
  border-top-color: var(--marca); border-radius: 50%; animation: giro .7s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }

/* -------- 11. Toasts -------- */
.toasts { position: fixed; bottom: var(--sp-6); right: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); z-index: 60; }
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--superficie); border: 1px solid var(--borde);
  border-left: 3px solid var(--texto-tenue);
  border-radius: var(--radio-sm); box-shadow: var(--sombra-lg);
  padding: var(--sp-3) var(--sp-4); min-width: 260px; max-width: 380px;
  animation: entra .25s ease;
}
.toast--exito { border-left-color: var(--exito); }
.toast--error { border-left-color: var(--error); }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast--exito svg { color: var(--exito); } .toast--error svg { color: var(--error); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* -------- 12. Modal -------- */
.modal-bg {
  position: fixed; inset: 0; background: rgba(16,24,40,.5);
  display: grid; place-items: center; padding: var(--sp-4); z-index: 50;
  animation: entra .2s ease;
}
.modal {
  background: var(--superficie); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg); width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
}

/* -------- 13. Login (pantalla centrada) -------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-4); background: var(--fondo-alt); }
.auth__card { width: 100%; max-width: 400px; }
.auth__logo { text-align: center; font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.auth__sub { text-align: center; color: var(--texto-suave); margin-bottom: var(--sp-6); }

/* -------- 14. Utilidades -------- */
.fila { display: flex; align-items: center; gap: var(--sp-3); }
.entre { justify-content: space-between; }
.crece { flex: 1; }
.txt-suave { color: var(--texto-suave); }
.mt-4 { margin-top: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }
.oculto { display: none !important; }