:root{--bg:#f4f5f7;--card:#fff;--line:#e3e7ee;--txt:#1d2129;--dim:#5f6a7d;
 --blue:#1a4fa0;--blued:#123a75;--yellow:#ffd200;--ok:#1f8a4c;--warn:#d97706;--bad:#c02626;
 --shadow:0 1px 2px rgba(16,24,40,.05),0 4px 16px rgba(16,24,40,.06);
 --shadow-h:0 4px 10px rgba(26,79,160,.14),0 12px 28px rgba(16,24,40,.10);--r:12px}
*{box-sizing:border-box;margin:0}
body{background:linear-gradient(180deg,#eef1f6 0%,var(--bg) 240px);color:var(--txt);font:15px/1.55 'Open Sans','Segoe UI',Roboto,Arial,sans-serif}
h1,h2,h3,header .t,.kpi .n,.tab,button,.relojcard .reloj,.scard .code{font-family:'Oxygen','Open Sans',Arial,sans-serif}
header{background:linear-gradient(180deg,#0c1e3e 0%,#102a56 100%);color:#fff;padding:0;height:60px;position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(6,16,34,.35)}
.dw-hwrap{display:flex;align-items:center;gap:12px;max-width:1180px;margin:0 auto;width:100%;padding:0 22px;min-width:0}
header img{height:24px;background:none;border-radius:0;padding:0}
header .t{font-weight:700;font-size:16px;letter-spacing:.01em;white-space:nowrap;border-left:1px solid rgba(255,255,255,.25);padding-left:12px}
header .sp{flex:1}
header nav{display:flex;gap:1px;align-items:center;min-width:0;flex:0 1 auto;overflow:visible}
header nav::-webkit-scrollbar{display:none}
header nav a{color:#d7e3f8;text-decoration:none;font-size:12px;font-weight:600;padding:6px 5px;border-radius:999px;transition:background .15s,color .15s;white-space:nowrap}
header nav a:hover{background:rgba(255,255,255,.14);color:#fff}
header nav a.act{background:var(--yellow);color:#1d2129}
header a.hlink{color:#fff;text-decoration:none;font-size:12.5px;font-weight:700;padding:7px 15px;border-radius:8px;border:1px solid rgba(255,255,255,.55);letter-spacing:.02em;white-space:nowrap}
header a.hlink:hover{background:rgba(255,255,255,.14);color:#fff}
main{max-width:1180px;margin:0 auto;padding:26px 22px 40px;scroll-margin-top:118px}
h1{font-size:22px;font-weight:800;letter-spacing:-.01em}
h2{font-size:13.5px;margin:30px 0 12px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.sub{color:var(--dim);font-size:13.5px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px;margin-top:14px}
.scard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;color:var(--txt);display:block;border-top:4px solid var(--blue);box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.scard:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
.scard .code{font-size:23px;font-weight:800;color:var(--blue)}
.scard .nm{color:var(--dim);font-size:13px;margin-bottom:10px}
.frver{display:inline-block;margin-top:7px;font-size:11.5px;font-weight:700;letter-spacing:.2px;background:#eef3fb;color:#123a75;border:1px solid #d6e2f5;border-radius:999px;padding:3px 10px}
.frver.off{background:#f5f6f8;color:var(--dim);border-color:#e6e9ef;font-weight:600}
.frrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
.frrow .frver{margin-top:0}
.frform{display:flex;gap:6px;align-items:center;margin-left:auto}
.frform input{width:120px;padding:6px 10px;font-size:13px}
.frform button{padding:6px 12px;font-size:13px}
.bar{height:8px;background:#e8ebf0;border-radius:99px;overflow:hidden;margin:10px 0 6px}
.bar span{display:block;height:100%;border-radius:99px;transition:width .4s}
.azul{background:var(--blue)}.amarillo{background:var(--warn)}.gris{background:#9aa3b2}.ok{background:var(--ok)}
.meta{font-size:12.5px;color:var(--dim)}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:10px;box-shadow:var(--shadow)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-size:14px}
tr:last-child td{border-bottom:none}
th{color:var(--dim);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;background:#f7f9fb}
tbody tr:hover td,tr:not(:has(th)):hover td{background:#fffbe8}
td a,.lnk{color:var(--blue);text-decoration:none;font-weight:600}
td a:hover,.lnk:hover{text-decoration:underline}
.tag{font-size:11px;padding:3px 10px;border-radius:999px;background:#e8edf5;color:var(--blue);font-weight:700;white-space:nowrap}
.tag.gray{background:#eef0f3;color:var(--dim)}
input,select,textarea,button{font:inherit;background:#fff;color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px 12px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,79,160,.13)}
textarea{width:100%;min-height:90px}
button{background:var(--blue);color:#fff;border:none;cursor:pointer;font-weight:600;border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.1)}
button:hover{background:var(--blued);box-shadow:0 2px 8px rgba(26,79,160,.3)}
.btn-y{background:var(--yellow);color:#1d2129}
.btn-y:hover{background:#f0c400;box-shadow:0 2px 8px rgba(255,210,0,.4)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;max-width:640px;box-shadow:var(--shadow)}
/* reloj + proxima sesion: barra superior del home, siempre visible y fija al hacer scroll */
.relojcard{display:flex;align-items:center;gap:16px;flex-wrap:wrap;max-width:none;margin:0 0 20px}
.relojcard .reloj{font-size:34px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
@media(min-width:760px){.relojcard{position:sticky;top:60px;z-index:40;box-shadow:0 6px 18px rgba(16,24,40,.13)}}
label{display:block;font-size:13px;color:var(--dim);margin:10px 0 4px;font-weight:600}
.hito{display:flex;align-items:center;gap:8px;padding:6px 0}
.hito .hito-orden{opacity:.55;transition:opacity .15s}
.hito:hover .hito-orden{opacity:1}
.mvb{background:none;border:1px solid var(--line);border-radius:6px;color:var(--blue);cursor:pointer;font-size:12px;line-height:1;padding:3px 6px;font-weight:700}
.mvb:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.mvb.off{color:#c9d3e3;border-color:#eef1f5;cursor:default;display:inline-block;padding:3px 6px;font-size:12px;line-height:1;font-weight:700}
.hito input[type=checkbox]{width:17px;height:17px;accent-color:var(--blue)}
.back{color:var(--blue);text-decoration:none;font-size:14px;font-weight:600}
.miga{font-size:13px;color:var(--dim);margin-bottom:8px}
.miga a{color:var(--blue);text-decoration:none;font-weight:600}
.tabs{display:flex;gap:6px;margin:4px 0 12px;flex-wrap:wrap}
.tab{background:#e8f1fb;color:var(--blue);border:0;border-radius:7px;padding:9px 18px;font-weight:800;font-size:12.5px;letter-spacing:.04em;box-shadow:none;font-family:'Oxygen','Open Sans',Arial,sans-serif}
.tab:hover{background:#d8e7f8;color:var(--blue);box-shadow:none}
.tab.act{background:var(--yellow);color:#123a75;box-shadow:0 3px 10px rgba(255,210,0,.35)}
/* ===== nav unificada ===== */
header .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
header .brand:hover{opacity:.92}
.drop{position:relative}
.drop>a.dd{color:#d7e3f8;text-decoration:none;font-size:13.5px;font-weight:600;padding:7px 13px;border-radius:999px;cursor:pointer;display:inline-block}
.drop>a.dd:hover{background:rgba(255,255,255,.14);color:#fff}
.drop .menu{display:none;position:absolute;top:calc(100% + 8px);left:0;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(16,24,40,.25);padding:6px;min-width:250px;z-index:100}
.drop.open .menu{display:block}
.drop .menu a{display:flex;align-items:center;gap:10px;color:var(--txt);text-decoration:none;font-size:13.5px;font-weight:600;padding:9px 12px;border-radius:8px}
.drop .menu a:hover{background:#f0f4fb}
.drop .dot{width:11px;height:11px;border-radius:50%;flex:none}
.drop .mgh{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#8a93a3;font-weight:700;padding:8px 12px 4px}
.drop .menu a.act{background:#eef4ff;color:var(--blue)}
.drop .mfoot{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 8px 8px;color:var(--blue)}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);margin-bottom:14px;flex-wrap:wrap}
.crumbs a{color:var(--blue);text-decoration:none;font-weight:600}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{color:#b6bfd0}
.crumbs .here{font-weight:700;color:var(--txt)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:16px 0}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);border-top:3px solid var(--blue)}
.kpi .n{font-size:26px;font-weight:800;color:var(--blued);line-height:1.1}
.kpi .l{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-top:3px}
.kpi.warn{border-top-color:var(--warn)}.kpi.ok{border-top-color:var(--ok)}.kpi.bad{border-top-color:var(--bad)}.kpi.y{border-top-color:var(--yellow)}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media(max-width:860px){.charts{grid-template-columns:1fr}}
.chart{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.chart h3{font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;font-weight:700}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--dim)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.cal-grid{table-layout:fixed;width:100%;border-collapse:collapse;margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.cal-grid th{text-align:center;color:var(--dim);font-size:11.5px;text-transform:uppercase;padding:8px;border-bottom:1px solid var(--line);background:#f7f9fb;border:1px solid var(--line)}
.cal-grid td{vertical-align:top;padding:4px;border:1px solid var(--line);height:80px;position:relative}
.cal-grid td.cal-celda-fuera{background:#f8fafc;opacity:0.6}
.cal-grid td.cal-hoy{background:#f0fdf4;box-shadow:inset 0 0 0 2px var(--ok)}
.cal-grid td.cal-dia-sel{background:#eff6ff;box-shadow:inset 0 0 0 2px var(--blue)}
.cal-grid td:hover{cursor:pointer}
.cal-grid td:hover:not(.cal-hoy):not(.cal-dia-sel){background:#f8fafc}
.cal-chip{display:flex;font-size:11px;color:#fff;padding:3px 6px;border-radius:4px;margin-top:4px;text-decoration:none}
.cal-nota-ico{flex:0 0 auto}
.cal-chip-txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cal-chip:hover{opacity:0.9;text-decoration:underline}
.cal-nav{color:var(--blue);text-decoration:none;font-weight:600;padding:4px 8px;border-radius:4px}
.cal-nav:hover{background:#f0f4fb}
.cal-fila-sesion{padding:12px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;background:var(--card)}
#cal-panel-dia{margin-top:16px;scroll-margin-top:118px}
#cal-resumen{font-size:13px;color:var(--dim);margin-bottom:12px}
.cal-toolbar{display:flex;justify-content:space-between;margin:16px 0;align-items:center;flex-wrap:wrap;gap:12px}
.cal-toolbar .filtro{flex:1 1 100%}
@media (min-width: 600px) {
  .cal-toolbar .filtro{flex:0 0 auto;width:auto}
}
.cal-toolbar select{width:100%}
.cal-chip[data-notas="1"]{border-left:4px solid var(--warn)}
.cal-add{position:absolute;right:4px;bottom:4px;font-size:13px;color:var(--dim);text-decoration:none;border:1px dashed var(--line);border-radius:6px;padding:0 6px;line-height:17px;opacity:.5;z-index:2}
.cal-add:hover{opacity:1;color:var(--blue);border-color:var(--blue);background:#f0f4fb}
@media (max-width: 759px) {
  .cal-chip { display:inline-block; width:12px; height:12px; padding:0; color:transparent; overflow:hidden; border-radius:50%; margin:2px; }
  .cal-chip[data-notas="1"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--warn); }
  .cal-grid td { height:44px; }
}
/* ===== buscador + pill de próxima sesión (estilo DonWeb) ===== */
.dw-searchrow{background:#102a56;padding:9px 22px;display:block;border-top:1px solid rgba(255,255,255,.08);position:sticky;top:60px;z-index:49}
.dw-searchrow .dw-rwrap{display:flex;align-items:center;gap:14px;justify-content:space-between;max-width:1180px;margin:0 auto;width:100%;padding:0 22px}
.dw-hwrap nav{display:flex;align-items:center;gap:4px}
.dw-reloj{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:9px 15px;color:#e6eefc;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.dw-nextpill{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:9px 15px;color:#cddcf5;font-size:12.5px;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:background .15s}
.dw-nextpill b{color:#fff;font-weight:700}
.dw-nextpill:hover{background:rgba(255,255,255,.14)}
/* modal de búsqueda (item "Buscar" del menú) */
.dw-bnav{cursor:pointer}
/* ====== modales: overlay real + centrado vertical + footer ====== */
.dw-modal{display:none;position:fixed;inset:0;background:rgba(6,16,34,.55);z-index:200;align-items:center;justify-content:center;padding:20px}
.dw-modal.open{display:flex}
.dw-modal .box{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(6,16,34,.45);width:100%;max-width:660px;overflow:hidden;max-height:min(86vh,760px);display:flex;flex-direction:column}
.dw-modal .chead{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#0c1e3e,#102a56);padding:14px 18px;color:#fff;font-family:'Oxygen','Open Sans',Arial,sans-serif;font-weight:700;font-size:15px;flex:none}
.dw-modal .chead .x{margin-left:auto;background:none;border:0;color:#cddcf5;font-size:18px;cursor:pointer;padding:2px 8px;border-radius:6px}
.dw-modal .chead .x:hover{background:rgba(255,255,255,.12);color:#fff}
.dw-modal .cbody{padding:16px 18px 18px;overflow:auto;flex:1}
.dw-modal.wide .box{max-width:840px}
.dw-modal .cfoot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:#fafbfd}
.dw-modal .cfoot .lnk{background:none;border:none;color:var(--dim);cursor:pointer;font-size:13px;padding:8px 10px;border-radius:8px}
.dw-modal .cfoot .lnk:hover{background:#eef1f5;color:var(--txt)}
.dw-actrow{display:flex;justify-content:flex-end;margin:10px 0 14px;gap:8px}
.dw-modal .sbox{display:flex;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 4px 18px rgba(16,42,89,.12)}
.dw-modal .sbox .dw-ico{padding:0 4px 0 14px;display:flex;align-items:center;color:#8a94a6;font-size:15px}
.dw-modal .sbox input{flex:1;min-width:60px;border:0;border-radius:0;padding:11px 8px 11px 0;font-size:14.5px;outline:none;box-shadow:none}
.dw-modal .sbox button{background:var(--yellow);color:#123a75;font-weight:700;font-size:12.5px;letter-spacing:.08em;padding:11px 22px;border-radius:0;box-shadow:none}
.dw-modal .sbox button:hover{background:#f0c400;box-shadow:none}
.dw-modal #dw-resultados{margin-top:14px}
.dw-modal .hintb{color:var(--dim);font-size:12.5px;margin-top:10px}
@media(max-width:1620px){header nav a{font-size:12px;padding:6px 5px}header .brand .t{font-size:15px}header a.hlink{padding:7px 11px;font-size:12px}.dw-hwrap{gap:8px}}
@media(max-width:1400px){header nav a{font-size:12px;padding:6px 6px}.dw-hwrap{gap:6px}header .t{font-size:15px;padding-left:10px}header a.hlink{padding:7px 10px;font-size:12px}}
@media(max-width:1240px){header nav a{font-size:11.5px;padding:5px 5px}.dw-hwrap{gap:4px}header .t{font-size:14px;padding-left:8px}header a.hlink{padding:6px 9px;font-size:11.5px}}
@media(max-width:1100px){.dw-nextpill{display:none}}
@media(max-width:900px){.dw-reloj{display:none}}
/* ===== móvil: ninguna página desborda el ancho del teléfono ===== */
@media(max-width:900px){
  .dw-searchrow{padding:8px 12px}
  .dw-searchrow .dw-rwrap{padding:0 4px;gap:8px}
  main{padding:18px 12px 34px}
  /* tablas anchas: scroll propio en vez de desbordar (el calendario necesita seguir siendo tabla) */
  table:not(.cal-grid){display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{padding:8px 9px;font-size:13px}
  /* filtros del informe: un campo por línea */
  .filtros form{display:block}
  .filtros form>div{width:100%;margin-bottom:9px}
  .filtros select,.filtros input{width:100%;max-width:100%}
  /* hero del home */
  .dw-hero .dwh{padding:26px 14px 30px}
  .dw-msg-hero{font-size:23px}
  .dw-hstats{gap:18px;margin-top:20px;padding-top:16px}
  .dw-hstats .n{font-size:20px}
  .dw-ctas{gap:9px}
  .dw-cta-y,.dw-cta-o{padding:11px 18px;font-size:12.5px}
  /* tarjetas: una columna */
  .dw-sgrid{grid-template-columns:1fr}
  .nt-grid{columns:1}
}
@media(max-width:760px){
  .dw-hero .dw-h1{font-size:27px}
  .cal-chip-txt{min-width:0}          /* el chip del calendario no empuja la celda */
}
/* ===== botón hamburguesa (visible solo cuando el nav no cabe: <=860px) ===== */
.dw-burger{display:none;width:38px;height:34px;align-items:center;justify-content:center;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);border-radius:9px;padding:0;cursor:pointer;flex:none}
.dw-burger:hover{background:rgba(255,255,255,.2)}
.dw-burger .bl{display:block;width:18px}
.dw-burger .bl i{display:block;height:2px;background:#fff;border-radius:2px;margin:3px 0}
/* ===== header en pantallas chicas: nada se corta, el menú va en panel ===== */
@media(max-width:860px){
  .dw-hwrap{gap:8px;padding:0 12px}
  header .brand .t{display:none}                 /* queda solo el logo: no compite con "Salir" */
  header .sp{display:none}
  header a.hlink{margin-left:auto !important;font-size:12px;padding:6px 10px;flex:none;max-width:min(58vw,290px);overflow:hidden;text-overflow:ellipsis}
  .dw-hwrap nav{display:none}                    /* 13 items no caben: van al panel */
  .dw-burger{display:inline-flex}
}
/* ===== panel de menú móvil ===== */
.dw-mnav{position:fixed;inset:0;z-index:300;display:none}
.dw-mnav.open{display:block}
.dw-mnav .mmask{position:absolute;inset:0;background:rgba(6,16,34,.55)}
.dw-mnav .mpanel{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:#fff;box-shadow:-8px 0 34px rgba(6,16,34,.35);display:flex;flex-direction:column;animation:dwSlide .22s ease-out}
@keyframes dwSlide{from{transform:translateX(100%)}to{transform:translateX(0)}}
.dw-mnav .mhead{display:flex;align-items:center;background:linear-gradient(180deg,#0c1e3e,#102a56);color:#fff;padding:12px 14px;flex:none}
.dw-mnav .mhead .mt{font-family:'Oxygen','Open Sans',Arial,sans-serif;font-weight:700;font-size:15px}
.dw-mnav .mhead .mx{margin-left:auto;background:none;border:0;color:#cddcf5;font-size:18px;cursor:pointer;padding:2px 8px;border-radius:6px}
.dw-mnav .mhead .mx:hover{background:rgba(255,255,255,.12);color:#fff}
.dw-mnav .mlist{overflow-y:auto;flex:1;padding:6px 8px}
.dw-mnav .mlist a{display:flex;align-items:center;gap:9px;padding:12px 10px;border-radius:9px;color:var(--txt);text-decoration:none;font-size:15px;font-weight:600;border-bottom:1px solid var(--line)}
.dw-mnav .mlist a:last-child{border-bottom:0}
.dw-mnav .mlist .msec{display:flex;align-items:center;width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:var(--txt);font-size:15px;font-weight:700;padding:12px 10px;cursor:pointer;text-align:left;font-family:inherit}
.dw-mnav .mlist .msec:hover{background:#f2f5fa}
.dw-mnav .mlist .msec.act{color:var(--blue)}
.dw-mnav .mlist .msub{display:none;margin:2px 0 6px 16px;border-left:2px solid var(--line);padding-left:10px}
.dw-mnav .mlist .msub a{color:#4a5568;font-weight:600}
.dw-mnav .mlist .msub.open{display:block}
.dw-mnav .mlist .msub a{font-size:14px;padding:10px 10px}
.dw-mnav .mlist a:hover{background:#f2f5fa}
.dw-mnav .mlist a.act{background:var(--yellow);color:#1d2129;font-weight:700;border-bottom-color:transparent}
.dw-mnav .mlist a .dot{width:10px;height:10px;border-radius:50%;flex:none}
.dw-mnav .mlist a .mbadge{background:var(--bad);color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;margin-left:auto}
.dw-mnav .msalir{flex:none;padding:12px 14px;border-top:1px solid var(--line);background:#fafbfd}
.dw-mnav .msalir .hlink{display:block;text-align:center;color:var(--blue);border:1.5px solid var(--line);background:#fff;text-decoration:none;font-size:13px;font-weight:700;padding:11px;border-radius:9px}
.dw-mnav .msalir .hlink:hover{border-color:var(--blue)}
@media print{.dw-searchrow{display:none}.dw-modal{display:none!important}.dw-mnav{display:none!important}.dw-burger{display:none!important}}
/* ===== banda de alertas + estado de hoy (estilo demo) ===== */
.dw-alertband{background:linear-gradient(90deg,#e6a400 0%,var(--yellow) 55%,#ffe066 100%);color:#123a75}
.dw-alertband .dwa{display:flex;align-items:center;gap:16px;max-width:1180px;margin:0 auto;padding:13px 22px;flex-wrap:wrap}
.dw-alertband .ico{font-size:24px}
.dw-alertband .txt{font-weight:700;font-size:15px;flex:1;min-width:240px}
.dw-alertband .txt small{display:block;font-weight:600;font-size:11.5px;opacity:.78}
.dw-badge-dark{background:#0c1e3e;color:var(--yellow);font-size:11px;font-weight:800;letter-spacing:.06em;padding:9px 16px;border-radius:20px;text-decoration:none;white-space:nowrap}
.dw-badge-dark:hover{box-shadow:0 4px 14px rgba(12,30,62,.35)}
.dw-alertband.ok{background:linear-gradient(90deg,#e2f5e9 0%,#d4f0e0 100%);color:#14532d}
.dw-alertband.ok .dw-badge-dark{background:#14532d;color:#bbf7d0}
.dw-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.dw-eyebrow .l{font-size:11px;font-weight:800;letter-spacing:.18em;color:#9aa3af;text-transform:uppercase;white-space:nowrap}
.dw-eyebrow .ln{height:1px;background:var(--line);flex:1}
.dw-stitle{font-size:24px;font-weight:800;font-family:'Oxygen','Open Sans',Arial,sans-serif;margin:0 0 3px;letter-spacing:-.01em}
.dw-stitle .dwaz{color:var(--blue)}
.dw-ssub{color:var(--dim);font-size:13px;margin-bottom:18px}
.kpis.k2{gap:16px}
.kpi2{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:15px 16px;display:flex;gap:12px;align-items:center;transition:transform .15s,box-shadow .15s}
.kpi2:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
.kpi2 .kcir{width:42px;height:42px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none;box-shadow:0 3px 10px rgba(255,210,0,.28)}
.kpi2 .kcir.azul{background:#e8f1fb;box-shadow:none}
.kpi2 .kcir.calh{background:var(--yellow);flex-direction:column;line-height:1;gap:1px}
.kpi2 .kcir.calh b{font-size:16px;font-weight:800;color:#0c1e3e;font-family:'Oxygen','Open Sans',Arial,sans-serif}
.kpi2 .kcir.calh i{font-size:7.5px;font-style:normal;font-weight:800;color:#0c1e3e;letter-spacing:.08em;text-transform:uppercase;font-family:'Oxygen','Open Sans',Arial,sans-serif}
.kpi2 .n{font-size:21px;font-weight:800;color:var(--blued);line-height:1.05;font-family:'Oxygen','Open Sans',Arial,sans-serif}
.kpi2 .l{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-top:2px}
@media(max-width:900px){.kpis.k2{grid-template-columns:repeat(2,1fr)}}
/* ===== grilla "Tus sitios" (estilo demo DonWeb) ===== */
.dw-sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dw-scard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;text-decoration:none;color:var(--texto);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.dw-scard:hover{transform:translateY(-4px);box-shadow:var(--shadow-h)}
.dw-scard .accent{height:5px;background:var(--sc,#1a4fa0)}
.dw-scard .body{padding:14px 16px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
.dw-scard .eyeb{font-size:9.5px;font-weight:800;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.dw-scard .nm{font-size:18px;font-weight:800;color:var(--blued);font-family:'Oxygen','Open Sans',Arial,sans-serif;line-height:1.2}
.dw-scard .frv{display:inline-flex;align-self:flex-start;background:#eef1f5;color:#4b5563;font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:12px}
.dw-scard .avrow{display:flex;justify-content:space-between;align-items:baseline}
.dw-scard .avrow .lab{font-size:12px;color:var(--dim);font-weight:600}
.dw-scard .avrow .pct{font-size:22px;font-weight:800;color:var(--blued);font-family:'Oxygen','Open Sans',Arial,sans-serif}
.dw-scard .track{height:7px;background:#e8ebf0;border-radius:5px;overflow:hidden}
.dw-scard .track span{display:block;height:100%;border-radius:5px;background:var(--sc,#1a4fa0)}
.dw-scard .mets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-top:1px solid var(--line);padding-top:10px;margin-top:auto}
.dw-scard .mets .n{font-size:16px;font-weight:800;color:var(--blued);line-height:1}
.dw-scard .mets .l{font-size:8.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-top:3px}
.dw-scard .btns{display:flex;gap:8px}
.dw-scard .b1{flex:1;text-align:center;background:var(--sc,#1a4fa0);color:#fff;font-size:11px;font-weight:800;letter-spacing:.05em;padding:9px 10px;border-radius:8px;text-decoration:none;transition:filter .15s}
.dw-scard .b1:hover{filter:brightness(1.12)}
.dw-scard .b2{flex:1;text-align:center;border:1.5px solid var(--line);color:#4b5563;font-size:11px;font-weight:800;letter-spacing:.05em;padding:8px 10px;border-radius:8px;text-decoration:none;background:#fff;transition:border-color .15s}
.dw-scard .b2:hover{border-color:var(--sc,#1a4fa0);color:var(--sc,#1a4fa0)}
/* card destacada (más activa) */
.dw-scard.top{background:linear-gradient(160deg,#13233f 0%,#0e1c34 100%);border-color:#0e1c34}
.dw-scard.top::before{content:'MÁS ACTIVA';position:absolute;top:12px;right:-34px;transform:rotate(38deg);background:var(--yellow);color:#0c1e3e;font-size:9px;font-weight:900;letter-spacing:.1em;padding:5px 40px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.dw-scard.top .eyeb{color:#9db2d6}
.dw-scard.top .nm{color:#fff}
.dw-scard.top .frv{background:var(--yellow);color:#0c1e3e}
.dw-scard.top .avrow .lab{color:#9db2d6}
.dw-scard.top .avrow .pct{color:#fff}
.dw-scard.top .track{background:rgba(255,255,255,.14)}
.dw-scard.top .mets{border-top-color:rgba(255,255,255,.14)}
.dw-scard.top .mets .n{color:#fff}
.dw-scard.top .mets .l{color:#9db2d6}
.dw-scard.top .b1{background:var(--yellow);color:#0c1e3e}
.dw-scard.top .b1:hover{filter:brightness(1.06)}
.dw-scard.top .b2{border-color:rgba(255,255,255,.3);color:#dbe6f7;background:transparent}
.dw-scard.top .b2:hover{border-color:var(--yellow);color:var(--yellow)}
.dw-sfoot{text-align:center;margin:22px 0 6px;color:var(--dim);font-size:12.5px}
.dw-sfoot a{display:inline-block;margin-top:12px;border:1.5px solid var(--line);background:#fff;color:#4b5563;font-size:11.5px;font-weight:800;letter-spacing:.05em;padding:10px 22px;border-radius:10px;text-decoration:none;transition:border-color .15s,color .15s}
.dw-sfoot a:hover{border-color:var(--blue);color:var(--blue)}
.dw-sort{font-size:12px;color:var(--dim);font-weight:600}
.dw-sortsel{font-size:12.5px;padding:7px 12px;border:1.5px solid var(--line);border-radius:9px;background:#fff;color:#374151;font-weight:600;cursor:pointer}
@media(max-width:1000px){.dw-sgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.dw-sgrid{grid-template-columns:1fr}}
/* ===== hero home (estilo demo DonWeb) ===== */
.dw-hero{position:relative;background:linear-gradient(135deg,#0c1e3e 0%,#123a75 100%);color:#fff;overflow:hidden}
.dw-hero::before{content:'';position:absolute;inset:0;opacity:.10;-webkit-mask-image:radial-gradient(ellipse at 28% 30%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse at 28% 30%,#000 25%,transparent 72%);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 54 17v30L28 62 2 47V17z' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E")}
.dw-hero .dwh{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:center;max-width:1180px;margin:0 auto;padding:38px 22px 42px}
.dw-hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,210,0,.14);border:1px solid rgba(255,210,0,.4);color:var(--yellow);font-size:11.5px;font-weight:700;letter-spacing:.12em;padding:6px 14px;border-radius:20px;margin-bottom:14px;font-family:'Oxygen','Open Sans',Arial,sans-serif}
.dw-hero .dw-h1{font-size:36px;line-height:1.1;font-weight:800;letter-spacing:-.01em;font-family:'Oxygen','Open Sans',Arial,sans-serif;margin-bottom:10px}
.dw-hero .dw-h1 span{color:var(--yellow)}
.dw-hero .dw-hsub{color:#c3d3ee;font-size:14.5px;max-width:480px;margin-bottom:20px}
.dw-msg{color:#ffd200;font-size:13.5px;font-weight:600;font-style:italic;letter-spacing:.01em;margin:-6px 0 20px;max-width:480px;opacity:.95}
.dw-msg-hero{font-size:33px;line-height:1.2;font-weight:800;font-style:normal;letter-spacing:-.01em;margin:6px 0 26px;max-width:560px;color:#ffd200;font-family:'Oxygen','Open Sans',Arial,sans-serif}
.dw-ctas{display:flex;gap:12px;flex-wrap:wrap}
.dw-cta-y{background:var(--yellow);color:#0c1e3e;font-weight:700;font-size:13px;letter-spacing:.05em;padding:12px 26px;border-radius:8px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:'Oxygen','Open Sans',Arial,sans-serif}
.dw-cta-y:hover{background:#f0c400}
.dw-cta-o{border:1px solid rgba(255,255,255,.55);color:#fff;font-weight:600;font-size:13px;letter-spacing:.05em;padding:11px 24px;border-radius:8px;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.dw-cta-o:hover{background:rgba(255,255,255,.1)}
.dw-hstats{display:flex;gap:30px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);flex-wrap:wrap}
.dw-hstats .n{font-size:24px;font-weight:800;font-family:'Oxygen','Open Sans',Arial,sans-serif}
.dw-hstats .n small{font-size:13px;font-weight:600;color:#9db6dd}
.dw-hstats .l{font-size:11px;color:#9db6dd;letter-spacing:.05em;text-transform:uppercase}
.dw-nextcard{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:22px;overflow:hidden}
.dw-nextcard::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--yellow),#ff9d00)}
.dw-nextcard .tag{font-size:10.5px;letter-spacing:.16em;color:var(--yellow);font-weight:700;margin-bottom:9px;font-family:'Oxygen','Open Sans',Arial,sans-serif}
.dw-nextcard .t{font-size:18px;font-weight:700;margin-bottom:4px;font-family:'Oxygen','Open Sans',Arial,sans-serif}
.dw-nextcard .meta{color:#c3d3ee;font-size:12.5px;margin-bottom:14px}
.dw-count{display:flex;gap:10px;margin-bottom:14px}
.dw-count .u{background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:8px 0;text-align:center;flex:1}
.dw-count .n{font-size:21px;font-weight:800;font-family:'Oxygen','Open Sans',Arial,sans-serif;color:var(--yellow);font-variant-numeric:tabular-nums}
.dw-count .l{font-size:9.5px;color:#9db6dd;letter-spacing:.1em;text-transform:uppercase}
.dw-nextcard .row{display:flex;justify-content:space-between;font-size:12.5px;color:#c3d3ee;padding:6px 0;border-top:1px dashed rgba(255,255,255,.15)}
.dw-nextcard .row b{color:#fff}
.dw-nextcard .dw-open{margin-top:14px;width:100%;justify-content:center}
@media(max-width:900px){.dw-hero .dwh{grid-template-columns:1fr;gap:24px}}
@media print{.dw-hero{display:none}}
mark{background:#fff3b0;color:#123a75;padding:0 2px;border-radius:3px}
.dw-hitobar{background:#55627a}
/* ===== celulares angostos (<=400px): una columna y nada apretado =====
   va al FINAL del CSS: tiene que ganarle a las reglas de .kpis/.dw-hero definidas arriba */
@media(max-width:400px){
  .dw-hero .dwh{padding:22px 12px 26px}
  .dw-hero .dw-h1{font-size:24px}
  .dw-msg-hero{font-size:20px}
  .dw-hstats{gap:14px}
  .dw-hstats .n{font-size:18px}
  .kpis,.kpis.k2{grid-template-columns:1fr}
  .kpi2{padding:12px 13px}
  .kpi2 .n{font-size:19px}
  .dw-nextcard{padding:16px}
  .grid{grid-template-columns:1fr}
  header a.hlink{max-width:50vw;font-size:11px;padding:6px 8px}
  .dw-actrow{flex-wrap:wrap}
}

/* Agregados para Ping */
:root {
  --color-marca: #e43dbe;
  --color-marca-dark: #b02b95;
  --color-ok: #22c55e;
  --color-warn: #f59e0b;
  --color-fail: #ef4444;
}

body[data-page] {
  background-color: #f8fafc;
  color: #0f172a;
}

.header-principal {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(90deg, #1e293b, var(--color-marca-dark));
  color: white;
  padding: 1rem;
}

nav.pildoras {
  display: flex;
  gap: 1rem;
}
nav.pildoras a {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.1);
  color: white;
  text-decoration: none;
}
nav.pildoras a:hover {
  background: rgba(255,255,255,0.2);
}

.host-card {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 1rem;
  margin-bottom: 1rem;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
th, td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}
th {
  background: #f1f5f9;
}

.gris { color: #94a3b8; }

svg#uptime .barra {
  fill: var(--color-ok);
}
svg#uptime .barra.gris {
  fill: #cbd5e1;
}

@media print {
  .header-principal, nav { display: none; }
}