/* ==========================================================================
   MOVA IA - identidad visual de herramientas internas.
   Sin CDN, sin Google Fonts, sin frameworks: funciona en red aislada.
   ========================================================================== */

:root {
  --bg:#0b0c0e; --card:#141518; --card-2:#1b1d21; --field:#0f1013;
  --text:#f3f4f6; --muted:#9aa0a6;
  --primary:#d9b45b; --primary-t:#0b0c0e;
  --gold:#d9b45b; --gold-2:#f0d98c; --gold-d:#b8892f; --gold-txt:#1a1405; --chip:#241f12;
  --border:#2a2d33;
  --ok:#16a34a; --warn:#d97706; --err:#dc2626; --proc:#3b82f6; --pend:#6b7280;
  --r-card:14px; --r-box:10px; --r-btn:8px; --r-pill:999px;
}

* { box-sizing:border-box; }

html, body {
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:0.88rem; line-height:1.5;
}

a { color:var(--gold); text-decoration:none; }
a:hover { text-decoration:underline; }

.mono, code, pre, textarea.mono {
  font-family:Consolas,Menlo,monospace;
}

/* ------------------------------------------------------------- cabecera -- */
.cabecera {
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,#0b0c0e 0%,#141518 58%,#1c1710 100%);
  border-bottom:1px solid var(--border);
  padding:16px 24px;
}
.cabecera::after {
  content:""; position:absolute; top:-120px; right:-60px;
  width:560px; height:300px; transform:rotate(-12deg); pointer-events:none;
  background:radial-gradient(closest-side,rgba(217,180,91,.30),rgba(217,180,91,.07) 60%,transparent 76%);
}
.cabecera-interior {
  position:relative; z-index:1;
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.cabecera-izquierda { display:flex; align-items:center; gap:14px; }
.icono-cerebro { height:60px; width:auto; filter:drop-shadow(0 0 10px rgba(217,180,91,.35)); }
.titulo-app { font-size:1.4rem; font-weight:600; letter-spacing:.2px; margin:0; }
.lema-app { font-size:0.88rem; opacity:.82; margin:2px 0 0 0; }

.logotipo { white-space:nowrap; line-height:1; }
.logotipo .marca {
  font-size:2.1rem; font-weight:300; letter-spacing:.22em; color:#ffffff;
  font-family:"Segoe UI Light","Segoe UI",system-ui,Arial,sans-serif; text-transform:uppercase;
}
.logotipo .ia {
  font-size:0.84rem; font-weight:300; letter-spacing:.18em; color:var(--gold);
  font-family:"Segoe UI Light","Segoe UI",system-ui,Arial,sans-serif; text-transform:uppercase;
}
@media (max-width:820px) {
  .logotipo .marca { font-size:1.36rem; }
  .logotipo .ia { font-size:0.55rem; }
  .icono-cerebro { height:42px; }
  .titulo-app { font-size:1.1rem; }
}

/* ------------------------------------------------------- navegacion pasos -- */
.navegacion {
  position:sticky; top:0; z-index:20;
  background:var(--bg); border-bottom:1px solid var(--border);
  padding:8px 24px;
}
.navegacion-interior {
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.paso {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-btn);
  color:var(--muted); padding:6px 11px; font-size:0.82rem; cursor:pointer;
}
.paso:hover { border-color:var(--gold-d); color:var(--text); text-decoration:none; }
.paso .numero {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.25rem; height:1.25rem; border-radius:3px;
  background:var(--field); border:1px solid var(--border);
  font-size:0.7rem; color:var(--muted);
}
.paso.activo {
  border-color:var(--gold-d); color:var(--text); background:var(--chip);
}
.paso.activo .numero { color:var(--gold); border-color:var(--gold-d); }
.separador-navegacion {
  width:1px; height:24px; background:var(--border); margin:0 8px;
}
.paso .candado { color:var(--muted); font-size:0.75rem; }

/* ------------------------------------------------------------ estructura -- */
.contenido { max-width:1280px; margin:0 auto; padding:18px 24px 40px 24px; }
.fila { display:flex; gap:14px; flex-wrap:wrap; }
.fila > * { flex:1 1 320px; min-width:0; }

.card {
  background:linear-gradient(180deg,var(--card-2) 0%,var(--card) 100%);
  border:1px solid var(--border); border-radius:var(--r-card);
  padding:16px 18px; margin-bottom:14px;
}
.card h2 {
  display:flex; align-items:center; gap:8px;
  font-size:1rem; font-weight:600; margin:0 0 12px 0;
}
.card h2::before {
  content:""; width:.55rem; height:.55rem; border-radius:2px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-d)); flex:none;
}
.card h3 { font-size:0.88rem; margin:14px 0 8px 0; color:var(--text); }
.apoyo { font-size:0.8rem; color:var(--muted); }

/* -------------------------------------------------------------- botones -- */
.boton, button, input[type=submit] {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-btn);
  padding:7px 13px; font-size:0.83rem; font-family:inherit; cursor:pointer;
}
.boton:hover, button:hover { border-color:var(--gold-d); text-decoration:none; }
.boton:disabled, button:disabled { opacity:.45; cursor:not-allowed; }

.boton-principal, button.principal {
  background:linear-gradient(90deg,var(--gold-2),var(--gold));
  color:var(--gold-txt); border:1px solid var(--gold-d); font-weight:600;
}
.boton-principal:hover, button.principal:hover { filter:brightness(1.06); }

.boton-destructivo, button.destructivo {
  background:transparent; color:var(--err); border:1px solid var(--err);
}
.boton-destructivo:hover, button.destructivo:hover { background:rgba(220,38,38,.08); border-color:var(--err); }

.boton-pequeno { padding:4px 9px; font-size:0.76rem; }

/* --------------------------------------------------------------- campos -- */
.campo { display:block; margin-bottom:12px; }
.campo > label, label.etiqueta {
  display:block; font-size:0.8rem; color:var(--muted); margin-bottom:4px;
}
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=time], select, textarea {
  width:100%; background:var(--field); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-box);
  padding:7px 10px; font-family:inherit; font-size:0.85rem;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--gold); box-shadow:none;
}
textarea { min-height:90px; font-family:Consolas,Menlo,monospace; font-size:0.8rem; }
.campo-linea { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.campo-linea .campo { margin-bottom:0; flex:1 1 180px; }

/* ------------------------------------------------------------ distintivos -- */
.pildora {
  display:inline-block; border-radius:var(--r-pill);
  padding:2px 10px; font-size:0.74rem; font-weight:600; color:#ffffff;
  white-space:nowrap;
}
.pildora.pendiente { background:var(--pend); }
.pildora.proceso   { background:var(--proc); }
.pildora.ok        { background:var(--ok); }
.pildora.aviso     { background:var(--warn); }
.pildora.error     { background:var(--err); }
.pildora.alta      { background:linear-gradient(90deg,var(--gold-2),var(--gold)); color:var(--gold-txt); }

.dato-pendiente {
  display:inline-block; background:var(--chip); color:var(--warn);
  border:1px solid var(--warn); border-radius:var(--r-pill);
  padding:1px 9px; font-size:0.74rem; font-weight:600;
}

/* ---------------------------------------------------------------- avisos -- */
.aviso {
  background:var(--chip); border:1px solid var(--border);
  border-left:3px solid var(--muted); border-radius:var(--r-box);
  padding:10px 13px; margin-bottom:12px; font-size:0.83rem;
}
.aviso.ok    { border-left-color:var(--ok); }
.aviso.error { border-left-color:var(--err); }
.aviso.warn  { border-left-color:var(--warn); }
.aviso.info  { border-left-color:var(--proc); }

/* ------------------------------------------------------------------ KPIs -- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.kpi {
  background:var(--field); border:1px solid var(--border); border-radius:var(--r-box);
  padding:12px 14px;
}
.kpi .cifra { font-size:1.9rem; font-weight:600; color:var(--gold); line-height:1.1; }
.kpi .rotulo { font-size:0.78rem; color:var(--muted); margin-top:2px; }

/* ---------------------------------------------------------------- tablas -- */
table.datos { width:100%; border-collapse:collapse; font-size:0.82rem; }
table.datos th {
  text-align:left; font-weight:600; color:var(--muted); font-size:0.76rem;
  text-transform:uppercase; letter-spacing:.4px;
  padding:7px 9px; border-bottom:1px solid var(--border); white-space:nowrap;
}
table.datos td {
  padding:7px 9px; border-bottom:1px solid var(--border); vertical-align:top;
}
table.datos tr:hover td { background:rgba(217,180,91,.04); }
table.datos tr.destacada td { background:rgba(217,180,91,.07); }
.celda-estrecha { width:1%; white-space:nowrap; }
.tabla-desplazable { overflow-x:auto; }

/* --------------------------------------------------------------- progreso -- */
.barra-progreso {
  height:10px; background:var(--field); border:1px solid var(--border);
  border-radius:var(--r-pill); overflow:hidden;
}
.barra-progreso .relleno {
  height:100%; width:0;
  background:linear-gradient(90deg,var(--gold-d),var(--gold-2));
}
.registro-vivo {
  background:var(--field); border:1px solid var(--border); border-radius:var(--r-box);
  font-family:Consolas,Menlo,monospace; font-size:0.78rem; color:var(--muted);
  padding:10px 12px; max-height:320px; overflow-y:auto; white-space:pre-wrap;
}

/* --------------------------------------------------------------- flotante -- */
.flotante {
  position:fixed; right:18px; bottom:18px; z-index:60;
  background:var(--card-2); border:1px solid var(--gold-d); border-radius:var(--r-box);
  padding:11px 15px; font-size:0.83rem; max-width:340px;
  display:none;
}
.flotante.visible { display:block; }

/* ------------------------------------------------------------------- pie -- */
.pie {
  max-width:1280px; margin:0 auto; padding:14px 24px 26px 24px;
  color:var(--muted); font-size:0.78rem; border-top:1px solid var(--border);
}

/* ------------------------------------------------------------ pantalla login -- */
.login-caja { max-width:380px; margin:8vh auto; }
.lista-limpia { list-style:none; margin:0; padding:0; }
.lista-limpia li { padding:5px 0; border-bottom:1px solid var(--border); }
.lista-limpia li:last-child { border-bottom:none; }