:root{
  --red:#e30613; --red-dk:#b80410; --orange:#f59000; --blue:#1f4e9c; --blue-cl:#8fb2f0;
  --ink:#191c22; --texto:#3a404a; --muted:#6a717d; --line:#e4e7ec; --line-f:#cdd2da;
  --bg:#f4f5f8; --card:#fff; --grafito:#15171c;
  --ok:#12805a; --warn:#a15c00; --bad:#b4111b;
  --radius:14px; --r-ctl:10px;
  --sombra:0 1px 2px rgba(22,25,31,.05),0 8px 24px -16px rgba(22,25,31,.18);
  --sombra-alta:0 24px 60px -28px rgba(22,25,31,.4);
  --font:Inter,'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --mono:'Cascadia Mono',Consolas,ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue);text-underline-offset:3px}
h1,h2{letter-spacing:-.015em;text-wrap:balance}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Marca */
.marca{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;line-height:1.15}
.marca img{width:36px;height:36px}
.marca span{color:var(--blue)}
.marca small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--orange)}
.marca.clara{color:#fff}
.marca.clara span{color:var(--blue-cl)}
.marca.grande{font-size:24px;justify-content:center;margin-bottom:22px}
.marca.grande img{width:44px;height:44px}

/* ---------- Acceso ---------- */
.acceso{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:#fff}
.acceso-marca{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:44px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  background:radial-gradient(700px 480px at 100% 0%,rgba(31,78,156,.55),transparent 65%),radial-gradient(520px 420px at 0% 100%,rgba(227,6,19,.22),transparent 70%),linear-gradient(155deg,#14161b,#191d27 55%,#1a2338)}
.acceso-marca::before{content:"";position:absolute;z-index:-1;right:-190px;bottom:-190px;width:560px;height:560px;border-radius:50%;border:78px solid rgba(227,6,19,.2)}
.acceso-marca h2{margin:0 0 14px;font-size:clamp(28px,3vw,40px);line-height:1.12;font-weight:700;max-width:15ch}
.acceso-marca h2 em{font-style:normal;color:#ffb347}
.acceso-marca .bajada{margin:0 0 28px;max-width:44ch;color:#c5cbd6;font-size:16px}
.puntos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;max-width:46ch}
.puntos li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px}
.puntos .ico{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#ffb347}
.puntos b{display:block;color:#fff;font-weight:600}
.puntos span{color:#aeb5c2;font-size:13.5px}
.acceso-marca footer{font-size:12.5px;color:#8d95a3}
.acceso-marca footer a{color:#c5cbd6}
.acceso-caja{width:100%;max-width:440px;padding:40px 28px;justify-self:center;align-self:center}
.acceso-caja .marca.grande{display:none}
.panel{display:flex;flex-direction:column;gap:16px}
.panel h1{margin:0;font-size:28px;font-weight:700}
.panel .sub{margin:-8px 0 2px;font-size:14.5px}
.panel label{font-size:13.5px}
.panel input,.panel textarea{min-height:46px;padding:10px 13px;font-size:15.5px}
.panel .btn{min-height:46px;font-size:15.5px}
.ayuda,.reglas{margin:0;padding:0;list-style:none;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.ayuda{background:var(--bg);border-radius:var(--r-ctl);padding:12px 14px}
.ayuda li{padding-left:16px;position:relative}
.ayuda li::before{content:"";position:absolute;left:3px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--orange)}
.reglas li{padding-left:22px;position:relative}
.reglas li::before{content:"";position:absolute;left:1px;top:4px;width:12px;height:12px;border-radius:50%;border:2px solid #c9ccd2;transition:.15s}
.reglas li.ok{color:var(--ok)}
.reglas li.ok::before{background:var(--ok);border-color:var(--ok);box-shadow:inset 0 0 0 2px #fff}
.fuerza{height:6px;border-radius:4px;background:#eceef1;overflow:hidden;margin-top:-8px}
.fuerza i{display:block;height:100%;width:0;background:var(--red);transition:width .2s,background .2s}
label.ver{flex-direction:row;align-items:center;gap:8px;font-weight:400;color:var(--muted)}
.panel label.ver input{width:16px;height:16px;min-height:0;padding:0;accent-color:var(--blue)}
.pie{margin:0;font-size:13.5px;color:var(--muted);text-align:center}
.pie a{font-weight:600;text-decoration:none}
.pie a:hover{text-decoration:underline}
@media (max-width:900px){
  .acceso{grid-template-columns:minmax(0,1fr);background:radial-gradient(520px 340px at 100% 0%,rgba(31,78,156,.1),transparent 70%),radial-gradient(480px 320px at 0% 100%,rgba(227,6,19,.07),transparent 70%),var(--bg)}
  .acceso-marca{display:none}
  .acceso-caja{padding:24px 16px}
  .acceso-caja .marca.grande{display:flex}
  .panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--sombra-alta)}
  .panel h1{font-size:23px}
}

/* ---------- Aplicación ---------- */
.app{min-height:100vh;display:grid;grid-template-columns:252px minmax(0,1fr)}
.lateral{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:26px;padding:22px 14px 16px;color:#c9ced8;
  background:radial-gradient(360px 260px at 0% 100%,rgba(227,6,19,.16),transparent 70%),linear-gradient(180deg,var(--grafito),#181b23)}
.lateral .marca{padding:0 8px}
.tabs{display:flex;flex-direction:column;gap:3px}
.tabs .rotulo{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7c8492;padding:0 12px 6px}
.tab{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;padding:10px 12px;border-radius:10px;font-weight:600;font-size:14.5px;color:#c9ced8;cursor:pointer;text-decoration:none;text-align:left;position:relative;transition:background .15s,color .15s}
.tab:hover{background:rgba(255,255,255,.07);color:#fff}
.tab.activo{background:rgba(255,255,255,.1);color:#fff}
.tab.activo::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--red)}
.tab.activo svg{color:#ffb347}
.cuenta{margin-left:auto;min-width:22px;padding:1px 7px;border-radius:999px;background:var(--red);color:#fff;font-size:12px;font-weight:700;text-align:center}
.yo{margin-top:auto;display:flex;flex-direction:column;gap:6px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px}
.persona{display:flex;align-items:center;gap:10px;padding:0 8px 8px;min-width:0}
.avatar{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13.5px;color:#fff;background:linear-gradient(135deg,var(--blue),#3a6fc7)}
.persona div{min-width:0}
.persona b{display:block;color:#fff;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.persona small{color:#8d95a3;font-size:12.5px}
.enlace{display:flex;align-items:center;gap:10px;border:0;background:none;padding:8px 12px;border-radius:9px;color:#aeb5c2;font-size:13.5px;font-weight:500;cursor:pointer;text-align:left}
.enlace:hover{background:rgba(255,255,255,.07);color:#fff}
.contenido{min-width:0}
.pagina{max-width:1280px;margin:0 auto;padding:30px 32px 56px;display:flex;flex-direction:column;gap:20px}
.encabezado{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px}
.encabezado h1{margin:0;font-size:26px;font-weight:700}
.encabezado p{margin:3px 0 0;color:var(--muted);font-size:14.5px}
.indicadores{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.ind{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;display:flex;align-items:center;gap:13px;box-shadow:var(--sombra)}
.ind .ico{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#eaf0fa;color:var(--blue)}
.ind .ico svg{width:20px;height:20px}
.ind.verde .ico{background:#e4f5ee;color:var(--ok)}
.ind.rojo .ico{background:#fdeaea;color:var(--bad)}
.ind.ambar .ico{background:#fff2dc;color:var(--warn)}
.ind b{display:block;font-size:25px;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums}
.ind small{color:var(--muted);font-size:13px}
.grilla{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:20px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;min-width:0;box-shadow:var(--sombra)}
.card h2{margin:0 0 4px;font-size:17.5px;font-weight:700}
.sub{margin:0 0 16px;color:var(--muted);font-size:13.5px}
.grilla>.card:first-child{position:sticky;top:20px;max-height:calc(100vh - 40px);display:flex;flex-direction:column}
.lista{display:flex;flex-direction:column;gap:8px;margin-top:14px;overflow-y:auto;min-height:0;padding:3px}
.cli{width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px 13px;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color .15s,box-shadow .15s,background .15s}
.cli:hover{border-color:var(--line-f);background:#fafbfc}
.cli.sel{border-color:var(--blue);background:#f5f8fd;box-shadow:0 0 0 3px rgba(31,78,156,.13)}
.cli b{font-size:14.5px}
.cli .rut{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--texto);white-space:nowrap}
.chip.ok{background:#e4f5ee;border-color:#b6e2cf;color:var(--ok)}
.chip.warn{background:#fff2dc;border-color:#f1d19a;color:var(--warn)}
.chip.bad{background:#fdeaea;border-color:#f2b9bc;color:var(--bad)}
.chip.cert{background:#eaf0fa;border-color:#c6d4ee;color:var(--blue)}

/* Formularios */
form{display:flex;flex-direction:column;gap:16px;margin:0}
fieldset{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
legend{font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;padding:0;grid-column:1/-1}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--texto);min-width:0}
label .h{font-weight:400;color:var(--muted);font-size:12px}
input,select,textarea{min-height:40px;padding:8px 11px;border:1px solid var(--line-f);border-radius:var(--r-ctl);background:#fff;color:var(--ink);width:100%;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:#9aa1ac}
input:hover,select:hover,textarea:hover{border-color:#aab1bc}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,78,156,.16)}
button:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
textarea{resize:vertical}
input[type=file]{padding:7px;background:var(--bg);border-style:dashed}
input[type=file]::file-selector-button{margin-right:10px;border:1px solid var(--line-f);background:#fff;border-radius:7px;padding:4px 10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ancho{grid-column:1/-1;width:100%}
.acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 17px;border-radius:var(--r-ctl);border:1px solid var(--line-f);background:#fff;font-weight:600;cursor:pointer;color:var(--ink);transition:background .15s,border-color .15s,box-shadow .15s,transform .05s}
.btn:hover{border-color:#aab1bc;background:#fafbfc}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 6px 16px -8px rgba(227,6,19,.7)}
.btn.pri:hover{background:var(--red-dk);border-color:var(--red-dk)}
.btn.azul{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 16px -8px rgba(31,78,156,.7)}
.btn.azul:hover{background:#19407f;border-color:#19407f}
.btn.chico{min-height:32px;padding:0 12px;font-size:13px;border-radius:8px;box-shadow:none}
.btn:disabled{opacity:.55;cursor:default;box-shadow:none}
.buscar{flex:1;min-width:160px}
.seccion{border-top:1px solid var(--line);padding-top:22px;margin-top:22px}
.msg{font-size:13.5px;padding:10px 13px;border-radius:var(--r-ctl);display:none;border-left:3px solid transparent}
.msg.ok{display:block;background:#e4f5ee;color:#0d5f43;border-left-color:var(--ok)}
.msg.err{display:block;background:#fdeaea;color:var(--bad);border-left-color:var(--bad)}

/* Tablas */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;background:#f8f9fb;white-space:nowrap}
tbody tr:hover td{background:#fafbfc}
tbody tr:last-child td{border-bottom:0}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
td select{min-height:32px;padding:3px 8px;width:auto}
td .acciones{gap:6px;flex-wrap:nowrap}
.tabla{overflow-x:auto;border:1px solid var(--line);border-radius:11px}
.vacio{color:var(--muted);font-size:13.5px;padding:14px 12px;text-align:center}
.bloqueado{opacity:.5;pointer-events:none}
.aviso{font-size:12.5px;color:var(--muted)}
.estado-cert{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;margin-bottom:10px}

/* Diálogo */
dialog{border:0;border-radius:18px;padding:26px;max-width:460px;width:calc(100% - 32px);box-shadow:var(--sombra-alta);color:var(--ink)}
dialog::backdrop{background:rgba(15,17,21,.55);backdrop-filter:blur(3px)}
dialog h2{margin:0 0 8px;font-size:19px}
dialog form{align-items:flex-end;margin-top:14px}
.clave-temporal{display:flex;gap:10px;align-items:center;background:var(--bg);border:1px dashed var(--line-f);border-radius:11px;padding:12px 14px;margin:12px 0}
.clave-temporal code{font-family:var(--mono);font-size:18px;flex:1;word-break:break-all}

@media (max-width:1100px){.grilla{grid-template-columns:minmax(0,1fr)}.grilla>.card:first-child{position:static;max-height:none}.lista{max-height:340px}}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .lateral{z-index:5;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px}
  .lateral .marca small,.tabs .rotulo,.persona,.enlace span{display:none}
  .lateral .marca{flex:1}
  .tabs{order:3;flex:1 0 100%;flex-direction:row;flex-wrap:nowrap;overflow-x:auto}
  .indicadores{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ind{padding:12px;gap:10px}
  .ind .ico{width:36px;height:36px}
  .tab{width:auto;padding:8px 11px;white-space:nowrap}
  .tab.activo::before{left:10px;right:10px;top:auto;bottom:2px;width:auto;height:3px;border-radius:3px}
  .yo{margin:0;flex-direction:row;border:0;padding:0}
  .pagina{padding:18px 14px 44px}
  .encabezado h1{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}