/* ITY Central — tema formal claro. Contrastes verificados WCAG AA:
   texto 1D2836/blanco 14.9:1 · muted 5A6675/blanco 5.85:1 · éxito 1E7B45 5.28:1
   crítico B3261E 6.54:1 · botón 10151C/E9A23B 8.46:1 · lateral BEC9D4/0B2232 9.69:1 */
:root {
  --navy: #0F151C; --navy-lateral: #0B2232; --navy-suave: #16324A;
  --fondo: #FFFFFF; --superficie: #FFFFFF; --zebra: #F5F7FA; --gris-panel: #FAFBFC;
  --tinta: #1D2836; --titular: #0F151C; --muted: #5A6675;
  --amber: #E9A23B; --amber-deep: #9A6A1B;
  --critico: #B3261E; --exito: #1E7B45;
  --linea: #D8DEE6; --linea-fuerte: #9AA6B2;
  --radius: 6px;
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background: var(--fondo); color: var(--tinta);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
h1, h2, h3 { color: var(--titular); font-weight: 600; }
a { color: var(--navy-suave); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--navy-suave); outline-offset: 2px; }

/* ── acceso ── */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: var(--zebra); }
.acceso-caja { width: 100%; max-width: 380px; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radius); padding: 2rem; box-shadow: 0 1px 3px rgba(15,21,28,.08); }
.acceso-caja .logo { height: 34px; margin-bottom: 1.2rem; display: block; }
.acceso-caja h1 { font-size: 1.3rem; margin-bottom: .25rem; }
.acceso-caja .sub { color: var(--muted); font-size: .85rem; margin-bottom: 1.4rem; }
.acceso-caja .version { margin-top: 1.4rem; font-size: .74rem; color: var(--muted); text-align: center; }

/* ── esqueleto ── */
.app { display: none; grid-template-columns: 216px 1fr; min-height: 100vh; }
.app.visible { display: grid; }
.lateral { background: var(--navy-lateral); padding: 1.2rem .8rem;
  display: flex; flex-direction: column; gap: .15rem; position: sticky; top: 0; height: 100vh; }
.lateral .logo { height: 26px; align-self: flex-start; margin: 0 .6rem 1.2rem; }
.lateral .marca { padding: 0; margin: 0; text-align: left; }
.lateral .marca:hover { background: none; }
.lateral .sitio { display: block; padding: .5rem .6rem 0; font-size: .74rem; color: #97A3B2; text-decoration: none; }
.lateral .sitio:hover { color: #FFFFFF; text-decoration: underline; }
.lateral button { background: none; border: 0; border-radius: var(--radius); color: #BEC9D4;
  text-align: left; padding: .5rem .6rem; cursor: pointer; font-size: .92rem; }
.lateral button:hover { background: var(--navy-suave); color: #FFFFFF; transition: background 150ms; }
.lateral button.activo { background: var(--navy-suave); color: #FFFFFF; font-weight: 600;
  border-left: 3px solid var(--amber); padding-left: calc(.6rem - 3px); }
.lateral .abajo { margin-top: auto; border-top: 1px solid rgba(233,237,242,.18); padding-top: .6rem; }
.lateral .quien { padding: 0 .6rem .4rem; font-size: .78rem; color: #97A3B2; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.lateral .version { padding: .5rem .6rem 0; font-size: .72rem; color: #97A3B2; }
main { padding: 1.6rem 2rem 3rem; max-width: 1200px; }
.encabezado { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; gap: 1rem; }
.encabezado h1 { font-size: 1.35rem; }

/* ── tarjetas kpi ── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin-bottom: 1.4rem; }
.kpi { background: var(--gris-panel); border: 1px solid var(--linea); border-radius: var(--radius); padding: .9rem 1rem; }
.kpi .etiqueta { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.kpi .valor { font-size: 1.5rem; font-weight: 700; color: var(--titular); margin-top: .15rem; font-variant-numeric: tabular-nums; }
.kpi .valor.bien { color: var(--exito); }
.kpi .valor.mal { color: var(--critico); }
.kpi .nota { font-size: .74rem; color: var(--muted); margin-top: .1rem; }

/* ── paneles y tablas ── */
.panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.panel h2 { font-size: .95rem; margin-bottom: .7rem; }
.tabla-envoltura { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th { text-align: left; color: var(--muted); font-weight: 600; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .04em; padding: .45rem .6rem; border-bottom: 2px solid var(--linea-fuerte); white-space: nowrap; }
td { padding: .5rem .6rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
tbody tr:nth-child(even) { background: var(--zebra); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vacio { color: var(--muted); font-size: .88rem; padding: 1rem 0; }

/* ── chips de estado (color + texto, nunca solo color) ── */
.chip { display: inline-block; padding: .1rem .55rem; border-radius: 99px; font-size: .74rem; font-weight: 600;
  border: 1px solid var(--linea-fuerte); color: var(--tinta); white-space: nowrap; background: var(--superficie); }
.chip.activo, .chip.aceptada, .chip.ok { color: var(--exito); border-color: var(--exito); background: #EDF7F1; }
.chip.prospecto, .chip.enviada, .chip.negociacion, .chip.propuesta { color: var(--amber-deep); border-color: var(--amber-deep); background: #FBF4E7; }
.chip.pausado, .chip.borrador { color: var(--muted); }
.chip.cerrado, .chip.rechazada, .chip.terminado, .chip.anulada, .chip.mal { color: var(--critico); border-color: var(--critico); background: #FBEFEE; }

/* ── botones ── */
.btn { background: var(--amber); color: #10151C; border: 1px solid var(--amber-deep); border-radius: var(--radius);
  padding: .5rem 1rem; font-weight: 700; cursor: pointer; transition: background 150ms; }
.btn:hover { background: #DE9425; }
.btn.fantasma { background: var(--superficie); border: 1px solid var(--linea-fuerte); color: var(--tinta); font-weight: 500; }
.btn.fantasma:hover { border-color: var(--navy-suave); color: var(--navy-suave); background: var(--zebra); }
.btn.mini { padding: .25rem .6rem; font-size: .78rem; font-weight: 600; min-height: 30px; }
.btn.peligro { background: var(--superficie); border: 1px solid var(--linea-fuerte); color: var(--critico); font-weight: 500; }
.btn.peligro:hover { border-color: var(--critico); background: #FBEFEE; }
.acciones { display: flex; gap: .3rem; white-space: nowrap; align-items: center; }
@media (pointer: coarse) { .btn.mini { min-height: 44px; padding: .5rem .8rem; } }

/* ── formularios ── */
input, select, textarea { background: var(--superficie); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radius); padding: .5rem .6rem; width: 100%; color: var(--tinta); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--navy-suave); outline-offset: 0; border-color: transparent; }
input:disabled { background: var(--zebra); color: var(--muted); }
label { display: block; font-size: .78rem; color: var(--muted); margin: .7rem 0 .25rem; font-weight: 600; }
label .req { color: var(--critico); }
dialog { background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radius); padding: 1.4rem 1.6rem; width: min(560px, 92vw); }
dialog::backdrop { background: rgba(15,21,28,.45); }
dialog h2 { font-size: 1.05rem; margin-bottom: .3rem; }
.dialogo-botones { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: .9rem; }
.form-2col .ancho { grid-column: 1 / -1; }
.error-form { color: var(--critico); font-size: .85rem; margin-top: .8rem; min-height: 1.2em; }

/* ── editor de cotización ── */
dialog.ancho { width: min(860px, 95vw); }
.tabla-lineas { font-size: .85rem; }
.tabla-lineas th { padding: .3rem .4rem; }
.tabla-lineas td { padding: .25rem .3rem; vertical-align: middle; }
.tabla-lineas input { padding: .35rem .45rem; }
.tabla-lineas td:nth-child(2) input { width: 64px; }
.tabla-lineas td:nth-child(3) input, .tabla-lineas td:nth-child(4) input { width: 104px; }
.tabla-lineas td:nth-child(2), .tabla-lineas td:nth-child(3),
.tabla-lineas td:nth-child(4), .tabla-lineas td:nth-child(6) { width: 1%; white-space: nowrap; }
.tabla-lineas .importe { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cot-totales { margin: .9rem 0 .2rem; margin-left: auto; width: min(320px, 100%); font-size: .88rem; }
.cot-totales div { display: flex; justify-content: space-between; padding: .2rem 0; color: var(--muted); }
.cot-totales .num { font-variant-numeric: tabular-nums; color: var(--tinta); }
.cot-totales .gran-total { border-top: 1px solid var(--linea-fuerte); margin-top: .3rem; padding-top: .45rem;
  font-weight: 700; color: var(--titular); font-size: 1rem; }
.cot-totales .gran-total .num { color: var(--titular); }
.cot-totales .periodo { font-size: .8rem; }

/* ── alertas del panel ── */
.alertas { padding: .7rem 1.2rem; border-left: 4px solid var(--amber-deep); background: #FBF4E7; }
.alerta { font-size: .88rem; padding: .25rem 0; color: var(--tinta); }
.alerta.critico { color: var(--critico); font-weight: 600; }
.alerta.aviso { color: var(--amber-deep); font-weight: 600; }

a.btn { text-decoration: none; display: inline-block; }
select.mini { width: auto; padding: .3rem .5rem; font-size: .85rem; }
input.buscador { width: 200px; padding: .3rem .5rem; font-size: .85rem; }

/* ── recetario de prompts ── */
.prompt-carta { padding: .9rem 1.1rem; }
.prompt-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.prompt-cabeza strong { font-size: .98rem; color: var(--titular); margin-right: .4rem; }
.prompt-cuando { font-size: .85rem; color: var(--tinta); margin-top: .5rem; }
.prompt-contenido { background: var(--zebra); border: 1px solid var(--linea); border-radius: var(--radius);
  padding: .7rem .9rem; margin-top: .6rem; font: .8rem/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
  white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow-y: auto; color: var(--tinta); }
.prompt-origen { font-size: .74rem; color: var(--muted); margin-top: .4rem; }

/* ── barras del panel ── */
.barras { display: flex; flex-direction: column; gap: .45rem; }
.barra-fila { display: grid; grid-template-columns: 110px 1fr 100px; align-items: center; gap: .6rem; font-size: .82rem; }
.barra-fondo { background: var(--zebra); border: 1px solid var(--linea); border-radius: 3px; height: 14px; overflow: hidden; }
.barra-relleno { background: var(--navy-suave); height: 100%; border-radius: 2px; }
.barra-fila .num { text-align: right; }

@media (max-width: 760px) {
  .app.visible { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .lateral .logo { margin-bottom: 0; }
  .lateral .abajo { margin: 0; border: 0; padding: 0; display: flex; align-items: center; gap: .6rem; }
  main { padding: 1rem; }
  .form-2col { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── editor de apartados del detalle ── */
dialog.ancho { max-height: 88vh; overflow-y: auto; }
#apartados { display: flex; flex-direction: column; gap: .7rem; margin-top: .3rem; }
.apartado { border: 1px solid var(--linea); border-radius: var(--radius); padding: .6rem .7rem; background: var(--gris-panel); }
.apartado-cab { display: flex; gap: .35rem; align-items: center; margin-bottom: .45rem; }
.apartado-cab .ap-titulo { font-weight: 600; }
.apartado-cab .btn.mini { min-height: 28px; padding: .2rem .5rem; }
.apartado-cab .btn.mini[disabled] { opacity: .35; cursor: default; }
.apartado .ap-cuerpo { font: .85rem/1.5 ui-monospace, 'SF Mono', Menlo, monospace; }

.clave-2fa { display: inline-block; background: var(--gris-panel); border: 1px solid var(--linea);
  border-radius: var(--radius); padding: .5rem .7rem; font: 1.05rem/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: .08em; user-select: all; }