/* Gestor de tenants · Sistema de diseño INC Analytics (Gama Tierra) */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* Marca */
  --graphite-900:#1E2022; --graphite-800:#2B2D2F; --graphite-700:#3D4043; --graphite-600:#55585B; --graphite-500:#6E7174; --graphite-400:#8E9093;
  --terracotta-700:#8A4B27; --terracotta-100:#F1E4DA;
  --ochre-700:#A5532A; --ochre-600:#C46633; --ochre-300:#E8B596; --ochre-100:#F7E6DB; --ochre-50:#FBF2EC;
  --sand-50:#FDFCF7; --sand-100:#F7F5F0; --sand-200:#EFEBE3; --sand-300:#E3DDD4; --sand-400:#CFC7BB; --sand-500:#A9A093;
  /* Estados (tierra) */
  --success-700:#3F6B47; --success-100:#E3ECE2;
  --warning-700:#8C6A12; --warning-100:#F4ECD3;
  --danger-700:#9B3328; --danger-100:#F3E0DC;
  --info-700:#3D5A70; --info-100:#E1E8EE;
  /* Alias semánticos */
  --text-primary:var(--graphite-800); --text-secondary:var(--graphite-600); --text-muted:var(--graphite-500); --text-inverse:var(--sand-50); --text-accent:var(--terracotta-700); --text-link:var(--ochre-700);
  --surface-page:var(--sand-100); --surface-card:var(--sand-50); --surface-sunken:var(--sand-200);
  --border-subtle:var(--sand-300); --border-default:var(--sand-400); --border-strong:var(--graphite-800);
  --focus-ring:0 0 0 3px rgba(196,102,51,.28);
  /* Espaciado y formas */
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px;
  --sidebar-w:248px; --topbar-h:60px; --content-max:1120px;
  /* Tipografía */
  --font-display:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-body:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --shadow-sm:0 1px 2px rgba(43,45,47,.06),0 1px 3px rgba(43,45,47,.04);
  --shadow-md:0 2px 4px rgba(43,45,47,.05),0 6px 16px rgba(43,45,47,.06);
  --ease:cubic-bezier(.2,0,0,1);
}

*,*::before,*::after { box-sizing:border-box; }
body { margin:0; font-family:var(--font-body); font-size:14px; line-height:1.55; color:var(--text-primary); background:var(--surface-page); -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:var(--font-display); letter-spacing:-0.01em; line-height:1.3; margin:0; color:var(--text-primary); }
a { color:var(--text-link); text-decoration:none; }
a:hover { color:var(--terracotta-700); text-decoration:underline; }
.num,.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.overline { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-accent); }

/* ---------- Estructura: sidebar + contenido ---------- */
.app { display:flex; min-height:100vh; }
.lateral { width:var(--sidebar-w); flex:none; background:var(--surface-card); border-right:1px solid var(--border-subtle); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.lateral__marca { height:var(--topbar-h); display:flex; align-items:center; padding:0 20px; border-bottom:1px solid var(--border-subtle); }
.lateral__marca img { height:34px; width:auto; display:block; }
.lateral nav { padding:12px; display:flex; flex-direction:column; gap:2px; }
.lateral .grupo { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); padding:10px 10px 6px; }
.lateral nav a { display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; border-radius:var(--radius-md); font-size:14px; font-weight:500; color:var(--text-secondary); text-decoration:none; transition:background var(--dur,150ms) var(--ease); }
.lateral nav a:hover { background:var(--sand-200); color:var(--text-primary); text-decoration:none; }
.lateral nav a.activa { background:var(--sand-200); color:var(--text-primary); font-weight:600; box-shadow:inset 3px 0 0 var(--ochre-600); }
.lateral nav a svg { width:17px; height:17px; flex:none; color:currentColor; }
.lateral nav a.activa svg { color:var(--ochre-600); }
.lateral__pie { margin-top:auto; padding:14px 16px; border-top:1px solid var(--border-subtle); display:flex; align-items:center; gap:10px; }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--graphite-800); color:var(--text-inverse); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; flex:none; }
.lateral__pie .quien { line-height:1.25; min-width:0; }
.lateral__pie .quien b { font-size:13px; font-weight:600; display:block; }
.lateral__pie .quien span { font-size:12px; color:var(--text-muted); }
.lateral__pie form { margin:0 0 0 auto; }
.boton-icono { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:6px; border-radius:var(--radius-md); display:flex; }
.boton-icono:hover { background:var(--sand-200); color:var(--text-primary); }
.boton-icono svg { width:17px; height:17px; }

main.contenido { flex:1; min-width:0; }
.contenido__cuerpo { max-width:var(--content-max); margin:0 auto; padding:32px; }

/* ---------- Encabezado de página ---------- */
.encab { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; }
.encab h1 { font-size:28px; font-weight:700; letter-spacing:-0.02em; }
.encab .sub { font-size:14px; color:var(--text-secondary); margin-top:4px; }
.encab .acciones { display:flex; gap:8px; }

/* ---------- Botones ---------- */
.boton { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 16px; border:1px solid transparent; border-radius:var(--radius-md); font-family:var(--font-body); font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; transition:background var(--dur,150ms) var(--ease), border-color var(--dur,150ms) var(--ease); white-space:nowrap; }
.boton:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.boton--primario { background:var(--ochre-600); color:#fff; }
.boton--primario:hover { background:var(--ochre-700); text-decoration:none; }
.boton--primario:active { background:var(--terracotta-700); }
.boton--secundario { background:var(--surface-card); color:var(--text-primary); border-color:var(--border-default); }
.boton--secundario:hover { background:var(--sand-200); text-decoration:none; }
.boton--oscuro { background:var(--graphite-800); color:#fff; }
.boton--oscuro:hover { background:var(--graphite-700); text-decoration:none; }
.boton--peligro { background:var(--surface-card); color:var(--danger-700); border-color:var(--border-default); }
.boton--peligro:hover { background:var(--danger-100); text-decoration:none; }
.boton--sm { height:30px; padding:0 12px; font-size:13px; }
.boton--lg { height:44px; padding:0 22px; font-size:15px; }
.boton--bloque { width:100%; justify-content:center; }
.boton svg { width:16px; height:16px; }

/* ---------- Formularios ---------- */
.campo { margin-bottom:16px; }
label { display:block; font-size:13px; color:var(--text-secondary); font-weight:500; margin-bottom:6px; }
input[type=text],input[type=password],input[type=number] { width:100%; height:36px; padding:0 12px; border:1px solid var(--border-default); border-radius:var(--radius-md); font-family:inherit; font-size:14px; color:var(--text-primary); background:var(--surface-card); }
input::placeholder { color:var(--text-muted); }
input:focus { outline:none; border-color:var(--ochre-600); box-shadow:var(--focus-ring); }
.pista { font-size:12px; color:var(--text-muted); margin:6px 0 0; }

/* ---------- Tarjetas ---------- */
.tarjeta { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:20px; }
.tarjeta--plana { padding:0; overflow:hidden; }
.tarjeta__pie { padding:12px 20px; font-size:12.5px; color:var(--text-muted); border-top:1px solid var(--border-subtle); }
h2.seccion { font-size:16px; font-weight:600; margin:28px 0 12px; }

/* ---------- Tablas ---------- */
table { width:100%; border-collapse:collapse; font-size:14px; }
thead th { text-align:left; padding:10px 16px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); border-bottom:1px solid var(--border-subtle); white-space:nowrap; }
tbody td { padding:12px 16px; border-bottom:1px solid var(--border-subtle); color:var(--text-primary); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--ochre-50); }
td.der,th.der { text-align:right; }

/* ---------- Badges ---------- */
.badge { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:var(--radius-sm); font-size:12px; font-weight:600; line-height:1.5; }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.badge--exito { background:var(--success-100); color:var(--success-700); }
.badge--adv { background:var(--warning-100); color:var(--warning-700); }
.badge--error { background:var(--danger-100); color:var(--danger-700); }
.badge--info { background:var(--info-100); color:var(--info-700); }
.badge--neutro { background:var(--sand-200); color:var(--graphite-600); }
.chip { font-family:var(--font-mono); font-size:12px; background:var(--surface-sunken); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:2px 8px; color:var(--text-secondary); }

/* ---------- Avisos ---------- */
.aviso { padding:12px 16px; border-radius:var(--radius-md); font-size:14px; margin-bottom:16px; border:1px solid; }
.aviso.exito { background:var(--success-100); color:var(--success-700); border-color:#c8dccb; }
.aviso.error { background:var(--danger-100); color:var(--danger-700); border-color:#e6c8c3; }
.aviso.adv { background:var(--warning-100); color:var(--warning-700); border-color:#e6d8b8; }

/* ---------- Clave generada / código ---------- */
.clave-caja { font-family:var(--font-mono); font-size:19px; background:var(--graphite-800); color:var(--sand-50); padding:16px 18px; border-radius:var(--radius-md); letter-spacing:.5px; word-break:break-all; }
pre { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:16px; overflow-x:auto; font-family:var(--font-mono); font-size:13px; line-height:1.6; color:var(--text-primary); }
code { font-family:var(--font-mono); font-size:0.92em; background:var(--surface-sunken); padding:1px 5px; border-radius:var(--radius-sm); }

/* ---------- Resultado de la prueba ---------- */
.resultado { display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:var(--radius-lg); font-size:15px; border:1px solid; }
.resultado.ok { background:var(--success-100); color:var(--success-700); border-color:#c8dccb; }
.resultado.mal { background:var(--danger-100); color:var(--danger-700); border-color:#e6c8c3; }
.resultado .punto { width:10px; height:10px; border-radius:50%; background:currentColor; flex:none; }

/* ---------- Ingreso (login) ---------- */
.login { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--surface-page); padding:24px; }
.login .tarjeta { width:400px; box-shadow:var(--shadow-md); padding:32px 32px 28px; }
.login img.logo { height:52px; width:auto; display:block; margin-bottom:6px; }
.login h1 { font-size:22px; font-weight:700; }

/* ---------- Responsive ---------- */
@media (max-width:860px) {
  .app { flex-direction:column; }
  .lateral { width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap; align-items:center; }
  .lateral__marca { border-bottom:none; border-right:1px solid var(--border-subtle); }
  .lateral nav { flex-direction:row; flex-wrap:wrap; padding:8px 12px; }
  .lateral nav a.activa { box-shadow:inset 0 -3px 0 var(--ochre-600); }
  .lateral .grupo { display:none; }
  .lateral__pie { margin:0 0 0 auto; border-top:none; }
  .contenido__cuerpo { padding:20px 16px; }
  .encab { flex-direction:column; align-items:flex-start; }
}