/* ============================================================
   Olympia · Panel (dashboard) rediseño v5 — totalmente aislado
   Todas las reglas viven bajo .opanel y usan prefijo op- para no
   afectar a ninguna otra pantalla ni a estilos globales.
   ============================================================ */
.opanel{
  --op-panel:#0e1119; --op-panel2:#151a26; --op-panel3:#1b2130;
  --op-line:#222a3a; --op-line2:#2c3548;
  --op-txt:#eef2fa; --op-mut:#8b94aa; --op-mut2:#576074;
  --op-red:#e6213a; --op-red2:#ff5168; --op-red-soft:rgba(230,33,58,.13);
  --op-grn:#27c768; --op-amb:#f6a609; --op-blu:#3d8bff; --op-vio:#9b87fc;
  color:var(--op-txt);
}
.opanel *{box-sizing:border-box}

/* hero / cabecera */
.opanel .op-hero{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px}
.opanel .op-eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--op-red2);font-weight:700}
.opanel .op-hero h2{font-size:20px;font-weight:800;margin:3px 0 2px;letter-spacing:-.01em}
.opanel .op-hero p{font-size:12px;color:var(--op-mut);margin:0}
.opanel .op-hero-actions{margin-left:auto;display:flex;gap:8px;flex-shrink:0}

/* KPIs */
.opanel .op-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:14px}
.opanel .op-kpi{background:linear-gradient(180deg,var(--op-panel),#0c0f17);border:1px solid var(--op-line);border-radius:13px;padding:13px 14px}
.opanel .op-kpi.acc{border-color:rgba(230,33,58,.35);background:linear-gradient(180deg,rgba(230,33,58,.08),#0c0f17)}
.opanel .op-kpi .op-h{display:flex;align-items:center;gap:8px;color:var(--op-mut);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.opanel .op-kpi .op-ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:13px}
.opanel .op-kpi .op-v{font-size:25px;font-weight:800;margin-top:8px;letter-spacing:-.02em}
.opanel .op-kpi .op-s{font-size:10.5px;margin-top:2px;color:var(--op-mut2)}
.opanel .op-kpi .op-s.up{color:var(--op-grn)}
.op-ic.red{background:var(--op-red-soft);color:var(--op-red2)}
.op-ic.green{background:rgba(39,199,104,.16);color:var(--op-grn)}
.op-ic.blue{background:rgba(61,139,255,.16);color:var(--op-blu)}
.op-ic.amber{background:rgba(246,166,9,.16);color:var(--op-amb)}
.op-ic.purple{background:rgba(155,135,252,.16);color:var(--op-vio)}
.op-ic.cyan{background:rgba(39,211,238,.16);color:#5fdcef}

/* rejilla principal */
.opanel .op-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;align-items:start}
.opanel .op-card{background:linear-gradient(180deg,var(--op-panel),#0c0f17);border:1px solid var(--op-line);border-radius:13px;padding:14px 16px;min-width:0}
.opanel .op-card h3{font-size:13px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px}
.opanel .op-card .op-cs{color:var(--op-mut);font-size:10.5px;margin:2px 0 12px}
.opanel .op-card .op-more{margin-left:auto;font-size:10px;color:var(--op-mut);border:1px solid var(--op-line2);padding:4px 9px;border-radius:7px;font-weight:600;background:transparent;cursor:pointer}
.op-span8{grid-column:span 8}.op-span4{grid-column:span 4}.op-span5{grid-column:span 5}.op-span3{grid-column:span 3}.op-span12{grid-column:span 12}
@media(max-width:1100px){.opanel .op-kpis{grid-template-columns:repeat(3,1fr)}.op-span8,.op-span4,.op-span5,.op-span3{grid-column:span 12}}

/* gcal chip */
.opanel .op-gcal{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:10px;color:var(--op-mut)}
.opanel .op-gico{width:16px;height:16px;border-radius:4px;background:#fff;color:var(--op-red);display:grid;place-items:center;font-size:10px;font-weight:800}

/* agenda */
.opanel .op-agenda{display:flex;flex-direction:column;gap:6px}
.opanel .op-daysep{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--op-mut2);margin:9px 0 3px;display:flex;align-items:center;gap:9px}
.opanel .op-daysep b{color:var(--op-mut)}
.opanel .op-daysep::after{content:"";flex:1;height:1px;background:var(--op-line)}
.opanel .op-ev{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:10px;background:var(--op-panel2);border:1px solid var(--op-line);border-left:3px solid var(--op-red)}
.opanel .op-ev .op-tm{font-size:11.5px;font-weight:800;width:44px;text-align:center;line-height:1.15;flex-shrink:0}
.opanel .op-ev .op-tm small{display:block;font-size:8.5px;color:var(--op-mut2);font-weight:600}
.opanel .op-ev .op-et{font-size:12.5px;font-weight:600}
.opanel .op-ev .op-em{font-size:10px;color:var(--op-mut2);margin-top:1px}
.opanel .op-ev .op-eb{margin-left:auto;font-size:8.5px;font-weight:700;padding:3px 9px;border-radius:6px;white-space:nowrap;flex-shrink:0}
.opanel .op-afoot{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:11px;border-top:1px solid var(--op-line);font-size:10.5px;color:var(--op-mut2)}
.opanel .op-afoot b{color:var(--op-txt)}
.opanel .op-empty{text-align:center;padding:26px 10px;color:var(--op-mut2)}
.opanel .op-empty .op-ei{font-size:30px}
.opanel .op-empty .op-eh{font-size:13px;font-weight:600;color:var(--op-mut);margin-top:8px}
.opanel .op-empty .op-ed{font-size:11px;margin-top:4px}

/* donut */
.opanel .op-donutwrap{display:flex;gap:14px;align-items:center}
.opanel .op-legend{display:flex;flex-direction:column;gap:8px;flex:1}
.opanel .op-legend div{display:flex;align-items:center;gap:9px;font-size:11.5px}
.opanel .op-legend .op-sw{width:11px;height:11px;border-radius:3px}
.opanel .op-legend b{margin-left:auto}

/* feed actividad */
.opanel .op-feed .op-row{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--op-line)}
.opanel .op-feed .op-row:last-child{border:0}
.opanel .op-feed .op-rd{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;background:rgba(61,139,255,.16);color:#86b4ff;flex-shrink:0}
.opanel .op-feed .op-t{font-size:12px;font-weight:600}
.opanel .op-feed .op-d{font-size:10px;color:var(--op-mut2)}
.opanel .op-feed .op-ti{margin-left:auto;font-size:10px;color:var(--op-mut2);white-space:nowrap}

/* barras horizontales */
.opanel .op-hbars{display:flex;flex-direction:column;gap:11px;margin-top:2px}
.opanel .op-hb{display:flex;align-items:center;gap:10px;font-size:11.5px}
.opanel .op-hb .op-nm{width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opanel .op-hb b{margin-left:auto;color:var(--op-mut);min-width:38px;text-align:right}
.opanel .op-track{flex:1;height:8px;border-radius:6px;background:var(--op-panel3);overflow:hidden}
.opanel .op-track i{display:block;height:100%;border-radius:6px}
.opanel .op-venue{display:flex;flex-direction:column;gap:5px}
.opanel .op-venue .op-vn{display:flex;font-size:11.5px}.opanel .op-venue .op-vn b{margin-left:auto;color:var(--op-red2)}

/* alertas */
.opanel .op-alert{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;background:var(--op-panel2);border:1px solid var(--op-line);margin-bottom:7px;font-size:11.5px}
.opanel .op-alert:last-child{margin-bottom:0}
.opanel .op-alert .op-ab{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:13px;flex-shrink:0;background:rgba(246,166,9,.16);color:var(--op-amb)}
.opanel .op-alert .op-at{font-weight:600}
.opanel .op-alert .op-ad{font-size:9.5px;color:var(--op-mut2)}
.opanel .op-alert .op-as{margin-left:auto;font-size:8.5px;font-weight:700;padding:2px 8px;border-radius:6px;background:rgba(246,166,9,.16);color:#f7be4d;white-space:nowrap}

/* ===== v6: barra superior propia del Panel + ocultar cabecera vieja ===== */
/* La cabecera global del shell y la marca de agua SOLO se ocultan en el Panel */
body[data-view="dashboard"] .main > .top{display:none !important}
body[data-view="dashboard"] .watermark,
body[data-view="dashboard"] img.watermark{display:none !important}

.opanel{padding-bottom:40px}  /* fallback (pantallas estrechas, ver fit-to-viewport v7) */

/* barra superior: TODO en una sola fila (título · live · buscador · botones) como la referencia */
.opanel .op-top{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:nowrap}
.opanel .op-title{min-width:0;flex-shrink:1}
.opanel .op-title h2{font-size:18px;font-weight:800;margin:0;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opanel .op-title p{font-size:11.5px;color:var(--op-mut);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opanel .op-livepill{flex-shrink:0;font-size:10px;color:var(--op-grn);border:1px solid rgba(39,199,104,.3);border-radius:20px;padding:4px 10px;display:flex;align-items:center;gap:6px;font-weight:700;letter-spacing:.04em}
.opanel .op-livepill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--op-grn);box-shadow:0 0 6px var(--op-grn)}
.opanel .op-search{margin-left:auto;flex:0 1 340px;min-width:150px;background:var(--op-panel);border:1px solid var(--op-line);border-radius:10px;padding:10px 14px;color:var(--op-mut2);font-size:12.5px;cursor:pointer;font-family:inherit}
.opanel .op-top .btn{flex-shrink:0}
.opanel .op-btnpri{flex-shrink:0;border:1px solid var(--op-red);border-radius:10px;padding:9px 16px;font-size:12.5px;font-weight:700;background:linear-gradient(135deg,var(--op-red),#b3162a);color:#fff;cursor:pointer;box-shadow:0 6px 16px var(--op-red-soft);white-space:nowrap}

/* tarjeta de Estado (donut): centrar el contenido en la celda (sin medio negro) */
.opanel .op-statecard{display:flex;flex-direction:column}
.opanel .op-statecard .op-donutwrap{margin-top:auto;margin-bottom:auto}

.opanel .op-spark{display:flex;align-items:flex-end;gap:2px;height:20px;margin-top:9px}
.opanel .op-spark i{flex:1;background:linear-gradient(180deg,var(--op-red2),var(--op-red));border-radius:2px;opacity:.9;min-height:2px}

.opanel .op-pill{font-size:9px;font-weight:700;padding:2px 8px;border-radius:20px;margin-left:auto;letter-spacing:.03em}
.opanel .op-pill.ai{background:linear-gradient(135deg,rgba(155,135,252,.22),rgba(61,139,255,.18));color:#bcacff;border:1px solid rgba(155,135,252,.3)}

/* ============================================================
   v7: FIT-TO-VIEWPORT — el Panel NUNCA scrollea (pantallas ≥1101px)
   El alto se reparte entre cabecera (fija), KPIs (fija) y la rejilla.
   Las tarjetas con listas largas (agenda, actividad) scrollean DENTRO,
   nunca la página. Por debajo de 1101px se conserva el scroll normal.
   ============================================================ */
@media (min-width:1101px){
  /* .main tiene padding:20px (40px vertical); la cabecera .top está oculta en el Panel */
  body[data-view="dashboard"] .opanel{
    height:calc(100dvh - 40px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding-bottom:0;
  }
  .opanel .op-top{flex-shrink:0;margin-bottom:12px}
  .opanel .op-kpis{flex-shrink:0;margin-bottom:12px}

  /* la rejilla ocupa el alto restante y reparte sus 3 filas */
  .opanel .op-grid{
    flex:1;
    min-height:0;
    align-items:stretch;
    grid-template-rows:1.7fr 1.25fr 1.15fr;
  }

  /* cada tarjeta llena su celda y recorta lo que sobre (cabecera fija + cuerpo) */
  .opanel .op-grid > .op-card{
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  /* la cabecera de cada tarjeta no se encoge */
  .opanel .op-grid > .op-card > h3,
  .opanel .op-grid > .op-card > .op-cs{flex-shrink:0}

  /* zonas de contenido que pueden scrollear dentro de su tarjeta */
  .opanel .op-feed,
  .opanel .op-hbars,
  .opanel .op-venue,
  .opanel .op-alerts{
    flex:1;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
  }

  /* agenda: la lista scrollea y el pie ("X eventos hoy…") queda anclado abajo */
  .opanel #opAgendaBody{flex:1;min-height:0;display:flex;flex-direction:column}
  .opanel #opAgendaBody .op-agenda{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
  .opanel #opAgendaBody .op-afoot{flex-shrink:0;margin-top:0}

  /* scrollbar discreta dentro de las tarjetas */
  .opanel .op-agenda::-webkit-scrollbar,
  .opanel .op-feed::-webkit-scrollbar,
  .opanel .op-hbars::-webkit-scrollbar,
  .opanel .op-venue::-webkit-scrollbar{width:6px}
  .opanel .op-agenda::-webkit-scrollbar-thumb,
  .opanel .op-feed::-webkit-scrollbar-thumb,
  .opanel .op-hbars::-webkit-scrollbar-thumb,
  .opanel .op-venue::-webkit-scrollbar-thumb{background:var(--op-line2);border-radius:6px}
}