/* SHAOXI Alertas — diseño v3: iconos SVG, responsive (celular / tablet / laptop / PC), claro y oscuro. Sin build, sin Bootstrap. */
:root{
  color-scheme:light;
  --bg:#f2f5f7;--surface:#fff;--ink:#0f1b2d;--muted:#566377;--line:#e3e8ee;--hover:#f0f4f6;--head:#f7f9fb;
  --brand:#0e7c6b;--brand-dark:#0a5f52;--brand-soft:#e1f3ef;--on-brand:#fff;
  --side:#0c1f2c;--side-ink:#a9b8c6;--side-hi:#fff;--side-line:rgba(255,255,255,.08);--side-accent:#22c3aa;
  --danger:#d92d20;--danger-soft:#fdecea;--warning:#b54708;--warning-soft:#fff2df;--success:#067647;--success-soft:#e3f5ea;--info:#175cd3;--info-soft:#e8f0fe;
  --r:14px;--r-sm:10px;--shadow:0 1px 2px rgba(15,27,45,.05),0 10px 28px -14px rgba(15,27,45,.14);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#09121a;--surface:#101d29;--ink:#e6edf4;--muted:#92a2b4;--line:#203142;--hover:#15263642;--head:#0e1a25;
  --brand:#34c5ae;--brand-dark:#5fd8c4;--brand-soft:rgba(52,197,174,.14);--on-brand:#052019;
  --side:#07101a;--danger:#ff7066;--danger-soft:rgba(255,112,102,.14);--warning:#ffb454;--warning-soft:rgba(255,180,84,.14);
  --success:#4fd18b;--success-soft:rgba(79,209,139,.14);--info:#7fb0ff;--info-soft:rgba(127,176,255,.14);
  --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px -14px rgba(0,0,0,.65);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--font);font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.no-scroll{overflow:hidden}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4,h5{margin:0 0 .5rem;line-height:1.25;letter-spacing:-.015em}
h3{font-size:1.5rem;font-weight:800}h4{font-size:1.05rem;font-weight:700}
p{margin:0 0 .5rem}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
::selection{background:var(--brand-soft)}

/* ---------- Iconos ---------- */
.ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
.ico-sm{width:1em;height:1em}.ico-lg{width:1.5rem;height:1.5rem}.ico-xl{width:2rem;height:2rem}

/* ---------- Estructura ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:264px;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;padding:1.25rem 1rem;z-index:60;transition:transform .25s ease}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--side-hi);font-weight:800;font-size:1.05rem;padding:.25rem .5rem 1.25rem}
.brand:hover{text-decoration:none}
.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#22c3aa,#0e7c6b);display:grid;place-items:center;color:#fff;box-shadow:0 8px 18px -8px rgba(34,195,170,.8);flex:none}
.brand small{display:block;font-weight:500;font-size:.72rem;color:var(--side-ink)}
.side-close{display:none}
.side-nav{display:flex;flex-direction:column;gap:.2rem;flex:1;overflow-y:auto}
.nav-link{display:flex;align-items:center;gap:.75rem;padding:.7rem .85rem;border-radius:12px;color:var(--side-ink);font-weight:600;font-size:.92rem;transition:background .15s,color .15s}
.nav-link .ico{width:20px;height:20px}
.nav-link:hover{background:var(--side-line);color:var(--side-hi);text-decoration:none}
.nav-link.active{background:rgba(34,195,170,.16);color:#fff;box-shadow:inset 3px 0 0 var(--side-accent)}
.badge-count{margin-left:auto;font-size:.7rem;padding:.1rem .5rem;min-width:22px;text-align:center}
.side-foot{border-top:1px solid var(--side-line);padding-top:1rem;display:grid;gap:.55rem}
.side-foot .who{display:flex;align-items:center;gap:.65rem;font-size:.8rem;padding:0 .3rem .25rem;color:var(--side-ink);min-width:0}
.side-foot .who b{display:block;color:var(--side-hi);font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .who span{min-width:0}
.avatar{width:36px;height:36px;border-radius:50%;background:rgba(34,195,170,.2);color:#7ff0dc;display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:none}
.side-foot .btn{width:100%;justify-content:center;background:var(--side-line);color:var(--side-hi);border-color:transparent}
.side-foot .btn:hover{background:rgba(255,255,255,.16)}
.side-foot .btn-sync{background:var(--side-accent);color:#05231d}
.side-foot .btn-sync:hover{background:#4fd8c2}
.side-foot .foot-row{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.topbar{display:none}
.tabbar{display:none}
.scrim{position:fixed;inset:0;background:rgba(6,14,22,.6);backdrop-filter:blur(2px);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.show{opacity:1;pointer-events:auto}
.content{margin-left:264px;padding:2rem 2.25rem 4rem;max-width:1560px}

.icon-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:11px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;flex:none;transition:background .15s}
.icon-btn:hover{background:var(--hover)}
.icon-btn .ico{width:20px;height:20px}
.i-sun{display:none}:root[data-theme=dark] .i-sun{display:inline-block}:root[data-theme=dark] .i-moon{display:none}

@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%);width:min(300px,86vw);padding-top:calc(1.25rem + var(--sat))}
  .sidebar.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.45)}
  .side-close{display:grid;position:absolute;top:calc(.9rem + var(--sat));right:.9rem;width:36px;height:36px;border-radius:10px;border:0;background:var(--side-line);color:var(--side-hi);place-items:center;cursor:pointer}
  .topbar{display:flex;align-items:center;gap:.7rem;position:sticky;top:0;z-index:40;background:var(--surface);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:calc(.6rem + var(--sat)) 1rem .6rem}
  .topbar .brand{color:var(--ink);padding:0;font-size:1rem;gap:.55rem}
  .topbar .brand-mark{width:32px;height:32px;border-radius:10px}
  .topbar .spacer{margin-left:auto}
  .content{margin-left:0;padding:1.25rem 1.25rem 3rem}
  h3{font-size:1.35rem}
}
@media (max-width:767.98px){
  body{font-size:14.5px}
  .content{padding:1rem .9rem calc(6rem + var(--sab))}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--surface);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:.35rem .4rem calc(.35rem + var(--sab))}
  .tab{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.4rem .2rem;border-radius:12px;color:var(--muted);font-size:.68rem;font-weight:700;position:relative;text-decoration:none!important}
  .tab .ico{width:22px;height:22px}
  .tab.active{color:var(--brand);background:var(--brand-soft)}
  .tab .badge-count{position:absolute;top:.1rem;left:calc(50% + 6px);margin:0;background:var(--danger);color:#fff;border-radius:999px;font-size:.62rem;padding:0 .35rem;min-width:18px;line-height:1.35}
}
@media (min-width:1600px){.content{margin-left:max(264px,calc((100vw - 1560px)/2 + 264px))}}

/* ---------- Utilidades (compatibilidad con las vistas) ---------- */
.container-fluid{width:100%}
.px-4{padding-inline:1.5rem}.py-2{padding-block:.5rem}.py-4{padding-block:1.5rem}.p-4{padding:1.5rem}.pb-5{padding-bottom:3rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.me-2{margin-right:.5rem}.ms-2{margin-left:.5rem}.ms-auto{margin-left:auto}
.w-100{width:100%}.d-flex{display:flex}.d-block{display:block}.flex-fill{flex:1 1 auto}.justify-items-center{justify-items:center}
.d-none{display:none!important}
@media (min-width:576px){.d-sm-none{display:none!important}.d-sm-flex{display:flex!important}.flex-sm-fill{flex:1 1 auto}.align-items-sm-center{align-items:center}.justify-content-sm-between{justify-content:space-between}}
.align-items-center{align-items:center}.align-items-end{align-items:flex-end}.justify-content-between{justify-content:space-between}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:1rem}.flex-wrap{flex-wrap:wrap}
.row{display:flex;flex-wrap:wrap;margin:-.5rem}.row>*{padding:.5rem;min-width:0}.row.g-2>*{padding:.25rem}.row.g-2{margin:-.25rem}
.col-12,.col-md-2,.col-md-3,.col-md-4,.col-md-6,.col-md-8{flex:0 0 100%;max-width:100%}
@media (min-width:768px){.col-md-2{flex:0 0 16.66%;max-width:16.66%}.col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.33%;max-width:33.33%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-8{flex:0 0 66.66%;max-width:66.66%}}
.text-center{text-align:center}.text-end,.text-right{text-align:right}
.text-muted,.text-secondary{color:var(--muted)}.text-primary{color:var(--brand)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}
.small{font-size:.82rem}.fw-bold{font-weight:800}.fw-semibold{font-weight:600}
.nowrap{white-space:nowrap}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- Encabezado de página ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.35rem}
.page-head h3{margin:0}
.page-head .sub{color:var(--muted);font-size:.88rem;margin-top:.15rem}
.page-head .actions{display:flex;gap:.5rem;flex-wrap:wrap}
.back-link{display:inline-flex;align-items:center;gap:.35rem;color:var(--muted);font-size:.84rem;font-weight:600;margin-bottom:.6rem}
.back-link:hover{color:var(--brand);text-decoration:none}
@media (max-width:575.98px){.page-head .actions{width:100%}.page-head .actions>*{flex:1}.page-head .actions .btn{width:100%}}

/* ---------- Tarjetas e indicadores ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-body{padding:1.25rem}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-bottom:1.25rem}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
.kpi{display:flex;align-items:center;gap:.9rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:1rem 1.1rem;color:var(--ink);text-align:left;font:inherit;cursor:pointer;transition:border-color .15s,transform .1s;width:100%}
.kpi:hover{border-color:var(--brand);text-decoration:none}
.kpi.active,.kpi[aria-pressed=true]{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.kpi .chip-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none}
.kpi .chip-ico .ico{width:22px;height:22px}
.kpi .num{font-size:1.75rem;font-weight:800;line-height:1.05;letter-spacing:-.03em}
.kpi .label{font-size:.78rem;color:var(--muted);font-weight:600;margin-top:.2rem;line-height:1.25}
.tone-brand{background:var(--brand-soft);color:var(--brand)}.tone-danger{background:var(--danger-soft);color:var(--danger)}
.tone-warning{background:var(--warning-soft);color:var(--warning)}.tone-success{background:var(--success-soft);color:var(--success)}
.tone-info{background:var(--info-soft);color:var(--info)}.tone-neutral{background:var(--hover);color:var(--muted)}
@media (max-width:991.98px){.kpis{grid-template-columns:repeat(2,1fr)}.kpis.k3{grid-template-columns:repeat(3,1fr)}}
@media (max-width:575.98px){
  .kpis,.kpis.k3{gap:.6rem}
  .kpi{padding:.75rem;gap:.65rem}
  .kpi .chip-ico{width:36px;height:36px;border-radius:11px}.kpi .chip-ico .ico{width:18px;height:18px}
  .kpi .num{font-size:1.35rem}.kpi .label{font-size:.7rem}
  .kpis.k3 .kpi{flex-direction:column;align-items:flex-start}
}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--line);border-radius:var(--r-sm);padding:.58rem 1rem;font:600 .88rem/1.2 var(--font);cursor:pointer;background:var(--surface);color:var(--ink);transition:background .15s,border-color .15s,transform .05s;text-decoration:none;position:relative}
.btn .ico{width:17px;height:17px}
.btn:hover{background:var(--hover);text-decoration:none}.btn:active{transform:translateY(1px)}
.btn-sm{padding:.4rem .75rem;font-size:.8rem;border-radius:9px}
.btn-primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-outline-primary{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 55%,transparent);background:transparent}.btn-outline-primary:hover{background:var(--brand-soft)}
.btn-outline-secondary{color:var(--muted)}.btn-outline-secondary:hover{color:var(--ink)}
.btn-outline-danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,transparent);background:transparent}.btn-outline-danger:hover{background:var(--danger-soft)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-danger:hover{filter:brightness(.92);background:var(--danger)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn-icon{padding:0;width:36px;height:36px;border-radius:10px;flex:none}
.btn-icon .ico{width:18px;height:18px}
.btn-icon .lbl{display:none}
.btn-close{background:none;border:0;font-size:1.2rem;line-height:1;cursor:pointer;color:inherit;opacity:.6;margin-left:auto;padding:.25rem}.btn-close:hover{opacity:1}
button[disabled],.btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--muted);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite}
.btn-primary.is-loading::after,.btn-danger.is-loading::after{border-color:rgba(255,255,255,.4);border-top-color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
@media (pointer:coarse){.btn{min-height:42px}.btn-icon{width:42px;height:42px}.icon-btn{width:44px;height:44px}}

/* ---------- Formularios ---------- */
.form-label{display:block;font-size:.82rem;font-weight:700;margin-bottom:.35rem;color:var(--muted)}
.form-control,.form-select,textarea.form-control{width:100%;padding:.64rem .85rem;border:1px solid var(--line);border-radius:var(--r-sm);font:400 .92rem var(--font);background:var(--surface);color:var(--ink);transition:border-color .15s,box-shadow .15s;min-height:42px}
.form-select{appearance:none;-webkit-appearance:none;padding-right:2.3rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a97a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;background-size:18px;text-overflow:ellipsis}
.form-select[multiple]{background-image:none;padding-right:.85rem}
.form-control::placeholder{color:var(--muted);opacity:.7}
.form-control:focus,.form-select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.form-control.is-invalid{border-color:var(--danger)}
.form-control[readonly]{background:var(--head);color:var(--muted)}
.invalid-feedback{color:var(--danger);font-size:.78rem;margin-top:.25rem}.form-text{font-size:.78rem;color:var(--muted);margin-top:.3rem}
.form-check{display:flex;align-items:center;gap:.5rem}.form-check-input{width:18px;height:18px;accent-color:var(--brand)}.form-check-label{font-size:.9rem}
.input-ico{position:relative}
.input-ico>.ico{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.input-ico .form-control{padding-left:2.55rem}
.input-ico .toggle-pass{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);width:36px;height:36px;border-radius:9px;display:grid;place-items:center;cursor:pointer}
.input-ico .toggle-pass:hover{color:var(--ink);background:var(--hover)}
.input-ico .toggle-pass .ico{position:static;transform:none;width:18px;height:18px}
.input-ico .toggle-pass .i-off{display:none}.input-ico .toggle-pass.shown .i-on{display:none}.input-ico .toggle-pass.shown .i-off{display:inline-block}
.input-ico.has-toggle .form-control{padding-right:2.9rem}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}
.s-3{grid-column:span 3}.s-4{grid-column:span 4}.s-6{grid-column:span 6}.s-8{grid-column:span 8}.s-12{grid-column:1/-1}
@media (max-width:767.98px){.s-3,.s-4,.s-6,.s-8{grid-column:1/-1}}
@media (min-width:768px) and (max-width:1099.98px){.s-3{grid-column:span 6}.s-4{grid-column:span 6}}
.fsec{padding:1.35rem 1.4rem;border-bottom:1px solid var(--line)}
.fsec:last-of-type{border-bottom:0}
.fsec-title{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:.98rem;margin-bottom:1rem}
.fsec-title .chip-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center}
.fsec-title .chip-ico .ico{width:17px;height:17px}
.form-actions{display:flex;gap:.6rem;flex-wrap:wrap;padding:1rem 1.4rem;background:var(--head);border-top:1px solid var(--line);border-radius:0 0 var(--r) var(--r)}
@media (max-width:575.98px){.form-actions .btn{flex:1}.fsec{padding:1.1rem 1rem}.form-actions{padding:.9rem 1rem;position:sticky;bottom:calc(4.9rem + var(--sab));z-index:5}}
.callout{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem .95rem;border-radius:12px;background:var(--info-soft);color:var(--info);font-size:.82rem;line-height:1.45}
.callout .ico{width:18px;height:18px;margin-top:.1rem}
.callout.warn{background:var(--warning-soft);color:var(--warning)}
.callout>div{color:var(--ink)}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.55rem;max-height:260px;overflow:auto;padding:.15rem}
.check-card{display:flex;align-items:center;gap:.65rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--surface);transition:border-color .15s,background .15s;min-width:0}
.check-card:hover{background:var(--hover)}
.check-card:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.check-card input{width:18px;height:18px;accent-color:var(--brand);flex:none}
.check-card b{display:block;font-size:.86rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.check-card small{display:block;color:var(--muted);font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.check-card>span{min-width:0}

/* ---------- Barra de filtros ---------- */
.toolbar{margin-bottom:1rem;display:grid;gap:.6rem}
.toolbar .tb-main{display:flex;gap:.6rem}
.toolbar .tb-main .input-ico{flex:1;min-width:0}
.toolbar .tb-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.6rem}
.toolbar .tb-toggle{display:none}
.toolbar .tb-go{flex:none}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:1rem}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .65rem;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:.76rem;font-weight:700;max-width:100%}
.chip a{display:inline-grid;place-items:center;color:inherit;opacity:.7}.chip a:hover{opacity:1;text-decoration:none}
.chip .ico{width:13px;height:13px}
.chip-clear{font-size:.78rem;font-weight:700;color:var(--muted)}
@media (max-width:767.98px){
  .toolbar .tb-toggle{display:inline-flex}
  .toolbar .tb-extra{display:none;grid-template-columns:1fr 1fr}
  .toolbar.open .tb-extra{display:grid}
  .toolbar .tb-go{display:none}
}
@media (max-width:420px){.toolbar .tb-extra{grid-template-columns:1fr}}

/* ---------- Insignias y avisos ---------- */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;font-size:.73rem;font-weight:700;background:var(--hover);color:var(--ink);white-space:nowrap;line-height:1.35}
.badge .ico{width:13px;height:13px}
.rounded-pill{border-radius:999px}
.bg-danger{background:var(--danger);color:#fff}
.bg-danger-subtle{background:var(--danger-soft);color:var(--danger)}.bg-success-subtle{background:var(--success-soft);color:var(--success)}
.bg-warning-subtle{background:var(--warning-soft);color:var(--warning)}.bg-secondary-subtle{background:var(--hover);color:var(--muted)}.bg-primary-subtle{background:var(--brand-soft);color:var(--brand)}.bg-info-subtle{background:var(--info-soft);color:var(--info)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.alert{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1rem;border-radius:12px;margin-bottom:1rem;font-size:.9rem;border:1px solid transparent}
.alert>.ico{width:20px;height:20px;margin-top:.05rem}
.alert .alert-body{flex:1;min-width:0}
.alert-success{background:var(--success-soft);color:var(--success);border-color:color-mix(in srgb,var(--success) 25%,transparent)}
.alert-danger{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 25%,transparent)}
.alert-warning{background:var(--warning-soft);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 25%,transparent)}
.alert ul{padding-left:1.1rem;margin:0}.alert a{font-weight:800;text-decoration:underline}
.alert.fade-out{opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s}
.toast{position:fixed;left:50%;bottom:calc(1.5rem + var(--sab));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:12px;font-size:.84rem;font-weight:600;opacity:0;transition:opacity .2s,transform .2s;z-index:100;pointer-events:none;display:flex;gap:.5rem;align-items:center;width:max-content;max-width:90vw;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:767.98px){.toast{bottom:calc(5.6rem + var(--sab))}}

/* ---------- Bandeja: mensajes ---------- */
.msg-list{display:grid;gap:.75rem}
.msg{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 190px auto;grid-template-areas:"main dates actions" "gest gest gest";gap:.6rem 1.25rem;padding:1rem 1.15rem 1rem 1.3rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.msg::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:transparent}
.msg.is-unread::before{background:var(--brand)}
.msg.is-urgent::before{background:var(--warning)}
.msg.is-critical{background:linear-gradient(0deg,var(--danger-soft),var(--danger-soft)),var(--surface);border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
.msg.is-critical::before{background:var(--danger);width:5px}
.msg.is-done{opacity:.82}.msg.is-done::before{background:var(--success)}
.msg-main{grid-area:main;min-width:0}
.msg-top{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin-bottom:.3rem}
.msg-top .dot{color:var(--brand)}
.msg-cliente{font-size:.82rem;color:var(--muted);min-width:0}
.msg-cliente b{color:var(--ink);font-weight:700}
.msg-asunto{font-size:.98rem;font-weight:600;margin:0 0 .15rem;word-break:break-word}
.msg.is-unread .msg-asunto{font-weight:800}
.msg-res{color:var(--muted);font-size:.84rem;margin:0}
.msg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;margin-top:.55rem;font-size:.78rem;color:var(--muted)}
.msg-meta .ico{width:14px;height:14px}
.msg-meta span.item{display:inline-flex;align-items:center;gap:.25rem}
.msg-dates{grid-area:dates;display:grid;gap:.4rem;align-content:start;font-size:.82rem}
.msg-dates .lbl-d{display:block;font-size:.68rem;font-weight:700;color:var(--muted);letter-spacing:.02em}
.msg-dates .val{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-weight:600}
.msg-actions{grid-area:actions;display:flex;gap:.4rem;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end}
.msg-actions form{display:contents}
.msg-gestion{grid-area:gest;border-top:1px dashed var(--line);padding-top:.5rem;margin-top:.15rem}
.msg-gestion summary{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;color:var(--brand);cursor:pointer;list-style:none;padding:.25rem 0}
.msg-gestion summary::-webkit-details-marker{display:none}
.msg-gestion summary .ico{transition:transform .2s}
.msg-gestion[open] summary .ico{transform:rotate(180deg)}
.gestion-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:.75rem}
.guia h5{font-size:.82rem;font-weight:800;margin:.1rem 0 .2rem}
.guia ul{margin:.1rem 0 .6rem;padding-left:1.15rem;font-size:.84rem}
.guia li{margin-bottom:.15rem}
.guia .pie{font-size:.74rem;color:var(--muted)}
.gform{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.gform .full{grid-column:1/-1}
@media (max-width:1279.98px){
  .msg{grid-template-columns:minmax(0,1fr) 200px;grid-template-areas:"main dates" "main actions" "gest gest"}
  .msg-actions{justify-content:flex-start}
}
@media (max-width:767.98px){
  .msg{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "dates" "actions" "gest";padding:.9rem .9rem .9rem 1.1rem}
  .msg-dates{grid-template-columns:1fr 1fr;gap:.6rem}
  .msg-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:.45rem}
  .msg-actions .btn-icon{width:auto;height:auto;padding:.5rem .45rem;gap:.35rem;font-size:.78rem;min-height:42px;white-space:nowrap}
  .msg-actions .btn-icon .lbl{display:inline}
  .gestion-grid,.gform{grid-template-columns:1fr}
}

/* ---------- Panel: tarjetas por cliente ---------- */
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:1rem}
.cc{position:relative;display:flex;flex-direction:column;gap:.85rem;padding:1.1rem 1.15rem 1rem 1.3rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.cc::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--line)}
.cc.sem-rojo::before{background:var(--danger)}.cc.sem-ambar::before{background:#f79009}.cc.sem-verde::before{background:#12b76a}
.cc-head{display:flex;gap:.75rem;justify-content:space-between;align-items:flex-start}
.cc-head h4{margin:0;font-size:1rem;line-height:1.3;word-break:break-word}
.ruc{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--muted);background:none;border:0;padding:.1rem 0;cursor:pointer;font-family:inherit}
.ruc:hover{color:var(--brand)}.ruc .ico{width:13px;height:13px;opacity:.7}
.pill{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .65rem;border-radius:999px;font-size:.74rem;font-weight:800;white-space:nowrap;flex:none}
.pill .ico{width:14px;height:14px}
.cc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.cc-stat{background:var(--head);border-radius:12px;padding:.55rem .7rem}
.cc-stat b{display:block;font-size:1.25rem;font-weight:800;line-height:1.1}
.cc-stat span{font-size:.7rem;color:var(--muted);font-weight:600}
.cc-stat.on b{color:var(--danger)}
.cc-motivos{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.82rem}
.cc-motivos li{display:flex;gap:.45rem;align-items:flex-start}
.cc-motivos .ico{width:15px;height:15px;margin-top:.2rem;color:var(--muted)}
.cc-motivos.ok li{color:var(--success)}.cc-motivos.ok .ico{color:var(--success)}
.cc-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;padding-top:.75rem;border-top:1px solid var(--line)}
.cc-sync{font-size:.76rem;color:var(--muted);display:flex;align-items:center;gap:.35rem;min-width:0}
.cc-actions{display:flex;gap:.4rem;margin-left:auto}
.cc-actions form{display:contents}

/* ---------- Estado vacío ---------- */
.empty{display:grid;justify-items:center;gap:.4rem;text-align:center;padding:3rem 1.25rem;color:var(--muted)}
.empty .chip-ico{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:var(--hover);margin-bottom:.4rem}
.empty .chip-ico .ico{width:28px;height:28px}
.empty b{color:var(--ink);font-size:1rem}
.empty p{max-width:36ch;margin:0 0 .6rem;font-size:.88rem}
.empty-row td{border:0!important}

/* ---------- Tablas ---------- */
.table-responsive{overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.8rem 1rem;border-bottom:1px solid var(--line);text-align:left;font-size:.88rem;vertical-align:middle}
.table thead th,.table-light th{font-size:.74rem;font-weight:700;color:var(--muted);background:var(--head);white-space:nowrap}
.table tbody tr{transition:background .12s}.table-hover tbody tr:hover{background:var(--hover)}
.table tbody tr:last-child td{border-bottom:0}
.table .t-main{font-weight:700}.table .t-sub{font-size:.76rem;color:var(--muted)}
.table .td-actions .acts{display:flex;gap:.35rem;flex-wrap:wrap}
.table .td-actions form{display:contents}
.card>.table-responsive{border-radius:var(--r)}
.who-cell{display:flex;align-items:center;gap:.65rem}
.who-cell .avatar{background:var(--brand-soft);color:var(--brand)}

/* ---------- Paginación ---------- */
nav[role=navigation]{margin-top:1.25rem}
nav[role=navigation]{display:flex;flex-wrap:wrap;gap:.75rem}
nav[role=navigation]>div{gap:.75rem}
nav[role=navigation] p.small{margin:0;color:var(--muted)}
nav[role=navigation] .d-sm-none{width:100%}
nav[role=navigation] .d-sm-none .pagination{width:100%;justify-content:space-between}
nav[role=navigation] .pagination{display:flex;gap:.3rem;list-style:none;padding:0;margin:0;flex-wrap:wrap}
nav[role=navigation] .page-link,nav[role=navigation] .pagination span{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 .7rem;border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:.82rem;font-weight:600;background:var(--surface)}
nav[role=navigation] a.page-link:hover{background:var(--hover);text-decoration:none}
nav[role=navigation] .active .page-link{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
nav[role=navigation] .disabled .page-link,nav[role=navigation] .disabled span{color:var(--muted);opacity:.5}

/* ---------- Diálogo de confirmación ---------- */
dialog.dlg{border:0;border-radius:18px;padding:0;max-width:min(420px,92vw);width:100%;background:var(--surface);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.55)}
dialog.dlg::backdrop{background:rgba(6,14,22,.6);backdrop-filter:blur(3px)}
dialog.dlg[open]{animation:pop .18s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}}
.dlg-body{padding:1.5rem 1.5rem 1rem;display:grid;gap:.75rem;justify-items:start}
.dlg-body .chip-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center}
.dlg-body .chip-ico .ico{width:22px;height:22px}
.dlg-body h4{margin:0}
.dlg-body p{margin:0;color:var(--muted);font-size:.9rem}
.dlg-actions{display:flex;gap:.6rem;justify-content:flex-end;padding:0 1.5rem 1.4rem}
@media (max-width:480px){.dlg-actions .btn{flex:1}}

/* ---------- Login ---------- */
.login-body{margin:0;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.1fr 1fr;background:var(--bg)}
.login-hero{background:radial-gradient(900px 500px at 10% 0,rgba(34,195,170,.32),transparent 60%),#0c1f2c;color:#fff;padding:3rem;display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.login-hero h1{font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:800;max-width:22ch;line-height:1.15}
.login-hero p{color:#a9b8c6;max-width:40ch;margin:0}
.feat{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:.9rem}
.feat li{display:flex;gap:.8rem;align-items:flex-start;color:#d3dee8;font-size:.92rem;max-width:44ch}
.feat .chip-ico{width:36px;height:36px;border-radius:11px;background:rgba(34,195,170,.16);color:#7ff0dc;display:grid;place-items:center;flex:none}
.feat .chip-ico .ico{width:18px;height:18px}
.feat b{display:block;color:#fff;font-size:.92rem}
.login-main{display:grid;align-content:center;padding:2rem 1.25rem;position:relative}
.login-box{width:100%;max-width:420px;margin:auto}
.login-box .card{border-radius:20px}
.login-theme{position:fixed;top:calc(1rem + var(--sat));right:1rem;z-index:5}
@media (max-width:860px){
  .login-body{grid-template-columns:1fr}
  .login-main{order:-1}
  .login-hero{padding:1.5rem 1.25rem 1.75rem;gap:1.1rem}
  .login-hero h1{font-size:1.55rem;max-width:none}
  .feat{display:none}
  .login-main{padding:1.25rem 1rem 2rem;margin-top:-1rem}
  .login-box .card{box-shadow:0 20px 50px -20px rgba(0,0,0,.35)}
}

/* ---------- Tablas → tarjetas en celular ---------- */
@media (max-width:767.98px){
  .table thead{display:none}
  .table,.table tbody,.table tr{display:block;width:100%}
  .table tr{padding:.9rem 1rem;border-bottom:1px solid var(--line)}
  .table tbody tr:last-child{border-bottom:0}
  .table td{display:flex;gap:1rem;justify-content:space-between;align-items:flex-start;border:0;padding:.3rem 0;text-align:right}
  .table td::before{content:attr(data-label);color:var(--muted);font-size:.72rem;font-weight:700;text-align:left;flex:0 0 36%}
  .table td:not([data-label])::before,.table td[data-label=""]::before{display:none}
  .table td[colspan]{display:block;text-align:left}
  .table td:empty{display:none}
  .table td.td-actions{display:block;padding-top:.6rem;margin-top:.3rem;border-top:1px dashed var(--line);text-align:left}
  .table td.td-actions::before{display:none}
  .table td.td-actions .acts{justify-content:flex-start}
  .table td.td-actions .btn-icon{width:auto;height:auto;padding:.5rem .75rem;min-height:42px}
  .table td.td-actions .btn-icon .lbl{display:inline;font-size:.78rem}
  .table td .d-flex{justify-content:flex-end;flex-wrap:wrap}
  .table td.td-title{display:block;text-align:left;padding-bottom:.4rem}
  .table td.td-title::before{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
[hidden]{display:none!important}

/* Fuentes: SUNAT y SUNAFIL con identidad propia */
.src{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;letter-spacing:.02em}
.src::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.src-sunat{background:var(--brand-soft);color:var(--brand)}
.src-sunafil{background:var(--info-soft);color:var(--info)}
.src-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.src-tab{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border:1px solid var(--border,rgba(128,128,128,.25));border-radius:999px;color:var(--muted);text-decoration:none;font-weight:600;font-size:.9rem;background:transparent}
.src-tab:hover{background:var(--hover)}
.src-tab.active{background:var(--brand-soft);color:var(--brand);border-color:transparent}
.src-tab .n{font-weight:700;font-size:.78rem;padding:.05rem .45rem;border-radius:999px;background:var(--hover);color:var(--muted)}
.src-tab .n.hot{background:var(--danger);color:#fff}
.nl-src{display:inline-flex;align-items:center;gap:.35rem;margin-right:.35rem;text-decoration:none}
.nl-src .tag{font-size:.7rem;font-weight:700;color:var(--muted)}

/* Menú lateral: contador sin leer por portal */
.badge-src{margin-left:auto;display:inline-flex;gap:.25rem;flex-wrap:wrap;justify-content:flex-end}
.badge-src .badge-count{margin-left:0;min-width:0;display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap}
.badge-src .tag{font-size:.58rem;font-weight:700;letter-spacing:.03em;opacity:.9}

/* Los botones con atributo hidden deben ocultarse aunque .btn defina display */
[hidden]{display:none !important}

/* ---------- Superposición de controles de ventana (app instalada en PC: Edge / Chrome) ----------
   El contenido sube hasta la franja del título y los botones del sistema se dibujan encima. La franja .titlebar
   hace de barra de título (arrastrable) y se limita al área libre que informa el navegador (macOS: botones a la izquierda;
   Windows: a la derecha). Fuera de este modo no se ve nada de esto. */
.titlebar{display:none}
@media (display-mode:window-controls-overlay){
  :root{--tb-h:env(titlebar-area-height,36px)}
  body{padding-top:var(--tb-h)}
  .titlebar{display:block;position:fixed;inset:0 0 auto 0;height:var(--tb-h);z-index:70;background:var(--side);color:var(--side-hi);border-bottom:1px solid var(--side-line);-webkit-app-region:drag;app-region:drag;user-select:none}
  .titlebar-inner{position:absolute;top:0;left:env(titlebar-area-x,0px);width:env(titlebar-area-width,100%);height:100%;display:flex;align-items:center;gap:.5rem;padding:0 .75rem;font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden}
  .titlebar .brand-mark{width:20px;height:20px;border-radius:6px;box-shadow:none}
  .titlebar .brand-mark .ico{width:13px;height:13px}
  .titlebar-sep{opacity:.45}
  .titlebar-page{font-weight:500;color:var(--side-ink);overflow:hidden;text-overflow:ellipsis}
  .sidebar{top:var(--tb-h)}
  .topbar{top:var(--tb-h)}
  .login-theme{top:calc(1rem + var(--tb-h))}
}
@media (display-mode:window-controls-overlay) and (min-width:992px){
  .sidebar>.brand{display:none} /* la marca ya está en la barra de título */
}

/* ---- Marca SHAOXI Alertas ---- */
.marca-w{font-family:'Montserrat','Plus Jakarta Sans',system-ui,sans-serif}
.brand .brand-cubo{height:38px;width:auto;flex:none;display:block}
.topbar .brand .brand-cubo{height:32px}
.brand .brand-nombre{font-family:'Montserrat','Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;letter-spacing:.01em;white-space:nowrap}
.brand .brand-nombre i{font-style:normal;font-weight:300;opacity:.85;margin:0 .15em}
.brand .brand-nombre b{font-weight:500}
.titlebar .brand-cubo{height:18px;width:auto;display:block}
.login-main{background:#f8f9fa}
[data-theme=dark] .login-main{background:var(--bg)}
.login-marca{text-align:center;margin:0 auto 1.5rem}
.login-marca img{height:92px;width:auto;display:block;margin:0 auto .6rem}
[data-theme=dark] .login-marca img{filter:drop-shadow(0 0 16px rgba(34,211,238,.35))}
.login-marca .w1{font:800 2rem/1 'Montserrat','Plus Jakarta Sans',sans-serif;color:#0a2342;letter-spacing:.01em}
.login-marca .w2{font:300 .95rem/1 'Montserrat','Plus Jakarta Sans',sans-serif;color:#0a2342;letter-spacing:.42em;text-transform:uppercase;margin-top:.55rem;padding-left:.42em}
[data-theme=dark] .login-marca .w1,[data-theme=dark] .login-marca .w2{color:var(--ink)}
.login-lema{display:none;text-align:center;color:var(--muted);font-size:.85rem;margin:-.6rem auto 1.1rem;max-width:34ch}
.site-foot{margin:2.5rem 0 0;padding-top:1rem;display:flex;justify-content:center;align-items:center;gap:.45rem;flex-wrap:wrap;font-size:.78rem;color:#6c757d;text-align:center}
.site-foot img{height:18px;width:auto;display:block}
.site-foot b{font-weight:600}