/* =============================================================================
   BALANCE CONSULTING · estilos de la web
   Paleta de claude/MARCA-Balance-Consulting-colores-y-logo-2026-10-06.md.
   Los colores con significado (verde, ámbar, rojo) no son de marca.
   Fuentes alojadas aquí (licencia SIL OFL): Lora para títulos, Poppins para texto.
   ============================================================================= */
@font-face { font-family: "Lora"; src: url("fuentes/Lora.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fuentes/Poppins-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fuentes/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fuentes/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --solidez: #101D30;      /* azul noche: principal */
  --confianza: #495058;    /* pizarra: texto secundario */
  --equilibrio: #A69687;   /* topo: filetes y adornos, nunca texto pequeño */
  --claridad: #D2C9C2;     /* arena: separadores */
  --crema: #F0EFED;        /* fondo */
  --blanco: #FFFFFF;
  --texto: #1A1F26;
  --bien: #2E6B4A;  --bien-fondo: #E4EFE8;
  --aviso: #8A5A00; --aviso-fondo: #F6ECD6;
  --mal: #9B2C2C;   --mal-fondo: #F5E1E1;
  --radio: 4px;
  --sombra: 0 1px 2px rgba(16, 29, 48, .06), 0 4px 16px rgba(16, 29, 48, .05);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Poppins", system-ui, sans-serif; font-weight: 300; font-size: 15px; line-height: 1.55;
  color: var(--texto); background: var(--crema); min-height: 100vh; display: flex; flex-direction: column;
}
h1, h2, h3 { font-family: "Lora", Georgia, serif; font-weight: 400; color: var(--solidez); margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: 34px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
a { color: var(--solidez); }
strong, b { font-weight: 500; }
.rotulo { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--confianza); font-weight: 400; }
.tenue { color: var(--confianza); }
.pequeno { font-size: 13px; }

/* --- cabecera ---------------------------------------------------------------- */
.cabecera { background: var(--solidez); color: var(--crema); }
.cabecera .dentro { display: flex; align-items: center; gap: 28px; height: 68px; }
.cabecera .marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--crema); }
.cabecera .marca img { height: 40px; }
.cabecera .marca span { font-family: "Lora", serif; letter-spacing: .2em; font-size: 15px; }
.cabecera nav { display: flex; gap: 22px; flex: 1; }
.cabecera nav a { color: var(--claridad); text-decoration: none; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 0; border-bottom: 1px solid transparent; }
.cabecera nav a.activo, .cabecera nav a:hover { color: var(--crema); border-bottom-color: var(--equilibrio); }
.cabecera .usuario { font-size: 13px; color: var(--claridad); display: flex; align-items: center; gap: 14px; }

.dentro { width: min(1120px, 100% - 40px); margin: 0 auto; }
main { flex: 1; padding: 36px 0 60px; }
.pie { border-top: 1px solid var(--claridad); padding: 18px 0; font-size: 12px; color: var(--confianza); }
.pie .dentro { display: flex; justify-content: space-between; }

/* --- piezas ------------------------------------------------------------------ */
.tarjeta { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 26px 28px; margin-bottom: 22px; }
.tarjeta > h2:first-child, .tarjeta > h3:first-child { margin-top: 0; }
.titulo-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.titulo-pagina .rotulo { margin-bottom: 6px; }
.filete { width: 48px; height: 1px; background: var(--equilibrio); margin: 10px 0 18px; }
.rejilla { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.separa { justify-content: space-between; }

.boton {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--solidez); background: var(--solidez); color: var(--crema);
  font: 400 12px "Poppins", sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: 11px 20px; border-radius: 2px;
  cursor: pointer; text-decoration: none;
}
.boton:hover { background: #1d2e48; }
.boton.claro { background: transparent; color: var(--solidez); }
.boton.claro:hover { background: rgba(16, 29, 48, .05); }
.boton.peligro { background: transparent; color: var(--mal); border-color: var(--mal); }
.boton[disabled] { opacity: .45; cursor: default; }
.boton.pequeno { padding: 7px 12px; font-size: 11px; }

table.lista { width: 100%; border-collapse: collapse; }
table.lista th { text-align: left; font-weight: 400; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--confianza); padding: 8px 10px; border-bottom: 1px solid var(--claridad); }
table.lista td { padding: 12px 10px; border-bottom: 1px solid #ECE8E4; vertical-align: top; }
table.lista tr.pulsable { cursor: pointer; }
table.lista tr.pulsable:hover td { background: #FAF8F6; }
td.num, table.lista th.num { text-align: right; font-variant-numeric: tabular-nums; }

.estado { display: inline-block; vertical-align: middle; white-space: nowrap; font-family: "Poppins", sans-serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; font-weight: 400; }
.estado.en_cola, .estado.procesando { background: #E6EAF0; color: var(--solidez); }
.estado.entregado, .estado.listo { background: var(--bien-fondo); color: var(--bien); }
.estado.retenido { background: var(--aviso-fondo); color: var(--aviso); }
.estado.error, .estado.rechazado { background: var(--mal-fondo); color: var(--mal); }

.aviso-caja { border-left: 3px solid var(--equilibrio); background: #F7F4F1; padding: 12px 16px; margin: 14px 0; font-size: 14px; }
.aviso-caja.mal { border-color: var(--mal); background: var(--mal-fondo); }
.aviso-caja.bien { border-color: var(--bien); background: var(--bien-fondo); }
.aviso-caja.atencion { border-color: var(--aviso); background: var(--aviso-fondo); }

/* --- formularios ------------------------------------------------------------- */
form .campos { display: grid; gap: 16px 22px; grid-template-columns: repeat(2, 1fr); }
form .campos .ancho { grid-column: 1 / -1; }
label.campo { display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--confianza); }
label.campo small { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--confianza); }
input, select, textarea {
  font: 300 15px "Poppins", sans-serif; color: var(--texto); background: var(--blanco); border: 1px solid var(--claridad);
  border-radius: 2px; padding: 10px 12px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(16, 29, 48, .25); border-color: var(--solidez); }
textarea { min-height: 90px; resize: vertical; }
label.marca-check { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--texto); text-transform: none; letter-spacing: 0; }
label.marca-check input { width: auto; }
.errores { color: var(--mal); font-size: 14px; }
.errores ul { margin: 6px 0 0; padding-left: 18px; }

.soltar { border: 1px dashed var(--equilibrio); border-radius: var(--radio); padding: 40px 20px; text-align: center; background: #FBFAF8; cursor: pointer; }
.soltar.encima { background: #F3EFEA; border-color: var(--solidez); }
.barra { height: 4px; background: var(--claridad); border-radius: 2px; overflow: hidden; margin-top: 14px; }
.barra > div { height: 100%; background: var(--solidez); width: 0; transition: width .2s; }

/* --- pasos del informe ---------------------------------------------------------- */
ol.pasos { list-style: none; padding: 0; margin: 0; }
ol.pasos li { display: flex; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid #EEEAE6; font-size: 14px; }
ol.pasos li .punto { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--claridad); flex: none; }
ol.pasos li.ok .punto, ol.pasos li.reutilizado .punto { background: var(--bien); border-color: var(--bien); }
ol.pasos li.en_marcha .punto, ol.pasos li.reintentable .punto { background: var(--equilibrio); border-color: var(--equilibrio); animation: latido 1.2s infinite; }
ol.pasos li.pendiente { color: var(--confianza); }
ol.pasos li.pendiente .punto { background: transparent; border-style: dashed; border-color: var(--equilibrio); }
ol.pasos li.error .punto, ol.pasos li.rechazado .punto { background: var(--mal); border-color: var(--mal); }
ol.pasos li .tiempo { margin-left: auto; color: var(--confianza); font-size: 12px; font-variant-numeric: tabular-nums; }
@keyframes latido { 50% { opacity: .35; } }

.documentos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.documento { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--claridad); border-radius: var(--radio); padding: 14px 16px; background: var(--blanco); }
.documento .nombre { font-size: 14px; }
.documento .tipo { font-size: 11px; color: var(--confianza); letter-spacing: .1em; text-transform: uppercase; }

.pestanas { display: flex; gap: 26px; border-bottom: 1px solid var(--claridad); margin-bottom: 22px; }
.pestanas a { text-decoration: none; padding: 10px 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--confianza); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestanas a.activo { color: var(--solidez); border-bottom-color: var(--solidez); }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 14px 0 4px; }
.cifra { border-top: 1px solid var(--equilibrio); padding-top: 10px; }
.cifra .valor { font-family: "Lora", serif; font-size: 24px; color: var(--solidez); }

/* --- pantalla de entrada -------------------------------------------------------- */
.entrada { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.entrada .lado-marca { background: var(--solidez); color: var(--crema); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; }
.entrada .lado-marca img { width: min(420px, 90%); }
.entrada .lado-marca .lema { font-family: "Lora", serif; font-size: 22px; margin-top: 40px; color: var(--claridad); text-align: center; }
.entrada .lado-form { display: flex; flex-direction: column; justify-content: center; padding: 60px; max-width: 520px; }
.cargando { color: var(--confianza); padding: 30px 0; }
h1 .estado { position: relative; top: -4px; margin-left: 6px; }

@media (max-width: 800px) {
  .entrada { grid-template-columns: 1fr; }
  form .campos { grid-template-columns: 1fr; }
  .cabecera .marca span { display: none; }
  .cabecera .dentro { gap: 14px; }
  .cabecera nav { gap: 14px; }
  .cabecera nav a { font-size: 10px; letter-spacing: .1em; }
  .cabecera .usuario span { display: none; }
  .pie .dentro { flex-direction: column; gap: 4px; }
  .titulo-pagina { flex-direction: column; align-items: flex-start; }
  .tarjeta { padding: 20px 18px; }
  h1 { font-size: 28px; }
  table.lista { display: block; overflow-x: auto; }
  .entrada .lado-form { padding: 36px 20px; }
}