/* =====================================================================
   SCWEB01 - hoja global.
   Regla de colores (CLAUDE.md + Task 10 L5): los valores literales viven
   SOLO en :root como --scweb-* (+ tripletes -rgb). El resto de las reglas
   usa var(). Los roles semanticos de Radzen (--rz-danger, ...) se usan
   directo. El tema claro/oscuro lo marca data-scweb-tema en <html>
   (App.razor en el primer render, MainLayout al cambiar de tema).
   ===================================================================== */

:root {
    /* Impresion: fondo y texto forzados en @media print (tambien con tema oscuro). */
    --scweb-print-fondo: #ffffff;
    --scweb-print-texto: #000000;
    /* Review final F1: franja (filas alternas, pie, encabezado ordenado) y borde de la impresion, del tema claro. */
    --scweb-print-franja: #f3f2f1;
    --scweb-print-borde: #d2d0ce;
    /* Marca SEEP (ejemplo_cliente.png). */
    --scweb-bg: #1b2540;            --scweb-bg-rgb: 27, 37, 64;
    --scweb-panel: #24304f;         --scweb-panel-rgb: 36, 48, 79;
    --scweb-accent: #2f6fed;        --scweb-accent-rgb: 47, 111, 237;
    --scweb-ok: #2ecc71;            --scweb-ok-rgb: 46, 204, 113;
    --scweb-warn: #f1c40f;          --scweb-warn-rgb: 241, 196, 15;
    --scweb-bad: #e74c3c;           --scweb-bad-rgb: 231, 76, 60;
    --scweb-off: #8a94a6;           --scweb-off-rgb: 138, 148, 166;

    /* Texto sobre la marca (header, login) y fondo del logo (el PNG necesita fondo claro). */
    --scweb-on-brand: #ffffff;
    --scweb-on-brand-soft: #94a3b8;
    --scweb-logo-fondo: #ffffff;
    --scweb-login-marca-texto: var(--scweb-on-brand);
    --scweb-shadow-rgb: 0, 0, 0;

    /* Variantes de texto de estado para fondos CLAROS (>= 4.5:1 sobre blanco, fila alternada y hover;
       los brillantes de marca no llegan: verde 2.0, amarillo 1.7). Verificado por ContrasteTests. */
    --scweb-ok-texto-claro: #0f6b2c;
    --scweb-warn-texto-claro: #715500;
    --scweb-bad-texto-claro: #b3261e;
    --scweb-off-texto-claro: #515a6a;
    /* Variantes para fondos OSCUROS donde el color de marca no llega (rojo 3.3, gris 4.1 sobre la fila alternada). */
    --scweb-bad-texto-oscuro: #ff7b6e;
    --scweb-off-texto-oscuro: #aab3c2;

    /* Fila vencida (row-vencido): fondo y texto normativos en claro; texto legible en oscuro. */
    --scweb-vencido-rgb: 220, 53, 69;
    --scweb-vencido-texto-claro: #842029;
    --scweb-vencido-texto-oscuro: #ffc9cc;

    /* Pantallas de error de Blazor. */
    --scweb-error-ui-fondo: #fff8c5;
    --scweb-error-boundary-fondo: #b32121;

    /* Roles semanticos (tema claro por defecto; html[data-scweb-tema="oscuro"] los cambia). */
    --scweb-semaforo-verde: var(--scweb-ok-texto-claro);
    --scweb-semaforo-amarillo: var(--scweb-warn-texto-claro);
    --scweb-semaforo-rojo: var(--scweb-bad-texto-claro);
    --scweb-semaforo-gris: var(--scweb-off-texto-claro);
    --scweb-vencido-fondo: rgba(var(--scweb-vencido-rgb), 0.22);
    --scweb-vencido-texto: var(--scweb-vencido-texto-claro);
    --scweb-grid-borde: rgba(var(--scweb-shadow-rgb), 0.25);
    /* Tablero (SP2): pozo no visible para el cliente, solo lo ve Sala de Control (fila atenuada + leyenda). */
    --scweb-no-visible-fondo: rgba(var(--scweb-off-rgb), 0.07);
    --scweb-no-visible-texto: var(--scweb-off-texto-claro);
    /* Detalle de pozo (SP2 Task 7): lectura o entrada de bitacora invalidada (solo Sala de Control), atenuada y tachada. */
    --scweb-invalidada-fondo: rgba(var(--scweb-bad-rgb), 0.08);
    --scweb-invalidada-texto: var(--scweb-off-texto-claro);
    /* T7-G1: etiqueta "Invalidada" (texto) y marca al borde izquierdo de la fila (no textual). Medidos en ContrasteTests. */
    --scweb-invalidada-etiqueta: var(--scweb-vencido-texto-claro);
    --scweb-invalidada-marca: var(--scweb-bad-texto-claro);
    /* Texto secundario del portal (hora de actualizacion, rotulos): medido en ContrasteTests en los dos temas. */
    --scweb-texto-secundario: var(--scweb-off-texto-claro);

    /* Graficos del detalle de pozo (SP2 Task 8): una variante por tema, >= 3:1 sobre los fondos de tarjeta (ContrasteTests).
       RadzenChart las recibe como Stroke/Fill="var(--scweb-grafico-*)". */
    --scweb-grafico-presion-claro: #1f5fbf;     --scweb-grafico-presion-oscuro: #7fb0ff;
    /* G-M7 (Task 10): en oscuro el orificio es rosa (antes naranja, casi el tono del dorado de la arena). */
    --scweb-grafico-orificio-claro: #b34700;    --scweb-grafico-orificio-oscuro: #f28fd0;
    --scweb-grafico-arena-claro: #7a5c00;       --scweb-grafico-arena-oscuro: #e0b84a;
    --scweb-grafico-acumulada-claro: #0f6b2c;   --scweb-grafico-acumulada-oscuro: #4cd488;
    --scweb-grafico-presion: var(--scweb-grafico-presion-claro);
    --scweb-grafico-orificio: var(--scweb-grafico-orificio-claro);
    --scweb-grafico-arena: var(--scweb-grafico-arena-claro);
    --scweb-grafico-acumulada: var(--scweb-grafico-acumulada-claro);
    /* SP4 Task 7: presion de Manifold (grafico 1, pozos de carga manual). Verde, lejos en tono del azul de la presion BDP y del
       naranja / rosa del orificio; ademas va punteada y con triangulos. Medido en ContrasteTests. */
    --scweb-grafico-manifold-claro: #33691e;    --scweb-grafico-manifold-oscuro: #a5d66b;
    --scweb-grafico-manifold: var(--scweb-grafico-manifold-claro);
    /* SP4 Task 7b: presion de linea (grafico 1, eje derecho, trazo a rayas) y temperaturas de boca de pozo y de linea (grafico 4).
       Tonos lejos de los de su propio grafico (azul / verde de las presiones; rojo / violeta de las temperaturas). Medidos en
       ContrasteTests. */
    --scweb-grafico-linea-claro: #c2410c;       --scweb-grafico-linea-oscuro: #ff9e64;
    --scweb-grafico-temp-bdp-claro: #b3261e;    --scweb-grafico-temp-bdp-oscuro: #ff8a80;
    --scweb-grafico-temp-linea-claro: #6a1b9a;  --scweb-grafico-temp-linea-oscuro: #ce93d8;
    --scweb-grafico-linea: var(--scweb-grafico-linea-claro);
    --scweb-grafico-temp-bdp: var(--scweb-grafico-temp-bdp-claro);
    --scweb-grafico-temp-linea: var(--scweb-grafico-temp-linea-claro);
    /* SP10: bandas P10-P90 de la proyeccion (el color de su serie, translucido) y marca vertical de la referencia (ultimo dato). */
    --scweb-grafico-banda-arena-claro: rgba(122, 92, 0, 0.18);     --scweb-grafico-banda-arena-oscuro: rgba(224, 184, 74, 0.22);
    --scweb-grafico-banda-presion-claro: rgba(31, 95, 191, 0.15);  --scweb-grafico-banda-presion-oscuro: rgba(127, 176, 255, 0.20);
    --scweb-grafico-banda-linea-claro: rgba(194, 65, 12, 0.15);    --scweb-grafico-banda-linea-oscuro: rgba(255, 158, 100, 0.20);
    --scweb-grafico-referencia-claro: #5f6368;                     --scweb-grafico-referencia-oscuro: #b0b4ba;
    --scweb-grafico-banda-arena: var(--scweb-grafico-banda-arena-claro);
    --scweb-grafico-banda-presion: var(--scweb-grafico-banda-presion-claro);
    --scweb-grafico-banda-linea: var(--scweb-grafico-banda-linea-claro);
    --scweb-grafico-referencia: var(--scweb-grafico-referencia-claro);
    /* SP4 Task 7: etiqueta "Carga manual" (texto con borde) en el tablero y el detalle. Medida en ContrasteTests (>= 4.5:1). */
    --scweb-manual-etiqueta-claro: #1a56b8;     --scweb-manual-etiqueta-oscuro: #8ab8ff;
    --scweb-manual-etiqueta: var(--scweb-manual-etiqueta-claro);
    /* SP5 Task 3: purga con posible duplicado (R2) en la bitacora del detalle: etiqueta "Posible duplicado" (texto, >= 4.5:1) y marca
       al borde izquierdo de la fila (>= 3:1). Ambar oscuro / claro, lejos del rojo de la invalidada. Medidos en ContrasteTests. */
    --scweb-duplicado-etiqueta-claro: #8a4b00;  --scweb-duplicado-etiqueta-oscuro: #ffc46b;
    --scweb-duplicado-etiqueta: var(--scweb-duplicado-etiqueta-claro);
    --scweb-duplicado-marca: var(--scweb-duplicado-etiqueta);

    /* Tipografia global: stack del SO (Segoe UI Variable en Win11, Segoe UI en Win10, -apple-system en macOS). */
    --rz-text-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
}

html[data-scweb-tema="oscuro"] {
    --scweb-semaforo-verde: var(--scweb-ok);
    --scweb-semaforo-amarillo: var(--scweb-warn);
    --scweb-semaforo-rojo: var(--scweb-bad-texto-oscuro);
    --scweb-semaforo-gris: var(--scweb-off-texto-oscuro);
    --scweb-vencido-texto: var(--scweb-vencido-texto-oscuro);
    --scweb-grid-borde: rgba(var(--scweb-off-rgb), 0.35);
    --scweb-no-visible-texto: var(--scweb-off-texto-oscuro);
    /* En oscuro la fila se oscurece (aclararla bajaba el contraste del semaforo rojo por debajo de 4.5:1). */
    --scweb-no-visible-fondo: rgba(var(--scweb-shadow-rgb), 0.25);
    /* T7-G1: en oscuro la fila invalidada se tine de rojo (oscurecerla apenas la distinguia de las demas). */
    --scweb-invalidada-fondo: rgba(var(--scweb-bad-rgb), 0.12);
    --scweb-invalidada-texto: var(--scweb-off-texto-oscuro);
    --scweb-invalidada-etiqueta: var(--scweb-vencido-texto-oscuro);
    --scweb-invalidada-marca: var(--scweb-bad-texto-oscuro);
    --scweb-texto-secundario: var(--scweb-off-texto-oscuro);
    --scweb-grafico-presion: var(--scweb-grafico-presion-oscuro);
    --scweb-grafico-orificio: var(--scweb-grafico-orificio-oscuro);
    --scweb-grafico-arena: var(--scweb-grafico-arena-oscuro);
    --scweb-grafico-acumulada: var(--scweb-grafico-acumulada-oscuro);
    --scweb-grafico-manifold: var(--scweb-grafico-manifold-oscuro);
    --scweb-grafico-linea: var(--scweb-grafico-linea-oscuro);
    --scweb-grafico-temp-bdp: var(--scweb-grafico-temp-bdp-oscuro);
    --scweb-grafico-temp-linea: var(--scweb-grafico-temp-linea-oscuro);
    --scweb-grafico-banda-arena: var(--scweb-grafico-banda-arena-oscuro);
    --scweb-grafico-banda-presion: var(--scweb-grafico-banda-presion-oscuro);
    --scweb-grafico-banda-linea: var(--scweb-grafico-banda-linea-oscuro);
    --scweb-grafico-referencia: var(--scweb-grafico-referencia-oscuro);
    --scweb-manual-etiqueta: var(--scweb-manual-etiqueta-oscuro);
    --scweb-duplicado-etiqueta: var(--scweb-duplicado-etiqueta-oscuro);
}

/* === Base ============================================================ */

/* R66: la fuente de iconos se declara tambien aca. Cada CSS de tema trae su propio @font-face de "Material Symbols";
   al cambiar de tema Radzen reemplaza el <link> y, hasta que el CSS nuevo carga y su @font-face vuelve a cargar la
   fuente, la familia no existe y los iconos se ven como texto ("menu", "edit"...). site.css no se reemplaza nunca, asi
   que esta declaracion (la ultima, por eso la que usa el navegador) mantiene la fuente cargada entre temas. Mismo
   archivo que declara fluent (wwwroot/fonts, precargado en App.razor). */
@font-face {
    font-family: "Material Symbols";
    src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"),
         url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations");
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
}

:root {
    font-size: var(--rz-root-font-size);
}

body {
    font-family: var(--rz-text-font-family);
    color: var(--rz-text-color);
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
    background-color: var(--rz-body-background-color);
}

a {
    color: var(--rz-link-color);
}

a:hover,
a:focus {
    color: var(--rz-link-hover-color);
}

#blazor-error-ui {
    background: var(--scweb-error-ui-fondo);
    color: var(--rz-base-900);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(var(--scweb-shadow-rgb), 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: var(--scweb-error-boundary-fondo);
    padding: 1rem;
    color: var(--scweb-on-brand);
}

/* === Layout (MainLayout) ============================================== */

/* D9: sin el padding de 1rem que fluent le pone al body (el margen lo da .scweb-contenido) y sidebar de 250 px
   (fluent trae 300): a 1280 el contenido gana ~80 px. Sobre .rz-layout para ganarle al :root del tema. */
.rz-layout {
    --rz-layout-body-padding: 0;
    --rz-sidebar-width: 250px;
}

/* Los Stack y Row del contenido ocupan todo el ancho disponible (Radzen los deja en width:auto y los grids se
   encogen a su ancho natural). Solo dentro de .rz-body: dialogos y popups quedan con su ancho propio. */
.rz-body .rz-stack {
    width: 100%;
    align-items: stretch;
}
.rz-body .rz-stack > .rz-row,
.rz-body .rz-row {
    width: 100%;
}

/* Contenido principal: todo el ancho del body (D9), con el mismo margen interno en todas las pantallas. */
.scweb-contenido {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 1rem;
}

/* Header con la marca SEEP en claro y en oscuro. Las variables de Radzen se redefinen sobre .rz-layout
   (mas especifico que el :root del tema, asi no depende del orden de los <link>). */
.rz-layout {
    --rz-header-background-color: var(--scweb-bg);
    --rz-header-color: var(--scweb-on-brand);
    --rz-sidebar-toggle-color: var(--scweb-on-brand);
    --rz-sidebar-toggle-hover-color: var(--scweb-on-brand);
    --rz-sidebar-toggle-hover-background-color: rgba(var(--scweb-accent-rgb), 0.35);
}
.scweb-header {
    min-height: 3.25rem;
    padding-inline-end: 0.5rem;
    flex-wrap: nowrap;
}
.scweb-header-titulo {
    color: var(--scweb-on-brand);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.scweb-header-acciones {
    margin-inline-start: auto;
    flex-wrap: nowrap;
}
.scweb-header .scweb-header-boton.rz-button,
.scweb-header .scweb-header-boton.rz-button .rzi,
.scweb-header .rz-profile-menu,
.scweb-header .rz-profile-menu .rz-navigation-item-link,
.scweb-header .rz-profile-menu .rzi {
    color: var(--scweb-on-brand);
}
.scweb-header .scweb-header-boton.rz-button:hover:not(.rz-state-disabled) {
    background-color: rgba(var(--scweb-accent-rgb), 0.35);
}
.scweb-header .rz-profile-menu {
    background-color: transparent;
    border: 0;
}
.scweb-header .rz-profile-menu .rz-navigation-menu .rz-navigation-item-link,
.scweb-header .rz-profile-menu .rz-navigation-menu .rzi {
    color: var(--rz-text-color);
}
.scweb-font-size {
    min-width: 1.75rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--scweb-on-brand);
}
.scweb-header-icono {
    color: var(--scweb-on-brand);
    font-size: 1.1rem;
}
/* SP7-B: identidad del cliente en el encabezado (solo sesiones Cliente): logo (alto 36 px, max 160 px de ancho) y nombre.
   El logo va sobre el mismo fondo claro que el logo del sidebar (el header es del color de la marca). En pantalla angosta el
   nombre se oculta (scweb-oculto-angosto) y el logo se achica para no generar scroll horizontal. */
.scweb-header-cliente {
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap;
}
.scweb-header-cliente-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
    background: var(--scweb-logo-fondo);
    padding: 0.15rem 0.4rem;
    border-radius: 0.4rem;
}
.scweb-header-cliente-logo img {
    display: block;
    height: 36px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}
.scweb-header-cliente-nombre.rz-text-h4 {
    color: var(--scweb-on-brand);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
@media (max-width: 640px) {
    .scweb-header-cliente-logo img {
        height: 28px;
        max-width: 96px;
    }
}

/* Logo del sidebar: el PNG es amarillo con contorno oscuro, necesita fondo claro en los dos temas. */
.scweb-logo-marco {
    display: inline-block;
    background: var(--scweb-logo-fondo);
    padding: 0.5rem 0.9rem;
    border-radius: 0.6rem;
}
.scweb-logo-marco img {
    display: block;
    width: 160px;
    max-width: 100%;
    height: auto;
}
.scweb-sidebar-version a {
    color: var(--rz-text-secondary-color);
}

/* <= 768 px: el sidebar se abre SOBRE el contenido (no le quita ancho) y MainLayout lo cierra al navegar.
   Con temas premium ResponsiveMaxWidth no alcanza (leccion SGT): se resuelve aca. */
@media (max-width: 768px) {
    .rz-layout > .rz-sidebar.rz-sidebar-expanded {
        position: fixed;
        top: 3.25rem;
        bottom: 0;
        left: 0;
        z-index: 1001;
        box-shadow: 0 0 1rem rgba(var(--scweb-shadow-rgb), 0.35);
    }
    .scweb-contenido {
        padding: 0.5rem;
    }
}
/* <= 900 px: el titulo del header y el nombre del usuario se ocultan para que entren los controles. */
@media (max-width: 900px) {
    .scweb-oculto-angosto {
        display: none !important;
    }
}
/* <= 640 px: el selector de tema y el tamano de letra se ocultan (quedan el claro/oscuro, el idioma y el perfil). */
@media (max-width: 640px) {
    .scweb-solo-ancho {
        display: none !important;
    }
}

/* === Grids ============================================================ */

/* Borde delicado en todos los RadzenDataGrid. */
.rz-data-grid {
    border: 1px solid var(--scweb-grid-borde) !important;
    border-radius: 4px;
}

/* Popups de dropdown al ancho de su contenido (norma CLAUDE.md), sin pasar del 95% de la pantalla. */
.rz-dropdown-panel {
    width: max-content !important;
    max-width: min(900px, 95vw) !important;
}

/* H10 (Task 12A): en pantalla angosta el popup arranca en el borde izquierdo del campo (~21 px dentro de un dialog a 375 px):
   con 95vw una opcion larga lo sacaba 2-3 px de la pantalla (scroll horizontal). Se acota al ancho menos los dos margenes. */
@media (max-width: 768px) {
    .rz-dropdown-panel {
        max-width: calc(100vw - 40px) !important;
    }
}

/* Semaforo de estado del pozo. Color de texto por tema (ver :root / html[data-scweb-tema]). */
.semaforo-verde { color: var(--scweb-semaforo-verde); font-weight: 600; }
.semaforo-amarillo { color: var(--scweb-semaforo-amarillo); font-weight: 600; }
.semaforo-rojo { color: var(--scweb-semaforo-rojo); font-weight: 600; }
.semaforo-gris { color: var(--scweb-semaforo-gris); font-weight: 600; }
/* Circulo del semaforo: toma el color del texto de su estado (la etiqueta va siempre al lado: no depende solo del color). */
.semaforo-punto { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 50%; background-color: currentColor; margin-inline-end: 0.35rem; vertical-align: middle; }

/* === Tablero (SP2) ==================================================== */

/* Pozo no visible para el cliente (solo Sala de Control lo ve): fila atenuada, con leyenda debajo del grid.
   A1 (Task 10): Radzen pinta el texto en .rz-cell-data con var(--rz-grid-cell-color) (y var(--rz-grid-hover-color) con el mouse
   encima de una fila seleccionable): el color del td no llegaba. Se fijan las variables en la fila y el color de .rz-cell-data. */
.rz-grid-table tr.fila-no-visible {
    --rz-grid-cell-color: var(--scweb-no-visible-texto);
    --rz-grid-hover-color: var(--scweb-no-visible-texto);
}
.rz-grid-table tr.fila-no-visible td .rz-cell-data {
    color: var(--scweb-no-visible-texto) !important;
}
.rz-grid-table tr.fila-no-visible td,
.rz-grid-table tr.fila-no-visible:hover td {
    background-color: var(--scweb-no-visible-fondo) !important;
    color: var(--scweb-no-visible-texto) !important;
    font-style: italic;
}
.scweb-leyenda-muestra.fila-no-visible-muestra { background-color: var(--scweb-no-visible-fondo); }
.scweb-leyenda-no-visible { font-style: italic; }
/* Toda la fila navega al detalle. Celdas mas angostas que el default del tema (0.75rem por lado): con la vista de Cliente
   (11 columnas) el grid entra a 1280 sin scroll propio. */
.scweb-tablero-grid {
    --rz-grid-cell-padding: 0.25rem 0.5rem;
    --rz-grid-header-title-padding-inline: 0.5rem 0;
}
.scweb-tablero-grid .rz-data-row { cursor: pointer; }
/* Encabezados con unidad: pueden partirse en dos lineas en lugar de cortarse con "...".
   Mas especifico que ".rz-grid-table thead th .rz-column-title-content" del tema. */
.scweb-tablero-grid .rz-grid-table thead th .rz-column-title-content {
    white-space: normal;
}
/* Ultima purga: fecha y kg en dos lineas. */
.scweb-tablero-purga { display: inline-flex; flex-direction: column; line-height: 1.2; }
.scweb-tablero-purga small { color: inherit; opacity: 0.85; }
.scweb-tablero-hora { font-size: 0.85rem; color: var(--scweb-texto-secundario); }
.scweb-tablero-aviso { font-size: 0.85rem; color: var(--scweb-semaforo-rojo); font-weight: 600; }
/* Muchas pestanas (yacimientos): la barra de pestanas scrollea sola, la pagina no. */
.scweb-tablero-tabs { min-width: 0; max-width: 100%; }
.scweb-tablero-tabs .rz-tabview-nav { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
.scweb-tablero-filtro { max-width: 100%; flex-wrap: wrap; }
/* Enlace del ojo (T6-M1): un <a> con aspecto de boton de icono; no dispara el RowSelect de la fila. */
.scweb-accion-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: var(--rz-border-radius, 4px);
    color: var(--rz-text-color); text-decoration: none;
}
.scweb-accion-icono:hover, .scweb-accion-icono:focus-visible { background-color: var(--rz-base-200); }
/* Estado "no se pudo cargar" (T6-I1): texto + Reintentar. */
.scweb-carga-fallida { color: var(--scweb-semaforo-rojo); font-weight: 600; }

/* === Correos enviados (SP6 Task 6) ==================================== */
/* El cuerpo del correo se muestra como TEXTO: se conservan los saltos y se corta cualquier cadena larga (sin scroll horizontal a 375 px). */
.scweb-correo-cuerpo {
    margin: 0; padding: 0.75rem; max-height: 45vh; overflow: auto;
    white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.85rem;
    color: var(--rz-text-color); background-color: var(--rz-base-200); border: 1px solid var(--rz-base-400); border-radius: 0.25rem;
}
.scweb-correo-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.25rem 0.75rem; margin: 0; }
.scweb-correo-datos dt { font-weight: 600; }
.scweb-correo-datos dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .scweb-correo-datos { grid-template-columns: minmax(0, 1fr); } .scweb-correo-datos dd { margin-bottom: 0.4rem; } }

/* === Detalle de pozo (SP2 Task 7) ===================================== */

.scweb-portal-secundario { color: var(--scweb-texto-secundario); }
.scweb-pozo-detalle { min-width: 0; max-width: 100%; }
.scweb-pozo-datos { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; }
.scweb-pozo-dato { display: flex; flex-direction: column; min-width: 0; }
.scweb-pozo-dato dt { font-size: 0.8rem; }
.scweb-pozo-dato dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.scweb-kpi-valor { font-size: 1.5rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
/* SP4 Task 7b: tarjetas de la ultima lectura (debajo de los indicadores), algo mas chicas; selector de unidad y ayuda del Excel. */
.scweb-actual-valor { font-size: 1.25rem; }
.scweb-unidad-icono { color: var(--scweb-texto-secundario); font-size: 1.1rem; }
.scweb-reporte-ayuda { font-size: 0.8rem; max-width: 22rem; white-space: normal; }
.scweb-kpi-rotulo { font-size: 0.85rem; }
.scweb-kpi-detalle { font-size: 0.85rem; }
.scweb-rango { min-width: 0; max-width: 100%; }
.scweb-rango .rz-form-field { min-width: 0; max-width: 100%; }
.scweb-rango-atajos { max-width: 100%; flex-wrap: wrap; }
.scweb-rango-error { color: var(--scweb-semaforo-rojo); font-weight: 600; }
.scweb-pozo-tabs { min-width: 0; max-width: 100%; }
/* Grids del detalle: celdas compactas; los encabezados con unidad pueden partirse en dos lineas. */
.scweb-portal-grid {
    --rz-grid-cell-padding: 0.25rem 0.5rem;
    --rz-grid-header-title-padding-inline: 0.5rem 0;
}
.scweb-portal-grid .rz-grid-table thead th .rz-column-title-content { white-space: normal; }
.scweb-portal-grid .scweb-celda-larga { white-space: normal; overflow-wrap: anywhere; }
/* Dato invalidado (solo Sala de Control): fila atenuada y tachada, con marca al borde, etiqueta "Invalidada" y leyenda debajo del
   grid. T7-G1: Radzen pinta el color del texto en .rz-cell-data (color: var(--rz-grid-cell-color)), no en el td: el color del td no
   llegaba al texto. Se cambia la variable en la fila y, por las dudas, el color de .rz-cell-data. */
.rz-grid-table tr.fila-invalidada {
    --rz-grid-cell-color: var(--scweb-invalidada-texto);
    --rz-grid-hover-color: var(--scweb-invalidada-texto);
}
.rz-grid-table tr.fila-invalidada td,
.rz-grid-table tr.fila-invalidada:hover td {
    background-color: var(--scweb-invalidada-fondo) !important;
    color: var(--scweb-invalidada-texto) !important;
    text-decoration: line-through;
}
.rz-grid-table tr.fila-invalidada td .rz-cell-data {
    color: var(--scweb-invalidada-texto) !important;
    text-decoration: line-through;
}
.rz-grid-table tr.fila-invalidada td:first-child { box-shadow: inset 4px 0 0 var(--scweb-invalidada-marca); }
/* La etiqueta es inline-block: el tachado de la celda no la alcanza y se lee entera. */
.scweb-etiqueta-invalidada {
    display: inline-block;
    text-decoration: none;
    color: var(--scweb-invalidada-etiqueta);
    font-weight: 600;
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 0 0.3rem;
    line-height: 1.35;
}
.scweb-leyenda-muestra.fila-invalidada-muestra { background-color: var(--scweb-invalidada-fondo); box-shadow: inset 4px 0 0 var(--scweb-invalidada-marca); }
/* SP4 Task 7: etiqueta "Carga manual" (texto, no solo color) del tablero y del detalle; inline-block para que no la tache una fila
   invalidada. En la grilla de lecturas, el origen y quien cargo van debajo del estado. */
.scweb-etiqueta-manual {
    display: inline-block;
    text-decoration: none;
    color: var(--scweb-manual-etiqueta);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 0 0.3rem;
    line-height: 1.35;
    /* I2 (ronda 4): la columna va en px y el texto en rem; con la letra agrandada la etiqueta se corta con "..." dentro de su celda
       (el title conserva el texto completo) en lugar de desbordar hacia la columna vecina. */
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
/* SP5 Task 3 (R2): purga con posible duplicado en la bitacora del detalle. La fila no cambia de fondo: marca al borde izquierdo y
   etiqueta con texto en la columna Fuente, mas su muestra en la leyenda. */
.rz-grid-table tr.fila-posible-duplicado td:first-child { box-shadow: inset 4px 0 0 var(--scweb-duplicado-marca); }
.scweb-leyenda-muestra.fila-posible-duplicado-muestra { box-shadow: inset 4px 0 0 var(--scweb-duplicado-marca); }
.scweb-etiqueta-duplicado {
    display: inline-block;
    text-decoration: none;
    color: var(--scweb-duplicado-etiqueta);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 0 0.3rem;
    line-height: 1.35;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.scweb-celda-pozo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; line-height: 1.2; max-width: 100%; min-width: 0; }
.scweb-origen { display: block; font-size: 0.8rem; line-height: 1.2; color: var(--scweb-texto-secundario); white-space: normal; overflow-wrap: anywhere; }

/* Graficos del detalle de pozo (SP2 Task 8): ancho 100 % del contenedor, alto fijo; los colores de las series van por
   Stroke/Fill="var(--scweb-grafico-*)" en el markup (RadzenChart los escribe en el SVG). */
.scweb-graficos { min-width: 0; max-width: 100%; }
.scweb-grafico { margin: 0; min-width: 0; max-width: 100%; }
.scweb-grafico-lienzo { width: 100%; height: 300px; }
/* G-M4 (Task 10): el contenedor del lienzo va con aria-hidden (el resumen es la descripcion del figure). */
.scweb-grafico-contenedor { min-width: 0; max-width: 100%; }
.scweb-grafico-aviso { font-size: 0.85rem; color: var(--scweb-texto-secundario); }
/* SP10: solapa Proyeccion. Escenario por modelo fisico = aviso (mismo color de los avisos del portal); selector y tabla de pesos
   sin desbordar a 375 px. */
.scweb-proyeccion-aviso { font-size: 0.9rem; color: var(--scweb-duplicado-etiqueta); font-weight: 600; }
.scweb-proyeccion-escenario { max-width: 100%; flex-wrap: wrap; }
.scweb-proyeccion-lista { margin: 0; padding-inline-start: 1.25rem; }
.scweb-proyeccion-modelos { max-width: 40rem; }
.scweb-proyeccion-modelos .rz-cell-data, .scweb-proyeccion-modelos .rz-column-title-content { white-space: normal; overflow-wrap: anywhere; }
.scweb-proyeccion-como { min-width: 0; max-width: 100%; }
/* Texto solo para lectores de pantalla (resumen de cada grafico, R5). */
.scweb-solo-lectores {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Cliente inactivo en el selector de Estructura. */
.scweb-inactivo { color: var(--rz-text-disabled-color); font-style: italic; }

/* Grids anidados dentro de la fila expandida: no dependen del width:100% del td, hacen scroll propio. */
.scweb-nested-grid { overflow-x: auto; max-width: 100%; min-width: 0; }
.scweb-nested-level { min-width: 0; max-width: 100%; }

/* SP8: resumen por PAD (tablero) y detalle de PAD. Las tarjetas se achican con la columna (min-width 0) y la tabla de pozos
   scrollea por su cuenta (.scweb-nested-grid): a 375 px la pagina no tiene scroll horizontal. */
.scweb-pad-tarjeta { min-width: 0; max-width: 100%; }
.scweb-pad-encabezado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; min-width: 0; }
.scweb-pad-titulo { font-size: 1.1rem; font-weight: 600; }
.scweb-pad-datos { gap: 0.25rem 1.25rem; }
.scweb-pad-tabla { width: 100%; }
/* Linea de detalle debajo de un dato del PAD (suma de ultimas purgas, P. BDP por pozo): texto chico que corta donde haga falta. */
.scweb-pad-dato-detalle { display: block; font-size: 0.8rem; font-weight: 400; overflow-wrap: anywhere; }
/* D9: el td del expand que aloja un grid hijo (PadsGrid, PozosGrid) deja 0.25rem de margen en vez del de Radzen,
   asi el grid de Pozos (tercer nivel) entra sin scroll a 1280. El de recursos (scweb-expand-contenido) sigue en 0. */
.rz-expanded-row-content > td:has(> .rz-expanded-row-template > .scweb-nested-level) {
    padding-inline: 0.25rem;
}

/* END vencida en el equipamiento del pozo (RowRender). Fondo normativo rgba(220,53,69,0.22); texto #842029 en claro.
   A1 (Task 10): el texto se pinta en .rz-cell-data con var(--rz-grid-cell-color): se fija en la fila (ver fila-no-visible). */
.rz-grid-table tr.row-vencido {
    --rz-grid-cell-color: var(--scweb-vencido-texto);
    --rz-grid-hover-color: var(--scweb-vencido-texto);
}
.rz-grid-table tr.row-vencido td .rz-cell-data {
    color: var(--scweb-vencido-texto) !important;
}
.rz-grid-table tr.row-vencido td,
.rz-grid-table tr.row-vencido:hover td {
    background-color: var(--scweb-vencido-fondo) !important;
    color: var(--scweb-vencido-texto) !important;
}
/* SP12: tarjetas del plan de calidad, borde izquierdo con el color del semaforo (el estado tambien va como texto en la tarjeta). */
.scweb-kpi-calidad { border-inline-start: 4px solid var(--scweb-semaforo-gris); min-width: 0; }
.scweb-kpi-calidad.scweb-kpi-semaforo-verde { border-inline-start-color: var(--scweb-semaforo-verde); }
.scweb-kpi-calidad.scweb-kpi-semaforo-amarillo { border-inline-start-color: var(--scweb-semaforo-amarillo); }
.scweb-kpi-calidad.scweb-kpi-semaforo-rojo { border-inline-start-color: var(--scweb-semaforo-rojo); }
/* Leyenda de grids con filas coloreadas por estado. */
.scweb-leyenda { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--rz-text-secondary-color); }
.scweb-leyenda-muestra { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 2px; border: 1px solid var(--rz-border-color, var(--scweb-grid-borde)); }
.scweb-leyenda-muestra.row-vencido-muestra { background-color: var(--scweb-vencido-fondo); }

/* R44 (Task 8b): el contenido del expand (PozoRecursosTabs, EquipoFlowbackDetalle) se limita al ancho VISIBLE del grid
   padre, no al <td> del expand row (que es tan ancho como la tabla del padre). El area de scroll del grid padre
   (.rz-data-grid-data) es el contenedor de consulta: 100cqi = su ancho visible. sticky + left:0 mantiene el contenido a
   la vista aunque se scrollee el padre en horizontal; cada grid hijo (.scweb-nested-grid) scrollea por su cuenta.
   Solo los niveles que alojan este contenido se vuelven contenedores (:has); el mas cercano es el que manda. */
.rz-data-grid-data:has(.scweb-expand-contenido) {
    container-type: inline-size;
}
/* El <td> del expand que aloja directamente el contenido pierde su padding horizontal para que 100cqi entre justo. */
.rz-expanded-row-content > td:has(.scweb-expand-contenido):not(:has(.rz-expanded-row-content .scweb-expand-contenido)) {
    padding-inline: 0;
}
.rz-data-grid-data .scweb-expand-contenido {
    position: sticky;
    left: 0;
    box-sizing: border-box;
    width: 100cqi;
    max-width: 100cqi;
    min-width: 0;
}

/* === Novedades (/changelog) ========================================== */

.changelog-wrap { max-width: 820px; margin: 0 auto; padding: 1rem 0.5rem 2rem; }
.changelog-entry { margin-bottom: 1rem; }
.changelog-points { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.changelog-points li { margin: 0.3rem 0; line-height: 1.45; }

/* === Login (LoginLayout) ============================================== */

.scweb-login-fondo {
    background: radial-gradient(circle at 25% 15%, var(--scweb-panel) 0%, var(--scweb-bg) 70%);
}
.scweb-login-card {
    padding: 0;
    overflow: hidden;
    /* Fondo del tema (claro u oscuro) para que el formulario de ingreso sea legible con cualquiera. */
    background-color: var(--rz-base-background-color);
}
.scweb-login-marca {
    background-image: radial-gradient(circle at 4rem 4rem, var(--scweb-accent) 0%, var(--scweb-bg) 80%);
    position: relative;
}
/* R65: texto del panel de marca: blanco sobre el degradado accent -> bg, igual en claro y oscuro (>= 4.5:1 en los dos
   extremos, ContrasteTests). Antes usaba rz-color-on-primary, que en los temas oscuros es un color oscuro. */
.scweb-login-marca .scweb-login-marca-texto {
    color: var(--scweb-login-marca-texto);
}
/* SP7: leyenda del portal debajo del logo, visible en todo ancho. */
.scweb-login-marca .scweb-login-portal-titulo {
    letter-spacing: 0.02em;
    font-weight: 600;
}
.scweb-login-pie {
    width: 100%;
    margin-top: 20px;
    color: var(--scweb-on-brand-soft);
}

/* =====================================================================
   SP3 T8 - Impresion (window.print / PDF del navegador).
   Tres trampas juntas: (1) el shell con scroll (html, body, .rz-layout,
   .rz-body a alto de ventana) recorta a una pagina; (2) la paleta clara
   pierde contra el tema oscuro por especificidad (selectores html[...] +
   !important); (3) los titulos usan --rz-text-title-color.
   ===================================================================== */
@media print {
    html, html[data-scweb-tema="oscuro"], body {
        --rz-text-color: var(--scweb-print-texto) !important;
        --rz-text-title-color: var(--scweb-print-texto) !important;
        --rz-text-secondary-color: var(--scweb-print-texto) !important;
        --rz-base-background-color: var(--scweb-print-fondo) !important;
        --rz-body-background-color: var(--scweb-print-fondo) !important;
        --rz-content-background-color: var(--scweb-print-fondo) !important;
        --rz-layout-background-color: var(--scweb-print-fondo) !important;
        --rz-card-background-color: var(--scweb-print-fondo) !important;
        --rz-panel-background-color: var(--scweb-print-fondo) !important;
        --rz-chart-axis-color: var(--scweb-print-borde) !important;
        --rz-chart-axis-label-color: var(--scweb-off-texto-claro) !important;
        --rz-chart-grid-line-color: var(--scweb-print-borde) !important;
        --rz-chart-tooltip-background: var(--scweb-print-fondo) !important;
        --rz-chart-tooltip-color: var(--scweb-print-texto) !important;
        --rz-chart-marker-stroke: var(--scweb-print-fondo) !important;
        --rz-text-tertiary-color: var(--scweb-print-texto) !important;
        --rz-text-disabled-color: var(--scweb-off-texto-claro) !important;
        /* F1: grillas con la paleta clara (el tema oscuro pinta encabezado, franjas, pie, congeladas, detalle y hover con la
           escala base oscura; con print-color-adjust: exact esos fondos SI se imprimen). */
        --rz-grid-header-background-color: var(--scweb-print-fondo) !important;
        --rz-grid-header-sorted-background-color: var(--scweb-print-franja) !important;
        --rz-grid-stripe-background-color: var(--scweb-print-franja) !important;
        --rz-grid-stripe-odd-background-color: var(--scweb-print-fondo) !important;
        --rz-grid-foot-background-color: var(--scweb-print-franja) !important;
        --rz-grid-frozen-cell-background-color: var(--scweb-print-fondo) !important;
        --rz-grid-detail-template-background-color: var(--scweb-print-franja) !important;
        --rz-grid-hover-background-color: var(--scweb-print-franja) !important;
        --rz-grid-toolbar-background-color: var(--scweb-print-fondo) !important;
        --rz-grid-filter-background-color: var(--scweb-print-fondo) !important;
        --rz-grid-cell-color: var(--scweb-print-texto) !important;
        --rz-grid-header-color: var(--scweb-print-texto) !important;
        --rz-grid-hover-color: var(--scweb-print-texto) !important;
        --rz-grid-foot-cell-color: var(--scweb-print-texto) !important;
        --rz-grid-cell-border: 1px solid var(--scweb-print-borde) !important;
        --rz-grid-bottom-cell-border: 1px solid var(--scweb-print-borde) !important;
        --rz-grid-header-cell-border-bottom: 1px solid var(--scweb-print-borde) !important;
        --rz-tabs-tab-color: var(--scweb-print-texto) !important;
        --rz-tabs-tab-selected-color: var(--scweb-print-texto) !important;
        --rz-tabs-tab-hover-color: var(--scweb-print-texto) !important;
        --rz-tabs-tab-focus-color: var(--scweb-print-texto) !important;
        --rz-tabs-tab-focus-background-color: var(--scweb-print-fondo) !important;
        /* F1: las --scweb-* que el tema oscuro redefine vuelven a su valor claro (contraste medido sobre blanco). */
        --scweb-semaforo-verde: var(--scweb-ok-texto-claro) !important;
        --scweb-semaforo-amarillo: var(--scweb-warn-texto-claro) !important;
        --scweb-semaforo-rojo: var(--scweb-bad-texto-claro) !important;
        --scweb-semaforo-gris: var(--scweb-off-texto-claro) !important;
        --scweb-vencido-texto: var(--scweb-vencido-texto-claro) !important;
        --scweb-grid-borde: var(--scweb-print-borde) !important;
        --scweb-no-visible-fondo: rgba(var(--scweb-off-rgb), 0.07) !important;
        --scweb-no-visible-texto: var(--scweb-off-texto-claro) !important;
        --scweb-invalidada-fondo: rgba(var(--scweb-bad-rgb), 0.08) !important;
        --scweb-invalidada-texto: var(--scweb-off-texto-claro) !important;
        --scweb-invalidada-etiqueta: var(--scweb-vencido-texto-claro) !important;
        --scweb-invalidada-marca: var(--scweb-bad-texto-claro) !important;
        --scweb-texto-secundario: var(--scweb-off-texto-claro) !important;
        --scweb-grafico-presion: var(--scweb-grafico-presion-claro) !important;
        --scweb-grafico-orificio: var(--scweb-grafico-orificio-claro) !important;
        --scweb-grafico-arena: var(--scweb-grafico-arena-claro) !important;
        --scweb-grafico-acumulada: var(--scweb-grafico-acumulada-claro) !important;
        --scweb-grafico-manifold: var(--scweb-grafico-manifold-claro) !important;
        --scweb-grafico-linea: var(--scweb-grafico-linea-claro) !important;
        --scweb-grafico-temp-bdp: var(--scweb-grafico-temp-bdp-claro) !important;
        --scweb-grafico-temp-linea: var(--scweb-grafico-temp-linea-claro) !important;
        --scweb-manual-etiqueta: var(--scweb-manual-etiqueta-claro) !important;
        --scweb-duplicado-etiqueta: var(--scweb-duplicado-etiqueta-claro) !important;
        background: var(--scweb-print-fondo) !important;
        color: var(--scweb-print-texto) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .rz-sidebar, .rz-header, .rz-footer, .rz-notification, .rz-dialog-wrapper, .rz-dialog-mask, .rz-dialog,
    .rz-button, .rz-paginator, .rz-pager, .rz-sidebar-toggle, .rz-dropdown-panel, .rz-tooltip, .scweb-header,
    .scweb-sidebar-version {
        display: none !important;
    }

    html, body, .rz-layout, .rz-body {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
    }

    .rz-layout {
        display: block !important;
    }

    .rz-body {
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        background: var(--scweb-print-fondo) !important;
        color: var(--scweb-print-texto) !important;
    }

    .rz-body h1, .rz-body h2, .rz-body h3, .rz-body h4, .rz-body h5, .rz-body h6, .rz-text-h1, .rz-text-h2, .rz-text-h3,
    .rz-text-h4, .rz-text-h5, .rz-text-h6, .rz-text-subtitle1, .rz-text-subtitle2, .rz-text-body1, .rz-text-body2, .rz-card {
        color: var(--scweb-print-texto) !important;
        background-color: var(--scweb-print-fondo) !important;
    }

    .rz-chart, .rz-chart svg, svg, .rz-card, .rz-datatable-scrollable-wrapper, tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    svg {
        max-width: 100%;
    }
}

/* SP4 Task 6: carga manual por PAD. La grilla hace scroll horizontal dentro de si misma (375 px); cada celda de presion lleva
   la unidad del pozo al lado del control. Una fila con error se marca con un borde a la izquierda (el mensaje va en la fila). */
.scweb-carga-grilla { overflow-x: auto; max-width: 100%; min-width: 0; }
.scweb-carga-celda { display: flex; align-items: center; gap: 0.35rem; }
.scweb-carga-celda .rz-numeric { flex: 1 1 auto; min-width: 0; }
.scweb-carga-unidad { font-size: 0.85rem; color: var(--scweb-texto-secundario); white-space: nowrap; }
.scweb-carga-pozo { display: flex; flex-direction: column; gap: 0.1rem; white-space: normal; }
.rz-grid-table tr.scweb-fila-error td:first-child { box-shadow: inset 4px 0 0 var(--scweb-semaforo-rojo); }