/* estilos.css — Portal corporativo Acciomas (clientes.acciomas.com)
   Marca Acciomas: teal #4EAAB5 + gold #C9A84C sobre navy #0B1628,
   Playfair Display (títulos) + Montserrat (cuerpo), dot pattern. */
:root{
  --navy:#0B1628; --navy2:#12223D; --panel:#1a2f4f;
  --papel:#F1F5F9; --mut:#94A3B8; --linea:rgba(255,255,255,.10);
  --coral:#4EAAB5; --ok:#4EAAB5; --ambar:#C9A84C; --brick:#D4875E;
  --display:'Playfair Display',Georgia,serif;
  --body:'Montserrat',-apple-system,'Segoe UI',sans-serif;
  --mono:'Montserrat',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--navy);color:var(--papel);font:14.5px/1.55 var(--body);
  background-image:radial-gradient(circle,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:24px 24px;background-attachment:fixed}
a{color:inherit}
button{font:inherit;cursor:pointer}
::selection{background:var(--coral);color:#04121a}

/* ── Layout de app ── */
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
@media(max-width:860px){.app{grid-template-columns:1fr}
  .lateral{position:sticky;top:0;z-index:40;flex-direction:row;overflow-x:auto;padding:10px 14px;gap:4px}
  .lateral .marca{display:none}.lateral .fin{display:none}}
.lateral{background:var(--navy2);border-right:1px solid var(--linea);
  display:flex;flex-direction:column;padding:22px 14px;gap:2px}
.marca{font:800 18px/1 var(--display);padding:0 10px 20px}
.marca span{color:var(--coral)}
.lateral nav{display:contents}
.lateral a{display:block;text-decoration:none;color:var(--mut);padding:10px 12px;
  border-radius:6px;font-weight:500;white-space:nowrap}
.lateral a:hover{color:var(--papel);background:rgba(255,255,255,.05)}
.lateral a.activo{color:var(--papel);background:var(--panel);
  box-shadow:inset 2px 0 0 var(--coral)}
.lateral .fin{margin-top:auto;padding:10px 12px;font-size:12px;color:var(--mut)}
.lateral .fin b{display:block;color:#c6d0e0;font-weight:600}
.btn-salir{margin:6px 12px 0;background:none;border:1px solid var(--linea);
  color:var(--mut);border-radius:6px;padding:8px 10px;font-size:13px}
.btn-salir:hover{color:var(--papel);border-color:var(--mut)}

.contenido{padding:30px 34px;max-width:1160px}
.cabecera{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:24px}
h1{font:700 26px/1.2 var(--display);letter-spacing:-.01em}
.cabecera .sub{color:var(--mut);font-size:13px}

/* ── Cards KPI ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:26px}
.kpi{background:var(--navy2);border:1px solid var(--linea);border-radius:8px;padding:18px}
.kpi .lbl{font:600 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.kpi .val{font:700 32px/1.1 var(--display);margin:8px 0 4px}
.kpi .meta{font-size:12px;color:var(--mut)}
.kpi.ok .val{color:var(--ok)} .kpi.mal .val{color:var(--brick)} .kpi.aviso .val{color:var(--ambar)}

/* ── Paneles y tablas ── */
.panel{background:var(--navy2);border:1px solid var(--linea);border-radius:8px;
  padding:22px;margin-bottom:22px}
.panel h2{font:600 18px/1.3 var(--display);margin-bottom:14px}
.panel h2 .mini{font:500 11px/1 var(--mono);color:var(--mut);margin-left:10px;letter-spacing:.06em}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font:600 11px/1.4 var(--body);letter-spacing:.07em;text-transform:uppercase;
  color:var(--mut);text-align:left;padding:8px 12px;border-bottom:1px solid var(--linea)}
td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top}
tr:hover td{background:rgba(78,170,181,.08)}
td.mono,.mono{font:400 12.5px/1.5 var(--mono)}
td.num{text-align:right;font-variant-numeric:tabular-nums}
tr.clicable{cursor:pointer}

.chip{display:inline-block;font:600 11px/1 var(--body);letter-spacing:.04em;
  padding:5px 9px;border-radius:999px;border:1px solid var(--linea);color:var(--mut)}
.chip.ok{color:var(--ok);border-color:rgba(78,170,181,.4)}
.chip.mal{color:var(--brick);border-color:rgba(212,135,94,.4)}
.chip.aviso{color:var(--ambar);border-color:rgba(201,168,76,.4)}

/* ── Formularios ── */
.fila-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px}
label{display:block;font:600 11.5px/1 var(--body);letter-spacing:.05em;
  text-transform:uppercase;color:var(--mut);margin-bottom:6px}
input,select,textarea{width:100%;background:var(--navy);border:1px solid var(--linea);
  border-radius:6px;color:var(--papel);font:400 14px/1.4 var(--body);padding:10px 12px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--coral);outline-offset:1px;border-color:transparent}
input[type=file]{padding:8px}
.btn{display:inline-block;font:600 14px/1 var(--body);border:1px solid transparent;
  padding:11px 20px;border-radius:6px;text-decoration:none}
.btn:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
.btn-coral{background:var(--coral);color:#04121a}
.btn-coral:hover{background:#63bcc6}
.btn-coral:disabled{background:#2c4d52;color:var(--mut);cursor:not-allowed}
.btn-linea{background:none;border-color:var(--linea);color:var(--papel)}
.btn-linea:hover{border-color:var(--mut)}
.btn-peligro{background:none;border-color:rgba(212,135,94,.5);color:var(--brick)}
.acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ── Estados: vacío, error, cargando ── */
.estado{border:1px dashed var(--linea);border-radius:8px;padding:34px;
  text-align:center;color:var(--mut)}
.estado b{display:block;color:#c6d0e0;font-weight:600;margin-bottom:6px}
.estado.error{border-color:rgba(212,135,94,.5)}
.estado.error b{color:var(--brick)}
.cargando{color:var(--mut);padding:24px 0}
.cargando::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;
  border:2px solid var(--linea);border-top-color:var(--coral);border-radius:50%;
  vertical-align:-2px;animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.cargando::after{animation:none}}

.aviso-banda{border:1px solid rgba(201,168,76,.5);background:rgba(201,168,76,.07);
  border-radius:8px;padding:14px 16px;font-size:13.5px;color:#e8d5ae;margin-bottom:22px}
.aviso-banda b{color:var(--ambar)}

/* ── Login ── */
.login-lienzo{min-height:100vh;display:grid;place-items:center;padding:24px}
.login{width:min(420px,100%);background:var(--navy2);border:1px solid var(--linea);
  border-radius:10px;padding:36px}
.login .marca{padding:0 0 8px}
.login p{color:var(--mut);font-size:13.5px;margin-bottom:22px}
.login .campo{margin-bottom:16px}
.login .error-linea{color:var(--brick);font-size:13px;margin:10px 0 0;min-height:18px}
.login .pie{margin-top:18px;font-size:12px;color:var(--mut)}

/* ── Detalle (drawer simple) ── */
.detalle{border-left:2px solid var(--coral);padding-left:16px;margin-top:14px}
.detalle dl{display:grid;grid-template-columns:170px 1fr;gap:6px 14px;font-size:13.5px}
.detalle dt{color:var(--mut)}
.detalle dd{color:var(--papel)}

.oculto{display:none!important}