/* ============================================================
   IdHound — Sistema de diseño compartido (idhound.css) v2.1
   Tokens + componentes reutilizables por TODAS las páginas.
   Las animaciones decorativas de la landing (globo ASCII,
   code-build, ventana de metodología, carta mockup) NO viven
   aquí: son específicas de marketing y van en landing.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600&family=Lexend:wght@300;400&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---------- 1. Tokens ---------- */
:root{
  /* color base */
  --color-bg:#F0ECDA; --color-bg-mid:#E5DFCA; --color-bg-dark:#C8BFA5;
  --color-navy-dark:#152740; --color-navy:#134C65; --color-teal:#487F86;
  --color-white:#FFFFFF; --color-ok:#2A7A4B; --color-risk:#8a3d12;

  /* derivados */
  --teal-fill:rgba(72,127,134,0.12); --teal-border:rgba(72,127,134,0.30);
  --on-dark-primary:#F0ECDA; --on-dark-secondary:rgba(240,236,218,0.55);
  --on-dark-muted:rgba(240,236,218,0.25);
  --border-dark:rgba(240,236,218,0.12);
  --ink-60:rgba(21,39,64,0.60); --ink-50:rgba(21,39,64,0.50); --ink-25:rgba(21,39,64,0.25);

  /* tipografía */
  --font-editorial:'Lora',serif;
  --font-ui:'Plus Jakarta Sans',sans-serif;
  --font-data:'Lexend',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  /* espaciado (base 4px) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;

  /* radios */
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:10px; --radius-pill:99px;

  /* layout app */
  --sidebar-w:200px;

  /* cocina (solo dentro de .kitchen-window) */
  --kitchen-primary:rgba(240,236,218,0.55);
  --kitchen-secondary:rgba(240,236,218,0.30);
  --kitchen-muted:rgba(240,236,218,0.15);
  --kitchen-accent:#487F86;
  --kitchen-ok:#487F86;
  --kitchen-risk:#E85D24;
}

/* ---------- 2. Reset + base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--color-bg);
  color:var(--color-navy-dark);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 3. Tipografía ---------- */
.h1{font-family:var(--font-editorial);font-weight:600;font-size:28px;line-height:1.2;letter-spacing:-0.01em}
.h2{font-family:var(--font-editorial);font-weight:600;font-size:22px;line-height:1.25}
.h3{font-family:var(--font-editorial);font-weight:500;font-size:17px;line-height:1.3}
.subtitle{font-family:var(--font-editorial);font-style:italic;font-weight:400;font-size:15px;color:var(--ink-60)}
.body-sm{font-family:var(--font-ui);font-size:13px;line-height:1.55}
.caption{font-family:var(--font-data);font-weight:300;font-size:11px;color:var(--ink-50)}
.data{font-family:var(--font-data);font-weight:400;font-size:11px}
.mono{font-family:var(--font-mono);font-size:12px}
/* Lora NUNCA en uppercase: distorsiona caracteres especiales */

.eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--color-teal)}
.muted{color:var(--ink-60)}

/* ---------- 4. Wordmark ---------- */
/* Contexto sobre beige: "Id" navy. Sobre navy: añadir .on-dark → "Id" beige */
.wordmark{font-family:var(--font-editorial);font-weight:700;font-size:20px;letter-spacing:-0.01em}
.wordmark .id{color:var(--color-navy-dark)}
.wordmark .hound{color:#0d0d0d}
.wordmark.on-dark .id{color:var(--on-dark-primary)}
.wordmark.on-dark .hound{color:var(--on-dark-primary)}

/* lockup de marca: isotipo a la izquierda del texto */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand-logo{height:30px;width:auto;display:block;flex:none}
/* el isotipo es negro: sobre navy se invierte a blanco (la @ queda en negativo) */
.brand.on-dark .brand-logo{filter:invert(1)}

/* ---------- 5. Botones ---------- */
.btn{
  font-family:var(--font-ui); font-size:13px; font-weight:600;
  border-radius:var(--radius-md); padding:9px 20px;
  border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .12s ease, background .15s ease, color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-navy-dark);color:var(--on-dark-primary)}
.btn-primary:hover{background:#1d3556}
.btn-secondary{background:transparent;color:var(--color-navy-dark);border-color:var(--color-navy-dark)}
.btn-secondary:hover{background:var(--color-navy-dark);color:var(--on-dark-primary)}
.btn-teal{background:var(--color-teal);color:var(--on-dark-primary)}
.btn-teal:hover{background:#3f7077}
.btn-ghost{background:transparent;color:var(--color-teal);border-color:var(--teal-border)}
.btn-ghost:hover{background:var(--teal-fill)}
.btn-sm{font-size:11px;padding:6px 14px}
/* Sobre fondo navy (navbar, sidebar): usar .on-dark en el contenedor */
.on-dark .btn-secondary{color:var(--on-dark-primary);border-color:rgba(240,236,218,0.35)}
.on-dark .btn-secondary:hover{background:rgba(240,236,218,0.10);color:var(--on-dark-primary)}

/* ---------- 6. Badges de estado ---------- */
.badge{font-family:var(--font-data);font-size:10px;font-weight:400;
  padding:3px 10px;border-radius:var(--radius-pill);border:0.5px solid transparent;
  display:inline-flex;align-items:center;gap:6px}
.badge-ok{background:var(--teal-fill);color:var(--color-teal);border-color:var(--teal-border)}
.badge-risk{background:rgba(138,61,18,0.10);color:var(--color-risk);border-color:rgba(138,61,18,0.30)}
.badge-process{background:rgba(19,76,101,0.10);color:var(--color-navy);border-color:rgba(19,76,101,0.30)}
.badge-review{background:rgba(21,39,64,0.08);color:var(--color-navy-dark);border-color:var(--ink-25)}

/* ---------- 7. Campos de formulario ---------- */
.field{margin-bottom:var(--space-4)}
.field-label{font-family:var(--font-ui);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-50);
  margin-bottom:5px;display:block}
.field-input{font-family:var(--font-ui);font-size:13px;padding:9px 13px;
  border:0.5px solid var(--color-bg-dark);border-radius:var(--radius-md);
  background:var(--color-white);color:var(--color-navy-dark);width:100%;
  transition:border-color .15s ease, box-shadow .15s ease}
.field-input::placeholder{color:rgba(72,127,134,0.55)}
.field-input:focus{outline:none;border-color:var(--color-teal);
  box-shadow:0 0 0 3px var(--teal-fill)}

/* ---------- 8. Cards ---------- */
.card{background:var(--color-white);border:0.5px solid var(--color-bg-dark);
  border-radius:var(--radius-xl);padding:var(--space-8)}
.card-beige{background:var(--color-bg-mid);border:0.5px solid var(--color-bg-dark);
  border-radius:var(--radius-xl);padding:var(--space-8)}
.card-dark{background:var(--color-navy-dark);border-radius:var(--radius-xl);
  padding:var(--space-8);color:var(--on-dark-primary)}
.card-navy{background:var(--color-navy);border-radius:var(--radius-xl);
  padding:var(--space-8);color:var(--on-dark-primary)}
.card-eyebrow{font-family:var(--font-mono);font-size:9px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--color-teal);margin-bottom:8px}

/* ---------- 9. Tablas de datos ---------- */
.data-table{width:100%;border-collapse:collapse}
.data-table th{font-family:var(--font-data);font-size:10px;font-weight:400;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-50);
  border-bottom:0.5px solid var(--color-bg-dark);padding:0 10px 10px;text-align:left}
.data-table td{font-family:var(--font-ui);font-size:12px;padding:10px;
  border-bottom:0.5px solid var(--color-bg-dark);color:var(--color-navy-dark)}
.data-table .folio{font-family:var(--font-mono);font-size:10px}

/* ---------- 10. Layout de la app ---------- */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex:none;background:var(--color-navy-dark);
  color:var(--on-dark-primary);padding:var(--space-6) 0;
  display:flex;flex-direction:column}
.sidebar .wordmark{padding:0 var(--space-6) var(--space-6)}
.sidebar-group{margin-top:var(--space-6)}
.sidebar-group-label{font-family:var(--font-mono);font-size:8px;letter-spacing:0.16em;
  text-transform:uppercase;color:rgba(240,236,218,0.30);padding:0 var(--space-6) 6px}
.sidebar-item{display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--font-ui);font-size:12px;font-weight:500;
  color:rgba(240,236,218,0.55);padding:9px var(--space-6);
  transition:background .15s ease, color .15s ease}
.sidebar-item:hover{color:var(--on-dark-primary)}
.sidebar-item.active{background:rgba(72,127,134,0.20);color:var(--on-dark-primary)}
.content-area{flex:1;background:var(--color-bg);padding:var(--space-8) var(--space-12)}
.page-title{font-family:var(--font-editorial);font-weight:600;font-size:22px;line-height:1.25}
.page-subtitle{font-family:var(--font-ui);font-size:13px;color:var(--ink-60);margin-top:4px}

@media (max-width:820px){
  .app-shell{flex-direction:column}
  .sidebar{width:100%}
  .content-area{padding:var(--space-6)}
}

/* ---------- 11. Ventana a la cocina (modal de verificación) ----------
   Solo aplica DENTRO de .kitchen-window. Estética terminal: mono,
   teal para OK, naranja para MATCH. Nunca Lora aquí dentro.        */
.kitchen-window{background:var(--color-navy-dark);
  border:0.5px solid var(--teal-border);border-radius:var(--radius-xl);
  font-family:var(--font-mono);overflow:hidden}
.kitchen-overlay{background:rgba(21,39,64,0.55)}
.kitchen-line{font-size:12px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.k-pending{color:var(--kitchen-muted)}
.k-scanning{color:var(--kitchen-scanning,var(--kitchen-secondary))}
.k-nomatch{color:var(--kitchen-ok)}
.k-match{color:var(--kitchen-risk)}
.k-cursor{display:inline-block;width:7px;height:13px;background:var(--color-teal);
  vertical-align:-2px;margin-left:1px;animation:k-blink 1s steps(1) infinite}
@keyframes k-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}