/* Control de sitios — tokens. Oscuro por defecto (el panel de cotizaciones de la casa también lo es); claro con
   prefers-color-scheme. Marca: azul #3D5AFE y cian #4DEEEA de Persistencia Digital. */
:root {
  --fondo: #f4f5f9; --superficie: #ffffff; --superficie2: #eef0f6; --borde: #dde0ea; --borde2: #c9cddb;
  --texto: #141622; --suave: #4d5266; --tenue: #7a7f94;
  --acento: #3d5afe; --acento-texto: #ffffff; --acento-suave: #e6eaff; --cian: #0aa6a2;
  --bien: #15803d; --bien-fondo: #dcfce7; --ojo: #a16207; --ojo-fondo: #fef3c7; --mal: #b91c1c; --mal-fondo: #fee2e2;
  --sombra: 0 10px 30px rgba(20, 22, 34, .10);
  --radio: 12px; --radio-chico: 8px;
  --letra: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #08090f; --superficie: #10121b; --superficie2: #171a26; --borde: #232737; --borde2: #303548;
    --texto: #eef0f7; --suave: #aab0c4; --tenue: #747a92;
    --acento: #5c74ff; --acento-texto: #ffffff; --acento-suave: #1b2150; --cian: #4deeea;
    --bien: #4ade80; --bien-fondo: #0f2a1a; --ojo: #fbbf24; --ojo-fondo: #2c2410; --mal: #f87171; --mal-fondo: #2e1215;
    --sombra: 0 18px 50px rgba(0, 0, 0, .55);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.5 var(--letra); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acento); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.oculto { display: none !important; }

/* ---------- entrada ---------- */
.entrada { min-height: 100svh; display: grid; place-items: center; padding: 24px 16px; }
.entrada form { width: min(380px, 100%); background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 28px; box-shadow: var(--sombra); display: grid; gap: 14px; }
.entrada h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.entrada p { margin: 0; color: var(--suave); font-size: 14px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.01em; }
.marca i { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--acento), var(--cian)); display: inline-block; flex: none; }

/* ---------- estructura ---------- */
.marco { display: grid; grid-template-columns: 232px 1fr; min-height: 100svh; }
.lateral { border-right: 1px solid var(--borde); background: var(--superficie); padding: 20px 14px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100svh; }
.lateral nav { display: grid; gap: 2px; }
.lateral nav a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: var(--radio-chico); color: var(--suave); text-decoration: none; font-weight: 600; font-size: 14px; }
.lateral nav a:hover { background: var(--superficie2); color: var(--texto); }
.lateral nav a[aria-current="page"] { background: var(--acento-suave); color: var(--texto); }
.lateral nav a .cuenta { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--mal-fondo); color: var(--mal); }
.lateral .pie { margin-top: auto; font-size: 13px; color: var(--tenue); display: grid; gap: 6px; }
.principal { padding: 28px clamp(16px, 3vw, 40px) 60px; min-width: 0; }
.cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.cabeza h1 { margin: 0; font-size: 26px; letter-spacing: -.025em; text-wrap: balance; }
.cabeza p { margin: 2px 0 0; color: var(--suave); font-size: 14px; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

@media (max-width: 860px) {
  .marco { grid-template-columns: 1fr; }
  .lateral { position: sticky; z-index: 5; height: auto; flex-direction: row; align-items: center; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--borde); gap: 12px; overflow-x: auto; }
  .lateral nav { display: flex; gap: 4px; }
  .lateral nav a { white-space: nowrap; padding: 7px 10px; }
  .lateral .pie, .lateral .marca span { display: none; }
  .principal { padding-top: 20px; }
}

/* ---------- controles ---------- */
.boton { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde2); background: var(--superficie); color: var(--texto); border-radius: var(--radio-chico); padding: 8px 14px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; }
.boton:hover { border-color: var(--acento); }
.boton.primario { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.boton.primario:hover { filter: brightness(1.08); }
.boton.chico { padding: 4px 10px; font-size: 13px; }
.boton.peligro { color: var(--mal); }
.boton.peligro:hover { border-color: var(--mal); }
.boton[disabled] { opacity: .55; cursor: progress; }
label.campo { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--suave); }
label.campo.casilla { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--texto); }
.entrada input, .cajon input, .cajon select, .cajon textarea, .busca, .ajuste input {
  width: 100%; border: 1px solid var(--borde2); background: var(--fondo); border-radius: var(--radio-chico); padding: 9px 11px; font-size: 14px; color: var(--texto);
}
.cajon textarea { min-height: 84px; resize: vertical; }
.busca { max-width: 280px; background: var(--superficie); }
.error-form { color: var(--mal); font-size: 13px; min-height: 1em; margin: 0; }

/* ---------- indicadores ---------- */
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
@media (max-width: 1100px) { .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cifra { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; display: grid; gap: 2px; }
.cifra span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 700; }
.cifra b { font-size: 24px; letter-spacing: -.02em; }
.cifra small { color: var(--suave); font-size: 13px; }
.cifra.alerta b { color: var(--mal); }

.columnas { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .columnas { grid-template-columns: 1fr; } }
.bloque { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.bloque + .bloque { margin-top: 18px; }
.bloque h2 { margin: 0; font-size: 15px; padding: 14px 16px; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bloque h2 small { color: var(--tenue); font-weight: 600; }
.vacio { padding: 18px 16px; color: var(--tenue); font-size: 14px; margin: 0; }
.renglon { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--borde); }
.renglon:last-child { border-bottom: 0; }
.renglon .que { min-width: 0; }
.renglon .que b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.renglon .que small { color: var(--suave); font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.renglon .lado { display: flex; gap: 8px; align-items: center; justify-content: end; flex-wrap: wrap; }

.ficha { display: inline-flex; justify-content: center; align-items: center; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--superficie2); color: var(--suave); }
.ficha.mal { background: var(--mal-fondo); color: var(--mal); }
.ficha.ojo { background: var(--ojo-fondo); color: var(--ojo); }
.ficha.bien { background: var(--bien-fondo); color: var(--bien); }
.ficha.acento { background: var(--acento-suave); color: var(--acento); }

/* ---------- tablas ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filtros .chip { border: 1px solid var(--borde2); background: var(--superficie); border-radius: 99px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--suave); }
.filtros .chip[aria-pressed="true"] { background: var(--acento-suave); border-color: var(--acento); color: var(--texto); }
.tabla-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); font-weight: 700; padding: 11px 14px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--superficie2); }
tbody tr:last-child td { border-bottom: 0; }
td.der, th.der { text-align: right; }
td a { text-decoration: none; }
td a:hover { text-decoration: underline; }

/* ---------- cajón (formulario) ---------- */
.velo { position: fixed; inset: 0; background: rgba(4, 5, 10, .55); z-index: 20; }
.cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--superficie); border-left: 1px solid var(--borde); z-index: 21; display: flex; flex-direction: column; box-shadow: var(--sombra); }
.cajon header { padding: 18px 20px; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cajon header h2 { margin: 0; font-size: 18px; }
.cajon .cuerpo { padding: 18px 20px; overflow-y: auto; display: grid; gap: 14px; align-content: start; }
.cajon .rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cajon .rejilla .ancho { grid-column: 1 / -1; }
@media (max-width: 560px) { .cajon .rejilla { grid-template-columns: 1fr; } }
.cajon footer { padding: 14px 20px; border-top: 1px solid var(--borde); display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.relacionados { border-top: 1px dashed var(--borde2); padding-top: 12px; display: grid; gap: 6px; font-size: 14px; }
.relacionados h3 { margin: 0; font-size: 13px; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- avisos flotantes ---------- */
#avisos-flotantes { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 40; display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); }
.toast { background: var(--texto); color: var(--fondo); padding: 11px 16px; border-radius: 10px; font-weight: 600; font-size: 14px; box-shadow: var(--sombra); }
.toast.mal { background: var(--mal); color: #fff; }
@media (prefers-reduced-motion: no-preference) { .toast { animation: sube .18s ease-out; } @keyframes sube { from { transform: translateY(8px); opacity: 0; } } }

.ajuste { display: grid; gap: 14px; max-width: 560px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; margin-bottom: 18px; }
.estado-correo { font-size: 14px; color: var(--suave); }
pre.cuerpo-aviso { white-space: pre-wrap; font: 13px/1.5 var(--mono); color: var(--suave); margin: 6px 0 0; }
dialog.dialogo { border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); color: var(--texto); padding: 22px; width: min(420px, calc(100vw - 32px)); box-shadow: var(--sombra); }
dialog.dialogo::backdrop { background: rgba(4, 5, 10, .55); }
dialog.dialogo h2 { margin: 0 0 6px; font-size: 17px; }
dialog.dialogo p { margin: 0 0 18px; color: var(--suave); font-size: 14px; }
dialog.dialogo .acciones { justify-content: end; }