h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Ocurrió un error."
    }

/* Logo de Argus */
.argos-logo {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--argos-alto) * .28);
    line-height: 1;
}

.argos-isotipo {
    width: var(--argos-alto);
    height: var(--argos-alto);
    flex-shrink: 0;
}

.argos-marca {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.argos-nombre {
    font-family: Outfit, "DM Sans", sans-serif;
    font-weight: 700;
    font-size: calc(var(--argos-alto) * .56);
    letter-spacing: .14em;
    color: #FFFFFF;
}

.argos-firma {
    font-family: "DM Sans", sans-serif;
    font-size: calc(var(--argos-alto) * .28);
    letter-spacing: .04em;
    color: #FFEACC;
    opacity: .85;
}

/* Fina línea naranja bajo la barra superior, como acento de marca. */
.mud-appbar {
    border-bottom: 3px solid #EC8200;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Títulos de los bloques del menú del operador (Plataforma y la organización elegida), alineados con los íconos.
   Van aquí y no en MainLayout.razor.css: el CSS aislado no alcanza a lo que dibuja MudBlazor. */
.titulo-menu {
    display: block;
    padding: 12px 16px 4px 18px;
    color: var(--mud-palette-text-secondary);
    letter-spacing: .08em;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menú plegado a solo íconos: los títulos de bloque no caben; el separador basta para distinguirlos. */
.menu-plegado .titulo-menu {
    display: none;
}

/* El pie queda al final de la ventana aunque la página tenga poco contenido. MudMainContent ya trae el
   espacio de la barra superior como padding: con border-box, ese espacio cuenta dentro de los 100vh. */
:root {
    --alto-pie: 48px;
}

.contenido {
    display: flex;
    flex-direction: column;
    /* El pie va después, fuera del contenido: entre los dos llenan la ventana. */
    min-height: calc(100vh - var(--alto-pie));
    box-sizing: border-box;
}

.contenido > .cuerpo {
    flex: 1 0 auto;
}

/* Aviso de vulnerabilidades explotadas del panel: una línea; un clic filtra la tabla de equipos. */
.aviso-kev .mud-alert-message { width: 100%; }
.aviso-kev-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.aviso-kev-fuente { font-size: 0.8rem; opacity: 0.8; }
.aviso-kev-accion { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.aviso-kev:hover .aviso-kev-accion { text-decoration: underline; }
#tabla-equipos { scroll-margin-top: 80px; } /* que la barra superior no tape el título al bajar hasta la tabla */

/* Impresión (botón «Imprimir» de la ficha de un activo, o Ctrl+P): solo el contenido, en claro aunque se use el tema
   oscuro, sin menú, barra, pie ni botones, y sin partir una tarjeta entre dos hojas. */
.solo-imprimir { display: none; }
.fila-oculta { display: none; }

@media print {
    .expandir-al-imprimir { max-height: none !important; overflow: visible !important; }
    .fila-oculta { display: table-row !important; }
    :root, .mud-theme-dark, body {
        --mud-palette-background: #fff;
        --mud-palette-surface: #fff;
        --mud-palette-text-primary: #1a1a1a;
        --mud-palette-text-secondary: #555;
        --mud-palette-lines-default: #ccc;
        --mud-palette-table-lines: #ddd;
        --mud-palette-background-gray: #f3f3f3;
    }
    body { background: #fff !important; }
    .mud-appbar, .mud-drawer, .mud-drawer-overlay, footer.pie, .mud-breadcrumbs, .no-imprimir,
    .mud-main-content .mud-button-root, .mud-snackbar-provider, #components-reconnect-modal { display: none !important; }
    .mud-main-content { padding-top: 0 !important; margin: 0 !important; }
    .mud-container { max-width: none !important; padding: 0 !important; }
    .mud-paper { box-shadow: none !important; border: 1px solid #ddd; break-inside: avoid; }
    .mud-chip, .mud-alert { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .solo-imprimir { display: block; }
    @page { margin: 12mm; }

    /* La hoja mide unos 720 px: con ese ancho Argus se comporta como en un celular (tarjetas una debajo de otra y tablas
       convertidas en fichas) y la impresión ocupa varias hojas. Se conserva la distribución de escritorio, más pequeña. */
    html { zoom: .62; }
    /* De menor a mayor: si un elemento tiene varias, gana la de escritorio (lg). */
    .mud-grid-item-md-6 { flex-basis: 50% !important; max-width: 50% !important; }
    .mud-grid-item-md-4 { flex-basis: 33.333% !important; max-width: 33.333% !important; }
    .mud-grid-item-lg-3 { flex-basis: 25% !important; max-width: 25% !important; }
    .mud-xs-table .mud-table-root, .mud-sm-table .mud-table-root, .mud-md-table .mud-table-root, .mud-lg-table .mud-table-root { display: table !important; width: 100%; }
    .mud-table-root .mud-table-head { display: table-header-group !important; }
    .mud-table-root .mud-table-body { display: table-row-group !important; }
    .mud-table-root .mud-table-row { display: table-row !important; break-inside: avoid; }
    .mud-table-root .mud-table-cell { display: table-cell !important; text-align: left !important; padding: 3px 8px !important; }
    .mud-table-root .mud-table-cell::before { content: none !important; display: none !important; }
}

/* Línea de tiempo a todo el ancho: dos columnas (una en pantallas angostas). Un día puede seguir en la otra columna,
   pero su título nunca queda solo al final de una. */
.linea-columnas { column-count: 2; column-gap: 40px; }
.linea-columnas .linea-dia { break-after: avoid; }
.linea-columnas .linea-evento { break-inside: avoid; }
.linea-columnas > div:first-child > .linea-dia { margin-top: 0 !important; }
@media (max-width: 959px) { .linea-columnas { column-count: 1; } }

/* Uso de equipos: indicadores, línea de tiempo por tramos y barras de aplicaciones. */
.uso-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.uso-kpi { border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; padding: 12px 14px; }
.uso-kpi .valor { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.uso-kpi .nombre { font-size: .75rem; color: var(--mud-palette-text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.uso-kpi .nota { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.uso-leyenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: .75rem; color: var(--mud-palette-text-secondary); }
.uso-leyenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: var(--c); }
.uso-persona { border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; padding: 16px; }
.uso-persona-cabeza { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 2fr); gap: 16px; align-items: center; }
@media (max-width: 760px) { .uso-persona-cabeza { grid-template-columns: 1fr; } }
.uso-nombre { font-size: 1.05rem; font-weight: 600; }
.uso-dominio { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.uso-reparto { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--mud-palette-background-gray); }
.uso-reparto-cifras { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; font-size: .8rem; }
.uso-reparto-cifras b { font-weight: 600; }
.uso-reparto-cifras span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--c); }
.uso-linea { position: relative; height: 26px; border-radius: 4px; background: var(--mud-palette-background-gray); margin-top: 16px; overflow: hidden; }
.uso-linea .tramo { position: absolute; top: 0; bottom: 0; }
.uso-linea .hora { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--mud-palette-lines-default); opacity: .7; }
.uso-horas { position: relative; height: 16px; font-size: .75rem; color: var(--mud-palette-text-secondary); }
.uso-horas span { position: absolute; transform: translateX(-50%); }
.uso-apps { display: grid; grid-template-columns: minmax(140px, max-content) 1fr 70px; gap: 6px 12px; align-items: center; margin-top: 14px; font-size: .8rem; }
.uso-apps .barra { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--mud-palette-success) 45%, var(--mud-palette-surface)); }
.uso-apps .min { text-align: right; color: var(--mud-palette-text-secondary); }

/* Línea de tiempo cerrada: toma el alto de su fila (al menos 240 px) sin empujarla, y muestra lo que alcance con un
   desvanecido al final; igual al imprimir y en el PDF. */
.linea-recortada { position: relative; flex: 1; min-height: 240px; }
.linea-recortada > div { position: absolute; inset: 0; overflow: hidden; }
.linea-recortada::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--mud-palette-surface)); }

/* ── Gráficas del panel y de los informes (VistaGrafica, TarjetaPanelVista, VistaInforme) ── */
.g-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
.g-nota { font-size: .75rem; color: var(--mud-palette-text-secondary); margin-top: 8px; line-height: 1.4; }
.g-sutil { color: var(--mud-palette-text-secondary); }
.g-leyenda { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; }
.g-leyenda > div { display: flex; align-items: center; gap: 2px; }
.g-leyenda b { margin-left: 4px; }
.g-leyenda-fila { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.g-dona { display: flex; align-items: center; gap: 14px; }
.g-dona-svg { width: 96px; height: 96px; flex-shrink: 0; }
.g-dona-centro { font-size: 17px; font-weight: 600; fill: var(--mud-palette-text-primary); }
.g-medidor { width: 100%; max-width: 190px; display: block; margin: 0 auto; }
.g-medidor-valor { font-size: 15px; font-weight: 600; fill: var(--mud-palette-text-primary); }
.g-barras { display: grid; grid-template-columns: minmax(64px, max-content) minmax(40px, 1fr) auto; gap: 7px 10px; align-items: center; font-size: .82rem; }
.g-barra-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.g-barra-texto { white-space: nowrap; text-align: right; color: var(--mud-palette-text-secondary); }
.g-pista { display: block; height: 9px; border-radius: 5px; background: var(--mud-palette-background-gray); overflow: hidden; }
.g-pista > span { display: block; height: 100%; border-radius: 5px; min-width: 2px; }
.g-apilada { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--mud-palette-background-gray); gap: 2px; }
.g-columnas { display: flex; align-items: stretch; gap: 10px; height: 120px; }
.g-columna { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.g-columna-valor { font-size: .82rem; font-weight: 600; }
.g-columna-area { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.g-columna-barra { width: 60%; max-width: 46px; min-height: 3px; border-radius: 5px 5px 0 0; }
.g-columna-nombre { font-size: .75rem; color: var(--mud-palette-text-secondary); margin-top: 4px; }
.g-tiempo { width: 100%; height: 28px; display: block; }
.g-tiempo-meses { display: flex; justify-content: space-between; font-size: .75rem; color: var(--mud-palette-text-secondary); }
.g-actividad { width: 100%; height: 96px; display: block; }
.g-actividad-eje { display: flex; justify-content: space-between; font-size: .75rem; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.g-hitos { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: .82rem; }
.g-hitos > div { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.g-calor { display: grid; gap: 3px; font-size: .75rem; }
.g-calor-columna { text-align: center; color: var(--mud-palette-text-secondary); }
.g-calor-fila { color: var(--mud-palette-text-secondary); align-self: center; }
.g-calor-celda { height: 20px; border-radius: 3px; }
.g-calendario { display: grid; gap: 2px; font-size: .75rem; align-items: center; }
.g-calendario-dia { color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: visible; }
.g-calendario-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; font-size: .8rem; }
.g-calendario-celda { height: 14px; border-radius: 2px; }
.g-contadores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.g-contador { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px; font-size: .8rem; line-height: 1.2; }
.g-contador b { font-size: 1.15rem; }

/* Tarjetas del panel: toda la tarjeta es un enlace; el borde de arriba lleva el color de lo que dice. */
/* «dense»: una tarjeta pequeña llena el hueco que deja una grande que no cupo al final de la fila. */
.tarjetas-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-flow: row dense; gap: 16px; }
.tarjeta-panel {
    display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; min-height: 190px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); text-decoration: none;
    border-radius: 8px; border-top: 4px solid var(--tono); box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    transition: box-shadow .15s, transform .15s;
}
.tarjeta-panel { position: relative; }
.tarjeta-panel.con-enlace:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .18); transform: translateY(-1px); }
.tarjeta-panel-cubre { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tarjeta-panel-cubre:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
/* Los renglones que llevan a lo suyo van por encima del enlace de la tarjeta. */
.tarjeta-panel-linea-enlace { position: relative; z-index: 2; color: inherit; text-decoration: none; border-radius: 4px; }
.tarjeta-panel-linea-enlace:hover { background: color-mix(in srgb, var(--tono-linea) 10%, transparent); }
.tarjeta-panel-linea-enlace:hover .tarjeta-panel-linea-texto { text-decoration: underline; }
.tarjeta-panel-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tarjeta-panel-titulo { font-weight: 600; font-size: .95rem; }
.tarjeta-panel-cambio { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.tarjeta-panel-grafica { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.tarjeta-panel-cifra { font-size: 2.4rem; font-weight: 600; line-height: 1.1; flex: 1; display: flex; align-items: center; }
.tarjeta-panel-texto { font-size: .82rem; color: var(--mud-palette-text-secondary); line-height: 1.4; }
.frase-panel {
    font-size: 1.05rem; line-height: 1.6; padding: 14px 18px; border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)); border-left: 4px solid var(--mud-palette-primary);
}

/* Informes */
.informe-conclusion {
    font-size: 1.05rem; line-height: 1.6;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)) !important;
    border-left: 4px solid var(--mud-palette-primary);
}
.informe-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.informe-cifra { border-top: 3px solid var(--tono); }
.informe-cifra-valor { font-size: 1.9rem; font-weight: 600; line-height: 1.15; }
.informe-cifra-texto { font-size: .85rem; }
.informe-cifra-cambio { font-size: .75rem; font-weight: 600; margin-top: 2px; }
.informe-grafica { height: 100%; }
.informe-accion { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--mud-palette-lines-default); }
.informe-accion-texto { flex: 1; }
.informe-prioridad {
    font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 12px; white-space: nowrap; min-width: 74px; text-align: center;
    background: color-mix(in srgb, var(--tono) 16%, transparent);
}
.pictograma { display: flex; flex-wrap: wrap; gap: 1px; }

/* Galerías de Informes y de Configuración */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.galeria-tarjeta {
    display: flex; flex-direction: column; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
    text-decoration: none; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); transition: box-shadow .15s, transform .15s;
}
a.galeria-tarjeta:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .18); transform: translateY(-1px); }
.galeria-miniatura { height: 92px; background: var(--mud-palette-background-gray); display: flex; align-items: center; justify-content: center; padding: 10px; }
.galeria-cuerpo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.galeria-titulo { font-weight: 600; }
.galeria-texto { font-size: .82rem; color: var(--mud-palette-text-secondary); line-height: 1.4; flex: 1; }
.galeria-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.galeria-etiquetas span { font-size: .75rem; padding: 2px 8px; border-radius: 10px; background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
.galeria-bloqueada { opacity: .6; }
.config-grupo { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin: 22px 0 10px; }
.config-tarjeta { display: flex; flex-direction: row; gap: 14px; align-items: flex-start; padding: 16px 18px; height: 100%; }
.config-estado { display: inline-block; font-size: .75rem; padding: 2px 8px; border-radius: 10px; margin-top: 6px; background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
.config-estado.bien { background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent); color: var(--mud-palette-success); }
.config-estado.atencion { background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); color: color-mix(in srgb, var(--mud-palette-warning) 60%, var(--mud-palette-text-primary)); }

/* Pestañas de una empresa (Equipos · Parque · Uso de equipos) */
.pestanas-empresa { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--mud-palette-lines-default); margin: 4px 0 20px; }
.pestanas-empresa a:not(.mud-button-root) {
    padding: 10px 16px; color: var(--mud-palette-text-secondary); text-decoration: none; font-weight: 500;
    border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px;
}
.pestanas-empresa a:not(.mud-button-root):hover { color: var(--mud-palette-text-primary); }
.pestanas-empresa a.activa { color: var(--mud-palette-primary); border-bottom-color: var(--mud-palette-primary); }
.pestanas-empresa .mud-button-root { margin: 0 16px 6px 0; }

/* ── Ajustes de diseño (revisión del diseñador, 2026-11-06) ── */
/* Menú: el ítem activo con fondo naranja suave en todo su ancho, no solo el texto. */
.mud-nav-link.active { background: color-mix(in srgb, var(--mud-palette-primary) 13%, transparent) !important; font-weight: 600; }
.mud-nav-link:hover:not(.active) { background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }

/* Panel: las dos tarjetas que más importan ocupan el doble de ancho en pantallas grandes. */
@media (min-width: 900px) {
    .tarjeta-panel.destacada { grid-column: span 2; }
}
.tarjeta-panel.destacada .tarjeta-panel-titulo { font-size: 1.05rem; }
.tarjeta-panel.destacada .g-dona-svg { width: 116px; height: 116px; }
/* El semáforo de cada tarjeta, más discreto: una franja fina en vez del borde grueso. */
.tarjeta-panel { border-top-width: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .06); }

/* La frase del panel toma el color de lo que dice: rojo si hay riesgo, ámbar si hay algo por atender, verde si todo va bien. */
.frase-panel {
    background: color-mix(in srgb, var(--tono, var(--mud-palette-primary)) 12%, var(--mud-palette-surface));
    border-left-color: var(--tono, var(--mud-palette-primary));
}
.frase-panel .mud-icon-root { vertical-align: -5px; margin-right: 8px; color: var(--tono); }

/* Tablas: el motivo en dos líneas como máximo (el resto al pasar el cursor) y filas con más aire. */
.texto-cortado { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 420px; }
.tabla-amplia .mud-table-cell { padding-top: 12px; padding-bottom: 12px; }

/* Tablas sin barra horizontal: la línea gris bajo el nombre de un activo y las columnas que se ocultan en pantallas
   medianas (en el celular la tabla ya se ve como tarjetas). */
.activo-nombre { overflow-wrap: anywhere; min-width: 0; }
.activo-detalle { font-size: .8rem; color: var(--mud-palette-text-secondary); margin-top: 2px; max-width: 360px; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1279.98px) { .tabla-amplia .col-xl { display: none; } }
@media (max-width: 1023.98px) { .tabla-amplia .col-lg { display: none; } }

/* Etiquetas de público de los informes, cada una con su color. */
.galeria-etiquetas span.publico-gerencia { background: color-mix(in srgb, #7E57C2 16%, transparent); color: color-mix(in srgb, #7E57C2 75%, var(--mud-palette-text-primary)); }
.galeria-etiquetas span.publico-ti { background: color-mix(in srgb, #1E88E5 16%, transparent); color: color-mix(in srgb, #1E88E5 75%, var(--mud-palette-text-primary)); }
.galeria-etiquetas span.publico-compras { background: color-mix(in srgb, #00897B 16%, transparent); color: color-mix(in srgb, #00897B 75%, var(--mud-palette-text-primary)); }

/* Configuración: el ícono de cada tarjeta dentro de un círculo naranja suave. */
.config-icono {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

/* Números de ancho fijo en tablas, cifras y gráficas: quedan alineados en columna. */
.mud-table-cell, .mud-simple-table td, .informe-cifra-valor, .tarjeta-panel-cifra, .g-barras, .g-leyenda, .g-contadores, .g-columnas,
.g-dona-centro, .g-medidor-valor, .uso-kpi .valor { font-variant-numeric: tabular-nums; }

/* Tarjetas grandes del panel: la gráfica o la cifra a la izquierda y el detalle a la derecha. */
.tarjeta-panel-principal { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.tarjeta-panel-cuerpo { flex: 1; display: grid; grid-template-columns: minmax(150px, auto) minmax(0, 1fr); gap: 20px; align-items: center; }
@media (max-width: 600px) { .tarjeta-panel-cuerpo { grid-template-columns: 1fr; } }
.tarjeta-panel-cuerpo:has(.g-actividad) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
@media (max-width: 600px) { .tarjeta-panel-cuerpo:has(.g-actividad) { grid-template-columns: 1fr; } }
.tarjeta-panel-lineas { display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--mud-palette-lines-default); padding-left: 18px; min-width: 0; }
.tarjeta-panel-lineas-titulo { font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.tarjeta-panel-linea { display: flex; flex-direction: column; padding-left: 10px; border-left: 3px solid var(--tono-linea); border-radius: 0; min-width: 0; }
.tarjeta-panel-linea-texto { font-size: .85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-panel-linea-detalle { font-size: .78rem; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Actualizaciones: un renglón por fuente (nombre a la izquierda, cuándo a la derecha). */
.actualizacion-fuente { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--mud-palette-lines-default); font-size: .9rem; font-variant-numeric: tabular-nums; }
.actualizacion-fuente > span:first-child { color: var(--mud-palette-text-secondary); }

/* El detalle técnico de un aviso: solo lo ven los operadores, en letra pequeña debajo del mensaje claro. */
.detalle-tecnico { display: block; margin-top: 4px; font-size: .78rem; opacity: .75; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; word-break: break-word; }

/* Selector de organización de la barra: una sola línea, con «…» si el nombre es largo; en un celular, solo el ícono. */
.selector-organizacion { min-width: 0; }
.selector-organizacion-boton {
    display: inline-flex; align-items: center; gap: 6px; max-width: min(360px, 32vw); padding: 4px 8px 4px 10px;
    border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; cursor: pointer;
    font: inherit; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.selector-organizacion-boton:hover { background: rgba(255, 255, 255, .08); }
.selector-organizacion-boton:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.selector-organizacion-nombre { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
    .selector-organizacion-boton { padding: 6px; }
    .selector-organizacion-nombre { display: none; }
}

/* Comandos para copiar (p. ej. abrir una copia de seguridad): monoespaciado, con desborde horizontal. */
.bloque-codigo {
    background: var(--mud-palette-background-gray);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.85rem;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}

/* Ficha del equipo, pestaña «Soporte remoto»: filas con su nombre alineado (Conexión, Contraseña, Permisos). */
.filas-soporte { display: flex; flex-direction: column; gap: 10px; }
.etiqueta-soporte { min-width: 96px; }

/* Ficha del equipo: secciones de la verificación (soporte remoto, actualizar ya, consulta en vivo), una línea entre cada una. */
.secciones-verificacion { display: flex; flex-direction: column; }
.seccion-verificacion { padding: 12px 0; }
.seccion-verificacion + .seccion-verificacion { border-top: 1px solid var(--mud-palette-lines-default); }

/* Enlaces dentro de las gráficas y las cifras de los informes: cada barra, porción o cifra abre los activos que cuenta. */
.g-enlace { color: inherit; text-decoration: none; cursor: pointer; border-radius: 4px; }
a.g-enlace:hover, a.g-enlace:focus-visible { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.g-leyenda > a.g-enlace { display: flex; align-items: center; gap: 2px; }
.g-leyenda > a.g-enlace:hover { text-decoration: underline; }
/* La fila de una barra no puede envolver su cuadrícula: el enlace no ocupa caja y sus partes siguen en la cuadrícula. */
/* También sin enlace (las barras de IA del panel): si no, cada fila caía en una sola celda y los servicios quedaban en columnas. */
.g-barra-fila { display: contents; }
.g-barra-fila.g-enlace:hover > .g-barra-nombre { text-decoration: underline; color: var(--mud-palette-primary); }
.g-barra-fila.g-enlace:hover > .g-pista { outline: 1px solid var(--mud-palette-primary); }
.g-apilada > a.g-enlace { border-radius: 0; }
.g-apilada > a.g-enlace:hover { filter: brightness(1.15); background: inherit; }
a.g-columna { text-decoration: none; }
a.g-columna:hover .g-columna-nombre { text-decoration: underline; }
.g-dona-svg a.g-enlace:hover path { filter: brightness(1.2); }
.pictograma-grupo { display: contents; }
a.pictograma-grupo:hover .mud-icon-root { filter: brightness(1.25); }
a.g-calendario-nombre:hover { text-decoration: underline; }
/* En las tarjetas del panel, un enlace cubre toda la tarjeta: las partes con su propio enlace van por encima. */
.tarjeta-panel a.g-enlace:not(.g-barra-fila):not(.pictograma-grupo), .tarjeta-panel .g-barra-fila.g-enlace > span { position: relative; z-index: 2; }
.tarjeta-panel .g-dona-svg { position: relative; z-index: 2; pointer-events: none; }
.tarjeta-panel .g-dona-svg a { pointer-events: auto; }
/* Las cifras de un informe con enlace: toda la tarjeta lleva a sus activos. */
.informe-cifra.con-enlace { position: relative; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.informe-cifra.con-enlace:hover { box-shadow: 0 0 0 1px var(--tono), var(--mud-elevation-4); transform: translateY(-1px); }

/* Mesa de ayuda: la línea gris bajo el asunto y la conversación de una solicitud. */
.texto-secundario { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.mesa-mensaje { border-left: 3px solid var(--mud-palette-primary); padding: 6px 12px; margin-bottom: 10px; border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.mesa-mensaje.del-usuario { border-left-color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 6%, transparent); }
.mesa-mensaje.nota { border-left-color: var(--mud-palette-lines-default); background: transparent; font-size: .82rem; color: var(--mud-palette-text-secondary); padding: 2px 12px; }
.mesa-mensaje-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.mesa-captura { max-width: 100%; max-height: 520px; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; cursor: zoom-in; }

/* Buscador global de la barra superior: caja al centro y resultados agrupados debajo. */
.buscador-contenedor { flex: 1 1 auto; max-width: 560px; margin: 0 16px; }
.buscador-global { position: relative; width: 100%; }
/* Como la caja de Google: fondo blanco y bordes en píldora, con el naranja de Argus en el borde. */
.buscador-campo .mud-input.mud-input-outlined { background: #fff; border-radius: 999px; }
.buscador-campo .mud-input-outlined-border { border: 2px solid var(--mud-palette-primary) !important; border-radius: 999px !important; }
.buscador-campo .mud-input.mud-input-outlined:hover .mud-input-outlined-border,
.buscador-campo .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border { border-color: var(--mud-palette-primary) !important; box-shadow: 0 1px 6px rgba(236, 130, 0, .45); }
.buscador-campo .mud-input, .buscador-campo .mud-input input { color: #202124 !important; }
.buscador-campo .mud-input-adornment, .buscador-campo .mud-input-adornment .mud-icon-root { color: #5f6368 !important; }
.buscador-campo input::placeholder { color: #5f6368; opacity: 1; }
.buscador-campo .mud-input-slot { padding-left: 4px; }
.buscador-resultados {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 70vh; overflow-y: auto; z-index: 1500;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border-radius: 8px; padding: 6px 0;
}
.buscador-grupo { padding: 8px 14px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.buscador-grupo span { font-weight: 400; text-transform: none; }
.buscador-item { display: flex; gap: 10px; align-items: flex-start; padding: 6px 14px; color: inherit; text-decoration: none; }
.buscador-item:hover { background: var(--mud-palette-action-default-hover); }
.buscador-item .mud-icon-root { margin-top: 2px; color: var(--mud-palette-primary); }
.buscador-titulo { font-size: .9rem; font-weight: 600; }
.buscador-detalle { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.buscador-fragmento { font-size: .75rem; font-family: Consolas, monospace; color: var(--mud-palette-text-secondary); }
.buscador-vacio { padding: 12px 14px; color: var(--mud-palette-text-secondary); }
.buscador-todos { display: block; padding: 10px 14px 6px; border-top: 1px solid var(--mud-palette-lines-default); margin-top: 6px; color: var(--mud-palette-primary); font-weight: 600; text-decoration: none; }
.resultado-busqueda { padding: 6px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.resultado-busqueda:last-of-type { border-bottom: none; }

/* Asistente de IA: la pregunta a la derecha (en naranja suave) y la respuesta a la izquierda, con su Markdown. */
.asistente-mensajes { display: flex; flex-direction: column; gap: 12px; }
.asistente-pregunta {
    align-self: flex-end; max-width: 80%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; white-space: pre-wrap;
    background: rgba(var(--mud-palette-primary-rgb), .12); border: 1px solid rgba(var(--mud-palette-primary-rgb), .35);
}
.asistente-respuesta {
    align-self: flex-start; max-width: 100%; padding: 10px 14px; border-radius: 16px 16px 16px 4px;
    background: var(--mud-palette-background-gray); overflow-x: auto;
}
.asistente-progreso { display: flex; align-items: center; gap: 10px; color: var(--mud-palette-text-secondary); }
.texto-markdown > :first-child { margin-top: 0; }
.texto-markdown > :last-child { margin-bottom: 0; }
.texto-markdown p, .texto-markdown ul, .texto-markdown ol { margin: 0 0 8px; }
.texto-markdown ul, .texto-markdown ol { padding-left: 22px; }
.texto-markdown h1, .texto-markdown h2, .texto-markdown h3 { font-size: 1rem; font-weight: 600; margin: 12px 0 6px; }
.texto-markdown a { color: var(--mud-palette-primary); font-weight: 500; }
.texto-markdown code { background: rgba(0, 0, 0, .06); padding: 1px 4px; border-radius: 4px; font-size: .85em; }
.texto-markdown table { border-collapse: collapse; margin: 6px 0 10px; font-size: .875rem; }
.texto-markdown th, .texto-markdown td { border: 1px solid var(--mud-palette-lines-default); padding: 4px 8px; text-align: left; vertical-align: top; }
.texto-markdown th { background: rgba(0, 0, 0, .04); font-weight: 600; }

/* Llaves y secretos de API: texto con los caracteres ocultos (no type="password", que activa el gestor de contraseñas). */
.campo-secreto input { -webkit-text-security: disc; text-security: disc; font-family: text-security-disc, inherit; }
/* El buscador es type="search" (para que Chrome no lo tome como usuario): sin la «×» del navegador, ya tiene la suya. */
.buscador-campo input::-webkit-search-cancel-button, .buscador-campo input::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* Ficha del equipo en un celular: nada más ancho que la pantalla. Los textos largos (URL, modelos de disco, series) se
   parten, los chips pasan a dos líneas, el nombre se achica y los botones bajan y ocupan el ancho por pares. */
@media (max-width: 600px) {
    .ficha-activo { overflow-wrap: break-word; }
    /* Las etiquetas y los botones no se parten a mitad de palabra; los valores largos (URL, series) sí. */
    .ficha-activo td:first-child { white-space: nowrap; width: 1%; }
    .ficha-activo td + td { overflow-wrap: anywhere; }
    .ficha-activo .mud-button-label { overflow-wrap: normal; word-break: normal; }
    .ficha-activo .ficha-titulo .mud-typography-h4 { font-size: 1.6rem; line-height: 1.2; }
    .ficha-activo .ficha-botones { width: 100%; }
    .ficha-activo .ficha-botones > .mud-button-root,
    .ficha-activo .ficha-botones > .mud-tooltip-root { flex: 1 1 calc(50% - 8px); }
    .ficha-activo .mud-chip { height: auto; min-height: 24px; white-space: normal; text-align: left; }
    .ficha-activo .mud-chip .mud-chip-content { white-space: normal; }

    .ficha-activo .mud-simple-table table { table-layout: auto; width: 100%; }
}

/* Barra de arriba en un celular: menos margen y botones más compactos, para que el logo y los íconos quepan sin correr la
   página hacia los lados. Los avisos largos también se parten. */
@media (max-width: 600px) {
    .mud-appbar .mud-toolbar-appbar { padding-left: 4px; padding-right: 4px; }
    .mud-appbar .mud-toolbar-appbar .mud-icon-button { padding: 8px; }
    .mud-appbar .selector-organizacion { margin-left: 2px !important; margin-right: 2px !important; }
    .mud-alert-message { min-width: 0; overflow-wrap: anywhere; }
}