/* Edorteam DLP */
/* Fichas de la marca para el Resumen (el diseño está en _css/theme2026/discoveryOverview.css) */
#OverviewPanel {
    --brand: #0070F5;
    --brand-rgb: 0 112 245;
    /* Color de los datos (gráficas, cobertura, barras, estados informativos) */
    --data: #0070F5;
    --data-rgb: 0 112 245;
    /* Gráficas del Resumen: principal, claro y oscuro */
    --ov-1: #0070F5;
    --ov-2: #7FB2FA;
    --ov-3: #1E3A5F;
}

/* =====================================================================================================
   Resumen de la empresa ("De un vistazo", console/dashboard/default.aspx) — Edorteam
   Se pinta dentro de la consola, en #OverviewPanel (antes en un iframe): todas las reglas van bajo #OverviewPanel para
   no tocar la consola, lo que antes era body es el propio panel y #form1 es .OVPage. Los anchos responden al ancho del
   panel (@container overview, en .OVFrame) y no al de la ventana, igual que cuando el iframe era la ventana.
   Rediseño 2026: mismo lenguaje que la consola. Cabecera con el mes; indicadores del parque (servidores, sobremesa,
   portátiles, almacenamiento y licencias) en una fila de tarjetas; sistemas operativos y antivirus; avisos; y las
   secciones de análisis de datos y de accesos como tarjetas con tablas de barras finas.
   El HTML lo genera el servidor (Pages/OverviewPage.vb): aquí sólo se cambia el aspecto. Tema común a todas las marcas:
   los colores salen de --brand (foco) y --data / --data-rgb (cifras, barras e iconos), definidos en
   _personalizaciones/<marca>/_css/discoveryOverview.css.
   ===================================================================================================== */
#OverviewPanel {
    --ov-ink: #0E1A33;
    --ov-text: #3A475E;
    --ov-muted: #69768C;
    --ov-line: #E8EDF4;
    --ov-soft: #F7F9FC;
    --ov-blue: var(--data);
}

#OverviewPanel * {
    box-sizing: border-box;
}

#OverviewPanel {
    margin: 0;
    padding: 6px 24px 40px 8px;
    font-family: proxima-nova, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--ov-text);
    background: transparent;
    -webkit-font-smoothing: antialiased;
}

/* Contenedor de las consultas de ancho. No es el propio panel: un contenedor fija las ventanas de detalle (.OVModal,
   position: fixed) a él en lugar de a la ventana, y las ventanas se añaden al panel, fuera de .OVFrame */
#OverviewPanel .OVFrame {
    container: overview / inline-size;
}

#OverviewPanel .OVPage {
    max-width: 1180px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

#OverviewPanel p, #OverviewPanel h1, #OverviewPanel h2, #OverviewPanel h3, #OverviewPanel h4 {
    margin: 0;
}

/* Estilos genéricos de la consola que alcanzaban al Resumen al dejar el iframe (_css/material.css "button",
   _css/app/UIelements.css "select", _css/app/dlpReports.css ".ETSMenuDetailItem h2"): vuelven a los del navegador,
   como en el iframe. Las reglas del Resumen sobre estos elementos son más específicas y siguen mandando */
#OverviewPanel button {
    padding: revert;
    border: revert;
    background-color: revert;
    color: revert;
    font-size: revert;
    cursor: revert;
}

#OverviewPanel select,
#OverviewPanel input {
    width: revert;
    margin: revert;
    padding: revert;
    border: revert;
    border-radius: revert;
    font-size: revert;
}

#OverviewPanel h2 {
    padding: 0;
}

#OverviewPanel .clear {
    clear: both;
}

#OverviewPanel a {
    color: var(--ov-blue);
    font-weight: 600;
    text-decoration: none;
}

#OverviewPanel a:hover {
    text-decoration: underline;
}

/* ---------- Cabecera: título y mes ---------- */
#OverviewPanel #CompanySumaryTitle {
    float: left;
    margin: 6px 0 20px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ov-ink);
}

#OverviewPanel #CBMonth {
    float: right;
    height: 38px;
    margin: 2px 0 0;
    padding: 0 34px 0 12px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ov-ink);
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369768C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
    border: 1px solid #D9E1EC;
    border-radius: 8px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

#OverviewPanel #CBMonth:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---------- Cuenta demo ---------- */
#OverviewPanel #demoInfoDiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
    padding: 14px 18px;
    background: color-mix(in srgb, var(--data) 8%, #fff);
    border: 0;
    border-radius: 12px;
}

#OverviewPanel #demoInfoDiv > .clear {
    display: none;
}

#OverviewPanel #demoInfoDivLeft h3 {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ov-ink);
}

#OverviewPanel #demoInfoDivLeft p {
    font-size: 13px;
    color: var(--ov-text);
}

#OverviewPanel #demoInfoDivRight {
    display: flex;
    align-items: baseline;
    gap: 6px;
    float: none;
}

#OverviewPanel #demoInfoDivRight .number {
    font-size: 26px;
    font-weight: 750;
    line-height: 1;
    color: var(--ov-blue);
}

#OverviewPanel #demoInfoDivRightTxt {
    display: flex;
    gap: 4px;
}

#OverviewPanel #demoInfoDivRightTxt .columnTitle2 {
    text-transform: lowercase;
}

#OverviewPanel #demoInfoDivRightTxt p {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    color: var(--ov-text);
}

#OverviewPanel #demoInfoDivRight > .clear {
    display: none;
}

/* ---------- Indicadores del parque ---------- */
#OverviewPanel #companySummary {
    clear: both;
}

#OverviewPanel #companySummary .nopadding {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
}

#OverviewPanel #companySummary .nopadding > .clear {
    display: none;
}

#OverviewPanel .companySummaryLeftRow1Column.infoRectangleSmall {
    position: relative;
    display: block;
    float: none;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 16px;
    background: #ffffff;
    border: 1px solid var(--ov-line);
    border-radius: 12px;
}

#OverviewPanel .companySummaryLeftRow1Column.infoRectangleSmall > .clear {
    display: none;
}

/* Icono de cada indicador */
#OverviewPanel .companySummaryLeftRow1Column.infoRectangleSmall::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 0 12px;
    background: var(--ov-tile, color-mix(in srgb, var(--data) 8%, #fff)) var(--ov-icon) no-repeat center / 16px;
    border-radius: 8px;
}

/* Rótulo en una línea ("Equipos de sobremesa", "Licencias usadas"...) */
#OverviewPanel .columnTitle1,
#OverviewPanel .columnTitle2 {
    display: inline;
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ov-muted);
}

#OverviewPanel .columnTitle1:not(:empty)::after {
    content: " ";
}

#OverviewPanel .companySummaryLeftRow1Column .number {
    display: block;
    float: none;
    margin: 6px 0 0;
    font-size: 26px;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.4px;
    color: var(--ov-ink);
}

#OverviewPanel #companySummaryLeftRow1Column1 {
    --ov-tile: #EEF1F6;
    --ov-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A475E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='18' height='7' rx='1.5'/%3E%3Cpath d='M7 6.5h.01M7 17.5h.01'/%3E%3C/svg%3E");
}

#OverviewPanel #companySummaryLeftRow1Column2 {
    --ov-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230070F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
}

#OverviewPanel #companySummaryLeftRow1Column3 {
    --ov-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230070F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 19h20'/%3E%3C/svg%3E");
}

#OverviewPanel #companySummaryLeftRow2Column1 {
    --ov-tile: #EFE8FC;
    --ov-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C4DDB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.5 4.5 0 0 1-.5-9 6 6 0 0 1 11.6 1.5A3.75 3.75 0 0 1 17.5 18Z'/%3E%3C/svg%3E");
}

#OverviewPanel #companySummaryLeftRow2Column2,
#OverviewPanel #companySummaryLeftRow2Column3 {
    --ov-tile: #E3F6EE;
    --ov-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231BAF7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.5 3.4 8.3 8 9 4.6-.7 8-4.5 8-9V6Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* ---------- Sistemas operativos y antivirus ---------- */
#OverviewPanel #companyTechnicalSpecifications {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 0;
}

#OverviewPanel #companyTechnicalSpecifications > .clear {
    display: none;
}

#OverviewPanel .infoRectangle.infoRectangleSO,
#OverviewPanel .infoRectangle.infoRectangleAV {
    float: none;
    width: auto;
    margin: 0;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid var(--ov-line);
    border-radius: 12px;
}

#OverviewPanel .infoRectangleSO h3,
#OverviewPanel .infoRectangleAV h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ov-ink);
}

#OverviewPanel .infoRectangleSO h3::before,
#OverviewPanel .infoRectangleAV h3::before {
    content: "";
    width: 28px;
    height: 28px;
    background: color-mix(in srgb, var(--data) 8%, #fff) var(--ov-icon) no-repeat center / 15px;
    border-radius: 8px;
}

#OverviewPanel .infoRectangleSO h3::before {
    --ov-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230070F5'%3E%3Cpath d='M3 5.5 10 4.5v7H3ZM11 4.4 21 3v8.5H11ZM3 12.5h7v7l-7-1ZM11 12.5h10V21l-10-1.4Z'/%3E%3C/svg%3E");
}

#OverviewPanel .infoRectangleAV h3::before {
    background-color: #E3F6EE;
    --ov-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231BAF7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.5 3.4 8.3 8 9 4.6-.7 8-4.5 8-9V6Z'/%3E%3C/svg%3E");
}

/* Cada sistema / antivirus en su fila (vienen separados por <br/>) */
#OverviewPanel #operationsystem br,
#OverviewPanel #antivirus br {
    display: none;
}

#OverviewPanel #operationsystem span,
#OverviewPanel #antivirus span {
    display: block;
    padding: 8px 0;
    font-size: 13.5px;
    color: var(--ov-text);
    border-top: 1px solid #EEF1F6;
}

#OverviewPanel #operationsystem span:first-child,
#OverviewPanel #antivirus span:first-child {
    border-top: 0;
}

/* ---------- Avisos ---------- */
#OverviewPanel .infoRectangle.infoRectangleWarning {
    margin: 12px 0 0;
    padding: 14px 18px;
    background: #FEF4E2;
    border: 0;
    border-radius: 12px;
}

#OverviewPanel .infoRectangleWarning h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #8A5B00;
}

#OverviewPanel .infoRectangleWarning h4::before {
    content: "";
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C27A00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.4 17.6A2 2 0 0 0 4.1 20.6h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17v.1'/%3E%3C/svg%3E") no-repeat center / contain;
}

#OverviewPanel .warning {
    padding: 0;
    font-size: 13.5px;
    color: var(--ov-text);
    background: none;
}

#OverviewPanel .warning ul {
    margin: 0;
    padding: 0 0 0 24px;
}

#OverviewPanel .warning li {
    margin: 2px 0;
}

#OverviewPanel .warning strong {
    font-weight: 600;
    color: var(--ov-ink);
}

/* ---------- Secciones ---------- */
#OverviewPanel #companyDataAnalysisSection > h2,
#OverviewPanel #companyAccessesSection > h2 {
    margin: 32px 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ov-ink);
}

/* Notas informativas */
#OverviewPanel .infoRectangle.infoRectangleInfo {
    display: flex;
    gap: 10px;
    margin: 0 0 12px;
    padding: 12px 16px;
    background: var(--ov-soft);
    border: 0;
    border-radius: 10px;
}

#OverviewPanel .infoRectangleInfo::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369768C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.8v.1'/%3E%3C/svg%3E") no-repeat center / contain;
}

#OverviewPanel .info {
    padding: 0;
    background: none;
}

#OverviewPanel .info p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ov-muted);
}

/* Rejilla de tarjetas */
#OverviewPanel #companyDataAnalysis,
#OverviewPanel #companyAccessesSection {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#OverviewPanel #companyDataAnalysis > .clear,
#OverviewPanel #companyAccessesSection .clear {
    display: none;
}

#OverviewPanel #companyAccessesSection > h2,
#OverviewPanel #companyDataAnalysis > .infoRectangleInfo,
#OverviewPanel #companyDataAnalysisShared,
#OverviewPanel #companyAccessesFiles {
    grid-column: 1 / -1;
}

#OverviewPanel #companyDataAnalysis > .infoRectangleInfo {
    margin: 4px 0 0;
}

#OverviewPanel #companyDataAnalysisSection > .infoRectangleInfo {
    margin-bottom: 12px;
}

/* Tarjeta de cada tabla */
#OverviewPanel #companyDataAnalysisFiles,
#OverviewPanel #companyDataAnalysisClipboard,
#OverviewPanel #companyDataAnalysisShared,
#OverviewPanel #companyAccessesInternet,
#OverviewPanel #companyAccessesApps,
#OverviewPanel #companyAccessesFiles {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 18px 20px 12px;
    background: #ffffff;
    border: 1px solid var(--ov-line);
    border-radius: 12px;
}

#OverviewPanel h4.infoRectangle.infoRectangleTitle {
    width: auto !important;
    margin: 0 0 10px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ov-ink);
    background: none;
    border: 0;
    border-radius: 0;
}

#OverviewPanel .companyDataAnalysisTable,
#OverviewPanel .companyDataAnalysisSimpleTable,
#OverviewPanel #companyDataAnalysisFilesTableDiv,
#OverviewPanel #companyDataAnalysisClipboardTableDiv {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
}

/* Tablas de barras: nombre | valor | barra */
#OverviewPanel .tableHeader,
#OverviewPanel .tableRow {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) 96px minmax(60px, 1fr);
    align-items: center;
    gap: 12px;
}

#OverviewPanel .tableHeader {
    padding: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ov-muted);
    background: none;
    border-bottom: 1px solid #EEF1F6;
}

#OverviewPanel .tableHeader > .clear,
#OverviewPanel .tableRow > .clear {
    display: none;
}

#OverviewPanel .tableContent.infoRectangle.infoRectangleAfterTitle {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

#OverviewPanel .tableRow {
    padding: 9px 0;
    font-size: 13.5px;
    border-bottom: 1px solid #F1F4F8;
}

#OverviewPanel .tableRow:last-child {
    border-bottom: 0;
}

#OverviewPanel .tableRow:hover {
    background: none;
}

#OverviewPanel .barTitle,
#OverviewPanel .barTitle2,
#OverviewPanel .barTitle3 {
    float: none;
    width: auto;
    min-width: 0;
    overflow: hidden;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ov-ink);
}

#OverviewPanel .tableHeader .barTitle,
#OverviewPanel .tableHeader .barTitle2,
#OverviewPanel .tableHeader .barTitle3 {
    font-weight: 600;
    color: var(--ov-muted);
}

#OverviewPanel .barInstances,
#OverviewPanel .barInstances2,
#OverviewPanel .barInstances3 {
    float: none;
    width: auto;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--ov-text);
}

#OverviewPanel .tableHeader .barInstances,
#OverviewPanel .tableHeader .barInstances2,
#OverviewPanel .tableHeader .barInstances3 {
    color: var(--ov-muted);
}

/* Barra fina con extremo redondeado */
#OverviewPanel .barBar,
#OverviewPanel .barBar3 {
    float: none;
    width: auto;
    height: 6px;
    margin: 0;
    overflow: hidden;
    background: #EEF1F6;
    border-radius: 3px;
}

#OverviewPanel .barbarInner,
#OverviewPanel .barbarInner2 {
    height: 100%;
    background: var(--ov-blue);
    border-radius: 3px;
}

/* Rutas compartidas: sólo ruta e instancias */
#OverviewPanel #companyDataAnalysisShared .tableHeader,
#OverviewPanel #companyDataAnalysisShared .tableRow {
    grid-template-columns: minmax(0, 1fr) 120px;
}

/* ---------- Pantallas más estrechas ---------- */
/* Seis indicadores en una fila o en dos de tres (nunca uno suelto) */
@container overview (max-width: 948px) {
    #OverviewPanel #companySummary .nopadding {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container overview (max-width: 728px) {
    #OverviewPanel #companyTechnicalSpecifications,
    #OverviewPanel #companyDataAnalysis,
    #OverviewPanel #companyAccessesSection {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================================================
   Versión 3 (petición del usuario: "se ve muy pobre", iconos SVG profesionales)
   Iconos de trazo (Lucide) sin cuadraditos de color; cifras del parque en una sola tarjeta con separadores;
   listas de sistemas y antivirus como filas con recuento y barra; aviso de equipos sin actualizar como fichas;
   tablas con icono, cifras con separador de miles y rutas compartidas plegables. Las mejoras que cambian el HTML
   las hace dashboardBrain.js sólo si este CSS declara --overview-v3 (ECIJA no cambia).
   ===================================================================================================== */
#OverviewPanel {
    --overview-v3: 1;
    /* Nombre del apartado (antes "De un vistazo") */
    --overview-label: "Resumen";
}

#OverviewPanel #CompanySumaryTitle {
    margin-bottom: 22px;
}

#OverviewPanel #CompanySumaryTitle::after {
    content: "Estado del parque de equipos, su seguridad y el uso de datos de la empresa.";
    display: block;
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ov-muted);
}

/* ---- Cifras del parque: una tarjeta con 6 celdas ---- */
#OverviewPanel #companySummary .nopadding {
    gap: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--ov-line);
    border-radius: 14px;
}

#OverviewPanel .companySummaryLeftRow1Column.infoRectangleSmall {
    padding: 18px 20px 20px;
    background: none;
    border: 0;
    border-left: 1px solid #EEF1F6;
    border-radius: 0;
}

#OverviewPanel .companySummaryLeftRow1Column.infoRectangleSmall:first-child {
    border-left: 0;
}

#OverviewPanel .companySummaryLeftRow1Column.infoRectangleSmall::before {
    width: 22px;
    height: 22px;
    margin: 0 0 14px;
    background: #5D6B82;
    border-radius: 0;
    -webkit-mask: var(--ov-icon3) no-repeat center / contain;
    mask: var(--ov-icon3) no-repeat center / contain;
}

#OverviewPanel .companySummaryLeftRow1Column .number {
    margin-top: 4px;
    font-size: 28px;
}

#OverviewPanel #companySummaryLeftRow1Column1 { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2'/%3E%3Cpath d='M6 6h.01M6 18h.01'/%3E%3C/svg%3E"); }
#OverviewPanel #companySummaryLeftRow1Column2 { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
#OverviewPanel #companySummaryLeftRow1Column3 { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16'/%3E%3C/svg%3E"); }
#OverviewPanel #companySummaryLeftRow2Column1 { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E"); }
#OverviewPanel #companySummaryLeftRow2Column2 { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4Z'/%3E%3Ccircle cx='16.5' cy='7.5' r='.5'/%3E%3C/svg%3E"); }
#OverviewPanel #companySummaryLeftRow2Column3 { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E"); }

/* Uso de licencias (lo añade el JS si hay límite) */
#OverviewPanel .OVMeter {
    display: block;
    height: 5px;
    margin-top: 10px;
    overflow: hidden;
    background: #EEF1F6;
    border-radius: 3px;
}

#OverviewPanel .OVMeter i {
    display: block;
    height: 100%;
    background: var(--ov-blue);
    border-radius: 3px;
}

#OverviewPanel .OVMeter.isHigh i {
    background: #E8590C;
}

#OverviewPanel .OVMeterText {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--ov-muted);
}

/* ---- Cabeceras de tarjeta con icono de trazo ---- */
#OverviewPanel .infoRectangleSO h3::before,
#OverviewPanel .infoRectangleAV h3::before,
#OverviewPanel h4.infoRectangle.infoRectangleTitle::before {
    content: "";
    flex: none;
    width: 19px;
    height: 19px;
    background: #5D6B82;
    border-radius: 0;
    -webkit-mask: var(--ov-icon3) no-repeat center / contain;
    mask: var(--ov-icon3) no-repeat center / contain;
}

#OverviewPanel .infoRectangleSO h3::before { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M10 4v4M2 8h20M6 4v4'/%3E%3C/svg%3E"); }
#OverviewPanel .infoRectangleAV h3::before { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); background-color: #5D6B82; }

#OverviewPanel .infoRectangleSO h3,
#OverviewPanel .infoRectangleAV h3 {
    margin-bottom: 12px;
}

#OverviewPanel .OVTotal {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ov-muted);
}

#OverviewPanel h4.infoRectangle.infoRectangleTitle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

#OverviewPanel #companyDataAnalysisFiles h4 { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Ccircle cx='11.5' cy='14.5' r='2.5'/%3E%3Cpath d='m13.3 16.3 1.7 1.7'/%3E%3C/svg%3E"); }
#OverviewPanel #companyDataAnalysisClipboard h4 { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4M12 16h4M8 11h.01M8 16h.01'/%3E%3C/svg%3E"); }
#OverviewPanel #companyDataAnalysisShared h4 { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='16' width='6' height='6' rx='1'/%3E%3Crect x='2' y='16' width='6' height='6' rx='1'/%3E%3Crect x='9' y='2' width='6' height='6' rx='1'/%3E%3Cpath d='M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3M12 12V8'/%3E%3C/svg%3E"); }
#OverviewPanel #companyAccessesInternet h4 { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20'/%3E%3C/svg%3E"); }
#OverviewPanel #companyAccessesApps h4 { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M10 4v4M2 8h20M6 4v4'/%3E%3C/svg%3E"); }
#OverviewPanel #companyAccessesFiles h4 { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4M10 9H8M16 13H8M16 17H8'/%3E%3C/svg%3E"); }

/* ---- Sistemas operativos y antivirus como filas (las monta el JS) ---- */
#OverviewPanel #operationsystem .OVRow span,
#OverviewPanel #antivirus .OVRow span {
    padding: 0;
    border: 0;
}

#OverviewPanel #operationsystem .OVRow .OVName,
#OverviewPanel #antivirus .OVRow .OVName {
    color: var(--ov-ink);
}

#OverviewPanel #operationsystem .OVRow.isDanger .OVName,
#OverviewPanel #antivirus .OVRow.isDanger .OVName,
#OverviewPanel #antivirus .OVRow.isDanger .OVCount {
    color: #BE123C;
}

#OverviewPanel #operationsystem .OVRow.isMuted .OVName,
#OverviewPanel #antivirus .OVRow.isMuted .OVName,
#OverviewPanel #antivirus .OVRow.isMuted .OVCount {
    color: var(--ov-muted);
}

#OverviewPanel .OVList {
    display: block;
}

#OverviewPanel .OVRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px 90px;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid #F1F4F8;
}

#OverviewPanel .OVRow:first-child {
    border-top: 0;
}

#OverviewPanel .OVName {
    min-width: 0;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ov-ink);
}

#OverviewPanel .OVCount {
    font-size: 13.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--ov-ink);
}

#OverviewPanel .OVBar {
    display: block;
    height: 6px;
    overflow: hidden;
    background: #EEF1F6;
    border-radius: 3px;
}

#OverviewPanel .OVBar i {
    display: block;
    height: 100%;
    background: var(--ov-blue);
    border-radius: 3px;
}

#OverviewPanel .OVRow.isDanger .OVName,
#OverviewPanel .OVRow.isDanger .OVCount {
    color: #BE123C;
}

#OverviewPanel .OVRow.isDanger .OVBar i {
    background: #D92D4B;
}

#OverviewPanel .OVRow.isMuted .OVName,
#OverviewPanel .OVRow.isMuted .OVCount {
    color: var(--ov-muted);
}

#OverviewPanel .OVRow.isMuted .OVBar i {
    background: #A3AEC0;
}

/* ---- Equipos con Windows no actualizado: tarjeta blanca con fichas ---- */
#OverviewPanel .infoRectangle.infoRectangleWarning {
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid var(--ov-line);
    border-radius: 12px;
}

#OverviewPanel .infoRectangleWarning h4 {
    margin-bottom: 12px;
    color: var(--ov-ink);
}

#OverviewPanel .infoRectangleWarning h4::before {
    width: 19px;
    height: 19px;
    background: #D97706;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") no-repeat center / contain;
}

#OverviewPanel .OVPill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: #92400E;
    background: #FEF3C7;
    border-radius: 999px;
}

#OverviewPanel .warning ul.OVChips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#OverviewPanel .OVChip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 10px 12px;
    background: #FAFBFD;
    border: 1px solid #EEF1F6;
    border-radius: 9px;
}

#OverviewPanel .OVChip strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ov-ink);
}

#OverviewPanel .OVChip span {
    font-size: 12px;
    line-height: 1.4;
    color: var(--ov-muted);
}

#OverviewPanel .OVEmpty {
    padding: 14px 0 6px;
    font-size: 13px;
    color: var(--ov-muted);
}

/* ---- Tablas ---- */
#OverviewPanel .OVFile {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#OverviewPanel .OVFile b {
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ov-ink);
}

#OverviewPanel .OVFile small {
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ov-muted);
}

#OverviewPanel #companyDataAnalysisShared .barTitle2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

#OverviewPanel #companyDataAnalysisShared .tableRow .barTitle2::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: #8E9AAD;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

#OverviewPanel .tableRow.OVHidden {
    display: none;
}

#OverviewPanel .OVMore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 4px;
    padding: 6px 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ov-blue);
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

#OverviewPanel .OVMore::after {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .15s ease;
}

#OverviewPanel .OVMore.isOpen::after {
    transform: rotate(180deg);
}

#OverviewPanel .OVMore:hover {
    background: color-mix(in srgb, var(--data) 6%, #fff);
}

#OverviewPanel .OVMore:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

@container overview (max-width: 948px) {
    #OverviewPanel .companySummaryLeftRow1Column.infoRectangleSmall:nth-child(4) {
        border-left: 0;
    }

    #OverviewPanel .companySummaryLeftRow1Column.infoRectangleSmall:nth-child(n+4) {
        border-top: 1px solid #EEF1F6;
    }
}

@media (prefers-reduced-motion: reduce) {
    #OverviewPanel .OVMore::after {
        transition: none;
    }
}

/* ---- Algo más de color (moderado): iconos en azul de marca ---- */
#OverviewPanel .companySummaryLeftRow1Column.infoRectangleSmall::before,
#OverviewPanel .infoRectangleSO h3::before,
#OverviewPanel .infoRectangleAV h3::before,
#OverviewPanel h4.infoRectangle.infoRectangleTitle::before {
    background: var(--ov-blue) !important;
}

/* ---- Gráficas de anillo: parque, antivirus y actualizaciones (las monta el JS) ---- */
#OverviewPanel .OVCharts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 0;
}

#OverviewPanel .OVChartCard {
    min-width: 0;
    padding: 18px 20px 20px;
    background: #ffffff;
    border: 1px solid var(--ov-line);
    border-radius: 12px;
}

#OverviewPanel .OVChartCard h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ov-ink);
}

#OverviewPanel .OVChartCard h3::before {
    content: "";
    flex: none;
    width: 19px;
    height: 19px;
    background: var(--ov-blue);
    -webkit-mask: var(--ov-icon3) no-repeat center / contain;
    mask: var(--ov-icon3) no-repeat center / contain;
}

#OverviewPanel .OVChartCard.isFleet { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12c.55 0 1-.45.95-1A10 10 0 0 0 13 2.05c-.55-.05-1 .4-1 .95v8a1 1 0 0 0 1 1Z'/%3E%3Cpath d='M21.21 15.89A10 10 0 1 1 8 2.83'/%3E%3C/svg%3E"); }
#OverviewPanel .OVChartCard.isAv { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
#OverviewPanel .OVChartCard.isUpdates { --ov-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16'/%3E%3Cpath d='M16 16h5v5'/%3E%3C/svg%3E"); }

#OverviewPanel .OVChartBody {
    display: flex;
    align-items: center;
    gap: 20px;
}

#OverviewPanel .OVDonut {
    position: relative;
    flex: none;
    width: 124px;
    height: 124px;
}

#OverviewPanel .OVDonut svg {
    display: block;
    width: 100%;
    height: 100%;
}

#OverviewPanel .OVDonut circle {
    transition: opacity .15s ease;
}

/* Sin atenuar los segmentos al pasar el ratón: con el ratón en el hueco central (o al cerrar el detalle) se
   quedaba todo el anillo gris */

#OverviewPanel .OVDonutCenter {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#OverviewPanel .OVDonutCenter strong {
    font-size: 22px;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.3px;
    color: var(--ov-ink);
}

#OverviewPanel .OVDonutCenter span {
    font-size: 11.5px;
    color: var(--ov-muted);
}

#OverviewPanel .OVLegend {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

#OverviewPanel .OVLegend li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto 38px;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    border-top: 1px solid #F1F4F8;
}

#OverviewPanel .OVLegend li:first-child {
    border-top: 0;
}

#OverviewPanel .OVLegend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

#OverviewPanel .OVLegend span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ov-text);
}

#OverviewPanel .OVLegend b {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ov-ink);
}

#OverviewPanel .OVLegend small {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--ov-muted);
}

@container overview (max-width: 1068px) {
    #OverviewPanel .OVChartBody {
        flex-direction: column;
        align-items: stretch;
    }

    #OverviewPanel .OVDonut {
        align-self: center;
    }
}

@container overview (max-width: 728px) {
    #OverviewPanel .OVCharts {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    #OverviewPanel .OVDonut circle {
        transition: none;
    }
}


/* ---- Gráficas y barras sólo con azules, grises y azul marino (sin verde, rojo ni ámbar) ---- */
#OverviewPanel .OVRow.isDanger .OVBar i {
    background: var(--ov-3, #1E3A5F);
}

#OverviewPanel #operationsystem .OVRow.isDanger .OVName,
#OverviewPanel #antivirus .OVRow.isDanger .OVName,
#OverviewPanel #antivirus .OVRow.isDanger .OVCount {
    font-weight: 700;
    color: var(--ov-ink);
}

/* ---- Gráficas que se abren: tarjeta pulsable y ventana de detalle con los equipos ---- */
#OverviewPanel .OVChartCard {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#OverviewPanel .OVChartCard:hover {
    border-color: color-mix(in srgb, var(--data) 39%, #fff);
    box-shadow: 0 6px 20px rgba(14, 26, 51, .06);
}

#OverviewPanel .OVChartCard:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

#OverviewPanel .OVOpen {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ov-blue);
    opacity: 0;
    transition: opacity .15s ease;
}

#OverviewPanel .OVOpen::after {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}

#OverviewPanel .OVChartCard:hover .OVOpen,
#OverviewPanel .OVChartCard:focus-visible .OVOpen {
    opacity: 1;
}

#OverviewPanel .OVLegend li {
    border-radius: 6px;
}

#OverviewPanel .OVChartCard .OVLegend li:hover span,
#OverviewPanel .OVChartCard .OVLegend li:hover b {
    color: var(--ov-blue);
}

#OverviewPanel .OVModal {
    position: fixed;
    inset: 0;
    /* Por encima de la cabecera y los menús de la consola (antes sólo tapaba el iframe) */
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Velo blanco muy suave (antes gris oscuro): la ventana se distingue por su sombra y borde */
    background: rgba(255, 255, 255, .55);
}

#OverviewPanel .OVModalBox {
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: min(680px, calc(100vh - 48px));
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #E3E9F1;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(14, 26, 51, .16), 0 2px 8px rgba(14, 26, 51, .06);
}

#OverviewPanel .OVModalBox header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 22px 14px 26px;
}

#OverviewPanel .OVModalBox h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ov-ink);
}

#OverviewPanel .OVModalBox header p {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ov-muted);
}

#OverviewPanel .OVModalClose {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--ov-muted);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

#OverviewPanel .OVModalClose::before {
    content: "";
    position: absolute;
    inset: 8px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") no-repeat center / contain;
}

#OverviewPanel .OVModalClose:hover {
    color: var(--ov-ink);
    background: #F1F4F9;
}

#OverviewPanel .OVTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 26px 12px;
}

#OverviewPanel .OVTab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    max-width: 100%;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ov-text);
    background: #ffffff;
    border: 1px solid #E3E9F1;
    border-radius: 999px;
    cursor: pointer;
}

#OverviewPanel .OVTab i {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 3px;
}

#OverviewPanel .OVTab span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#OverviewPanel .OVTab b {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ov-muted);
}

#OverviewPanel .OVTab:hover {
    border-color: #C9D3E0;
}

#OverviewPanel .OVTab.isActive {
    color: var(--ov-blue);
    background: color-mix(in srgb, var(--data) 6%, #fff);
    border-color: color-mix(in srgb, var(--data) 39%, #fff);
}

#OverviewPanel .OVTab.isActive b {
    color: var(--ov-blue);
}

#OverviewPanel .OVSearch {
    padding: 0 26px 10px;
}

#OverviewPanel .OVSearch input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 34px;
    font: inherit;
    font-size: 13.5px;
    color: var(--ov-ink);
    background: #F8FAFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E9AAD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center / 15px;
    border: 1px solid #D9E1EC;
    border-radius: 8px;
    -webkit-appearance: none;
    appearance: none;
}

#OverviewPanel .OVSearch input:focus {
    outline: none;
    background-color: #ffffff;
    border-color: var(--ov-blue);
    box-shadow: 0 0 0 3px rgb(var(--data-rgb) / .12);
}

#OverviewPanel .OVPcList {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 4px 18px 18px;
    overflow-y: auto;
    list-style: none;
    border-top: 1px solid #EEF1F6;
}

#OverviewPanel .OVPcList li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 8px;
    border-bottom: 1px solid #F1F4F8;
}

#OverviewPanel .OVPcList li:last-child {
    border-bottom: 0;
}

#OverviewPanel .OVPcList strong {
    flex: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ov-ink);
}

#OverviewPanel .OVPcList span {
    min-width: 0;
    overflow: hidden;
    font-size: 12.5px;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ov-muted);
}

#OverviewPanel .OVPcList .OVPcEmpty {
    justify-content: center;
    padding: 28px 8px;
    font-size: 13px;
    color: var(--ov-muted);
}

@media (prefers-reduced-motion: reduce) {
    #OverviewPanel .OVChartCard,
    #OverviewPanel .OVOpen {
        transition: none;
    }
}

/* ---- Columna "Puntos de atención" (la monta el JS; sólo con anchura de sobra) ---- */
#OverviewPanel .OVAside {
    display: none;
}

@container overview (min-width: 1348px) {
    #OverviewPanel .OVPage.hasAside {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
        column-gap: 20px;
        max-width: 1520px;
    }

    #OverviewPanel .OVPage.hasAside > .OVMain {
        min-width: 0;
    }

    #OverviewPanel .OVAside {
        position: sticky;
        top: 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 76px;
    }
}

#OverviewPanel .OVAsideCard {
    padding: 18px 18px 14px;
    background: #ffffff;
    border: 1px solid var(--ov-line);
    border-radius: 12px;
}

#OverviewPanel .OVAsideCard h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ov-ink);
}

#OverviewPanel .OVAsideOk {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ov-muted);
}

#OverviewPanel .OVAttention,
#OverviewPanel .OVHighlights {
    margin: 0;
    padding: 0;
    list-style: none;
}

#OverviewPanel .OVAttItem {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 10px 26px 10px 6px;
    font: inherit;
    text-align: left;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat right 4px center / 14px;
    border: 0;
    border-top: 1px solid #F1F4F8;
    border-radius: 8px;
    cursor: pointer;
}

#OverviewPanel .OVAttention li:first-child .OVAttItem {
    border-top: 0;
}

#OverviewPanel .OVAttItem:hover {
    background-color: color-mix(in srgb, var(--data) 4%, #fff);
}

#OverviewPanel .OVAttItem:focus-visible,
#OverviewPanel .OVHighlights button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

#OverviewPanel .OVAttIcon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background: #8E9AAD;
    -webkit-mask: var(--ov-att) no-repeat center / contain;
    mask: var(--ov-att) no-repeat center / contain;
}

#OverviewPanel .OVAttItem.isStrong .OVAttIcon {
    background: var(--ov-3, #1E3A5F);
}

#OverviewPanel .OVAttText {
    font-size: 13px;
    line-height: 1.45;
    color: var(--ov-text);
}

#OverviewPanel .OVAttText b {
    font-size: 15px;
    font-weight: 750;
    color: var(--ov-ink);
}

#OverviewPanel .OVAttItem.isStrong .OVAttText b {
    color: var(--ov-3, #1E3A5F);
}

#OverviewPanel .OVAttItem.is-shield { --ov-att: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1Z'/%3E%3Cpath d='m14.5 9.5-5 5M9.5 9.5l5 5'/%3E%3C/svg%3E"); }
#OverviewPanel .OVAttItem.is-refresh { --ov-att: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16'/%3E%3Cpath d='M16 16h5v5'/%3E%3C/svg%3E"); }
#OverviewPanel .OVAttItem.is-alert { --ov-att: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
#OverviewPanel .OVAttItem.is-help { --ov-att: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E"); }
#OverviewPanel .OVAttItem.is-key { --ov-att: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4Z'/%3E%3Ccircle cx='16.5' cy='7.5' r='.5'/%3E%3C/svg%3E"); }
#OverviewPanel .OVAttItem.is-network { --ov-att: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='16' width='6' height='6' rx='1'/%3E%3Crect x='2' y='16' width='6' height='6' rx='1'/%3E%3Crect x='9' y='2' width='6' height='6' rx='1'/%3E%3Cpath d='M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3M12 12V8'/%3E%3C/svg%3E"); }

#OverviewPanel .OVHighlights li + li {
    border-top: 1px solid #F1F4F8;
}

#OverviewPanel .OVHighlights button {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 10px 6px;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

#OverviewPanel .OVHighlights button:hover {
    background: color-mix(in srgb, var(--data) 4%, #fff);
}

#OverviewPanel .OVHighlights small {
    font-size: 12px;
    color: var(--ov-muted);
}

#OverviewPanel .OVHighlights b {
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ov-ink);
}

#OverviewPanel .OVHighlights span {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--ov-blue);
}