/* ============================================================================
   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;
}
/* 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;
}

/* --- 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));
}