/* ============================================================================
   Rapso — Capa de PULIDO (carga al final en App.razor, despues de tokens/site/
   modern-bootstrap/adminapi-exact/Remotely_Server.styles). Corrige y afina sobre
   el CSS legacy sin editarlo, usando los tokens de Fluent (--neutral-*, --accent-*)
   que FluentDesignTheme fija en :root segun el tema. Todo es theme-aware.

   Capas (dark):  layer-2 #1a1a1a = fondo pagina  |  layer-1 #272727 = card elevada
                  fill-input #333 = inputs.  En claro los tokens se invierten solos.

   Nota de especificidad: adminapi-exact.css hardcodea un tema CLARO bajo `main`
   (main, main .card, main .card-body, main .form-control...) con !important. Por eso
   los overrides de esos elementos van con el mismo prefijo `main` (igual
   especificidad) y esta hoja, al cargar despues, gana.
   ========================================================================== */

/* --- Fondo de la pagina (area de contenido) ------------------------------- */
.adminapi-layout .main-content,
.adminapi-layout .main-content > main,
main {
    background-color: var(--neutral-layer-2, #f8f9fa) !important;
    color: var(--neutral-foreground-rest, #212529) !important;
}
/* En páginas donde FluentUI no está (p. ej. /Account), el token --neutral-layer-2
   queda en su valor claro por defecto y pintaba el área de contenido blanca en
   modo oscuro. Color oscuro literal cuando el tema es oscuro. */
:root[data-bs-theme="dark"] .adminapi-layout .main-content,
:root[data-bs-theme="dark"] .adminapi-layout .main-content > main,
:root[data-bs-theme="dark"] main {
    background-color: #1a1a1a !important;
    color: #e6edf5 !important;
}
/* En /Account los títulos usaban un color oscuro (regla global) que quedaba
   invisible sobre el fondo oscuro. Se fuerzan claros en modo oscuro. */
:root[data-bs-theme="dark"] .manage-shell h1,
:root[data-bs-theme="dark"] .manage-shell h2,
:root[data-bs-theme="dark"] .manage-shell h3,
:root[data-bs-theme="dark"] .manage-shell h4,
:root[data-bs-theme="dark"] .manage-shell h5,
:root[data-bs-theme="dark"] .manage-shell h6,
:root[data-bs-theme="dark"] .manage-shell label,
:root[data-bs-theme="dark"] .manage-shell [class*="__title"] {
    color: #e6edf5 !important;
}
/* adminapi-exact.css convierte <main> en una "card" (border 2px de marca +
   box-shadow). Eso genera el efecto de card-dentro-de-card cuando adentro
   hay paneles como #deviceListDiv. main es el FONDO de pagina: plano, sin
   borde ni sombra. El unico panel elevado es el interior. */
main {
    border: none !important;
    box-shadow: none !important;
}

/* --- Paneles con selector de ID en el legacy (ganan por especificidad) -----
   adminapi-exact.css los fuerza a `background:white` con borde gris claro
   (#dee2e6). Override a nivel de ID: superficie elevada (layer-1), borde
   sutil con token (no blanco) y sombra suave. */
#deviceListDiv,
#deviceControlsWrapper {
    background-color: var(--neutral-layer-1, #fff) !important;
    border: 1px solid var(--neutral-stroke-divider-rest, rgba(127, 127, 127, .2)) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18) !important;
}
/* Contenedor superior de contenido: mismo fondo que la pagina (layer-2). */
#topbarPageContent {
    background: var(--neutral-layer-2, #f8f9fa) !important;
}

/* --- FluentCard: superficie elevada theme-aware --------------------------- */
fluent-card {
    background: var(--neutral-layer-1, #fff) !important;
    --neutral-fill-card-rest: var(--neutral-layer-1, #fff);
    --neutral-fill-card-hover: var(--neutral-layer-1, #fff);
    color: var(--neutral-foreground-rest, #1a1a1a);
    border: 1px solid var(--neutral-stroke-divider-rest, rgba(127,127,127,.2));
}

/* --- Cards de Bootstrap bajo main (elevadas) ------------------------------ */
main .card,
main .card-body,
main .card-footer,
.card,
.card-body {
    background-color: var(--neutral-layer-1, #fff) !important;
    color: var(--neutral-foreground-rest, #1a1a1a) !important;
    border-color: var(--neutral-stroke-divider-rest, rgba(127,127,127,.2)) !important;
}
main .card-header,
.card-header {
    background-color: var(--neutral-layer-2, #f8f9fa) !important;
    color: var(--neutral-foreground-rest, #1a1a1a) !important;
    border-color: var(--neutral-stroke-divider-rest, rgba(127,127,127,.2)) !important;
}
main .card-title,
main .card-text,
main h1, main h2, main h3, main h4, main h5, main h6 {
    color: var(--neutral-foreground-rest, #1a1a1a) !important;
}

/* --- Controles de formulario nativos bajo main ---------------------------- */
main .form-control,
main .form-select,
main .form-control:focus,
main .form-select:focus,
.form-control,
.form-select {
    background-color: var(--neutral-fill-input-rest, #fff) !important;
    color: var(--neutral-foreground-rest, #1a1a1a) !important;
    border-color: var(--neutral-stroke-rest, #ced4da) !important;
}
main .form-control::placeholder {
    color: var(--neutral-foreground-hint, #6c757d) !important;
    opacity: 1;
}

/* --- Utilidades de fondo de Bootstrap (.bg-light / .bg-white) -------------
   Se usan como paneles/encabezados sutiles (thead, info-boxes, sub-cards).
   En claro son #f8f9fa/#fff; en oscuro se mapean a capas neutrales para no
   romper el tema. bg-light = capa recesada (layer-3), bg-white = elevada. */
main .bg-light,
.bg-light {
    background-color: var(--neutral-layer-3, #f1f3f5) !important;
    color: var(--neutral-foreground-rest, #1a1a1a) !important;
}
main .bg-white,
.bg-white {
    background-color: var(--neutral-layer-1, #fff) !important;
    color: var(--neutral-foreground-rest, #1a1a1a) !important;
}

/* --- Listas de Bootstrap -------------------------------------------------- */
main .list-group,
main .list-group-item,
.list-group,
.list-group-item {
    background-color: var(--neutral-layer-1, #fff) !important;
    color: var(--neutral-foreground-rest, #1a1a1a) !important;
    border-color: var(--neutral-stroke-divider-rest, rgba(127,127,127,.2)) !important;
}

/* --- Modales de Bootstrap (sub-modales de dispositivo, portal a body) ------ */
.modal-content {
    background-color: var(--neutral-layer-1, #fff) !important;
    color: var(--neutral-foreground-rest, #1a1a1a) !important;
    border-color: var(--neutral-stroke-divider-rest, rgba(127,127,127,.2)) !important;
}
.modal-header,
.modal-footer {
    border-color: var(--neutral-stroke-divider-rest, rgba(127,127,127,.2)) !important;
}
.modal-title {
    color: var(--neutral-foreground-rest, #1a1a1a) !important;
    font-weight: 600 !important;
    font-size: 1.15rem !important;
}
/* Pulido general del shell: esquinas, sombra y aire */
.modal-content {
    border-radius: 16px !important;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45) !important;
    overflow: hidden;
}
.modal-header {
    padding: 18px 22px !important;
}
.modal-body {
    padding: 20px 22px !important;
}
.modal-footer {
    padding: 14px 22px !important;
}
/* Botón de cierre más discreto y redondo */
.modal-header .btn-close {
    border-radius: 8px;
    opacity: .6;
    transition: opacity .15s ease, background-color .15s ease;
}
.modal-header .btn-close:hover {
    opacity: 1;
    background-color: var(--neutral-fill-stealth-hover, rgba(127, 127, 127, .14));
}

/* ── Shell de página unificado ──────────────────────────────────────
   Contenedor, encabezado (icono + título + subtítulo) y stack de tarjetas
   con separación uniforme. Lo usan todas las páginas de contenido para que
   márgenes, padding y encabezados sean idénticos. */
.rapso-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 3rem;
    color: var(--neutral-foreground-rest);
}
.rapso-page-wide { max-width: 1280px; }

.rapso-page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, rgba(127, 127, 127, .18));
}
.rapso-page-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-fill-rest, #2E9CFF) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-fill-rest, #2E9CFF) 24%, transparent);
    color: var(--accent-fill-rest, #2E9CFF);
    font-size: 1.35rem;
}
.rapso-page-header-icon svg { width: 24px; height: 24px; }
.rapso-page-header-text { min-width: 0; }
.rapso-page-title {
    margin: 0 0 .15rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--neutral-foreground-rest);
    outline: none; /* evita el recuadro fantasma de foco en el encabezado */
}
.rapso-page-title:focus,
.rapso-page-title:focus-visible { outline: none; }
.rapso-page-subtitle {
    margin: 0;
    font-size: .9rem;
    line-height: 1.4;
    color: var(--neutral-foreground-hint);
}
.rapso-page-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* Tarjetas apiladas con separación uniforme (evita "cards pegados"). */
.rapso-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (max-width: 640px) {
    .rapso-page { padding: 1.25rem .9rem 2.5rem; }
    .rapso-page-title { font-size: 1.3rem; }
}

/* ── Reconexión del circuito Blazor ─────────────────────────────────── */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: flex-start;
    justify-content: center;
    background: rgba(15, 23, 42, .16);
    pointer-events: none;
}
.rapso-reconnect-box {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--neutral-layer-1, #fff);
    color: var(--neutral-foreground-rest, #1a2332);
    border: 1px solid var(--neutral-stroke-divider-rest, rgba(127, 127, 127, .2));
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 12px 32px -10px rgba(0, 0, 0, .35);
    font-family: Inter, system-ui, sans-serif;
}
.rapso-reconnect-title { font-weight: 600; font-size: 14px; }
.rapso-reconnect-sub {
    font-size: 12px;
    margin-top: 1px;
    color: var(--neutral-foreground-hint, #64748b);
}
.rapso-reconnect-spinner {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2.5px solid var(--neutral-stroke-divider-rest, rgba(127, 127, 127, .3));
    border-top-color: var(--accent-fill-rest, #2E9CFF);
    border-radius: 50%;
    animation: rapso-reconnect-spin .8s linear infinite;
}
@keyframes rapso-reconnect-spin { to { transform: rotate(360deg); } }

/* --- Dropdowns de Bootstrap (menu de acciones de fila, portal a body) ------ */
.dropdown-menu {
    background-color: var(--neutral-layer-1, #fff) !important;
    color: var(--neutral-foreground-rest, #1a1a1a) !important;
    border-color: var(--neutral-stroke-divider-rest, rgba(127,127,127,.2)) !important;
}
.dropdown-item {
    color: var(--neutral-foreground-rest, #1a1a1a) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--neutral-fill-stealth-hover, rgba(127,127,127,.12)) !important;
    color: var(--neutral-foreground-rest, #1a1a1a) !important;
}
.dropdown-divider {
    border-color: var(--neutral-stroke-divider-rest, rgba(127,127,127,.2)) !important;
}

/* --- Texto legible: variables legacy + utilidades de color de Bootstrap -----
   Causa raiz de "textos oscuros" en tema oscuro: modern-bootstrap.css pinta
   texto con var(--rapso-dark) (#1e293b slate) y var(--rapso-blue), y Bootstrap
   con .text-dark/.text-body (#212529). Sobre cards oscuras quedan ilegibles
   (contraste ~1.0). Se corrige en la RAIZ redefiniendo las variables y las
   utilidades de forma theme-aware:
     --rapso-dark -> foreground (claro en oscuro, oscuro en claro)
     --rapso-blue -> acento derivado del tema (legible en ambos)
   Los fondos SIEMPRE-oscuros que usaban --rapso-dark (.sidebar/.offcanvas) se
   pasaron a literal #1e293b en modern-bootstrap.css para no aclararse. */
:root {
    --rapso-dark: var(--neutral-foreground-rest, #1e293b);
    --rapso-blue: var(--accent-fill-rest, #2563eb);
}
main .text-dark, .text-dark,
main .text-black, .text-black,
main .text-body, .text-body {
    color: var(--neutral-foreground-rest, #212529) !important;
}
main .text-muted, .text-muted,
main .text-secondary, .text-secondary,
main .text-body-secondary, .text-body-secondary {
    color: var(--neutral-foreground-hint, #6c757d) !important;
}
main .text-primary, .text-primary {
    color: var(--accent-fill-rest, #0d6efd) !important;
}
/* Labels de switches: modern-bootstrap las fija a --rapso-dark con selector
   compuesto; ya cubierto por la redefinicion de la variable, pero se refuerza. */
.form-check.form-switch .form-check-label,
.form-check-label {
    color: var(--neutral-foreground-rest, #212529) !important;
}

/* --- Botones outline: legibles sobre fondo oscuro ------------------------- */
main .btn-outline-primary, .btn-outline-primary {
    color: var(--accent-fill-rest, #0d6efd) !important;
    border-color: var(--accent-fill-rest, #0d6efd) !important;
}
main .btn-outline-primary:hover, .btn-outline-primary:hover {
    color: var(--neutral-fill-inverse-rest, #fff) !important;
    background-color: var(--accent-fill-rest, #0d6efd) !important;
}
/* Rojo de peligro theme-aware: #dc3545 (Bootstrap) es legible en claro pero
   da ~3.3 sobre card oscura; en oscuro se aclara a #f16d78. La variable
   invierte segun data-bs-theme para no regresar el contraste en claro. */
:root { --rapso-danger-text: #dc3545; }
:root[data-bs-theme="dark"] { --rapso-danger-text: #f16d78; }
main .btn-outline-danger, .btn-outline-danger {
    color: var(--rapso-danger-text, #f16d78) !important;
    border-color: var(--rapso-danger-text, #f16d78) !important;
}
main .btn-outline-danger:hover, .btn-outline-danger:hover {
    color: #fff !important;
    background-color: #dc3545 !important;
}

/* --- Alerts: contraste ---------------------------------------------------- */
.alert {
    color: var(--neutral-foreground-rest, var(--bs-body-color));
}