/* /Components/Layout/AccessibilityWidget.razor.rz.scp.css */
.a11y-widget[b-bnvf8v2nyj] {
    position: fixed;
    bottom: 33vh;
    right: 20px;
    z-index: 500;
}

.a11y-trigger[b-bnvf8v2nyj] {
    position: relative;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-a11y-btn);
    height: var(--ui-a11y-btn);
    border-radius: 50%;
    border: none;
    /* Azul de accesibilidad (#005A9C), no el color de la marca: es el tono con
     el que se señala accesibilidad en todos lados —el mismo del símbolo
     internacional— y la gente que lo necesita lo busca por color antes que por
     forma. Además aguanta cualquier cambio de marca sin dejar de leerse: con
     texto blanco encima da 7,1 de contraste. */
    background: #005a9c;
    color: #ffffff;
    font-size: var(--ui-a11y-fz);
    cursor: pointer;
    box-shadow: var(--synbex-shadow);
    transition: transform 0.15s ease;
}

.a11y-trigger:hover[b-bnvf8v2nyj] {
    transform: scale(1.06);
}

/* El panel se abre arriba del botón, pero nunca más alto que el espacio que hay
   entre el botón y el borde de arriba de la pantalla: antes, en pantallas bajas
   (portátiles, celular acostado, ventana a media altura) se salía por arriba y no
   se veía el comienzo. Si las opciones no caben, el cuerpo se desliza por dentro
   y el título con la X queda siempre a la vista.

   Espacio disponible = alto de la pantalla − distancia del botón al borde de abajo
   (33vh) − alto del botón (--ui-a11y-btn) − separación (12px) − margen de arriba (16px).
   dvh en vez de vh: en el celular la barra del navegador aparece y desaparece. */
.a11y-panel[b-bnvf8v2nyj] {
    /* Por encima de .synbex-menu-overlay (z-index 40), que es la capa que cierra
       al tocar afuera: sin esto la capa quedaría encima y taparía los controles. */
    z-index: 50;
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    display: flex;
    flex-direction: column;
    width: 280px;
    max-width: calc(100vw - 40px);
    max-height: calc(67vh - var(--ui-a11y-btn) - 28px);
    max-height: calc(67dvh - 76px);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    overflow: hidden;
}

.a11y-panel-header[b-bnvf8v2nyj] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--synbex-border);
    font-weight: 700;
    font-size: 14px;
    color: var(--synbex-text);
}

.a11y-panel-close[b-bnvf8v2nyj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--synbex-radius-md);
    background: transparent;
    color: var(--synbex-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.a11y-panel-close:hover[b-bnvf8v2nyj] {
    background: var(--synbex-primary-soft);
    color: var(--synbex-text);
}

.a11y-panel-body[b-bnvf8v2nyj] {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.a11y-row[b-bnvf8v2nyj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--synbex-border);
}

.a11y-row-label[b-bnvf8v2nyj] {
    font-size: 14px;
    color: var(--synbex-text);
}

.a11y-scale-controls[b-bnvf8v2nyj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.a11y-scale-btn[b-bnvf8v2nyj] {
    width: 32px;
    height: 32px;
    border-radius: var(--synbex-radius-md);
    border: 1px solid var(--synbex-border);
    background: transparent;
    color: var(--synbex-text);
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}

.a11y-scale-btn:hover:not(:disabled)[b-bnvf8v2nyj] {
    background: var(--synbex-primary-soft);
}

.a11y-scale-btn:disabled[b-bnvf8v2nyj] {
    opacity: 0.4;
    cursor: not-allowed;
}

.a11y-scale-value[b-bnvf8v2nyj] {
    font-size: 13px;
    color: var(--synbex-text-muted);
    min-width: 40px;
    text-align: center;
}

.a11y-reset[b-bnvf8v2nyj] {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: var(--synbex-radius-md);
    border: 1px solid var(--synbex-border);
    background: transparent;
    color: var(--synbex-text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.a11y-reset:hover[b-bnvf8v2nyj] {
    background: var(--synbex-primary-soft);
    color: var(--synbex-text);
}

@media (max-width: 600px) {
    /* 78px (no 20px) porque en las pantallas autenticadas la barra inferior
       (MobileTabBar) ocupa esa esquina — así el botón queda arriba de ella.
       AccessibilityWidget es global (vive también en el login, sin esa barra),
       así que no hay forma de diferenciar por CSS; se usa el mismo valor más
       alto en ambos casos. */
    .a11y-widget[b-bnvf8v2nyj] {
        bottom: 78px;
        right: 16px;
    }

    /* Mismo cálculo con el botón a 78px del borde de abajo. */
    .a11y-panel[b-bnvf8v2nyj] {
        max-height: calc(100vh - 154px);
        max-height: calc(100dvh - 154px);
    }
}

/* Pantalla muy baja (celular acostado, ventana achicada): arriba del botón casi no
   queda espacio y el panel quedaría con dos opciones a la vista. Ahí se abre al LADO
   del botón, fijo a la pantalla y ocupando todo el alto disponible, deslizable. */
@media (max-height: 520px) {
    .a11y-panel[b-bnvf8v2nyj] {
        position: fixed;
        top: 12px;
        bottom: 12px;
        right: 84px;
        max-height: none;
        max-width: calc(100vw - 100px);
    }
}
/* /Components/Layout/BulkSendOverlay.razor.rz.scp.css */
/* El marco (.loading-overlay / .loading-overlay-card / spinner / message) es
   global y vive en app.css — acá solo va lo propio del envío masivo. */

.bulk-send-card[b-h8hu68bnko] {
    max-width: 380px;
    width: calc(100vw - 40px);
}

.bulk-send-progress[b-h8hu68bnko] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: -4px;
}

.bulk-send-bar[b-h8hu68bnko] {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--synbex-primary-soft);
    overflow: hidden;
}

.bulk-send-bar-fill[b-h8hu68bnko] {
    height: 100%;
    border-radius: 999px;
    background: var(--synbex-primary);
    transition: width 0.35s ease;
}

.bulk-send-count[b-h8hu68bnko] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    /* Tabular para que el número no baile de ancho al pasar de 9 a 10 a 100. */
    font-variant-numeric: tabular-nums;
    color: var(--synbex-text-muted);
}

.bulk-send-count-failed[b-h8hu68bnko] {
    color: var(--synbex-danger);
}

/* ---- Fase "listo": palomita que se dibuja sola ---- */

.bulk-send-check svg[b-h8hu68bnko] {
    width: 56px;
    height: 56px;
}

.bulk-send-check-circle[b-h8hu68bnko] {
    fill: none;
    stroke: var(--synbex-success);
    stroke-width: 3;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: bulk-send-draw-b-h8hu68bnko 0.45s ease-out forwards;
}

.bulk-send-check-mark[b-h8hu68bnko] {
    fill: none;
    stroke: var(--synbex-success);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: bulk-send-draw-b-h8hu68bnko 0.3s 0.4s ease-out forwards;
}

@keyframes bulk-send-draw-b-h8hu68bnko {
    to {
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bulk-send-check-circle[b-h8hu68bnko],
    .bulk-send-check-mark[b-h8hu68bnko] {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* ---- Fase "con fallos" ---- */

.bulk-send-warn[b-h8hu68bnko] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
}

.bulk-send-warn svg[b-h8hu68bnko] {
    width: 28px;
    height: 28px;
}

.bulk-send-failed-title[b-h8hu68bnko] {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--synbex-danger);
}

.bulk-send-failed-list[b-h8hu68bnko] {
    width: 100%;
    max-height: 190px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.bulk-send-failed-list li[b-h8hu68bnko] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
}

.bulk-send-failed-mail[b-h8hu68bnko] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--synbex-text);
    /* Un correo largo no debe estirar la tarjeta ni desbordarla. */
    overflow-wrap: anywhere;
}

.bulk-send-failed-reason[b-h8hu68bnko] {
    font-size: 11.5px;
    color: var(--synbex-text-muted);
}

.bulk-send-failed-more[b-h8hu68bnko] {
    margin: 0;
    font-size: 12px;
    color: var(--synbex-text-muted);
}
/* /Components/Layout/DashboardLayout.razor.rz.scp.css */
.dashboard[b-6zci9ow8vv] {
    display: flex;
    min-height: calc(100vh / var(--synbex-a11y-zoom, 1));
    background: var(--synbex-bg);
}

.dashboard-sidebar[b-6zci9ow8vv] {
    width: var(--ui-sidebar-ancho);
    flex-shrink: 0;
    background: var(--synbex-surface);
    /* Sin línea vertical a la derecha: el menú y el área de contenido ya se
       separan por el panel flotante, y la línea volvía a marcar la escuadra
       dura que se quiso quitar. */
    box-sizing: border-box;
}

/* El fondo/borde vive en .dashboard-sidebar (arriba), que es un hijo flex de
   .dashboard sin altura propia — por default (align-items: stretch) se estira
   para igualar SIEMPRE la altura real del contenido principal, sin importar
   cuánto crezca (así el fondo del menú llega hasta abajo del todo en páginas
   largas, en vez de cortarse a los 100vh).

   El clavado a la altura de pantalla (para que "Mejorar plan"/derechos de autor
   no queden muy por debajo del viewport en pantallas largas, y el propio menú
   se desplace internamente si tiene más ítems de los que caben) vive aparte, en
   este wrapper interno — así no limita la altura del fondo de arriba.
   Solo en escritorio: en celular el menú ya es un cajón flotante aparte (ver
   @media max-width:900px más abajo), con su propio height:100vh en
   .dashboard-sidebar directamente. */
.dashboard-sidebar-inner[b-6zci9ow8vv] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--ui-sidebar-pad-y) var(--ui-sidebar-pad-x);
    box-sizing: border-box;
}

@media (min-width: 901px) {
    .dashboard-sidebar-inner[b-6zci9ow8vv] {
        /* fixed (no sticky): sticky solo queda "pegado" mientras el contenedor
           que lo rodea (.dashboard-sidebar, estirado a la altura de la página)
           tiene más alto que su propio tamaño — apenas la página no es MUCHO
           más alta que la ventana, ese margen se agota rápido y el pie de
           página empieza a subirse y desaparecer con un scroll mínimo, en vez
           de quedarse siempre visible. fixed no depende de nada de eso: queda
           anclado a la pantalla en sí, sin importar cuánto suba o baje la
           página ni cuán alto sea el contenido — es lo que en realidad se
           quería con "siempre pegado abajo del panel".
        */
        position: fixed;
        top: 0;
        left: 0;
        /* position:fixed saca el elemento del flujo normal, así que ya no
           hereda el ancho de .dashboard-sidebar (250px) como pasaba con
           sticky — hay que repetirlo acá a mano. */
        width: var(--ui-sidebar-ancho);
        height: calc(100vh / var(--synbex-a11y-zoom, 1));
        overflow-y: auto;
        z-index: 20;
    }
}

/* ==========================================================================
   Menú lateral colapsado a solo íconos — pedido explícito, "como el menú de
   Instagram para computadora": entre celular (900px, breakpoint de arriba) y
   1800px, el menú por defecto muestra solo los íconos en una franja angosta;
   acercar el mouse lo expande con animación mostrando las letras, y NO se
   cierra solo al sacar el mouse — se queda abierto hasta que se hace clic
   afuera o se scrollea afuera (la lógica de cuándo vive en
   sidebar-hover-expand.js, esto solo pinta los dos estados). Arriba de
   1800px sigue exactamente igual que siempre (menú fijo, siempre expandido).

   El truco para que expandir NO empuje el contenido (como en Instagram, se
   abre ENCIMA sin mover nada): .dashboard-sidebar (el hueco reservado en el
   flex layout) se queda SIEMPRE en el ancho angosto; solo
   .dashboard-sidebar-inner (que ya es position:fixed por la regla de arriba)
   crece de ancho al expandirse, quedando como una capa flotante encima del
   contenido — por eso necesita más z-index que el header
   (position:sticky, z-index:30) solo mientras está expandido.

   74px = el mismo relleno que ya existe alrededor del ícono (16px de
   .dashboard-sidebar-inner + 12px de .dashboard-nav-link a cada lado + 18px
   del ícono) — así el ícono NUNCA se mueve ni cambia de tamaño entre
   colapsado y expandido (pedido explícito). */
@media (min-width: 901px) and (max-width: 1800px) {
    .dashboard-sidebar[b-6zci9ow8vv] {
        width: var(--ui-sidebar-rail);
    }

    .dashboard-sidebar-inner[b-6zci9ow8vv] {
        width: var(--ui-sidebar-rail);
        overflow-x: hidden;
        transition: width 0.22s ease, box-shadow 0.22s ease;
    }

    /* Que las letras NO se reacomoden mientras el menú se abre (pedido
       explícito: "que ya esté acomodada desde el tamaño ya completo").

       Qué pasaba: lo único que se anima es el ancho del panel, de la franja
       angosta al ancho completo. Todo lo de adentro tomaba ese ancho en cada
       cuadro de la animación, así que el navegador volvía a partir los textos
       una y otra vez mientras crecía — se veía "Todos los derechos reservados"
       en tres renglones, después en dos, y las etiquetas del menú saltando de
       sitio.

       La solución no es animar más rápido ni animar el texto: es que el
       contenido esté SIEMPRE maquetado al ancho final, y que lo que cambie sea
       nada más cuánto se alcanza a ver de él. El overflow-x:hidden de arriba lo
       recorta, así que al abrirse funciona como una cortina que descubre un
       texto que ya estaba puesto en su lugar definitivo. Cero reacomodos. */
    .dashboard-nav-bottom[b-6zci9ow8vv] {
        width: calc(var(--ui-sidebar-ancho) - 2 * var(--ui-sidebar-pad-x));
        flex-shrink: 0;
    }

    /* El logo queda FUERA de esto a propósito (pedido explícito: "el efecto en el
       logo sí me gusta"). Al no tener ancho propio sigue tomando el del panel, así
       que se estira junto con la animación — que es justo lo que se ve bien ahí:
       una imagen creciendo no se lee peor mientras crece, un texto partiéndose sí. */

    /* El menú es position:absolute con left/right, así que su ancho también
       seguía al del panel: se le fija a mano el mismo que tiene expandido
       (el panel menos los 16px de cada lado que ya usaba el right). */
    .dashboard-nav[b-6zci9ow8vv] {
        right: auto;
        width: calc(var(--ui-sidebar-ancho) - 32px);
    }

    .dashboard-sidebar.is-expanded .dashboard-sidebar-inner[b-6zci9ow8vv] {
        width: var(--ui-sidebar-ancho);
        z-index: 35;
        /* .dashboard-sidebar-inner es position:fixed — al crecer más ancho
           que .dashboard-sidebar (su hueco reservado, quieto en 74px), la
           franja de más allá de esos 74px queda FUERA del fondo de
           .dashboard-sidebar y se veía transparente (bug real, reportado
           explícito: "el fondo es transparente, solo se ven las letras").
           Necesita su propio fondo/borde acá para pintarse sólido en todo
           su ancho, sin importar cuánto haya crecido. */
        background: var(--synbex-surface);
        /* Sin línea a la derecha, igual que el menú normal: acá la sombra ya
           es la que lo despega del contenido. */
        box-shadow: var(--synbex-shadow);
    }

    /* Sin marca/logo en la franja angosta — un logo de conjunto a ancho
       completo se vería aplastado en 74px; reaparece al expandir.
       visibility (no display:none): oculta el logo pero SIGUE reservando su
       mismo alto de siempre, así el menú de abajo no sube ni baja al
       colapsar/expandir (bug real, reportado explícito — "tiene que estar
       siempre a la misma altura"). */
    .dashboard-sidebar:not(.is-expanded) .dashboard-brand[b-6zci9ow8vv] {
        visibility: hidden;
    }

    /* El texto de cada ítem (el <span> sin clase, junto al ícono) se oculta
       colapsado; al expandir reaparece y el propio overflow-x:hidden de
       arriba lo va revelando al mismo ritmo que crece el ancho, sin
       necesidad de animar el texto por separado. */
    .dashboard-sidebar:not(.is-expanded)[b-6zci9ow8vv]  .dashboard-nav-link-icon span:not(.dashboard-nav-icon),
    .dashboard-sidebar:not(.is-expanded)[b-6zci9ow8vv]  .dashboard-nav-toggle-label span:not(.dashboard-nav-icon) {
        visibility: hidden;
    }

    /* Sin flecha de "expandir" ni submenú de texto en la franja angosta — al
       expandir por hover ya se ve todo el árbol completo de una vez. */
    .dashboard-sidebar:not(.is-expanded) .dashboard-nav-toggle[b-6zci9ow8vv]::after {
        display: none;
    }

    .dashboard-sidebar:not(.is-expanded) .dashboard-nav-submenu[b-6zci9ow8vv] {
        display: none;
    }

    /* "Mejorar plan" y el copyright tampoco caben en 74px — se ocultan junto
       con todo lo demás y reaparecen al expandir. */
    .dashboard-sidebar:not(.is-expanded) .dashboard-nav-bottom[b-6zci9ow8vv] {
        visibility: hidden;
    }

    /* Lo seleccionado, en la franja angosta: cambia SOLO el ícono de color y el
       fondo se queda igual al de los demás (pedido explícito).

       Por qué: la pastilla de color mide lo mismo que el ítem, y en una franja de
       64px eso es casi todo el ancho — se leía como un bloque suelto pegado al
       borde, no como "estás acá". El ícono teñido dice lo mismo sin ensuciar la
       franja. Expandido no se toca: ahí la pastilla ocupa el ancho de un ítem
       completo, con su texto adentro, y se ve como debe.

       El color no hace falta repetirlo: la regla de .active ya lo pone en el
       enlace y el dibujo lo hereda (usa currentColor). Acá solo se apaga el
       fondo y se le saca el velo de opacidad al ícono para que rinda el tono. */
    .dashboard-sidebar:not(.is-expanded)[b-6zci9ow8vv]  .dashboard-nav-link.active {
        background: transparent;
    }

    .dashboard-sidebar:not(.is-expanded)[b-6zci9ow8vv]  .dashboard-nav-link.active .dashboard-nav-icon {
        opacity: 1;
    }
}

.dashboard-brand[b-6zci9ow8vv] {
    display: flex;
    align-items: center;
    padding: 0 8px;
    margin-bottom: 32px;
}

.dashboard-brand-badge[b-6zci9ow8vv] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: var(--ui-marca-pad-y) var(--ui-sidebar-pad-x);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    box-sizing: border-box;
}

.dashboard-brand-mark[b-6zci9ow8vv] {
    width: var(--ui-marca-caja);
    height: var(--ui-marca-caja);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: var(--ui-marca-caja-fz);
    flex-shrink: 0;
}

.dashboard-brand-name[b-6zci9ow8vv] {
    font-weight: 700;
    font-size: var(--ui-marca-nombre);
    letter-spacing: -0.01em;
    color: #fff;
}

.dashboard-brand-logo-box[b-6zci9ow8vv] {
    width: 100%;
    padding: 10px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--synbex-border);
    box-sizing: border-box;
}

.dashboard-brand-logo[b-6zci9ow8vv] {
    display: block;
    width: 100%;
    height: var(--ui-marca-logo-alto);
    object-fit: contain;
}

.dashboard-sidebar-footer[b-6zci9ow8vv] {
    text-align: center;
}

.dashboard-copyright[b-6zci9ow8vv] {
    display: block;
    font-size: var(--ui-fz-micro);
    line-height: 1.4;
    color: var(--synbex-text-muted);
}

/* Los ítems del menú van centrados verticalmente en la pantalla — pedido
   explícito, "sin contar el logo, sin contar abajo, nada de nada".
   Centrado 100% con CSS. Antes esto lo calculaba un JS midiendo alturas,
   pero ese cálculo solo puede correr DESPUÉS de que la página ya se pintó
   — de ahí el parpadeo reportado ("primero aparece arriba, y después se
   centra"). El navegador aplica el CSS en el primer pintado, así que ya
   nace centrado: nunca hay un instante fuera de lugar, ni al cargar ni al
   navegar a otra página. */
.dashboard-nav[b-6zci9ow8vv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Solo en escritorio: .dashboard-sidebar-inner ya es position:fixed con
   height:100vh (ver más arriba), así que posicionar el menú absoluto contra
   él y correrlo media altura hacia arriba lo deja en el centro EXACTO de la
   pantalla. Sacarlo del flujo es justamente lo que hace que el logo (arriba)
   y el pie (abajo) no cuenten: con el menú dentro del flujo, flexbox lo
   centraba en el hueco QUE SOBRA entre esos dos, que no es el centro de la
   pantalla si uno pesa más que el otro (con el logo oculto pero ocupando su
   espacio, quedaba 46px más abajo).
   El pie sigue pegado al fondo por su propio margin-top:auto, que absorbe
   igual todo el espacio libre aunque el menú ya no esté en el flujo.
   En celular NO aplica: ahí el menú es un cajón deslizable que se desplaza
   con su propio scroll, y sacarlo del flujo lo rompería. */
@media (min-width: 901px) {
    .dashboard-nav[b-6zci9ow8vv] {
        position: absolute;
        left: 16px;
        right: 16px;
        /* Punto de ARRANQUE, no "quedar siempre en el medio" — pedido
           explícito para los dos menús de computadora: que empiecen
           centrados y que al abrir un grupo crezcan únicamente hacia abajo,
           sin subirse nunca.

           Centrar de verdad y a la vez no moverse son cosas incompatibles:
           un bloque centrado crece parejo hacia los dos lados por
           definición. Por eso la posición de arranque se calcula una sola
           vez (sidebar-nav-anchor.js: mide cuánto mide el menú CERRADO, que
           depende de los módulos del conjunto y del perfil de quien entró,
           algo que el CSS no puede saber) y llega acá como variables. Abrir
           o cerrar un grupo no las cambia: el menú queda clavado donde
           arrancó y lo que sobra se desplaza por dentro.

           Los valores por defecto son el centrado de siempre, así que si el
           script no llegara a correr el menú se sigue viendo centrado en vez
           de quedar en una posición rara. */
        top: var(--synbex-nav-top, 50%);
        transform: var(--synbex-nav-shift, translateY(-50%));
        /* Tope de alto + desplazamiento propio. Sin esto, al abrir un
           submenú el menú crece PARA LOS DOS LADOS desde el centro: se
           trepaba encima del logo, y lo que se salía por arriba quedaba
           imposible de alcanzar, porque el scroll de un contenedor solo
           llega a lo que se desborda hacia ABAJO, nunca hacia arriba (bug
           reportado; medido: con "Portería > Registros" abierto el menú ya
           tapaba el logo, y con todo abierto el primer ítem quedaba 233px
           fuera de la pantalla sin ninguna forma de subir hasta él).
           El descuento va al DOBLE de lo que se reserva de cada lado
           justamente porque el bloque está centrado y crece parejo hacia
           arriba y hacia abajo: 140px arriba (el logo del conjunto ocupa
           hasta 132px cuando es una imagen, no el escudo chico) y 140px
           abajo ("Mejorar plan" + derechos de autor ocupan 118px).
           Al llegar al tope el menú deja de moverse y se desplaza por
           dentro — que es lo pedido: que se pueda bajar y que se quede
           siempre en la misma posición en vez de reacomodarse encima del
           logo cada vez que se abre un submenú. */
        max-height: var(--synbex-nav-max-height, calc(100vh / var(--synbex-a11y-zoom, 1) - 280px));
        overflow-y: auto;
        /* El alto es lo único que se limita: sin esto, activar overflow-y
           vuelve "auto" también el eje X y aparecería una barra horizontal
           de más (la vertical le quita unos px de ancho al contenido). */
        overflow-x: hidden;
    }
}

/* (El anclaje vale ahora para los DOS menús de computadora — el de letras y
   el de solo íconos — así que vive junto al resto de sus reglas, arriba. De
   paso desaparece la franja entre 1800 y 1801px que antes quedaba sin dueño
   y volvía al centrado por porcentaje.) */

/* NavLink renderiza su <a> dentro de un componente del framework: hace falta
   ::deep para que el CSS aislado de este layout lo alcance (mismo motivo que
   InputText en Login.razor.css). */
[b-6zci9ow8vv] .dashboard-nav-link {
    display: block;
    padding: var(--ui-nav-pad-y) var(--ui-nav-pad-x);
    border-radius: var(--synbex-radius-md);
    font-size: var(--ui-nav-fz);
    font-weight: 500;
    color: var(--synbex-text-muted);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-6zci9ow8vv] .dashboard-nav-link:hover {
    background: var(--synbex-primary-soft);
    color: var(--synbex-text);
}

[b-6zci9ow8vv] .dashboard-nav-link.active {
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    font-weight: 600;
}

.dashboard-nav-bottom[b-6zci9ow8vv] {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--synbex-border);
}

.dashboard-nav-toggle[b-6zci9ow8vv] {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 30px;
}

/* Chrome/Safari también dibujan su propio triángulo nativo aparte del ::marker;
   list-style:none no lo quita ahí, hay que apagarlo explícito. */
.dashboard-nav-toggle[b-6zci9ow8vv]::-webkit-details-marker {
    display: none;
}

.dashboard-nav-toggle[b-6zci9ow8vv]::marker {
    content: "";
}

.dashboard-nav-toggle:has(.dashboard-nav-toggle-label)[b-6zci9ow8vv] {
    padding: 0 30px 0 0;
}

[b-6zci9ow8vv] .dashboard-nav-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--ui-nav-pad-y) var(--ui-nav-pad-x);
    color: inherit;
    text-decoration: none;
}

[b-6zci9ow8vv] .dashboard-nav-link-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-nav-icon[b-6zci9ow8vv] {
    display: inline-flex;
    flex-shrink: 0;
    opacity: 0.85;
}

.dashboard-nav-icon svg[b-6zci9ow8vv] {
    width: var(--ui-nav-icono);
    height: var(--ui-nav-icono);
}

/* Flecha explícita de "esto se puede expandir" — más clara que el triángulo
   nativo del <summary>, que muchos usuarios no notan que es clicable. */
.dashboard-nav-toggle[b-6zci9ow8vv]::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--synbex-text-muted);
    border-bottom: 2px solid var(--synbex-text-muted);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

/* Se marca como activo mientras el <details> está expandido — nada que ver con
   la página actual, es puro estado abierto/cerrado del propio submenú, reactivo
   de inmediato porque usa el atributo nativo `open` (sin JS ni C#). */
details[open] > .dashboard-nav-toggle[b-6zci9ow8vv] {
    background: var(--synbex-primary-soft) !important;
    color: var(--synbex-primary) !important;
    font-weight: 600;
}

details[open] > .dashboard-nav-toggle[b-6zci9ow8vv]::after {
    transform: translateY(-35%) rotate(-135deg);
    border-color: var(--synbex-primary);
}

/* Círculo indicador al inicio de cada ítem de submenú, incluidos los que a su vez
   abren otro submenú (ej. "Registros" dentro de "Portería") — la flecha de la
   derecha ya avisa que se puede expandir, pero sin el punto a la izquierda un
   sub-submenú se veía distinto al resto de ítems de su misma lista y pasaba
   desapercibido como parte del menú. */
.dashboard-nav-submenu[b-6zci9ow8vv]  .dashboard-nav-link:not(.dashboard-nav-toggle),
.dashboard-nav-submenu[b-6zci9ow8vv]  .dashboard-nav-toggle-label {
    display: flex;
    align-items: center;
    gap: 9px;
}

.dashboard-nav-submenu[b-6zci9ow8vv]  .dashboard-nav-link:not(.dashboard-nav-toggle)::before,
.dashboard-nav-submenu[b-6zci9ow8vv]  .dashboard-nav-toggle-label::before {
    content: "";
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

/* Notificación sin leer en esa sección: el mismo punto de la izquierda se pone
   naranja y parpadea, en vez de agregar un indicador aparte. */
.dashboard-nav-submenu[b-6zci9ow8vv]  .dashboard-nav-link.has-unread::before {
    background: #d97706;
    opacity: 1;
    animation: dashboard-nav-unread-blink-b-6zci9ow8vv 1.4s ease-in-out infinite;
}

@keyframes dashboard-nav-unread-blink-b-6zci9ow8vv {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.55);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(217, 119, 6, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-nav-submenu[b-6zci9ow8vv]  .dashboard-nav-link.has-unread::before {
        animation: none;
    }
}

.dashboard-nav-submenu[b-6zci9ow8vv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
    padding-left: 12px;
}

.dashboard-content[b-6zci9ow8vv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* El mismo gris del menú: es el fondo sobre el que flota .dashboard-main. */
    background: var(--synbex-surface);
}

.dashboard-header[b-6zci9ow8vv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: var(--ui-header-pad-y) var(--ui-pad-lateral);
    /* Sin línea debajo: la cabecera y el contenido comparten el gris del menú,
       y esa línea cortaba el conjunto en dos. */
    background: var(--synbex-surface);
    position: sticky;
    top: 0;
    z-index: 30;
}

.dashboard-header-actions[b-6zci9ow8vv] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dashboard-nav-toggle-input[b-6zci9ow8vv] {
    display: none;
}

.dashboard-nav-toggle-btn[b-6zci9ow8vv] {
    display: none;
}

.dashboard-nav-backdrop[b-6zci9ow8vv] {
    display: none;
}

.dashboard-user[b-6zci9ow8vv] {
    font-size: var(--ui-usuario-fz);
    color: var(--synbex-text-muted);
}

.dashboard-user-tag[b-6zci9ow8vv] {
    margin-left: 6px;
    padding: 2px var(--ui-etiqueta-pad-x);
    font-size: var(--ui-etiqueta-fz);
    font-weight: 600;
    color: var(--synbex-primary);
    background: var(--synbex-primary-soft);
    border-radius: 999px;
    white-space: nowrap;
}

/* Oculto en escritorio (ahí el correo ya sale arriba en el header) — se
   muestra solo en celular, ver @media (max-width: 900px) más abajo. */
.dashboard-sidebar-account[b-6zci9ow8vv] {
    display: none;
}

.dashboard-logout[b-6zci9ow8vv] {
    padding: var(--ui-boton-pad-y) var(--ui-boton-pad-x);
    font-size: var(--ui-boton-fz);
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: #b91c1c;
    border: 1px solid #b91c1c;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
    /* Mismo resplandor que el botón principal, pero en el rojo del propio
       botón: con el morado del primario se vería como de otra familia. */
    box-shadow: 0 6px 16px -6px color-mix(in srgb, #b91c1c 55%, transparent);
}

.dashboard-logout:hover[b-6zci9ow8vv] {
    filter: brightness(0.92);
    box-shadow: 0 8px 20px -6px color-mix(in srgb, #b91c1c 65%, transparent);
}

/* El contenido "flota" sobre el mismo gris claro del menú y de la cabecera.
   Antes iba pegado a los dos, y la unión con el menú de la izquierda y con la
   barra de arriba formaba una escuadra dura.

   El margen es de 10px y no de 1: con 1 el redondeo de las esquinas no se
   llegaría a ver contra el fondo, y el efecto de "separado" no se notaría. */
.dashboard-main[b-6zci9ow8vv] {
    flex: 1;
    margin: 10px;
    padding: var(--ui-pad-lateral);
    border-radius: 10px;
    background: var(--synbex-bg);
    box-sizing: border-box;
}

#blazor-error-ui[b-6zci9ow8vv] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

@media (max-width: 900px) {
    .dashboard-nav-toggle-btn[b-6zci9ow8vv] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        border-radius: var(--synbex-radius-md);
        border: 1px solid var(--synbex-border);
        background: transparent;
        font-size: 18px;
        line-height: 1;
        color: var(--synbex-text);
        cursor: pointer;
    }

    .dashboard-header[b-6zci9ow8vv] {
        justify-content: space-between;
        padding: 12px 16px;
    }

    .dashboard-main[b-6zci9ow8vv] {
        padding: 16px;
    }

    /* El sidebar pasa a ser un cajón flotante que se desliza sobre el contenido —
       mismo truco checkbox+label sin JS que ya usan los <details> de los submenús,
       porque el Layout no es interactivo (@onclick no funciona acá). */
    .dashboard-sidebar[b-6zci9ow8vv] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 260px;
        /* Divididos por el zoom de accesibilidad (Tamaño de texto): accessibility.js
           escala todo #synbex-app-content con zoom, y un 100vh adentro termina
           midiendo el 87 % de la pantalla al elegir 87 % — el cajón quedaba corto y
           dejaba un espacio vacío abajo (bug real, reportado). Mismo arreglo que ya
           tenía el menú de computadora. */
        max-width: calc(82vw / var(--synbex-a11y-zoom, 1));
        height: calc(100vh / var(--synbex-a11y-zoom, 1));
        z-index: 50;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--synbex-shadow);
    }

    .dashboard-nav-toggle-input:checked ~ .dashboard-sidebar[b-6zci9ow8vv] {
        transform: translateX(0);
    }

    .dashboard-nav-toggle-input:checked ~ .dashboard-nav-backdrop[b-6zci9ow8vv] {
        display: block;
    }

    .dashboard-nav-backdrop[b-6zci9ow8vv] {
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(17, 24, 39, 0.4);
    }

    /* El correo ya no sale arriba en celular — se muestra abajo en el menú
       desplegable de la izquierda (.dashboard-sidebar-account) para no ocupar
       espacio del header en pantallas chicas. */
    .dashboard-user[b-6zci9ow8vv] {
        display: none;
    }

    .dashboard-sidebar-account[b-6zci9ow8vv] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 12px 4px;
        margin-top: 4px;
        border-top: 1px solid var(--synbex-border);
    }

    .dashboard-sidebar-account-label[b-6zci9ow8vv] {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--synbex-text-muted);
    }

    .dashboard-sidebar-account-email[b-6zci9ow8vv] {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13.5px;
        color: var(--synbex-text);
    }
}

@media (max-width: 480px) {
    .dashboard-header-actions[b-6zci9ow8vv] {
        gap: 10px;
    }

    .dashboard-main[b-6zci9ow8vv] {
        padding: 12px;
    }

    /* Botón e ícono del menú (☰) más grandes en celular — más fácil de tocar. */
    .dashboard-nav-toggle-btn[b-6zci9ow8vv] {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
}

@media (max-width: 600px) {
    /* Configuración se muda a la barra inferior (MobileTabBar) en móvil — se
       oculta el ícono de engranaje de arriba para no repetir el mismo acceso
       dos veces en la misma pantalla. */
    .dashboard-header-actions[b-6zci9ow8vv]  .settings-menu {
        display: none;
    }

    /* Deja espacio abajo para que el contenido no quede tapado por la barra
       inferior fija. */
    .dashboard-main[b-6zci9ow8vv] {
        padding-bottom: 84px;
    }
}

/* El pie del menú en dos renglones: el año y la marca arriba, la leyenda abajo.
   Cada mitad es un bloque propio, así el corte es siempre el mismo y no depende
   de dónde decida partir el navegador según el ancho del menú. */
.dashboard-copyright-linea[b-6zci9ow8vv] {
    display: block;
}
/* /Components/Layout/LoadingOverlay.razor.rz.scp.css */
/* Las reglas .loading-overlay* viven en wwwroot/app.css (global), no acá.

   Motivo: BulkSendOverlay.razor reusa exactamente el mismo marco visual, y el CSS
   aislado de este componente NO alcanza el markup de otro componente. Tenerlas
   duplicadas en los dos .razor.css era garantía de que se fueran separando con el
   tiempo. Mismo criterio que MobileTabBar.razor.css. */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-rcyjg8zi1o] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-rcyjg8zi1o] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MobileTabBar.razor.rz.scp.css */
/* El layout de esta barra vive en wwwroot/app.css (no aquí) — el <MobileTabBar />
   se renderiza como hijo flex de `.dashboard` (ver DashboardLayout.razor), y una
   regla aislada por componente no siempre gana esa pelea de forma predecible
   contra el `display:flex` del contenedor padre. Puesta en el CSS global no hay
   ninguna duda de que se aplica. */
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
.notification-bell[b-v8c56i6xw7] {
    position: relative;
}

.notification-bell-trigger[b-v8c56i6xw7] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-btn-icono);
    height: var(--ui-btn-icono);
    border-radius: var(--synbex-radius-md);
    border: 1px solid var(--synbex-border);
    background: transparent;
    font-size: var(--ui-btn-icono-fz);
    /* Mismo gris apagado que los íconos de la barra inferior (MobileTabBar),
       para que se vea igual en tema claro y oscuro. */
    color: var(--synbex-text-muted);
    cursor: pointer;
    transition: background 0.15s ease;
}

.notification-bell-trigger:hover[b-v8c56i6xw7] {
    background: var(--synbex-primary-soft);
}

.notification-bell-badge[b-v8c56i6xw7] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* Contador sólido y de alto contraste — a diferencia de .badge-pending (un
       fondo translúcido pensado para pastillas de estado dentro de una tarjeta),
       acá el fondo debe verse aunque esté flotando sobre cualquier color detrás
       de la campanita. */
    background: #dc2626;
    color: #fff;
    border: 2px solid var(--synbex-surface);
}

/* Aviso visual cuando llega una notificación mientras la persona está mirando
   cualquier otra parte de la pantalla — la campanita "suena" (gira) y se enciende
   con un resplandor rojo breve, para que la mirada se vaya sola hacia ahí. */
@keyframes notification-bell-glow-b-v8c56i6xw7 {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45);
        color: var(--synbex-text-muted);
    }
    25% {
        box-shadow: 0 0 0 9px rgba(220, 38, 38, 0);
        color: #dc2626;
    }
    100% {
        box-shadow: 0 0 0 9px rgba(220, 38, 38, 0);
        color: var(--synbex-text-muted);
    }
}

@keyframes notification-bell-ring-b-v8c56i6xw7 {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-16deg); }
    30% { transform: rotate(14deg); }
    45% { transform: rotate(-11deg); }
    60% { transform: rotate(7deg); }
    75% { transform: rotate(-4deg); }
    88% { transform: rotate(2deg); }
}

@keyframes notification-bell-badge-pop-b-v8c56i6xw7 {
    0% { transform: scale(0.4); }
    55% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.notification-bell-trigger.notification-bell-arrived[b-v8c56i6xw7] {
    animation: notification-bell-glow-b-v8c56i6xw7 1.3s ease-out;
}

.notification-bell-trigger.notification-bell-arrived svg[b-v8c56i6xw7] {
    transform-origin: 50% 20%;
    animation: notification-bell-ring-b-v8c56i6xw7 0.8s ease-in-out;
}

.notification-bell-badge.notification-bell-badge-pop[b-v8c56i6xw7] {
    animation: notification-bell-badge-pop-b-v8c56i6xw7 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.notification-bell-dropdown[b-v8c56i6xw7] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 32px);
    max-height: 420px;
    overflow-y: auto;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    z-index: 50;
}

/* En celular, "right: 0" queda anclado a la campanita, que no está en el borde
   real de la pantalla (Configuración y Cerrar sesión van después) — el menú se
   corría fuera de la pantalla hacia la izquierda. Se fija al viewport en vez del
   botón, para que siempre quede completo y centrado bajo el encabezado. */
@media (max-width: 600px) {
    .notification-bell-dropdown[b-v8c56i6xw7] {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 84px);
    }
}

.notification-bell-dropdown-header[b-v8c56i6xw7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--synbex-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-text);
}

.notification-bell-mark-all[b-v8c56i6xw7] {
    font-size: 12px;
    font-weight: 600;
    color: var(--synbex-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.notification-bell-empty[b-v8c56i6xw7] {
    padding: 20px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--synbex-text-muted);
}

.notification-bell-list[b-v8c56i6xw7] {
    display: flex;
    flex-direction: column;
}

.notification-bell-load-more[b-v8c56i6xw7] {
    width: 100%;
    padding: 10px 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-primary);
    background: none;
    border: none;
    border-top: 1px solid var(--synbex-border);
    cursor: pointer;
}

.notification-bell-load-more:hover:not(:disabled)[b-v8c56i6xw7] {
    background: var(--synbex-primary-soft);
}

.notification-bell-load-more:disabled[b-v8c56i6xw7] {
    cursor: default;
    opacity: 0.6;
}

.notification-bell-cap-hint[b-v8c56i6xw7] {
    padding: 10px 14px;
    text-align: center;
    font-size: 12px;
    color: var(--synbex-text-muted);
    border-top: 1px solid var(--synbex-border);
    margin: 0;
}

.notification-bell-item[b-v8c56i6xw7] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--synbex-border);
    cursor: pointer;
    transition: background 0.15s ease;
}

.notification-bell-item:last-child[b-v8c56i6xw7] {
    border-bottom: none;
}

.notification-bell-item:hover[b-v8c56i6xw7] {
    background: var(--synbex-primary-soft);
}

.notification-bell-item-unread[b-v8c56i6xw7] {
    background: var(--synbex-primary-soft);
}

.notification-bell-item-body[b-v8c56i6xw7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.notification-bell-item-delete[b-v8c56i6xw7] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: -2px;
    border: none;
    border-radius: var(--synbex-radius-md);
    background: transparent;
    color: var(--synbex-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.notification-bell-item-delete svg[b-v8c56i6xw7] {
    width: 15px;
    height: 15px;
}

.notification-bell-item-delete:hover[b-v8c56i6xw7] {
    background: var(--synbex-surface);
    color: var(--synbex-danger);
}

.notification-bell-item-title[b-v8c56i6xw7] {
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-text);
}

.notification-bell-item-message[b-v8c56i6xw7] {
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

.notification-bell-item-date[b-v8c56i6xw7] {
    font-size: 11px;
    color: var(--synbex-text-muted);
}

/* Mensaje flotante de "tienes notificaciones sin leer", una sola vez por login
   (ver MaybeShowLoginToastAsync) — pedido explícito: antes vivía fijo abajo a
   la derecha de TODA la pantalla (posición pensada para un tab bar de celular
   que ya no aplica en desktop), y ahí abajo no se veía. Ahora se ancla al
   propio ".notification-bell" (que ya es position:relative — mismo truco que
   usa ".notification-bell-dropdown" para desplegarse debajo de la campana),
   así que queda pegado justo debajo del ícono sin importar qué más haya en el
   encabezado a su alrededor, con la flecha animada apuntando hacia arriba,
   directo a la campana. */
.notification-login-toast[b-v8c56i6xw7] {
    position: absolute;
    top: calc(100% + 46px);
    right: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    max-width: min(340px, calc(100vw - 32px));
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    animation: notification-login-toast-in-b-v8c56i6xw7 0.25s ease-out;
}

@keyframes notification-login-toast-in-b-v8c56i6xw7 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notification-login-toast-icon[b-v8c56i6xw7] {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--synbex-primary);
}

.notification-login-toast-text[b-v8c56i6xw7] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--synbex-text);
}

.notification-login-toast-close[b-v8c56i6xw7] {
    flex-shrink: 0;
    margin-left: 4px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--synbex-text-muted);
    cursor: pointer;
}

.notification-login-toast-arrow[b-v8c56i6xw7] {
    position: absolute;
    top: -34px;
    right: 6px;
    color: var(--synbex-primary);
    animation: notification-login-toast-arrow-bounce-b-v8c56i6xw7 1.3s ease-in-out infinite;
}

@keyframes notification-login-toast-arrow-bounce-b-v8c56i6xw7 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .notification-login-toast[b-v8c56i6xw7],
    .notification-login-toast-arrow[b-v8c56i6xw7] {
        animation: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Insignia chiquita arriba a la derecha (no un diálogo grande y centrado con
   fondo oscurecido) — para que se sienta como "está cargando", no como "algo
   se rompió". Oculta por defecto; Blazor le agrega solo una de estas clases al
   contenedor (#components-reconnect-modal) según el estado de la conexión —
   ver components-reconnect-state-changed en ReconnectModal.razor.js. */
#components-reconnect-modal[b-tvu1csxme1] {
    display: none;
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 2000;
    align-items: center;
    gap: 8px;
    background: var(--synbex-surface, #fff);
    border: 1px solid var(--synbex-border, #e2e5eb);
    border-radius: 999px;
    padding: 7px 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

#components-reconnect-modal.components-reconnect-show[b-tvu1csxme1],
#components-reconnect-modal.components-reconnect-retrying[b-tvu1csxme1],
#components-reconnect-modal.components-reconnect-failed[b-tvu1csxme1],
#components-reconnect-modal.components-reconnect-paused[b-tvu1csxme1],
#components-reconnect-modal.components-reconnect-resume-failed[b-tvu1csxme1] {
    display: flex;
}

/* El spinner solo tiene sentido mientras algo pasa solo (reintentando) — en
   pausa/fallido no hay nada corriendo, ahí solo se ve el botón. */
.synbex-reconnect-spinner[b-tvu1csxme1] {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2.5px solid var(--synbex-border, #d1d5db);
    border-top-color: var(--synbex-primary, #2c5cfc);
    animation: synbex-reconnect-spin-b-tvu1csxme1 0.8s linear infinite;
}

#components-reconnect-modal.components-reconnect-show .synbex-reconnect-spinner[b-tvu1csxme1],
#components-reconnect-modal.components-reconnect-retrying .synbex-reconnect-spinner[b-tvu1csxme1] {
    display: inline-block;
}

@keyframes synbex-reconnect-spin-b-tvu1csxme1 {
    to {
        transform: rotate(360deg);
    }
}

.components-reconnect-failed-visible[b-tvu1csxme1],
.components-pause-visible[b-tvu1csxme1],
.components-resume-failed-visible[b-tvu1csxme1] {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-tvu1csxme1],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-tvu1csxme1],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-tvu1csxme1] {
    display: inline-flex;
}

.synbex-reconnect-retry[b-tvu1csxme1] {
    border: none;
    background: var(--synbex-primary, #2c5cfc);
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
}

.synbex-reconnect-retry:hover[b-tvu1csxme1] {
    filter: brightness(1.08);
}
/* /Components/Layout/SettingsMenu.razor.rz.scp.css */
.settings-menu[b-l7z9oiqksk] {
    position: relative;
}

.settings-menu-trigger[b-l7z9oiqksk] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-btn-icono);
    height: var(--ui-btn-icono);
    border-radius: var(--synbex-radius-md);
    border: 1px solid var(--synbex-border);
    background: transparent;
    font-size: var(--ui-btn-icono-fz);
    cursor: pointer;
    transition: background 0.15s ease;
}

.settings-menu-trigger:hover[b-l7z9oiqksk] {
    background: var(--synbex-primary-soft);
}

.settings-menu-dropdown[b-l7z9oiqksk] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 200px;
    max-width: calc(100vw - 32px);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
}

/* Mismo problema y misma solución que en NotificationBell: en celular se ancla
   al viewport en vez del botón, para que no se salga de la pantalla. */
@media (max-width: 600px) {
    .settings-menu-dropdown[b-l7z9oiqksk] {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }
}

.settings-menu-item[b-l7z9oiqksk] {
    /* Sin esto, "Configuración" (un <a>, no un <button>) sumaba los 20px de
       relleno POR ENCIMA del 100% de ancho —los botones traen border-box de
       fábrica, los enlaces no— y al pasar el mouse el resaltado se salía del
       panel por la derecha. */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: var(--synbex-radius-md);
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--synbex-text-muted);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.settings-menu-item:hover[b-l7z9oiqksk] {
    background: var(--synbex-primary-soft);
    color: var(--synbex-text);
}

.settings-menu-item-icon[b-l7z9oiqksk] {
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
}

/* El ícono de "Anclar" es un SVG de HubIcons (line-art), no un emoji como sus
   hermanos — se achica al mismo tamaño que ellos tenían por font-size. */
.settings-menu-item-icon svg[b-l7z9oiqksk] {
    width: 15px;
    height: 15px;
}

.settings-menu-item:disabled[b-l7z9oiqksk] {
    opacity: 0.55;
    cursor: default;
}

.settings-menu-item:disabled:hover[b-l7z9oiqksk] {
    background: transparent;
    color: var(--synbex-text-muted);
}

/* Las clases .settings-modal-* (las que usa la ventana de "Anclar Synbex") viven
   en wwwroot/app.css: las reutiliza más de un componente, y el CSS aislado por
   componente de Blazor no cruza esa frontera de forma confiable.

   Acá vivía además todo el estilo de .account-modal-* — la ventana flotante de
   "Mi cuenta" que abría este mismo menú. Esa ventana desapareció: sus datos ya
   viven dentro de la página de Configuración y tener dos puertas a lo mismo
   confundía (pedido explícito de dejar en el menú solo Configuración y Anclar). */
/* /Components/Layout/ToastHost.razor.rz.scp.css */
.toast-host[b-p80gy95ouq] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 340px;
    max-width: calc(100vw - 24px);
    pointer-events: none;
}

.toast-item[b-p80gy95ouq] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 18px;
    min-height: 64px;
    border-radius: 14px;
    box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.3), 0 3px 10px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    /* Se oculta sola también por puro CSS, sin depender de que el circuito de
       Blazor Server llegue a empujar la orden de quitarlo (pedido explícito,
       reportado en celular: con wifi débil, una reconexión breve del circuito
       dejaba el toast "congelado" en pantalla aunque el servidor ya lo había
       quitado de la lista — el navegador nunca recibió ese último render, así
       que había que cerrarlo a mano con la "X"). Esta animación hace en el
       navegador lo mismo que el timer del servidor (ToastService.
       DefaultAutoDismissMs = 4000ms): entra, se queda 4s y se apaga sola —
       4.3s en total para dejarle 0.3s a la salida. Si el usuario le da a la
       "X" antes, Blazor quita el elemento del árbol y esta animación nunca
       llega a importar; si el servidor SÍ logra avisar solo, el elemento ya
       no está y tampoco pasa nada. Ambos caminos son independientes, nunca
       chocan entre sí. */
    animation: synbex-toast-lifecycle-b-p80gy95ouq 4.3s ease forwards;
}

.toast-item.toast-leaving[b-p80gy95ouq] {
    animation: synbex-toast-out-b-p80gy95ouq 0.2s ease forwards;
}

.toast-icon[b-p80gy95ouq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 15px;
}

/* Fondo sólido en vez de solo un borde de color — para que se note de inmediato
   si fue éxito o error, sin tener que leer el texto. */
.toast-success[b-p80gy95ouq] {
    background: #16a34a;
}

.toast-success .toast-icon[b-p80gy95ouq] {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.toast-success .toast-message[b-p80gy95ouq] {
    color: #fff;
}

.toast-error[b-p80gy95ouq] {
    background: var(--synbex-danger);
}

.toast-error .toast-icon[b-p80gy95ouq] {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.toast-error .toast-message[b-p80gy95ouq] {
    color: #fff;
}

.toast-message[b-p80gy95ouq] {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.toast-close[b-p80gy95ouq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: none;
    border: none;
    border-radius: var(--synbex-radius-md);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s ease, color 0.15s ease;
}

.toast-close:hover[b-p80gy95ouq] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

@keyframes synbex-toast-lifecycle-b-p80gy95ouq {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }

    8% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    93% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.96);
        pointer-events: none;
    }
}

@keyframes synbex-toast-out-b-p80gy95ouq {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.96);
    }
}

/* Mismo total de 4.3s y mismo apagado solo al final, sin el movimiento/escala
   (solo opacidad) — el punto es que el auto-ocultado por CSS siga funcionando
   igual aunque la persona prefiera menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .toast-item[b-p80gy95ouq] {
        animation: synbex-toast-fade-only-b-p80gy95ouq 4.3s linear forwards;
    }
}

@keyframes synbex-toast-fade-only-b-p80gy95ouq {
    0%, 93% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        pointer-events: none;
    }
}

@media (max-width: 480px) {
    .toast-host[b-p80gy95ouq] {
        bottom: 16px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }
}

/* Aviso flotante en el centro de la pantalla (ej. "Aviso enviado" al registrar un
   paquete) — separado del contenedor de esquina de arriba, con su propia animación
   de entrada/salida en vez de deslizarse desde abajo. */
.toast-host-centered[b-p80gy95ouq] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}

.toast-centered-item[b-p80gy95ouq] {
    justify-content: center;
    text-align: center;
    animation: synbex-toast-center-in-b-p80gy95ouq 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes synbex-toast-center-in-b-p80gy95ouq {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast-centered-item[b-p80gy95ouq] {
        animation: none;
    }
}
/* /Components/Pages/ChangePassword.razor.rz.scp.css */
.pwd-page[b-rvp2a5e1wi] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
    box-sizing: border-box;
}

.pwd-card[b-rvp2a5e1wi] {
    width: 100%;
    max-width: calc(var(--login-ancho-400) + 20px);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: var(--login-pad-40) var(--login-pad-36);
    box-sizing: border-box;
}

.pwd-icon[b-rvp2a5e1wi] {
    width: var(--login-caja-56);
    height: var(--login-caja-56);
    margin: 0 auto 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--login-fz-26);
    box-shadow: 0 8px 20px -6px var(--synbex-primary);
}

.pwd-header[b-rvp2a5e1wi] {
    text-align: center;
    margin-bottom: var(--login-sep-26);
}

.pwd-title[b-rvp2a5e1wi] {
    margin: 0 0 6px;
    font-size: var(--login-fz-21);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.pwd-subtitle[b-rvp2a5e1wi] {
    margin: 0;
    font-size: var(--login-fz-135);
    color: var(--synbex-text-muted);
}

.pwd-alert[b-rvp2a5e1wi] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--login-sep-20);
    padding: var(--login-pad-12) var(--login-pad-14);
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    font-size: var(--login-fz-135);
    line-height: 1.4;
}

.pwd-alert svg[b-rvp2a5e1wi] {
    flex-shrink: 0;
    margin-top: 1px;
}

.pwd-field[b-rvp2a5e1wi] {
    margin-bottom: var(--login-sep-18);
}

.pwd-label[b-rvp2a5e1wi] {
    display: block;
    margin-bottom: 6px;
    font-size: var(--login-fz-13);
    font-weight: 600;
    color: var(--synbex-text);
}

.pwd-input-wrap[b-rvp2a5e1wi] {
    position: relative;
}

[b-rvp2a5e1wi] .pwd-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--login-pad-10) var(--login-pad-42) var(--login-pad-10) var(--login-pad-12);
    /* 16px, no 14.5px — con menos de 16px, iOS Safari hace zoom automático
       de toda la página al enfocar el campo, ver Login.razor.css. */
    font-size: var(--login-fz-16);
    font-family: inherit;
    color: var(--synbex-text);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-rvp2a5e1wi] .pwd-input:focus {
    outline: none;
    border-color: var(--synbex-primary);
    box-shadow: 0 0 0 3px var(--synbex-primary-soft);
}

[b-rvp2a5e1wi] .pwd-input.invalid {
    border-color: var(--synbex-danger);
}

.pwd-toggle[b-rvp2a5e1wi] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: var(--login-caja-32);
    height: var(--login-caja-32);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--synbex-radius-md);
    font-size: var(--login-fz-15);
    line-height: 1;
    cursor: pointer;
    color: var(--synbex-text-muted);
    transition: background 0.15s ease;
}

.pwd-toggle:hover[b-rvp2a5e1wi] {
    background: var(--synbex-primary-soft);
}

[b-rvp2a5e1wi] .pwd-validation-message {
    display: block;
    margin-top: 6px;
    font-size: var(--login-fz-125);
    color: var(--synbex-danger);
}

.pwd-requirements[b-rvp2a5e1wi] {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

/* Tamaño y grosor fijos SIEMPRE (12px, 600) — antes solo is-missing/is-met
   tenían negrita y el estado gris de base se veía más delgado, dando la
   sensación de que el texto "engordaba" al escribir. Ahora solo cambia el
   color entre los tres estados, nunca el tamaño ni el grosor. */
.pwd-requirements li[b-rvp2a5e1wi] {
    font-size: var(--login-fz-12);
    font-weight: 600;
    color: var(--synbex-text-muted);
    padding-left: 16px;
    position: relative;
}

.pwd-requirements li[b-rvp2a5e1wi]::before {
    content: "•";
    position: absolute;
    left: 2px;
    color: var(--synbex-primary);
}

.pwd-requirements li.is-missing[b-rvp2a5e1wi] {
    color: var(--synbex-danger);
}

.pwd-requirements li.is-missing[b-rvp2a5e1wi]::before {
    color: var(--synbex-danger);
}

.pwd-requirements li.is-met[b-rvp2a5e1wi] {
    color: var(--synbex-success);
}

.pwd-requirements li.is-met[b-rvp2a5e1wi]::before {
    content: "✓";
    color: var(--synbex-success);
}

.pwd-submit[b-rvp2a5e1wi] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: var(--login-pad-11) var(--login-pad-16);
    font-size: var(--login-fz-145);
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--synbex-primary);
    border: none;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    /* Mismo resplandor que los botones de "agregar" (.synbex-cta-btn en app.css):
       el color sale de la marca al 55 %, no al 100 %, o la sombra se ve como un
       borrón sólido debajo del botón en vez de un halo. */
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--synbex-primary) 55%, transparent);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.pwd-submit:hover[b-rvp2a5e1wi] {
    background: var(--synbex-primary-hover);
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--synbex-primary) 65%, transparent);
}

.pwd-submit:active[b-rvp2a5e1wi] {
    transform: translateY(1px);
}

.pwd-back[b-rvp2a5e1wi] {
    display: block;
    margin-top: 20px;
    text-align: center;
    font-size: var(--login-fz-125);
    color: var(--synbex-text-muted);
    text-decoration: none;
}

.pwd-back:hover[b-rvp2a5e1wi] {
    color: var(--synbex-primary);
}

@media (max-width: 420px) {
    .pwd-card[b-rvp2a5e1wi] {
        padding: 32px 22px;
    }
}
/* /Components/Pages/Dashboard/Account/MyAccountPanel.razor.rz.scp.css */
/* Solo celular (pedido explícito) — en computadora esta pantalla se queda
   exactamente como estaba: el botón de Cambiar contraseña sigue al lado de
   Guardar cambios, abajo del todo, y el correo se queda igual de oscuro que
   siempre (el ajuste de color de acá abajo es el único que no depende del
   ancho de pantalla — un color se ve igual de "muy negro" en cualquier
   tamaño). */

/* .account-header-top reproduce el renglón que antes era .account-header
   directamente (avatar + nombre/rol en fila, con su gap) — ahora vive en su
   propio contenedor porque .account-header pasó a envolver ESE renglón MÁS
   el botón de abajo en celular (ver el media query). En computadora este
   cambio es invisible: sigue siendo avatar + texto en una fila. */
.account-header-top[b-x1w6klwgxd] {
    display: flex;
    align-items: center;
    gap: 14px;
    /* Empuja "Cambiar contraseña" hasta la orilla derecha del encabezado. */
    flex: 1;
    min-width: 0;
}

/* Copia de "Cambiar contraseña" — ya no es copia de nada: el botón de
   computadora vivía junto a "Guardar cambios" y ese renglón desapareció
   cuando el guardar pasó a ser uno solo arriba de Configuración. Se queda
   con el nombre de clase para no tocar todos los media query. */
.account-change-password-btn-mobile[b-x1w6klwgxd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* .account-header no es ::deep porque es una clase global de app.css
   reutilizada tal cual (no isolation) — pero .account-header-top/-body sí son
   propias de este componente, así que no necesitan ::deep para que la
   ampliación aislada de Blazor las alcance. */
.account-header-body[b-x1w6klwgxd] {
    flex: 1;
    min-width: 0;
}

/* Correo: primero se probó un gris oscuro (70% texto / 30% tenue) — visto ya
   en la app, pedido explícito de aclararlo más: el gris tenue de siempre
   (--synbex-text-muted, el mismo que usa el rol debajo del nombre) queda
   claramente más claro que ese primer intento. */
.account-email-value[b-x1w6klwgxd] {
    color: var(--synbex-text-muted);
}

@media (max-width: 640px) {
    /* .account-header pasa a apilar en columna: arriba el renglón de
       avatar+nombre (.account-header-top, ya con su propio display:flex de
       fila), abajo el botón — "debajo de las dos columnas", pedido explícito.
       align-items:stretch para que .account-header-top siga ocupando el
       ancho completo (el centrado del botón se maneja aparte, con
       align-self). */
    .account-header[b-x1w6klwgxd] {
        flex-direction: column;
        align-items: stretch;
    }

    /* Botón centrado, no de ancho completo — pedido explícito: "una sola
       fila... centrado, como tamaño de un setenta por ciento". align-self
       anula el stretch heredado de .account-header solo para este elemento. */
    .account-change-password-btn-mobile[b-x1w6klwgxd] {
        display: inline-flex;
        align-self: center;
        width: 70%;
        justify-content: center;
        margin-top: 12px;
    }

    /* La copia de abajo (junto a Guardar) se esconde — ya está la de arriba.
       Con ella oculta, "Guardar cambios" queda como único hijo de
       .account-actions y el flex:1 que ya tiene esa clase (app.css) lo estira
       solo al 100% del ancho — pedido explícito, sin CSS extra para lograrlo. */
    .account-change-password-btn-desktop[b-x1w6klwgxd] {
        display: none;
    }

    /* Correo: mismo dato, pero ya no se ve como una caja de campo — pedido
       explícito, "que sea como un label, no un texto, para que sea más visual
       de que no se puede usar". Se quita el borde/fondo/relleno de
       .account-readonly-value (que sigue igual para los demás usos de esa
       clase, ej. Asignar limpiezas) y queda como un valor de solo lectura,
       más parecido a una etiqueta que a un campo. El color oscuro de arriba
       se mantiene igual acá, no es parte de este media query. */
    .account-email-value[b-x1w6klwgxd] {
        padding: 0;
        border: none;
        background: transparent;
        font-weight: 600;
    }
}
/* /Components/Pages/Dashboard/Account/Settings.razor.rz.scp.css */
/* Solo celular (pedido explícito) — en computadora esta tarjeta se queda
   exactamente como estaba (padding de .synbex-card, tope de 700px).

   El max-width:700px no hace falta tocarlo: en un celular ya de por sí más
   angosto que eso, ese tope nunca se activa — el ancho real lo define el
   padding, no el max-width.

   Lo que sí achicaba el "ancho útil" era el doble relleno: .dashboard-main ya
   pone su propio margen (12px en celular, ver DashboardLayout.razor.css) y
   esta tarjeta ponía OTRO encima (14px de .synbex-card en ese mismo ancho) —
   sumados, casi 30px perdidos de cada lado antes de llegar al contenido de
   verdad. Bajarlo a 0 acá deja que sea el propio padding de cada
   .account-panel de adentro (que ya existía) el que marque el margen, sin
   duplicarlo — pedido explícito: "quiero que sea el ancho del cien por
   ciento, toda esa ventana".

   Con el padding lateral en 0, el borde/sombra de la tarjeta grande ya no
   aporta nada — quedaría envolviendo muy de cerca al encabezado y los
   paneles de adentro, que ya tienen su propio borde/fondo (.account-header,
   .account-panel). Se quita del todo en vez de dejarlo a medias, así el
   "marco" que se ve es el de cada sección, no uno doble. */
@media (max-width: 640px) {
    .account-page-card[b-pzrrnmdihx] {
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;
    }
}
/* /Components/Pages/Dashboard/Accounting/CommonAreasReport.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   COBRO DE RESERVAS (informe de áreas comunes)
   ══════════════════════════════════════════════════════════════════════════════
   Copiado de la maqueta que mandó el usuario (pedido explícito): cada tarjeta de
   arriba con su color de fondo suave y su círculo de ícono, paneles blancos
   redondeados, tabla con estado en píldora y un pie azul con los totales.

   Los tintes se mezclan con var(--synbex-surface) (color-mix) en vez de fijar un
   color claro: así en tema oscuro el fondo sigue siendo oscuro con un toque del
   color, y no una mancha pastel. Pagado y por cobrar son ESTADOS y siempre van con
   su nombre escrito: el color refuerza, nunca informa solo. */

.cobro-informe[b-maaht5q11z],
.cobro-volver[b-maaht5q11z],
.cobro-encabezado[b-maaht5q11z] {
    --cobro-ambar: #fab219;
    --cobro-ambar-fuerte: #f59e0b;
    --cobro-ambar-texto: #c27803;
    --cobro-verde: #16a34a;
    --cobro-azul: #2563eb;
    --cobro-rojo: #dc2626;
    --cobro-radio: 14px;
}

/* .report-light-theme (para imprimir en claro) le pone fondo y relleno a todo el
   informe y le quita el borde a las tarjetas: en pantalla, la maqueta no lo lleva. */
.cobro-informe[b-maaht5q11z] {
    padding: 0;
    background: transparent;
}

/* ── Encabezado ──────────────────────────────────────────────────────────────── */

.cobro-volver[b-maaht5q11z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--synbex-text-muted);
    text-decoration: none;
}

.cobro-volver:hover[b-maaht5q11z] {
    color: var(--synbex-primary);
}

.cobro-volver[b-maaht5q11z]  svg {
    width: 16px;
    height: 16px;
}

.cobro-encabezado[b-maaht5q11z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.cobro-encabezado-titulo[b-maaht5q11z] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.cobro-encabezado-icono[b-maaht5q11z] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--cobro-radio);
    background: color-mix(in srgb, var(--cobro-azul) 12%, var(--synbex-surface));
    color: var(--cobro-azul);
}

.cobro-encabezado-icono[b-maaht5q11z]  svg {
    width: 26px;
    height: 26px;
}

.cobro-titulo[b-maaht5q11z] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--synbex-text);
}

.cobro-subtitulo[b-maaht5q11z] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--synbex-text-muted);
}

.cobro-encabezado-acciones[b-maaht5q11z] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cobro-mes[b-maaht5q11z],
.cobro-boton-imprimir[b-maaht5q11z] {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 42px;
    border: 1px solid var(--synbex-border);
    border-radius: 10px;
    background: var(--synbex-surface);
    color: var(--synbex-text);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.cobro-mes select[b-maaht5q11z] {
    height: 100%;
    padding: 0 38px 0 40px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    appearance: none;
    cursor: pointer;
}

.cobro-mes select:focus-visible[b-maaht5q11z] {
    outline: 2px solid var(--synbex-primary);
    outline-offset: 1px;
}

/* Las opciones de la lista las pinta el navegador: sin esto, en tema oscuro salen
   con letra clara sobre fondo blanco. */
.cobro-mes option[b-maaht5q11z] {
    background: var(--synbex-surface);
    color: var(--synbex-text);
}

.cobro-mes-icono[b-maaht5q11z],
.cobro-mes-flecha[b-maaht5q11z] {
    position: absolute;
    top: 50%;
    display: flex;
    transform: translateY(-50%);
    pointer-events: none;
}

.cobro-mes-icono[b-maaht5q11z] {
    left: 13px;
}

.cobro-mes-flecha[b-maaht5q11z] {
    right: 12px;
}

.cobro-mes-icono[b-maaht5q11z]  svg,
.cobro-mes-flecha[b-maaht5q11z]  svg {
    width: 18px;
    height: 18px;
}

.cobro-boton-imprimir[b-maaht5q11z] {
    gap: 8px;
    padding: 0 14px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.cobro-boton-imprimir:hover[b-maaht5q11z] {
    border-color: var(--synbex-text-muted);
}

.cobro-boton-imprimir[b-maaht5q11z]  svg {
    width: 18px;
    height: 18px;
}

/* ── Las tres tarjetas ───────────────────────────────────────────────────────── */

.cobro-tarjetas[b-maaht5q11z] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.cobro-tarjeta[b-maaht5q11z] {
    --tono: var(--cobro-azul);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    padding: 20px 22px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tono) 22%, var(--synbex-border));
    border-radius: var(--cobro-radio);
    background: color-mix(in srgb, var(--tono) 8%, var(--synbex-surface));
}

.cobro-tarjeta.es-total[b-maaht5q11z] {
    --tono: var(--cobro-ambar);
}

.cobro-tarjeta.es-pagado[b-maaht5q11z] {
    --tono: var(--cobro-verde);
}

.cobro-tarjeta.es-por-cobrar[b-maaht5q11z] {
    --tono: var(--cobro-azul);
}

.cobro-tarjeta-icono[b-maaht5q11z] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--tono);
    color: #ffffff;
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--tono) 70%, transparent);
}

.cobro-tarjeta.es-total .cobro-tarjeta-icono[b-maaht5q11z] {
    background: var(--cobro-ambar-fuerte);
}

.cobro-tarjeta-icono[b-maaht5q11z]  svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.cobro-tarjeta-texto[b-maaht5q11z] {
    position: relative;
    z-index: 1;
    display: flex;
    padding-right: 52px;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cobro-tarjeta-etiqueta[b-maaht5q11z] {
    font-size: 13px;
    color: var(--synbex-text-muted);
}

.cobro-tarjeta-valor[b-maaht5q11z] {
    margin: 2px 0 4px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--synbex-text);
    overflow-wrap: anywhere;
}

.cobro-tarjeta-detalle[b-maaht5q11z] {
    font-size: 13px;
    color: var(--synbex-text-muted);
}

/* El ícono grande y desvaído de la esquina: adorno, no dato. */
.cobro-tarjeta-adorno[b-maaht5q11z] {
    position: absolute;
    top: 50%;
    right: 20px;
    display: flex;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--tono) 45%, transparent);
    pointer-events: none;
}

.cobro-tarjeta-adorno[b-maaht5q11z]  svg {
    width: 44px;
    height: 44px;
    stroke-width: 1.5;
}

/* ── Paneles blancos ─────────────────────────────────────────────────────────── */

.cobro-panel[b-maaht5q11z] {
    min-width: 0;
    padding: 20px 22px;
    border: 1px solid var(--synbex-border);
    border-radius: var(--cobro-radio);
    background: var(--synbex-surface);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.cobro-panel-titulo[b-maaht5q11z] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--synbex-text);
}

.cobro-fila[b-maaht5q11z] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 16px;
    margin-bottom: 16px;
}

/* ── Estado del cobro ────────────────────────────────────────────────────────── */

.pagos-proporcion-encabezado[b-maaht5q11z] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.pagos-proporcion-pct[b-maaht5q11z] {
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-text);
}

.pagos-barra[b-maaht5q11z] {
    display: flex;
    gap: 2px;
    height: 14px;
}

.pagos-tramo[b-maaht5q11z] {
    position: relative;
    flex-basis: 0;
    min-width: 6px;
    outline: none;
}

.pagos-tramo:first-child[b-maaht5q11z] {
    border-radius: 999px 0 0 999px;
}

.pagos-tramo:last-child[b-maaht5q11z] {
    border-radius: 0 999px 999px 0;
}

.pagos-tramo:only-child[b-maaht5q11z] {
    border-radius: 999px;
}

.pagos-tramo.es-pagada[b-maaht5q11z] {
    background: var(--cobro-verde);
}

.pagos-tramo.es-por-cobrar[b-maaht5q11z] {
    background: var(--cobro-ambar);
}

.pagos-tramo.es-vacio[b-maaht5q11z] {
    background: var(--synbex-border);
}

.pagos-tramo:hover[b-maaht5q11z],
.pagos-tramo:focus-visible[b-maaht5q11z] {
    filter: brightness(1.08);
}

.pagos-tt[b-maaht5q11z] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 10;
    padding: 8px 10px;
    border-radius: 8px;
    background: #1f2937;
    color: #d1d5db;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0.12s;
}

.pagos-tt strong[b-maaht5q11z] {
    color: #ffffff;
}

.pagos-tramo:last-child:not(:only-child) .pagos-tt[b-maaht5q11z] {
    left: auto;
    right: 0;
}

.pagos-tramo:hover .pagos-tt[b-maaht5q11z],
.pagos-tramo:focus-within .pagos-tt[b-maaht5q11z] {
    opacity: 1;
    visibility: visible;
}

.pagos-leyenda[b-maaht5q11z] {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--synbex-text-muted);
}

.pagos-leyenda > span[b-maaht5q11z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pagos-punto[b-maaht5q11z] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pagos-punto.es-pagada[b-maaht5q11z] {
    background: var(--cobro-verde);
}

.pagos-punto.es-por-cobrar[b-maaht5q11z] {
    background: var(--cobro-ambar);
}

/* ── Por área ────────────────────────────────────────────────────────────────── */

.cobro-area[b-maaht5q11z] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.cobro-area + .cobro-area[b-maaht5q11z] {
    border-top: 1px solid var(--synbex-border);
}

.cobro-area-icono[b-maaht5q11z] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cobro-azul) 12%, var(--synbex-surface));
    color: var(--cobro-azul);
}

.cobro-area-icono[b-maaht5q11z]  svg {
    width: 24px;
    height: 24px;
}

.cobro-area-nombre[b-maaht5q11z] {
    font-size: 14px;
    font-weight: 500;
    color: var(--synbex-text);
    overflow-wrap: anywhere;
}

.cobro-area-dato[b-maaht5q11z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8px;
    line-height: 1.25;
}

.cobro-area-dato.es-monto[b-maaht5q11z] {
    min-width: 110px;
    padding-left: 22px;
    border-left: 1px solid var(--synbex-border);
}

.cobro-area-dato strong[b-maaht5q11z] {
    font-size: 15px;
    font-weight: 700;
    color: var(--synbex-text);
}

.cobro-area-dato small[b-maaht5q11z] {
    font-size: 12px;
    color: var(--synbex-text-muted);
}

/* ── Aviso de reservas sin monto ─────────────────────────────────────────────── */

.cobro-aviso[b-maaht5q11z] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--cobro-rojo) 22%, var(--synbex-border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--cobro-rojo) 8%, var(--synbex-surface));
    color: var(--synbex-danger);
    font-size: 13px;
    line-height: 1.4;
}

.cobro-aviso-icono[b-maaht5q11z] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cobro-rojo);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

/* ── Canceladas con pago ─────────────────────────────────────────────────────── */

.pagos-canceladas[b-maaht5q11z] {
    margin-bottom: 16px;
    border-color: color-mix(in srgb, var(--cobro-ambar) 55%, var(--synbex-border));
}

.pagos-canceladas-encabezado[b-maaht5q11z] {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.pagos-canceladas-encabezado p[b-maaht5q11z] {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--synbex-text-muted);
}

.pagos-estado-icono[b-maaht5q11z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
}

.pagos-estado-icono.es-por-cobrar[b-maaht5q11z] {
    background: var(--cobro-ambar);
    color: #1f2937;
}

.pagos-estado-icono[b-maaht5q11z]  svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.4;
}

.pagos-cancelada[b-maaht5q11z] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--synbex-border);
    font-size: 13px;
}

/* ── Filtros y buscador ──────────────────────────────────────────────────────── */

.cobro-herramientas[b-maaht5q11z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 6px 0 14px;
}

.cobro-filtros[b-maaht5q11z] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cobro-filtro[b-maaht5q11z] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 14px 0 18px;
    border: 1px solid var(--synbex-border);
    border-radius: 999px;
    background: var(--synbex-surface);
    color: var(--synbex-text);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
}

.cobro-filtro:hover[b-maaht5q11z] {
    border-color: var(--synbex-text-muted);
}

.cobro-filtro span[b-maaht5q11z] {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--synbex-bg);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var(--synbex-text-muted);
}

.cobro-filtro.esta-activo[b-maaht5q11z] {
    border-color: var(--cobro-azul);
    background: var(--cobro-azul);
    color: #ffffff;
    font-weight: 600;
}

.cobro-filtro.esta-activo span[b-maaht5q11z] {
    background: rgba(255, 255, 255, 0.92);
    color: var(--cobro-azul);
}

.cobro-buscar[b-maaht5q11z] {
    position: relative;
    display: flex;
    align-items: center;
    width: min(320px, 100%);
}

.cobro-buscar-icono[b-maaht5q11z] {
    position: absolute;
    left: 13px;
    display: flex;
    color: var(--synbex-text-muted);
    pointer-events: none;
}

.cobro-buscar-icono[b-maaht5q11z]  svg {
    width: 18px;
    height: 18px;
}

.cobro-buscar input[b-maaht5q11z] {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--synbex-border);
    border-radius: 10px;
    background: var(--synbex-surface);
    color: var(--synbex-text);
    font: inherit;
    font-size: 13.5px;
}

.cobro-buscar input:focus[b-maaht5q11z] {
    outline: none;
    border-color: var(--synbex-primary);
    box-shadow: 0 0 0 3px var(--synbex-primary-soft);
}

/* ── Tabla ───────────────────────────────────────────────────────────────────── */

/* Sin overflow en pantalla ancha a propósito: el menú ⋮ de la última fila tiene
   que poder salirse de la tarjeta; con overflow quedaba recortado adentro. */
.cobro-tabla[b-maaht5q11z] {
    margin-bottom: 16px;
    border: 1px solid var(--synbex-border);
    border-radius: var(--cobro-radio);
    background: var(--synbex-surface);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.cobro-tabla .synbex-table th[b-maaht5q11z] {
    padding: 16px 14px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.cobro-tabla .synbex-table td[b-maaht5q11z] {
    padding: 14px;
    font-size: 13.5px;
}

.cobro-orden[b-maaht5q11z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.cobro-orden:hover[b-maaht5q11z] {
    color: var(--synbex-text);
}

.cobro-orden.esta-activo[b-maaht5q11z] {
    color: var(--synbex-primary);
}

.cobro-area-celda[b-maaht5q11z] {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    white-space: nowrap;
}

.cobro-area-celda strong[b-maaht5q11z] {
    font-weight: 600;
    color: var(--synbex-text);
}

.cobro-area-celda small[b-maaht5q11z] {
    font-size: 12px;
    color: var(--synbex-text-muted);
}

.cobro-orden[b-maaht5q11z]  svg {
    width: 14px;
    height: 14px;
}

.cobro-dia[b-maaht5q11z] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.cobro-dia strong[b-maaht5q11z] {
    font-size: 18px;
    font-weight: 700;
    color: var(--synbex-text);
}

.cobro-dia small[b-maaht5q11z] {
    font-size: 12px;
    color: var(--synbex-text-muted);
}

.cobro-con-icono[b-maaht5q11z] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.cobro-con-icono.es-arriba[b-maaht5q11z] {
    align-items: flex-start;
}

.cobro-con-icono > span[b-maaht5q11z] {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.cobro-con-icono strong[b-maaht5q11z] {
    font-weight: 600;
    color: var(--synbex-text);
}

.cobro-con-icono small[b-maaht5q11z] {
    font-size: 12px;
    color: var(--synbex-text-muted);
}

.cobro-con-icono.es-linea[b-maaht5q11z] >  svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--synbex-text-muted);
}

.cobro-con-icono.es-arriba[b-maaht5q11z] >  svg {
    margin-top: 1px;
}

.cobro-tarifa[b-maaht5q11z],
.cobro-pago[b-maaht5q11z] {
    white-space: nowrap;
    color: var(--synbex-text-muted) !important;
}

.cobro-monto[b-maaht5q11z] {
    font-weight: 700;
    white-space: nowrap;
}

/* ── Píldora de estado ───────────────────────────────────────────────────────── */

.cobro-estado[b-maaht5q11z] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 16px 0 12px;
    border: 1px solid var(--synbex-border);
    border-radius: 999px;
    background: var(--synbex-bg);
    color: var(--synbex-text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

button.cobro-estado[b-maaht5q11z] {
    cursor: pointer;
    transition: filter 0.12s ease, background 0.12s ease;
}

button.cobro-estado:disabled[b-maaht5q11z] {
    opacity: 0.6;
    cursor: default;
}

.cobro-estado[b-maaht5q11z]  svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.cobro-estado.es-por-cobrar[b-maaht5q11z] {
    border-color: #f5b52c;
    background: #fcd571;
    color: #1f2937;
}

.cobro-estado.es-por-cobrar:hover:not(:disabled)[b-maaht5q11z] {
    background: #fbc949;
}

.cobro-estado.es-pagada[b-maaht5q11z] {
    border-color: color-mix(in srgb, var(--cobro-verde) 40%, var(--synbex-border));
    background: color-mix(in srgb, var(--cobro-verde) 14%, var(--synbex-surface));
    color: var(--synbex-text);
}

.cobro-estado.es-pagada[b-maaht5q11z]  svg {
    color: var(--cobro-verde);
}

.cobro-estado.es-pagada:hover:not(:disabled)[b-maaht5q11z],
.cobro-estado.es-neutro:hover:not(:disabled)[b-maaht5q11z] {
    filter: brightness(0.97);
}

/* ── Menú ⋮ ──────────────────────────────────────────────────────────────────── */

.cobro-opciones[b-maaht5q11z] {
    width: 44px;
    text-align: right;
}

.cobro-kebab[b-maaht5q11z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--synbex-text-muted);
    cursor: pointer;
}

.cobro-kebab:hover[b-maaht5q11z] {
    background: var(--synbex-bg);
    color: var(--synbex-text);
}

.cobro-kebab[b-maaht5q11z]  svg {
    width: 20px;
    height: 20px;
}

.cobro-menu[b-maaht5q11z] {
    min-width: 220px;
    text-align: left;
}

.cobro-menu-nota[b-maaht5q11z] {
    display: block;
    max-width: 240px;
    padding: 6px 10px 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--synbex-text-muted);
    white-space: normal;
}

/* ── Pie: total del mes ──────────────────────────────────────────────────────── */

.cobro-pie[b-maaht5q11z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding: 20px 28px;
    border: 1px solid color-mix(in srgb, var(--cobro-azul) 18%, var(--synbex-border));
    border-radius: var(--cobro-radio);
    background: color-mix(in srgb, var(--cobro-azul) 7%, var(--synbex-surface));
}

.cobro-pie-titulo[b-maaht5q11z] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.cobro-pie-icono[b-maaht5q11z] {
    display: flex;
    color: var(--cobro-azul);
}

.cobro-pie-icono[b-maaht5q11z]  svg {
    width: 28px;
    height: 28px;
    stroke-width: 2.2;
}

.cobro-pie-titulo > div[b-maaht5q11z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cobro-pie-titulo strong[b-maaht5q11z] {
    font-size: 16px;
    color: var(--synbex-text);
}

.cobro-pie-titulo span[b-maaht5q11z] {
    font-size: 13px;
    color: var(--synbex-text-muted);
}

.cobro-pie-cifras[b-maaht5q11z] {
    display: flex;
    align-items: stretch;
}

.cobro-pie-cifra[b-maaht5q11z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 28px;
}

.cobro-pie-cifra + .cobro-pie-cifra[b-maaht5q11z] {
    border-left: 1px solid color-mix(in srgb, var(--cobro-azul) 20%, var(--synbex-border));
}

.cobro-pie-cifra:last-child[b-maaht5q11z] {
    padding-right: 0;
}

.cobro-pie-cifra span[b-maaht5q11z] {
    font-size: 13px;
    color: var(--synbex-text-muted);
}

.cobro-pie-cifra strong[b-maaht5q11z] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
}

.cobro-pie-cifra.es-pagado strong[b-maaht5q11z] {
    color: var(--cobro-verde);
}

.cobro-pie-cifra.es-por-cobrar strong[b-maaht5q11z] {
    color: var(--cobro-ambar-texto);
}

/* ── Confirmación del pago ───────────────────────────────────────────────────── */

.pagos-confirmacion-datos[b-maaht5q11z] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--synbex-bg);
    font-size: 13.5px;
}

.pagos-confirmacion-datos dt[b-maaht5q11z] {
    color: var(--synbex-text-muted);
}

.pagos-confirmacion-datos dd[b-maaht5q11z] {
    margin: 0;
    text-align: right;
    color: var(--synbex-text);
}

/* ── Impresión ───────────────────────────────────────────────────────────────── */

.solo-print[b-maaht5q11z] {
    display: none;
}

@media print {
    .pagos-titulo-impresion.solo-print[b-maaht5q11z] {
        display: block;
        margin: 0 0 12px;
    }

    .cobro-tarjeta[b-maaht5q11z],
    .cobro-panel[b-maaht5q11z],
    .cobro-tabla[b-maaht5q11z],
    .cobro-pie[b-maaht5q11z] {
        break-inside: avoid;
        box-shadow: none;
    }
}

/* ── Pantallas medianas y celular ────────────────────────────────────────────── */

/* Entre tablet y escritorio chico la tabla no entra: ahí sí se desliza. */
@media (max-width: 1100px) {
    .cobro-tabla[b-maaht5q11z] {
        overflow-x: auto;
    }

    .cobro-menu[b-maaht5q11z] {
        top: -6px;
        right: calc(100% + 6px);
    }
}

@media (max-width: 900px) {
    .cobro-tarjetas[b-maaht5q11z],
    .cobro-fila[b-maaht5q11z] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .cobro-titulo[b-maaht5q11z] {
        font-size: 22px;
    }

    .cobro-encabezado-acciones[b-maaht5q11z],
    .cobro-mes[b-maaht5q11z] {
        width: 100%;
    }

    .cobro-mes[b-maaht5q11z] {
        flex: 1;
    }

    .cobro-mes select[b-maaht5q11z] {
        width: 100%;
    }

    .cobro-buscar[b-maaht5q11z] {
        width: 100%;
    }

    /* En celular cada fila ya es su propia tarjeta (responsive-tables.js): el
       marco de la tabla sobraría alrededor. */
    .cobro-tabla[b-maaht5q11z] {
        overflow: visible;
        border: none;
        background: transparent;
        box-shadow: none;
    }

    /* El ⋮ va en la esquina de abajo de cada tarjeta, a la altura de la píldora de
       estado, en vez de ocupar un renglón vacío solo para él. */
    .cobro-tabla tr[b-maaht5q11z] {
        position: relative;
    }

    .cobro-tabla td.cobro-opciones[b-maaht5q11z] {
        position: absolute;
        right: 10px;
        bottom: 17px;
        width: auto;
        padding: 0 !important;
        border: none !important;
    }

    .cobro-menu[b-maaht5q11z] {
        top: auto;
        bottom: calc(100% + 6px);
        right: 0;
    }

    .cobro-area[b-maaht5q11z] {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .cobro-area-dato.es-monto[b-maaht5q11z] {
        grid-column: 2 / -1;
        align-items: flex-start;
        padding-left: 0;
        border-left: none;
    }

    .cobro-pie[b-maaht5q11z] {
        padding: 18px;
    }

    .cobro-pie-cifras[b-maaht5q11z] {
        width: 100%;
    }

    .cobro-pie-cifra[b-maaht5q11z] {
        flex: 1;
        padding: 0 16px;
    }

    .cobro-pie-cifra:first-child[b-maaht5q11z] {
        padding-left: 0;
    }

    .pagos-cancelada[b-maaht5q11z] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pagos-cancelada .cobro-estado[b-maaht5q11z] {
        grid-column: 1 / -1;
        justify-self: start;
    }
}
/* /Components/Pages/Dashboard/Accounting/Hub.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   ESTADÍSTICAS GENERALES DE CONTABILIDAD
   ══════════════════════════════════════════════════════════════════════════════
   Los colores de datos van como variables, por rol, y cambian por tema en un solo
   lugar. Paleta de referencia de gráficos, validada contra las superficies reales
   de la app: claro sobre #eef0f3, oscuro sobre #1c1c1f.
     • Áreas comunes  → azul      • Parqueaderos → naranja
   Los estados de cobro usan la paleta de ESTADO (nunca los colores de las fuentes)
   y siempre van con ícono y nombre. */

.conta-stats[b-4qfnu6wv2c] {
    --conta-areas: #2a78d6;
    --conta-parqueo: #eb6834;
    --conta-cobrado: #0ca30c;
    --conta-pendiente: #fab219;
    --conta-exonerado: #898781;
    --conta-guia: color-mix(in srgb, var(--synbex-border) 65%, transparent);
    --conta-base: var(--synbex-border);

    margin-top: 32px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .conta-stats[b-4qfnu6wv2c] {
        --conta-areas: #3987e5;
        --conta-parqueo: #d95926;
    }
}

:root[data-theme="dark"] .conta-stats[b-4qfnu6wv2c] {
    --conta-areas: #3987e5;
    --conta-parqueo: #d95926;
}

.is-areas[b-4qfnu6wv2c] {
    --conta-color: var(--conta-areas);
}

.is-parqueo[b-4qfnu6wv2c] {
    --conta-color: var(--conta-parqueo);
}

/* ── Encabezado y filtro ─────────────────────────────────────────────────────── */

.conta-stats-encabezado[b-4qfnu6wv2c] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.conta-stats-titulo[b-4qfnu6wv2c] {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--synbex-text);
}

.conta-filtro[b-4qfnu6wv2c] {
    min-width: 200px;
}

.conta-filtro .synbex-label[b-4qfnu6wv2c] {
    margin-bottom: 4px;
}

/* Recarga sin parpadeo: lo anterior queda atenuado hasta que llega lo nuevo. */
.conta-contenido[b-4qfnu6wv2c] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: opacity 0.15s ease;
}

.conta-contenido.esta-cargando[b-4qfnu6wv2c] {
    opacity: 0.55;
    pointer-events: none;
}

/* ── Cifras principales ──────────────────────────────────────────────────────── */

.conta-kpis[b-4qfnu6wv2c] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.conta-kpi[b-4qfnu6wv2c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 18px 20px;
}

.conta-kpi-etiqueta[b-4qfnu6wv2c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--synbex-text-muted);
}

/* La cifra principal: la única grande de la vista, en la misma letra que todo. */
.conta-kpi-heroe[b-4qfnu6wv2c] {
    font-size: 44px;
    font-weight: 650;
    line-height: 1.05;
    color: var(--synbex-text);
    overflow-wrap: anywhere;
}

.conta-kpi-valor[b-4qfnu6wv2c] {
    font-size: 24px;
    font-weight: 650;
    line-height: 1.15;
    color: var(--synbex-text);
    overflow-wrap: anywhere;
}

.conta-kpi-detalle[b-4qfnu6wv2c] {
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

.conta-variacion[b-4qfnu6wv2c] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
}

.conta-variacion[b-4qfnu6wv2c]  svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.conta-variacion.es-sube[b-4qfnu6wv2c] {
    color: var(--synbex-success);
}

.conta-variacion.es-baja[b-4qfnu6wv2c] {
    color: var(--synbex-danger);
}

.conta-variacion.es-neutra[b-4qfnu6wv2c] {
    font-weight: 400;
    color: var(--synbex-text-muted);
}

.conta-participacion[b-4qfnu6wv2c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Medidor: la parte llena con el color de la fuente y la pista con un tono más
   claro del MISMO color, así se lee "qué parte de todo" en toda la barra. */
.conta-medidor[b-4qfnu6wv2c] {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--conta-color) 20%, transparent);
    overflow: hidden;
}

.conta-medidor span[b-4qfnu6wv2c] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--conta-color);
}

.conta-participacion-texto[b-4qfnu6wv2c] {
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

/* Muestra de color junto a un nombre: el color va en la marca, nunca en el texto. */
.conta-muestra[b-4qfnu6wv2c] {
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--conta-color);
}

/* ── Tarjetas de gráfico ─────────────────────────────────────────────────────── */

.conta-fila[b-4qfnu6wv2c] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.conta-grafico[b-4qfnu6wv2c] {
    min-width: 0;
    padding: 20px 22px;
}

.conta-grafico-encabezado[b-4qfnu6wv2c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.conta-grafico-encabezado h3[b-4qfnu6wv2c] {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--synbex-text);
}

.conta-grafico-sub[b-4qfnu6wv2c] {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

.conta-leyenda[b-4qfnu6wv2c] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

.conta-leyenda > span[b-4qfnu6wv2c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.conta-enlace[b-4qfnu6wv2c] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--synbex-primary);
    text-decoration: none;
    white-space: nowrap;
}

.conta-enlace:hover[b-4qfnu6wv2c] {
    text-decoration: underline;
}

/* ── Columnas apiladas ───────────────────────────────────────────────────────── */

/* El alto incluye la franja del eje X: el contenedor nunca recorta sus etiquetas
   ni obliga a un scroll interno. */
.conta-columnas[b-4qfnu6wv2c] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 200px auto;
    column-gap: 10px;
}

.conta-eje-y[b-4qfnu6wv2c] {
    position: relative;
    grid-row: 1;
    grid-column: 1;
    min-width: 54px;
}

.conta-eje-y span[b-4qfnu6wv2c] {
    position: absolute;
    right: 0;
    transform: translateY(50%);
    font-size: 11px;
    color: var(--synbex-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.conta-area-trazado[b-4qfnu6wv2c] {
    position: relative;
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: stretch;
}

/* Líneas guía: finas, sólidas y un paso por encima de la superficie. */
.conta-guia[b-4qfnu6wv2c] {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--conta-guia);
    pointer-events: none;
}

.conta-guia.es-base[b-4qfnu6wv2c] {
    background: var(--conta-base);
}

/* La franja entera es la zona que responde al puntero, más grande que la barra. */
.conta-franja[b-4qfnu6wv2c] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: 6px;
    outline: none;
    cursor: default;
}

.conta-franja:hover[b-4qfnu6wv2c],
.conta-franja:focus-visible[b-4qfnu6wv2c] {
    background: color-mix(in srgb, var(--synbex-text) 5%, transparent);
}

.conta-columna[b-4qfnu6wv2c] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: min(24px, 62%);
    min-height: 0;
}

.conta-tramo[b-4qfnu6wv2c] {
    flex-basis: 0;
    min-height: 2px;
    background: var(--conta-color);
    transition: filter 0.12s ease;
}

/* Punta redondeada solo arriba; la base, recta sobre el eje. */
.conta-tramo:first-child[b-4qfnu6wv2c] {
    border-radius: 4px 4px 0 0;
}

.conta-franja:hover .conta-tramo[b-4qfnu6wv2c],
.conta-franja:focus-visible .conta-tramo[b-4qfnu6wv2c] {
    filter: brightness(1.12);
}

.conta-eje-x[b-4qfnu6wv2c] {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    padding-top: 8px;
}

.conta-eje-x span[b-4qfnu6wv2c] {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: 11px;
    color: var(--synbex-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

/* ── Globo de datos ──────────────────────────────────────────────────────────── */

.conta-tt[b-4qfnu6wv2c] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 190px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #1f2937;
    color: #f9fafb;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.28);
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0.12s;
}

/* En las columnas el globo sale arriba de la franja completa. */
.conta-franja .conta-tt[b-4qfnu6wv2c] {
    bottom: calc(100% + 6px);
}

.conta-tt.es-derecha[b-4qfnu6wv2c] {
    left: auto;
    right: 0;
    transform: none;
}

.conta-tt-abajo[b-4qfnu6wv2c] {
    bottom: auto;
    top: calc(100% + 6px);
    left: 0;
    transform: none;
}

.conta-franja:hover .conta-tt[b-4qfnu6wv2c],
.conta-franja:focus-within .conta-tt[b-4qfnu6wv2c],
.conta-barra-fila:hover .conta-tt[b-4qfnu6wv2c],
.conta-barra-fila:focus-within .conta-tt[b-4qfnu6wv2c],
.conta-estado-tramo:hover .conta-tt[b-4qfnu6wv2c],
.conta-estado-tramo:focus-within .conta-tt[b-4qfnu6wv2c] {
    opacity: 1;
    visibility: visible;
}

.conta-tt-titulo[b-4qfnu6wv2c] {
    color: #d1d5db;
}

/* El valor manda en el globo; el nombre de la serie acompaña. */
.conta-tt-total[b-4qfnu6wv2c] {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}

.conta-tt-fila[b-4qfnu6wv2c] {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 8px;
    color: #d1d5db;
}

.conta-tt-fila strong[b-4qfnu6wv2c] {
    color: #ffffff;
    font-weight: 600;
}

/* Clave de serie en el globo: un trazo corto, no una caja. */
.conta-clave[b-4qfnu6wv2c] {
    display: block;
    width: 12px;
    height: 3px;
    border-radius: 2px;
    background: var(--conta-color);
}

/* ── Barras horizontales ─────────────────────────────────────────────────────── */

.conta-barras[b-4qfnu6wv2c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.conta-barra-fila[b-4qfnu6wv2c] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(84px, 34%) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 5px 6px;
    border-radius: 6px;
    outline: none;
}

.conta-barra-fila:hover[b-4qfnu6wv2c],
.conta-barra-fila:focus-visible[b-4qfnu6wv2c] {
    background: color-mix(in srgb, var(--synbex-text) 5%, transparent);
}

.conta-barra-nombre[b-4qfnu6wv2c] {
    font-size: 13px;
    color: var(--synbex-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conta-barra-pista[b-4qfnu6wv2c] {
    display: block;
    min-width: 0;
}

/* Base recta a la izquierda y punta redondeada: crece desde un solo eje. */
.conta-barra[b-4qfnu6wv2c] {
    display: block;
    height: 14px;
    min-width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--conta-color);
}

.conta-barra-valor[b-4qfnu6wv2c] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--synbex-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Estado de los cobros de parqueo ─────────────────────────────────────────── */

.conta-estados-barra[b-4qfnu6wv2c] {
    display: flex;
    gap: 2px;
    height: 18px;
    margin: 6px 0 16px;
}

.conta-estado-tramo[b-4qfnu6wv2c] {
    position: relative;
    flex-basis: 0;
    min-width: 4px;
    outline: none;
}

.conta-estado-tramo:first-child[b-4qfnu6wv2c] {
    border-radius: 4px 0 0 4px;
}

.conta-estado-tramo:last-child[b-4qfnu6wv2c] {
    border-radius: 0 4px 4px 0;
}

.conta-estado-tramo:only-child[b-4qfnu6wv2c] {
    border-radius: 4px;
}

.conta-estado-tramo:hover[b-4qfnu6wv2c],
.conta-estado-tramo:focus-visible[b-4qfnu6wv2c] {
    filter: brightness(1.1);
}

.conta-estado-tramo.es-cobrado[b-4qfnu6wv2c],
.conta-estado-icono.es-cobrado[b-4qfnu6wv2c] {
    --conta-estado: var(--conta-cobrado);
}

.conta-estado-tramo.es-pendiente[b-4qfnu6wv2c],
.conta-estado-icono.es-pendiente[b-4qfnu6wv2c] {
    --conta-estado: var(--conta-pendiente);
}

.conta-estado-tramo.es-exonerado[b-4qfnu6wv2c],
.conta-estado-icono.es-exonerado[b-4qfnu6wv2c] {
    --conta-estado: var(--conta-exonerado);
}

.conta-estado-tramo[b-4qfnu6wv2c] {
    background: var(--conta-estado);
}

.conta-estados-lista[b-4qfnu6wv2c] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.conta-estados-lista li[b-4qfnu6wv2c] {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.conta-estado-icono[b-4qfnu6wv2c] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--conta-estado) 18%, transparent);
    color: var(--conta-estado);
}

.conta-estado-icono[b-4qfnu6wv2c]  svg {
    width: 15px;
    height: 15px;
}

.conta-estado-nombre[b-4qfnu6wv2c] {
    color: var(--synbex-text);
}

.conta-estado-cantidad[b-4qfnu6wv2c] {
    color: var(--synbex-text-muted);
    font-variant-numeric: tabular-nums;
}

.conta-estado-monto[b-4qfnu6wv2c] {
    color: var(--synbex-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ── Vista en tabla ──────────────────────────────────────────────────────────── */

.conta-tabla[b-4qfnu6wv2c] {
    margin-top: 14px;
    border-top: 1px solid var(--conta-guia);
    padding-top: 10px;
}

.conta-tabla summary[b-4qfnu6wv2c] {
    width: max-content;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--synbex-primary);
    cursor: pointer;
}

.conta-tabla-scroll[b-4qfnu6wv2c] {
    margin-top: 10px;
    overflow-x: auto;
}

.conta-num[b-4qfnu6wv2c] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Pantallas medianas y celular ────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .conta-kpis[b-4qfnu6wv2c] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .conta-fila[b-4qfnu6wv2c] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .conta-kpis[b-4qfnu6wv2c] {
        grid-template-columns: minmax(0, 1fr);
    }

    .conta-kpi-heroe[b-4qfnu6wv2c] {
        font-size: 36px;
    }

    .conta-grafico[b-4qfnu6wv2c] {
        padding: 16px;
    }

    .conta-columnas[b-4qfnu6wv2c] {
        grid-template-rows: 170px auto;
    }

    .conta-eje-y[b-4qfnu6wv2c] {
        min-width: 44px;
    }

    /* Con 12 meses en un teléfono no caben todas las etiquetas: se deja una sí y
       una no. El dato de cada mes sigue en el globo y en la tabla. */
    .conta-eje-x span:nth-child(even)[b-4qfnu6wv2c] {
        visibility: hidden;
    }

    .conta-tt[b-4qfnu6wv2c] {
        min-width: 170px;
    }
}

@media print {
    .conta-filtro[b-4qfnu6wv2c],
    .conta-tabla summary[b-4qfnu6wv2c] {
        display: none;
    }
}
/* /Components/Pages/Dashboard/Cleaning/Assign.razor.rz.scp.css */
/* Acciones de cada fila (Reactivar / Cancelar) en las pestañas Pendiente y
   Vencida. En escritorio es lo mismo que tenía antes en un style suelto:
   pegadas a la derecha de la celda.

   En celular la fila se vuelve tarjeta (.synbex-table-stacked, app.css) y este
   contenedor se quedaba del ancho de su contenido, así que los botones salían
   apretados contra el borde derecho con el texto mal ajustado. Con width:100%
   la fila de botones llega de lado a lado y cada botón toma su mitad. */
.cleaning-row-actions[b-mnztbjborg] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

@media (max-width: 600px) {
    .cleaning-row-actions[b-mnztbjborg] {
        width: 100%;
    }

    /* box-sizing explícito porque acá conviven <button> (border-box por
       defecto) y, si se agrega alguno, <a class="btn-synbex"> (content-box):
       sin igualarlos, con el mismo flex-basis quedan de distinto ancho. */
    .cleaning-row-actions .btn-synbex[b-mnztbjborg] {
        flex: 1 1 0;
        min-width: 0;
        box-sizing: border-box;
        justify-content: center;
    }
}
/* /Components/Pages/Dashboard/Cleaning/Checklist.razor.rz.scp.css */
/* Antes tenía max-width:700px, que la dejaba más angosta que la tarjeta del
   checklist de abajo (esa no tiene tope) — se saca para que las dos tarjetas
   apiladas ocupen siempre el mismo ancho, el del contenedor de la página. */
.checklist-equal-card[b-xzurnrocxg] {
    box-sizing: border-box;
}

.checklist-card-header[b-xzurnrocxg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.checklist-card-title[b-xzurnrocxg] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--synbex-text);
}

[b-xzurnrocxg] .checklist-add-form {
    display: block;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--synbex-border);
}

.checklist-facility-error[b-xzurnrocxg] {
    border-color: var(--synbex-danger);
    box-shadow: 0 0 0 1px var(--synbex-danger);
}

.checklist-facility-error-text[b-xzurnrocxg] {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-danger);
}
/* /Components/Pages/Dashboard/Cleaning/Index.razor.rz.scp.css */
.cleaning-row-chevron[b-3ux8mpcipe] {
    display: inline-block;
    width: 12px;
    margin-right: 8px;
    color: var(--synbex-text-muted);
    font-size: 10px;
    transition: transform 0.15s ease;
}

.tenant-row.is-expanded td[b-3ux8mpcipe] {
    border-bottom: none;
}

.cleaning-detail-row td[b-3ux8mpcipe] {
    background: var(--synbex-primary-soft);
    border-bottom: 2px solid var(--synbex-primary);
    padding: 16px;
}

.cleaning-detail-comment[b-3ux8mpcipe] {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--synbex-text);
}

.cleaning-detail-grid[b-3ux8mpcipe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Antes 20px — pedido explícito: las fotos quedaban muy pegadas al
       checklist de al lado. column-gap más ancho separa las dos columnas;
       row-gap se nota cuando colapsan a una sola columna en celular. */
    column-gap: 36px;
    row-gap: 20px;
    align-items: start;
}

@media (max-width: 720px) {
    .cleaning-detail-grid[b-3ux8mpcipe] {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }
}

.cleaning-result-checklist[b-3ux8mpcipe] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cleaning-result-item[b-3ux8mpcipe] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    font-size: 13.5px;
    color: var(--synbex-text);
}

.cleaning-result-icon[b-3ux8mpcipe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    background: var(--synbex-border);
    color: var(--synbex-text-muted);
}

.cleaning-result-item.is-done .cleaning-result-icon[b-3ux8mpcipe] {
    background: var(--synbex-success);
    color: #fff;
}

.cleaning-result-item.is-done span:last-child[b-3ux8mpcipe] {
    color: var(--synbex-text-muted);
}

/* La cuadrícula de fotos con "Ver todas"/galería/pantalla completa se movió a
   app.css (global) — MyUnitCleaning.razor (vista del residente) ahora
   reutiliza exactamente el mismo patrón, y el CSS aislado por componente no
   cruza entre archivos .razor distintos aunque el nombre de clase sea igual. */

/* ── Personal de limpieza: "¿Qué vas a limpiar?" ──────────────────────────────── */

/* La descripción y la flecha son solo de computadora: en celular la tarjeta es
   angosta y ya se entiende con el título. */
.cleaning-what-subtitle[b-3ux8mpcipe],
.cleaning-opcion-desc[b-3ux8mpcipe],
.cleaning-opcion-flecha[b-3ux8mpcipe] {
    display: none;
}

@media (min-width: 900px) {
    .cleaning-staff-page .cleaning-what-title[b-3ux8mpcipe] {
        margin: 2px 0 4px;
        text-align: left;
    }

    .cleaning-what-subtitle[b-3ux8mpcipe] {
        display: block;
        margin: 0 0 18px;
        font-size: 14px;
        color: var(--synbex-text-muted);
    }

    /* Una opción debajo de la otra, a lo ancho de la tarjeta. */
    .cleaning-opciones[b-3ux8mpcipe] {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .cleaning-opciones .hub-tile[b-3ux8mpcipe] {
        padding: 18px 20px;
    }

    .cleaning-opciones .hub-tile-text[b-3ux8mpcipe] {
        flex: 1;
        min-width: 0;
    }

    .cleaning-opcion-desc[b-3ux8mpcipe] {
        display: block;
        margin-top: 3px;
        font-size: 13.5px;
        line-height: 1.45;
        color: var(--synbex-text-muted);
    }

    .cleaning-opcion-flecha[b-3ux8mpcipe] {
        display: flex;
        flex-shrink: 0;
        color: var(--synbex-text-muted);
        transition: transform 0.2s ease, color 0.2s ease;
    }

    .cleaning-opcion-flecha[b-3ux8mpcipe]  svg {
        width: 20px;
        height: 20px;
    }

    .cleaning-opciones .hub-tile:hover .cleaning-opcion-flecha[b-3ux8mpcipe] {
        color: var(--synbex-primary);
        transform: translateX(3px);
    }
}

/* Panel "Consultar mi historial de limpieza", debajo de "¿Qué vas a limpiar?". */
.cleaning-historial-panel[b-3ux8mpcipe] {
    margin-bottom: 24px;
}

.cleaning-historial-panel .hub-tile-text[b-3ux8mpcipe] {
    flex: 1;
    min-width: 0;
}

.cleaning-historial-desc[b-3ux8mpcipe] {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--synbex-text-muted);
}

.cleaning-historial-flecha[b-3ux8mpcipe] {
    display: flex;
    flex-shrink: 0;
    color: var(--synbex-text-muted);
}

.cleaning-historial-flecha[b-3ux8mpcipe]  svg {
    width: 20px;
    height: 20px;
}
/* /Components/Pages/Dashboard/Cleaning/MyHistory.razor.rz.scp.css */
/* ── Mi historial de limpieza ─────────────────────────────────────────────────── */

.historial-volver[b-unnkwhzj4e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--synbex-text-muted);
    text-decoration: none;
}

.historial-volver:hover[b-unnkwhzj4e] {
    color: var(--synbex-primary);
}

.historial-volver[b-unnkwhzj4e]  svg {
    width: 16px;
    height: 16px;
}

.historial-resumen[b-unnkwhzj4e] {
    margin-bottom: 16px;
}

/* Selector de período: botones en una sola fila, el activo relleno. */
.historial-periodos[b-unnkwhzj4e] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--synbex-bg);
    border: 1px solid var(--synbex-border);
}

.historial-periodo[b-unnkwhzj4e] {
    min-height: 38px;
    padding: 0 8px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--synbex-text-muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.historial-periodo:hover[b-unnkwhzj4e] {
    color: var(--synbex-text);
}

.historial-periodo.esta-activo[b-unnkwhzj4e] {
    background: var(--synbex-primary);
    color: #ffffff;
    box-shadow: 0 4px 12px -6px var(--synbex-primary);
}

/* El número grande. */
.historial-total[b-unnkwhzj4e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 22px 0 18px;
    text-align: center;
    transition: opacity 0.15s ease;
}

.historial-total-numero[b-unnkwhzj4e] {
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    color: var(--synbex-text);
}

.historial-total-texto[b-unnkwhzj4e] {
    font-size: 14px;
    color: var(--synbex-text-muted);
}

/* Las cuatro partes. */
.historial-subs[b-unnkwhzj4e] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    transition: opacity 0.15s ease;
}

.esta-cargando[b-unnkwhzj4e] {
    opacity: 0.5;
}

.historial-sub[b-unnkwhzj4e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-bg);
    text-align: center;
}

.historial-sub-icono[b-unnkwhzj4e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

.historial-sub-icono.is-purple[b-unnkwhzj4e] {
    background: rgba(124, 58, 237, 0.12);
    color: #7c3aed;
}

.historial-sub-icono.is-teal[b-unnkwhzj4e] {
    background: rgba(13, 148, 136, 0.12);
    color: #0d9488;
}

.historial-sub-icono.is-orange[b-unnkwhzj4e] {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.historial-sub-icono[b-unnkwhzj4e]  svg {
    width: 20px;
    height: 20px;
}

.historial-sub-numero[b-unnkwhzj4e] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--synbex-text);
}

.historial-sub-texto[b-unnkwhzj4e] {
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

.historial-nota[b-unnkwhzj4e] {
    margin: 12px 0 0;
    font-size: 12px;
    text-align: center;
    color: var(--synbex-text-muted);
}

/* ── Lista ─────────────────────────────────────────────────────────────────── */

.historial-filtros[b-unnkwhzj4e] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.historial-filtro[b-unnkwhzj4e] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px 0 14px;
    border: 1px solid var(--synbex-border);
    border-radius: 999px;
    background: var(--synbex-surface);
    color: var(--synbex-text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.historial-filtro span[b-unnkwhzj4e] {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--synbex-bg);
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    color: var(--synbex-text-muted);
}

.historial-filtro.esta-activo[b-unnkwhzj4e] {
    border-color: var(--synbex-primary);
    background: var(--synbex-primary);
    color: #ffffff;
    font-weight: 600;
}

.historial-filtro.esta-activo span[b-unnkwhzj4e] {
    background: rgba(255, 255, 255, 0.9);
    color: var(--synbex-primary);
}

.historial-vacio[b-unnkwhzj4e] {
    margin: 8px 0 4px;
    text-align: center;
}

.historial-tabla[b-unnkwhzj4e] {
    overflow-x: auto;
}

.historial-fecha[b-unnkwhzj4e] {
    white-space: nowrap;
    color: var(--synbex-text-muted) !important;
}

.historial-chip[b-unnkwhzj4e] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.12);
    color: #7c3aed;
    font-size: 11.5px;
    font-weight: 600;
    vertical-align: middle;
}

.historial-checklist[b-unnkwhzj4e] {
    font-weight: 700;
    white-space: nowrap;
}

.historial-checklist.es-alto[b-unnkwhzj4e] {
    color: var(--synbex-success);
}

.historial-checklist.es-medio[b-unnkwhzj4e] {
    color: #b45309;
}

.historial-checklist.es-bajo[b-unnkwhzj4e] {
    color: var(--synbex-danger);
}

@media (max-width: 600px) {
    .historial-periodo[b-unnkwhzj4e] {
        font-size: 12.5px;
        padding: 0 4px;
    }

    .historial-subs[b-unnkwhzj4e] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .historial-filtros[b-unnkwhzj4e] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .historial-filtro[b-unnkwhzj4e] {
        flex-shrink: 0;
    }
}
/* /Components/Pages/Dashboard/Cleaning/Report.razor.rz.scp.css */
/* /Components/Pages/Dashboard/Comunidad/ComunidadHub.razor.rz.scp.css */
/* Mismo tratamiento que RegistrosHub.razor.css — ver los comentarios ahí.
   Botones grandes para el guarda puro en celular (pedido explícito), solo
   con .is-guard-large (agregado desde el code-behind únicamente cuando
   _isGuardOnly) y solo en celular. */
@media (max-width: 600px) {
    .hub-grid.is-guard-large[b-ivdb336v70] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* Reducido a ~60% del tamaño original (pedido explícito — quedaba
       demasiado alto). */
    .hub-tile.is-guard-large[b-ivdb336v70] {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        min-height: 140px;
        padding: 16px 14px;
        gap: 10px;
    }

    .hub-tile.is-guard-large .hub-tile-icon[b-ivdb336v70] {
        width: 46px;
        height: 46px;
        font-size: 25px;
    }

    .hub-tile.is-guard-large .hub-tile-icon svg[b-ivdb336v70] {
        width: 26px;
        height: 26px;
    }

    .hub-tile.is-guard-large .hub-tile-text[b-ivdb336v70] {
        align-items: center;
    }

    .hub-tile.is-guard-large .hub-tile-title[b-ivdb336v70] {
        font-size: 15px;
    }

    .hub-tile.is-guard-large .hub-tile-desc[b-ivdb336v70] {
        font-size: 12px;
        white-space: normal;
    }
}
/* /Components/Pages/Dashboard/Documents/DocumentForm.razor.rz.scp.css */
.synbex-toggle-field[b-zogb0uaprn] {
    justify-content: flex-start;
    gap: 12px;
}

.synbex-toggle-label-off[b-zogb0uaprn] {
    color: var(--synbex-text-muted);
    transition: color 0.15s ease;
}

.synbex-period-wrapper[b-zogb0uaprn] {
    position: relative;
}

.synbex-period-placeholder[b-zogb0uaprn] {
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 34px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--synbex-surface);
    color: var(--synbex-text-muted);
    font-size: 14.5px;
    font-style: italic;
    border-radius: var(--synbex-radius-md);
    pointer-events: none;
}
/* /Components/Pages/Dashboard/Index.razor.rz.scp.css */
/* ===== Resumen rápido (inicio del guarda) ===== */
.guard-summary-card[b-9hkv26qfdx] {
    margin-top: 20px;
    margin-bottom: 24px;
}

/* "Semana N" / mes actual junto a "Registro semanal/mensual" de Limpieza —
   pedido explícito: chiquito y azul, no algo grande que compita con el título. */
.cleaning-registro-heading[b-9hkv26qfdx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cleaning-registro-period[b-9hkv26qfdx] {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--synbex-primary);
}

.guard-summary-grid[b-9hkv26qfdx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 20px;
}


.guard-summary-stat[b-9hkv26qfdx] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.guard-summary-icon[b-9hkv26qfdx] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guard-summary-icon svg[b-9hkv26qfdx] {
    width: 24px;
    height: 24px;
}

.guard-summary-number[b-9hkv26qfdx] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
}

.guard-summary-label[b-9hkv26qfdx] {
    font-size: 13px;
    color: var(--synbex-text-muted);
    margin: 1px 0 3px;
}

/* Registro semanal/mensual de Limpieza — una sola columna a todo el ancho (no
   la grilla de 2 columnas del guarda): pedido explícito, "una columna que diga
   limpieza esa semana, abajo checklist esta semana". El selector compuesto
   pisa tanto la regla base de arriba como la de @media(max-width:700px) más
   abajo, que también aplica sobre .guard-summary-grid. */
.guard-summary-grid.cleaning-summary-grid[b-9hkv26qfdx] {
    grid-template-columns: 1fr;
    gap: 14px;
}

/* ===== Inicio de admin (TenantAdmin/FacilityAdmin) ===== */
.dashboard-admin-header[b-9hkv26qfdx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.guard-summary-link[b-9hkv26qfdx] {
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.guard-summary-link:hover[b-9hkv26qfdx] {
    text-decoration: underline;
}

/* ===== Tarjetas grandes (Paquetería / Registros / Consultas) ===== */
.guard-home-grid[b-9hkv26qfdx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 20px;
}

.guard-home-card[b-9hkv26qfdx] {
    display: flex;
    flex-direction: column;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 24px;
}

/* Rediseño pedido explícito: ícono circular grande centrado + título + un
   botón chico y redondeado abajo ("Entrar ›"), sin la lista de viñetas ni el
   texto descriptivo que tenía antes cada tarjeta. */
.guard-home-card-v2[b-9hkv26qfdx] {
    align-items: center;
    text-align: center;
    gap: 18px;
    padding: 32px 20px;
}

.guard-home-card-icon-lg[b-9hkv26qfdx] {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guard-home-card-icon-lg svg[b-9hkv26qfdx] {
    width: 38px;
    height: 38px;
}

.guard-home-card-title[b-9hkv26qfdx] {
    font-size: 17px;
    font-weight: 700;
}

.guard-home-card-enter[b-9hkv26qfdx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.guard-home-card-enter:hover[b-9hkv26qfdx] {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Cuando Consultas no está habilitado solo quedan 2 tarjetas — se reparten
   mitad y mitad en vez de dejar el espacio vacío donde iba la tercera. */
.guard-home-grid-2[b-9hkv26qfdx] {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 700px) {
    .guard-home-grid-2[b-9hkv26qfdx] {
        grid-template-columns: 1fr;
    }
}

/* ===== Variantes de color reutilizadas por el resumen y las tarjetas ===== */
.is-purple.guard-summary-icon[b-9hkv26qfdx], .is-purple.guard-home-card-icon-lg[b-9hkv26qfdx] {
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

.is-blue.guard-summary-icon[b-9hkv26qfdx], .is-blue.guard-home-card-icon-lg[b-9hkv26qfdx] {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.is-green.guard-summary-icon[b-9hkv26qfdx], .is-green.guard-home-card-icon-lg[b-9hkv26qfdx] {
    background: rgba(22, 163, 74, 0.12);
    color: var(--synbex-success);
}

.is-orange.guard-summary-icon[b-9hkv26qfdx] {
    background: rgba(217, 119, 6, 0.14);
    color: #d97706;
}

.is-red.guard-summary-icon[b-9hkv26qfdx] {
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
}

.is-teal.guard-summary-icon[b-9hkv26qfdx], .is-teal.guard-home-card-icon-lg[b-9hkv26qfdx] {
    background: rgba(13, 148, 136, 0.14);
    color: #0d9488;
}

.guard-summary-link.is-purple[b-9hkv26qfdx] { color: var(--synbex-primary); }
.guard-summary-link.is-blue[b-9hkv26qfdx] { color: #2563eb; }
.guard-summary-link.is-green[b-9hkv26qfdx] { color: var(--synbex-success); }
.guard-summary-link.is-orange[b-9hkv26qfdx] { color: #d97706; }
.guard-summary-link.is-teal[b-9hkv26qfdx] { color: #0d9488; }

.guard-home-card-enter.is-purple[b-9hkv26qfdx] { background: var(--synbex-primary); }
.guard-home-card-enter.is-blue[b-9hkv26qfdx] { background: #2563eb; }
.guard-home-card-enter.is-green[b-9hkv26qfdx] { background: var(--synbex-success); }
.guard-home-card-enter.is-teal[b-9hkv26qfdx] { background: #0d9488; }

/* Cada estadística de "Resumen rápido" en su propio panel separado — pedido
   explícito, antes eran filas sueltas sin separación visual entre ellas. */
.guard-summary-stat[b-9hkv26qfdx] {
    padding: 14px 16px;
    background: var(--synbex-bg);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
}

@media (max-width: 700px) {
    .guard-summary-grid[b-9hkv26qfdx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* En celular las dos columnas de arriba no caben: cada tarjeta necesita ~174px
   más el ícono, y el resumen del guarda terminaba saliéndose de la pantalla.
   Tiene que ir DESPUÉS del bloque de 700px — misma especificidad, gana la
   última regla del archivo. */
@media (max-width: 600px) {
    .guard-summary-grid[b-9hkv26qfdx] {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ===== Inicio de Residentes: "Mi unidad" / "Nivel del conjunto" ===== */
/* Cada bloque va dentro de su propio marco: el borde fino gris de siempre, para
   que se vea dónde termina "Mi unidad" y dónde empieza "Actividades del conjunto"
   (pedido explícito). Pedido explícito (ajuste 2026-10-01, sobre una imagen de
   referencia de tema oscuro): el fondo pasó de transparente a un lavado azul
   —el mismo --synbex-primary de la marca, muy transparente— para que el panel
   se note con algo de color en vez de verse plano, sin llegar a oscurecerlo
   tanto como el original (ese es tema oscuro de verdad; acá se mantiene la
   paleta clara de Synbex, solo con un tinte). Las tarjetas de adentro siguen
   con su propio fondo sólido, por encima de este lavado. */
.resident-home-section[b-9hkv26qfdx] {
    margin-bottom: 28px;
    padding: 18px 20px 20px;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    /* Ajuste 2026-10-04 (pedido explícito): en el tema claro los paneles principales
       llevan el MISMO fondo que las tarjetas de adentro y que el resto de la app
       (Objetos perdidos, etc.) — el "blanco" del tema, --synbex-surface — y no
       transparente como antes. Es el mismo que ya traía el panel de Anuncios por ser
       .synbex-card, así los tres quedan iguales. */
    background: var(--synbex-surface);
}

/* Ajuste 2026-10-04 (pedido explícito): el lavado azul de los paneles es SOLO del
   tema oscuro; en el claro llevan el fondo de las tarjetas (arriba). Las dos formas
   de estar en oscuro, igual que el resto de la app: el que el sistema pide sin que la
   persona haya elegido tema, y el elegido a mano. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .resident-home-section[b-9hkv26qfdx],
    :root:not([data-theme="light"]) .home-announcements-card[b-9hkv26qfdx] {
        background: color-mix(in srgb, var(--synbex-primary) 7%, transparent);
    }
}

:root[data-theme="dark"] .resident-home-section[b-9hkv26qfdx],
:root[data-theme="dark"] .home-announcements-card[b-9hkv26qfdx] {
    background: color-mix(in srgb, var(--synbex-primary) 7%, transparent);
}

.resident-home-section-header[b-9hkv26qfdx] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.catalog-icon-box.resident-home-section-icon[b-9hkv26qfdx] {
    width: 40px;
    height: 40px;
}

.catalog-icon-box.resident-home-section-icon svg[b-9hkv26qfdx] {
    width: 20px;
    height: 20px;
}

.resident-home-section-title[b-9hkv26qfdx] {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.resident-home-section-subtitle[b-9hkv26qfdx] {
    font-size: 13px;
    color: var(--synbex-text-muted);
    margin: 2px 0 0;
}

/* Pedido explícito (2026-10-01, sobre una imagen de referencia): resumen
   cortico de Torre/Piso/Apartamento, arriba de las tarjetas de "Mi unidad"
   que ya existían. Tarjeta propia (fondo sólido, no el lavado del panel)
   para que los datos se lean claro encima. Ajuste del mismo día: la
   ilustración salió de ADENTRO de esta caja — el usuario la quiso "por
   separado, por fuera" del borde — ver .resident-home-unit-row más abajo. */
.resident-home-unit-summary[b-9hkv26qfdx] {
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    padding: 16px 20px;
}

.resident-home-unit-summary-fields[b-9hkv26qfdx] {
    display: flex;
    gap: 28px;
    /* nowrap a propósito: con flex-wrap el navegador medía el "ancho
       natural" de la caja (ya sin flex:1) tomando el campo individual más
       ancho en vez de los 3 juntos en fila, y los apilaba en vertical. En
       mobile sí se vuelve a envolver (ver media query). */
    flex-wrap: nowrap;
}

.resident-home-unit-field[b-9hkv26qfdx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.resident-home-unit-field-label[b-9hkv26qfdx] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--synbex-text-muted);
}

.resident-home-unit-field-value[b-9hkv26qfdx] {
    font-size: 15px;
    font-weight: 700;
}

/* Fila que envuelve la caja de arriba + la ilustración, AL LADO, fuera del
   borde (pedido explícito 2026-10-01: "el icono está por separado, está
   por fuera... y es más grande" — antes vivía adentro de
   .resident-home-unit-summary). Ajuste del mismo día: la caja ya NO crece
   a flex:1 — ahora mide solo lo que necesita su contenido ("que no sea tan
   ancho, hasta donde termina el apartamento"), con el mismo espacio a la
   derecha (gap) que su propio padding a la izquierda (20px), y flex:1 pasó
   a esta FILA para que se centre verticalmente en el espacio que sobra
   debajo del encabezado — ver .resident-home-split-row más abajo para el
   resto de ese arreglo de alineación. */
.resident-home-unit-row[b-9hkv26qfdx] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
}

.resident-home-unit-illustration[b-9hkv26qfdx] {
    flex-shrink: 0;
    color: var(--synbex-primary);
    opacity: 0.55;
}

.resident-home-unit-illustration svg[b-9hkv26qfdx] {
    /* Más grande que antes (84×63, luego 118×88) — pedido explícito, y con
       más espacio disponible ahora que la caja ya no ocupa todo el ancho. */
    width: 150px;
    height: 112px;
}

@media (max-width: 600px) {
    .resident-home-unit-row[b-9hkv26qfdx] {
        flex-direction: column;
    }

    .resident-home-unit-summary[b-9hkv26qfdx] {
        width: 100%;
    }

    .resident-home-unit-summary-fields[b-9hkv26qfdx] {
        flex-wrap: wrap;
    }

    .resident-home-unit-illustration[b-9hkv26qfdx] {
        align-self: center;
    }
}

/* Pedido explícito (2026-10-01, sobre una imagen de referencia): mini
   carrusel de anuncios en el inicio — se pasa solo cada 7s
   (AdvanceHomeAnnouncementAsync), con puntos abajo si hay más de uno.
   Clases propias ("home-announcements-*"), no las "announcement-modal-*"
   de la ventana grande, para que un ajuste de estilo en una no le cambie
   el look a la otra. */
.home-announcements-card[b-9hkv26qfdx] {
    margin-bottom: 20px;
    /* .synbex-card trae padding:24px parejo; .resident-home-section usa
       18px 20px 20px — sin igualarlo acá el título de este panel quedaba
       6px más abajo que el de "Mi unidad"/"Accesos rápidos". */
    padding: 18px 20px 20px;
}

/* Envuelve todo lo que va debajo del encabezado (carrusel, "Cargando..." o
   el estado vacío) — flex:1 + centrado para que el encabezado se quede
   pegado arriba (alineado con los otros 2 paneles) y el contenido más
   corto (por ejemplo el estado vacío) no quede pegado arriba con un hueco
   abajo. */
.home-announcements-body-wrap[b-9hkv26qfdx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Ajuste 2026-10-01: se quitó el subtítulo ("Lo que ha publicado tu
   administración") y en su lugar queda un espacio en blanco antes de la
   caja del anuncio — pedido explícito. */
.home-announcements-header[b-9hkv26qfdx] {
    /* Antes 26px porque en lugar del subtítulo quedaba un espacio en blanco; desde
       2026-10-04 el panel vuelve a tener su descripción (pedido explícito) y usa el
       mismo espacio que "Mi unidad" y "Accesos rápidos". */
    margin-bottom: 14px;
}

/* "1 de 3": en qué anuncio está el carrusel. A la derecha del encabezado; los
   números iguales de ancho (tabular) para que no baile al cambiar de 1 a 2. */
.home-announcements-count[b-9hkv26qfdx] {
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--synbex-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--synbex-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Ajuste 2026-10-01: título + mensaje + fecha van juntos en su propia caja
   con borde (pedido explícito), separada del fondo lavado de la tarjeta. */
.home-announcements-box[b-9hkv26qfdx] {
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    padding: 16px 18px;
    margin-bottom: 16px;
}

/* Pedido explícito (2026-10-04): el anuncio se desliza al cambiar — el actual
   sale hacia la izquierda y el siguiente entra por la derecha.

   Todos los anuncios van en una fila horizontal ("pista") dentro de un visor
   que recorta lo que sobra; al avanzar, solo cambia el translateX de la pista
   (se pone en línea desde Index.razor). Se anima únicamente "transform", que el
   navegador resuelve en la tarjeta gráfica sin recalcular el diseño: por eso es
   fluido y casi no gasta batería, ni en computador ni en celular. will-change
   le avisa de antemano que esa capa se va a mover.

   Con "reducir movimiento" activado en el sistema, el cambio es instantáneo
   como antes (accesibilidad). */
.home-announcements-viewport[b-9hkv26qfdx] {
    overflow: hidden;
    border-radius: var(--synbex-radius-lg);
}

.home-announcements-track[b-9hkv26qfdx] {
    display: flex;
    will-change: transform;
    transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.home-announcements-slide[b-9hkv26qfdx] {
    flex: 0 0 100%;
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .home-announcements-track[b-9hkv26qfdx] {
        transition: none;
    }
}

.home-announcements-title[b-9hkv26qfdx] {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}

.home-announcements-message[b-9hkv26qfdx] {
    font-size: 13.5px;
    color: var(--synbex-text-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    /* Subió de 2 a 4 líneas — pedido explícito: se quitó el link de "Ver
       todos los anuncios" y ese espacio ahora lo aprovecha el mensaje. */
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-announcements-date[b-9hkv26qfdx] {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--synbex-text-muted);
}

/* Ajuste 2026-10-01: las flechas ya NO van a los lados del anuncio (pedido
   explícito, "no me gusta que estén a los lados") — se movieron acá, a los
   dos lados de la fila de puntitos, como su propio mecanismo de navegación
   separado del contenido. */
.home-announcements-nav[b-9hkv26qfdx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 10px;
}

/* Ajuste 2026-10-01: sin el círculo/borde que traía antes — pedido
   explícito ("más simples, sin ese borde redondeado... solamente la
   flecha"). Ahora es solo el ícono, sin fondo ni contorno. */
.home-announcements-arrow[b-9hkv26qfdx] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--synbex-text-muted);
    cursor: pointer;
    transition: color 0.15s ease;
}

.home-announcements-arrow:hover[b-9hkv26qfdx] {
    color: var(--synbex-primary);
}

.home-announcements-arrow svg[b-9hkv26qfdx] {
    width: 18px;
    height: 18px;
}

.home-announcements-dots[b-9hkv26qfdx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.home-announcements-dot[b-9hkv26qfdx] {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--synbex-border);
}

.home-announcements-dot.is-active[b-9hkv26qfdx] {
    background: var(--synbex-primary);
}

.resident-home-grid[b-9hkv26qfdx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 16px;
}

/* Pedido explícito (2026-10-01, sobre la imagen de referencia): las 3
   tarjetas de paquetes/mantenimientos/reservas salieron de adentro de "Mi
   unidad" para ir sueltas arriba de todo, sin panel con borde alrededor —
   solo necesitan el espaciado hacia la fila de abajo. */
.resident-home-top-stats[b-9hkv26qfdx] {
    margin-bottom: 28px;
}

/* Pedido explícito (2026-10-01, sobre una imagen de referencia): "Mi
   unidad" (50%), "Accesos rápidos" (25%) y "Anuncios del conjunto" (25%)
   van en una sola fila debajo de las tarjetas sueltas. Historial de ajustes
   de altura el mismo día: primero quedaron forzados a 360px (el usuario
   dijo "muy alto"), se bajó a altura natural (sin forzar nada), y
   después pidió que los 3 midan EXACTAMENTE lo mismo — align-items:stretch
   (los 3 toman la altura del más alto, que suele ser "Anuncios"). Último
   ajuste: centrar el bloque COMPLETO (encabezado incluido) dejaba el
   título de "Mi unidad" más abajo que el de los otros 2 paneles cuando su
   contenido medía distinto — pedido explícito: el encabezado se queda
   pegado arriba, igual en los 3, y es el CONTENIDO de abajo el que se
   centra en lo que sobra (ver flex:1 en .resident-home-unit-row,
   .resident-home-quick-grid y .home-announcements-body-wrap). */
.resident-home-split-row[b-9hkv26qfdx] {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 28px;
}

.resident-home-split-row > .resident-home-split-col[b-9hkv26qfdx] {
    min-width: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

/* "Mi unidad" tiene subtítulo debajo del título; "Accesos rápidos" y
   "Anuncios" no — con el align-items:center de .resident-home-section-header
   (que se deja igual en el resto de la app) el título de "Mi unidad" quedaba
   ~15px más arriba que los otros 2, porque el bloque título+subtítulo es más
   alto que uno de una sola línea. Alineado arriba (solo acá, con selector
   scoped) para que el TÍTULO, no el bloque completo, quede a la misma
   altura en los 3 paneles — pedido explícito. */
.resident-home-split-row > .resident-home-split-col > .resident-home-section-header[b-9hkv26qfdx] {
    align-items: flex-start;
}

.resident-home-split-col-50[b-9hkv26qfdx] {
    flex: 1 1 50%;
}

.resident-home-split-col-25[b-9hkv26qfdx] {
    flex: 1 1 25%;
}

@media (max-width: 600px) {
    .resident-home-split-row[b-9hkv26qfdx] {
        flex-direction: column;
    }
}

/* Panel "Accesos rápidos": ahora con el mismo encabezado (ícono + título)
   que "Mi unidad"/"Anuncios" — al principio no tenía ícono, pedido
   explícito de agregarle uno ("bolt", morado para distinguirlo del azul de
   Mi unidad y el naranja de Anuncios). flex:1 + align-content:center para
   que la rejilla se centre en el espacio que sobra debajo del encabezado,
   mismo tratamiento que .resident-home-unit-row. */
.resident-home-quick-grid[b-9hkv26qfdx] {
    flex: 1;
    align-content: center;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Columna angosta (panel al 25% del ancho): con ícono+texto+flecha en fila
   el texto quedaba con ~35px para envolver "Reportar mantenimiento" y se
   veía apachurrado. Ícono arriba, texto abajo, centrado — sin flecha, no
   hace tanta falta en un botón de acción directa como en una fila de
   navegación. */
.resident-home-quick-link[b-9hkv26qfdx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 12px 6px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    text-decoration: none;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    transition: background 0.15s ease;
}

.resident-home-quick-link:hover[b-9hkv26qfdx] {
    background: var(--synbex-primary-soft);
}

.catalog-icon-box.resident-home-quick-icon[b-9hkv26qfdx] {
    width: 34px;
    height: 34px;
}

.catalog-icon-box.resident-home-quick-icon svg[b-9hkv26qfdx] {
    width: 17px;
    height: 17px;
}

.resident-home-quick-label[b-9hkv26qfdx] {
    width: 100%;
}

/* En celular las tarjetas de "Mi unidad" y "Actividades del conjunto" van una
   debajo de otra, a todo el ancho — antes, en teléfonos más anchos, el
   auto-fit de arriba alcanzaba a meter 2 por fila y quedaban a la mitad. */
/* "Actividades del conjunto" tiene hasta cuatro tarjetas: en una sola fila quedaban
   muy angostas, así que van de dos en dos (pedido explícito). */
.resident-home-grid-dos[b-9hkv26qfdx] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
    .resident-home-grid[b-9hkv26qfdx],
    .resident-home-grid-dos[b-9hkv26qfdx] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.resident-home-stat-card[b-9hkv26qfdx] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 18px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, transform 0.1s ease;
}

.resident-home-stat-card:hover[b-9hkv26qfdx] {
    background: var(--synbex-primary-soft);
    transform: translateY(-1px);
}

.catalog-icon-box.resident-home-stat-icon[b-9hkv26qfdx] {
    width: 44px;
    height: 44px;
}

.catalog-icon-box.resident-home-stat-icon svg[b-9hkv26qfdx] {
    width: 22px;
    height: 22px;
}

.resident-home-stat-body[b-9hkv26qfdx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.resident-home-stat-title[b-9hkv26qfdx] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--synbex-text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.resident-home-stat-title[b-9hkv26qfdx]::after {
    content: "\203A";
    font-size: 18px;
    line-height: 1;
    color: var(--synbex-text-muted);
    flex-shrink: 0;
}

.resident-home-stat-value[b-9hkv26qfdx] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.resident-home-stat-label[b-9hkv26qfdx] {
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

.resident-home-stat-badge[b-9hkv26qfdx] {
    display: inline-block;
    align-self: flex-start;
    margin-top: 2px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(217, 119, 6, 0.14);
    color: #d97706;
}

.resident-home-stat-split[b-9hkv26qfdx] {
    display: flex;
    gap: 16px;
    margin-top: 2px;
    min-width: 0;
}

.resident-home-stat-split > div[b-9hkv26qfdx] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 14px;
    border-left: 1px solid var(--synbex-border);
    min-width: 0;
    flex: 1;
}

.resident-home-stat-split > div:first-child[b-9hkv26qfdx] {
    padding-left: 0;
    border-left: none;
}

/* En celular las tarjetas quedan angostas y "Confirmadas"/"Pendientes" no caben
   en una sola línea al lado del número — sin min-width:0 arriba, en vez de
   achicarse o pasar a una segunda línea, el texto se salía de la tarjeta. */
@media (max-width: 600px) {
    .resident-home-stat-label[b-9hkv26qfdx] {
        white-space: normal;
        word-break: break-word;
    }
}

/* "Resumen semanal/mensual" — usado tanto en el bloque de residente como en el
   de admin (ver HomeSummarySection() en Index.razor). */
.home-summary-card[b-9hkv26qfdx] {
    margin: 20px 0;
}

.home-summary-header[b-9hkv26qfdx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.home-summary-title[b-9hkv26qfdx] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.home-summary-period-select[b-9hkv26qfdx] {
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-text);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
}

.home-summary-list[b-9hkv26qfdx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-summary-item[b-9hkv26qfdx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: var(--synbex-radius-md);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.home-summary-item:hover[b-9hkv26qfdx] {
    background: var(--synbex-primary-soft);
}

/* Ícono de información junto a cada dato de Resumen semanal/General/Equipos —
   mismo lenguaje visual que .assembly-info-btn/.assembly-info-popover (sala
   de asamblea), pero abre hacia ABAJO en vez de hacia arriba: estos ítems
   suelen estar cerca del tope de la página, y abriendo hacia arriba el
   popover quedaba tapado por el encabezado. */
.home-info-wrap[b-9hkv26qfdx] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    /* Más pegado al ícono de la derecha (pedido explícito) — el gap:12px del
       .home-summary-item de arriba se reparte igual entre los 4 hijos de la
       fila; este margen negativo achica solo ESTE espacio sin tocar los demás
       (ícono→etiqueta, etiqueta→número). */
    margin-right: -7px;
}

.home-info-btn[b-9hkv26qfdx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* Gris clarito en vez del morado/azul de antes (pedido explícito: "que se
       vea menos", no quería que compitiera visualmente con el ícono principal
       de la fila). */
    background: rgba(148, 163, 184, 0.16);
    color: var(--synbex-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.home-info-btn:hover[b-9hkv26qfdx] {
    background: var(--synbex-text-muted);
    color: #fff;
}

.home-info-btn svg[b-9hkv26qfdx] {
    width: 10px;
    height: 10px;
}

.home-info-popover[b-9hkv26qfdx] {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 5;
    width: 300px;
    max-width: 80vw;
    padding: 14px 16px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    box-shadow: var(--synbex-shadow);
    font-size: 13px;
    line-height: 1.5;
    color: var(--synbex-text);
    text-align: left;
    /* No hereda el subrayado/color de enlace de .home-summary-item cuando el
       ícono vive dentro de una fila que es un <a> — el texto de la
       explicación no es parte del link. */
    text-decoration: none;
}

.home-info-wrap:hover .home-info-popover[b-9hkv26qfdx],
.home-info-popover.is-open[b-9hkv26qfdx] {
    display: block;
}

.home-info-popover p[b-9hkv26qfdx] {
    margin: 0 0 8px;
}

.home-info-popover p:last-child[b-9hkv26qfdx] {
    margin-bottom: 0;
}

.catalog-icon-box.home-summary-item-icon[b-9hkv26qfdx] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.catalog-icon-box.home-summary-item-icon svg[b-9hkv26qfdx] {
    width: 18px;
    height: 18px;
}

.home-summary-item-label[b-9hkv26qfdx] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
}

.home-summary-item-count[b-9hkv26qfdx] {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--synbex-primary);
}

/* Actividad reciente: altura fija — el contenido que se pasa de esa altura
   (más de ~4 novedades) se ve con scroll interno, en vez de agrandar la
   tarjeta. */
.resident-home-card-fixed[b-9hkv26qfdx] {
    display: flex;
    flex-direction: column;
    height: 400px;
}

.resident-home-card-scroll[b-9hkv26qfdx] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ===== Ventana flotante de avisos sin leer ===== */
.announcement-modal-backdrop[b-9hkv26qfdx] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;

    /* Esta ventana siempre se ve en tema claro, sin importar si el resto del panel
       está en oscuro — son las mismas variables que ya usa el resto de la app en
       modo claro (ver app.css), fijadas acá para que no las pise el modo oscuro. */
    --synbex-primary: #2c5cfc;
    --synbex-primary-hover: #254cd1;
    --synbex-primary-soft: #eef2ff;
    --synbex-text: #111827;
    --synbex-text-muted: #6b7280;
    --synbex-border: #e5e7eb;
    --synbex-surface: #ffffff;
    --synbex-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 32px -8px rgba(17, 24, 39, 0.12);
    --synbex-danger: #dc2626;
    --synbex-danger-soft: #fef2f2;
}

.announcement-modal-card[b-9hkv26qfdx] {
    width: 100%;
    max-width: 420px;
    background: var(--synbex-surface);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 36px 32px 28px;
    text-align: center;
}

/* Aviso importante (IsPriority): mismo diseño, pero todo lo que usa el acento
   morado (ícono, "Anuncios", puntito activo, botón "Siguiente") pasa a rojo de
   alerta al redefinir --synbex-primary solo dentro de esta tarjeta — y un anillo
   rojo alrededor de la tarjeta para que se note de lejos que es distinto. */
.announcement-modal-card.is-priority[b-9hkv26qfdx] {
    --synbex-primary: #dc2626;
    --synbex-primary-hover: #b91c1c;
    --synbex-primary-soft: #fef2f2;
    box-shadow: 0 0 0 2px var(--synbex-danger), var(--synbex-shadow);
}

/* Asamblea en curso: mismo diseño de tarjeta que los anuncios, pero en verde
   (mismo tono que .assembly-badge-live) para que se note que es una llamada a
   participar, no una alerta ni un aviso cualquiera. */
.announcement-modal-card.is-assembly[b-9hkv26qfdx] {
    --synbex-primary: #16a34a;
    --synbex-primary-hover: #15803d;
    --synbex-primary-soft: #dcfce7;
    box-shadow: 0 0 0 2px #16a34a, var(--synbex-shadow);
}

.assembly-live-modal-actions[b-9hkv26qfdx] {
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Tarjeta fija arriba del inicio que reemplaza al modal después de "Ahora no" —
   a propósito los mismos colores fijos (blanco/verde) que .announcement-modal-
   card.is-assembly, sin importar el tema activo, para que se siga reconociendo
   como la misma llamada a participar. */
.assembly-live-banner[b-9hkv26qfdx] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border-radius: var(--synbex-radius-lg);
    box-shadow: 0 0 0 2px #16a34a, 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 32px -8px rgba(17, 24, 39, 0.12);
    padding: 14px 18px;
    margin-bottom: 20px;
}

.assembly-live-banner-icon[b-9hkv26qfdx] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #dcfce7;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.assembly-live-banner-icon svg[b-9hkv26qfdx] {
    width: 22px;
    height: 22px;
}

.assembly-live-banner-body[b-9hkv26qfdx] {
    flex: 1;
    min-width: 0;
}

.assembly-live-banner-kicker[b-9hkv26qfdx] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #16a34a;
}

.assembly-live-banner-title[b-9hkv26qfdx] {
    margin: 2px 0 0;
    font-size: 14.5px;
    font-weight: 700;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assembly-live-banner-btn[b-9hkv26qfdx] {
    flex-shrink: 0;
    background: #16a34a;
}

.assembly-live-banner-btn:hover[b-9hkv26qfdx] {
    background: #15803d;
}

@media (max-width: 480px) {
    .assembly-live-banner[b-9hkv26qfdx] {
        flex-wrap: wrap;
    }

    .assembly-live-banner-btn[b-9hkv26qfdx] {
        width: 100%;
        justify-content: center;
    }
}

/* En celular los dos botones se reparten el ancho mitad y mitad (en vez de
   quedar chicos y pegados a la izquierda), con margen a los lados y un toque
   más grandes para que sean fáciles de tocar. */
@media (max-width: 480px) {
    .assembly-live-modal-actions[b-9hkv26qfdx] {
        flex-wrap: nowrap;
        margin: 22px 6px 0;
    }

    .assembly-live-modal-actions .btn-synbex[b-9hkv26qfdx] {
        flex: 1 1 0;
        padding: 13px 10px;
        font-size: 15px;
    }
}

.announcement-modal-priority-note[b-9hkv26qfdx] {
    margin: 10px 0 0;
    color: var(--synbex-text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.announcement-modal-icon[b-9hkv26qfdx] {
    width: 72px;
    height: 72px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.announcement-modal-icon svg[b-9hkv26qfdx] {
    width: 32px;
    height: 32px;
}

.announcement-modal-kicker[b-9hkv26qfdx] {
    display: block;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--synbex-primary);
}

.announcement-modal-title[b-9hkv26qfdx] {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--synbex-text);
}

.announcement-modal-message[b-9hkv26qfdx] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--synbex-text-muted);
    white-space: pre-wrap;
}

.announcement-modal-dots[b-9hkv26qfdx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
}

.announcement-modal-dot[b-9hkv26qfdx] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--synbex-border);
}

.announcement-modal-dot.is-active[b-9hkv26qfdx] {
    background: var(--synbex-primary);
}

.announcement-modal-actions[b-9hkv26qfdx] {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

/* Con "Atrás" (solo aparece después del primer anuncio) los dos botones se
   reparten los extremos en vez de quedar juntos a la derecha — pedido explícito
   (2026-09-28). Puro CSS: no hace falta una clase aparte que Blazor tenga que
   prender/apagar. */
.announcement-modal-actions:has(.announcement-modal-back)[b-9hkv26qfdx] {
    justify-content: space-between;
}

.announcement-modal-next[b-9hkv26qfdx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 999px;
}

.announcement-modal-back[b-9hkv26qfdx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 999px;
}

/* .announcement-modal-reactions/.announcement-modal-reaction (like/dislike) NO
   van acá: este archivo es CSS aislado de Blazor (solo aplica a lo que renderiza
   ESTE componente). Esos botones también los usa MyAnnouncements.razor, así que
   viven en app.css — ver ahí, buscando "Like/dislike de anuncios". */

/* ======================================
   Dona de estados (Equipos y Limpieza, inicio del administrador)

   Reemplazó a la barra horizontal de 3 segmentos: la barra mostraba bien la
   proporción pero dejaba los conteos sueltos en pastillas debajo, sin relación
   visual con el tramo al que pertenecían. Acá el gráfico va a la izquierda y
   las tres filas de estado a la derecha, una sobre otra y del ancho completo
   de su columna, cada una llevando a su propio filtro.
   ====================================== */

.donut-summary[b-9hkv26qfdx] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 18px;
    margin-top: 12px;
}

/* El anillo es un círculo con conic-gradient (mismo recurso que el aro de
   Paquetería) y un "hueco" encima del color de la tarjeta — no un SVG. El
   degradado lo arma Index.razor en C# porque cada tramo necesita su propio
   color y porcentaje acumulado, cosa que una clase CSS sola no puede hacer. */
.donut-chart[b-9hkv26qfdx] {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-chart-hole[b-9hkv26qfdx] {
    width: 62%;
    height: 62%;
    border-radius: 50%;
    background: var(--synbex-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
}

.donut-chart-total[b-9hkv26qfdx] {
    font-size: 20px;
    font-weight: 700;
}

.donut-chart-label[b-9hkv26qfdx] {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--synbex-text-muted);
}

.donut-rows[b-9hkv26qfdx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* box-sizing explícito para que el padding no sume por fuera del 100% y las
   filas se salgan de la columna en celular. */
.donut-row[b-9hkv26qfdx] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: var(--synbex-radius-md);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s ease;
}

.donut-row:hover[b-9hkv26qfdx] {
    filter: brightness(0.96);
}

.donut-row-label[b-9hkv26qfdx] {
    flex: 1;
    min-width: 0;
}

.donut-row-count[b-9hkv26qfdx] {
    font-size: 15px;
    font-weight: 700;
}

.donut-row-icon[b-9hkv26qfdx] {
    display: inline-flex;
    flex-shrink: 0;
}

/* ::deep obligatorio: HubIcons.Get() devuelve un MarkupString, así que el SVG
   entra al DOM sin el atributo de ámbito que Blazor le pone al resto del
   markup — un "svg { }" normal acá nunca calzaría. */
.donut-row-icon[b-9hkv26qfdx]  svg {
    width: 14px;
    height: 14px;
}

/* Mismos tonos que .asset-status-badge en app.css, para que un estado se vea
   igual acá que en la pantalla a la que lleva. */
.donut-row.is-ok[b-9hkv26qfdx] {
    background: rgba(22, 163, 74, 0.12);
    color: var(--synbex-success);
}

.donut-row.is-due-soon[b-9hkv26qfdx] {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.donut-row.is-overdue[b-9hkv26qfdx] {
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
}

.donut-row.is-pending[b-9hkv26qfdx] {
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

/* En celular la dona se achica para que la columna de la derecha no quede
   demasiado angosta y las etiquetas ("Por vencer") no se partan en dos. */
@media (max-width: 600px) {
    .donut-summary[b-9hkv26qfdx] {
        gap: 14px;
    }

    .donut-chart[b-9hkv26qfdx] {
        width: 82px;
        height: 82px;
    }

    .donut-chart-total[b-9hkv26qfdx] {
        font-size: 18px;
    }
}

/* Visita esperando en la portería: mismo molde que la de asamblea, pero en el
   ámbar de "esto está pasando ahora y hay que decidir", no en el verde de
   "vení a participar". */
.announcement-modal-card.is-visitor-approval[b-9hkv26qfdx] {
    --synbex-primary: #b45309;
    --synbex-primary-hover: #92400e;
    --synbex-primary-soft: #fef3c7;
    box-shadow: 0 0 0 2px #d97706, var(--synbex-shadow);
}

/* Foto que la portería le tomó a la visita al pedir el permiso (2026-10-02).
   Es un botón: tocarla la abre en grande. */
.visitor-approval-foto[b-9hkv26qfdx] {
    display: block;
    width: 100%;
    margin: 6px 0 14px;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}

.visitor-approval-foto img[b-9hkv26qfdx] {
    display: block;
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: var(--synbex-radius-md);
    background: #f3f4f6;
}

/* En celular la ventana de autorizar va de borde a borde (pedido 2026-10-02):
   más espacio para la foto y los botones. Si no cabe en la pantalla, se
   desplaza por dentro en vez de quedar cortada. */
@media (max-width: 600px) {
    .announcement-modal-backdrop.is-visitor-approval[b-9hkv26qfdx] {
        padding: 0;
    }

    .announcement-modal-card.is-visitor-approval[b-9hkv26qfdx] {
        max-width: none;
        max-height: 100dvh;
        overflow-y: auto;
        border-radius: 0;
        padding: 28px 18px 24px;
    }
}

/* Que quede claro que no contestar también es una decisión — así nadie cierra
   la pestaña creyendo que dejó la visita afuera. */
.visitor-approval-modal-note[b-9hkv26qfdx] {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--synbex-text-muted);
}

/* "Pendientes" y "Vencidas" de Limpiezas asignadas: son enlaces a la lista. */
.cleaning-summary-link[b-9hkv26qfdx] {
    position: relative;
    color: var(--synbex-text);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cleaning-summary-link:hover[b-9hkv26qfdx] {
    border-color: var(--synbex-primary);
    box-shadow: 0 0 0 3px var(--synbex-primary-soft);
}

.cleaning-summary-flecha[b-9hkv26qfdx] {
    display: flex;
    margin-left: auto;
    color: var(--synbex-text-muted);
}

.cleaning-summary-flecha[b-9hkv26qfdx]  svg,
.cleaning-summary-flecha svg[b-9hkv26qfdx] {
    width: 16px;
    height: 16px;
}

/* El mismo panel de anuncios en el inicio del personal (administración,
   portería, limpieza — 2026-10-02): va solo, a todo el ancho, en vez de en la
   fila de tres columnas del residente. Un alto mínimo para que no salte de
   tamaño cada vez que pasa a un anuncio más corto o más largo. */
.home-announcements-card.home-anuncios-personal[b-9hkv26qfdx] {
    display: flex;
    flex-direction: column;
    min-height: 210px;
    margin-top: 16px;
}
/* /Components/Pages/Dashboard/LostItems/Index.razor.rz.scp.css */
/* Lista de objetos perdidos con el diseño de ficha ancha (maqueta del usuario):
   ícono grande a la izquierda, objeto y estado en el medio, y los datos sueltos a
   la derecha separados por rayitas verticales. */
.objetos-lista[b-p9km2kspyf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.objeto-card[b-p9km2kspyf] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: 20px;
    box-shadow: var(--synbex-shadow);
}

.objeto-icono[b-p9km2kspyf] {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

.objeto-icono[b-p9km2kspyf]  svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.6;
}

.objeto-principal[b-p9km2kspyf] {
    flex: 1;
    min-width: 0;
}

.objeto-encabezado[b-p9km2kspyf] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.objeto-kicker[b-p9km2kspyf] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--synbex-text-muted);
}

.objeto-titulo[b-p9km2kspyf] {
    margin: 6px 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
    overflow-wrap: anywhere;
}

/* El estado con su ícono adentro, como en la maqueta. */
.objeto-estado[b-p9km2kspyf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.objeto-estado[b-p9km2kspyf]  svg {
    width: 15px;
    height: 15px;
}

.objeto-descripcion[b-p9km2kspyf] {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--synbex-text-muted);
    /* Una descripción larga no puede estirar la ficha: se corta a dos líneas y el
       texto completo queda en el título emergente. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.objeto-datos[b-p9km2kspyf] {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}

.objeto-dato[b-p9km2kspyf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 26px;
    border-left: 1px solid var(--synbex-border);
    min-width: 150px;
}

.objeto-dato-icono[b-p9km2kspyf] {
    flex-shrink: 0;
    display: flex;
    color: var(--synbex-text-muted);
}

.objeto-dato-icono[b-p9km2kspyf]  svg {
    width: 19px;
    height: 19px;
}

.objeto-dato-label[b-p9km2kspyf] {
    display: block;
    font-size: 12.5px;
    color: var(--synbex-text-muted);
    line-height: 1.3;
}

.objeto-dato-valor[b-p9km2kspyf] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--synbex-text);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.objeto-acciones[b-p9km2kspyf] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 24px;
    border-left: 1px solid var(--synbex-border);
}

.objeto-acciones[b-p9km2kspyf]  svg {
    width: 16px;
    height: 16px;
}

/* Tabletas: los datos bajan debajo del objeto, pero siguen en fila. */
@media (max-width: 1100px) {
    .objeto-card[b-p9km2kspyf] {
        flex-wrap: wrap;
        gap: 16px 20px;
    }

    .objeto-principal[b-p9km2kspyf] {
        flex-basis: calc(100% - 100px);
    }

    .objeto-datos[b-p9km2kspyf] {
        flex: 1;
    }

    .objeto-dato:first-child[b-p9km2kspyf] {
        padding-left: 0;
        border-left: none;
    }

    .objeto-acciones[b-p9km2kspyf] {
        border-left: none;
        padding-left: 0;
        flex-direction: row;
        align-items: center;
    }
}

/* Celular: todo apilado, con el ícono y el título arriba. */
@media (max-width: 700px) {
    .objeto-card[b-p9km2kspyf] {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 18px;
        border-radius: 16px;
    }

    .objeto-icono[b-p9km2kspyf] {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

    .objeto-icono[b-p9km2kspyf]  svg {
        width: 28px;
        height: 28px;
    }

    .objeto-titulo[b-p9km2kspyf] {
        font-size: 17px;
    }

    .objeto-datos[b-p9km2kspyf] {
        flex-direction: column;
        gap: 12px;
        padding-top: 14px;
        border-top: 1px solid var(--synbex-border);
    }

    .objeto-dato[b-p9km2kspyf] {
        padding: 0;
        border-left: none;
        min-width: 0;
    }

    .objeto-acciones[b-p9km2kspyf] {
        flex-direction: row;
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Dashboard/Paqueteria/Index.razor.rz.scp.css */

.package-section-header[b-0hndewlb5v] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
}

.package-row-card[b-0hndewlb5v] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
}

/* Ícono + apartamento/conjunto, agrupados en un solo hijo del flex de arriba
   — así en celular (ver media query más abajo) se pueden mover juntos a su
   propia fila sin desarmar el resto de columnas. */
.package-row-header[b-0hndewlb5v] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.package-row-date[b-0hndewlb5v] {
    min-width: 110px;
    margin: 0 20px;
}

.package-row-recipient[b-0hndewlb5v] {
    min-width: 100px;
}

@media (min-width: 601px) {
    /* Empuja el botón a la derecha del todo — solo tiene sentido en el
       renglón horizontal de escritorio/tablet; en celular se centra en su
       propia fila (ver media query de abajo). */
    .package-row-action[b-0hndewlb5v] {
        margin-left: auto;
    }
}

.package-stat-box[b-0hndewlb5v] {
    text-align: center;
    padding: 12px 6px;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
}

.package-stat-icon[b-0hndewlb5v] {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
}

.package-stat-number[b-0hndewlb5v] {
    font-size: 20px;
    font-weight: 700;
}

/* Fila clicable de "Entrega reciente" — separador entre filas salvo la
   primera, sin fondo/borde propio para que se vea como parte de la lista. */
.package-recent-item[b-0hndewlb5v] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-top: 1px solid var(--synbex-border);
    padding: 12px 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.package-recent-item:first-child[b-0hndewlb5v] {
    border-top: none;
}

.package-link-btn[b-0hndewlb5v] {
    background: none;
    border: none;
    color: var(--synbex-primary);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    padding: 0;
    display: block;
}

/* Tarjeta de búsqueda de apartamento — ícono grande centrado + título, como un
   pequeño "hero" en vez del label chico de antes.
   Siempre en tema claro con fondo azul sombreado, sin importar si el resto de
   la app está en modo oscuro (pedido explícito: "que llame más la atención",
   distinto de las demás tarjetas). Mismo truco de "forzar variables" que ya
   usa .report-light-theme (en app.css, para @media print) — se pisan acá
   los tokens --synbex-* de siempre y todo lo de adentro (inputs, botones,
   teclado numérico) los hereda automáticamente sin tocar esas clases, porque
   las custom properties de CSS se heredan por el árbol del DOM en tiempo
   real, no por el archivo donde se definieron (el aislamiento de CSS de
   Blazor no afecta esto). */
.package-search-card[b-0hndewlb5v] {
    --synbex-primary: #2c5cfc;
    --synbex-primary-hover: #254cd1;
    --synbex-primary-soft: #dbeafe;
    --synbex-text: #111827;
    --synbex-text-muted: #4b5568;
    --synbex-border: #bfdbfe;
    --synbex-surface: #eff6ff;
    --synbex-bg: #dbeafe;
    color: var(--synbex-text);
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.5), transparent 45%),
        radial-gradient(circle at 88% 92%, rgba(255, 255, 255, 0.5), transparent 45%),
        linear-gradient(135deg, #dbeafe 0%, #eff6ff 55%, #e0e7ff 100%);
    border: 1px solid #bfdbfe;
}

.package-search-hero[b-0hndewlb5v] {
    text-align: center;
    margin-bottom: 20px;
}

.package-search-hero .package-icon-box[b-0hndewlb5v] {
    margin: 0 auto;
}

.package-search-row[b-0hndewlb5v] {
    display: flex;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
}

/* Pendientes y Entregados lado a lado en computadora, con el MISMO tope máximo
   (pedido explícito: antes Pendientes crecía sin límite y descuadraba la fila
   frente a Entregados) — el contenido que no entra scrollea adentro de cada
   tarjeta por separado, así una lista larga de pendientes no empuja a
   Entregados hacia abajo ni desalinea la fila.
   60/40 en vez de 50/50 (pedido explícito) — Pendientes es la que más se usa
   en el día a día del guarda, le toca la columna más ancha; depende del ORDEN
   en el markup (Pendientes va primera), no de una clase aparte. */
.package-columns-grid[b-0hndewlb5v] {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    margin-bottom: 32px;
}

.package-columns-grid > .synbex-card[b-0hndewlb5v] {
    max-height: 432px;
    overflow-y: auto;
}

/* Panel resumen del guarda en celular vs. la tarjeta "Entregados" de siempre
   en computadora — reglas BASE (computadora): resumen oculto, Entregados
   visible. Van ANTES del @media de celular (más abajo) a propósito: con la
   misma especificidad, la regla que aparece DESPUÉS en el archivo es la que
   gana, así que las de acá tienen que ir primero para que el override de
   adentro del @media (que sí va después en el archivo) sea el que se
   imponga en celular. */
.package-mobile-only[b-0hndewlb5v] {
    display: none;
}

.package-desktop-only[b-0hndewlb5v] {
    display: block;
}

/* Pendientes siempre a un alto fijo, aunque tenga pocos o ningún pendiente
   (pedido explícito: el máximo pasa a ser también el tamaño fijo por
   defecto, ni más chico ni más grande). 432px = lo justo para 4 tarjetas de
   pendiente completas (header fijo + 4 filas + un pedacito de la 5ª asomando
   abajo, como pista de que hay más y hay que hacer scroll) — medido contra
   el alto real de .package-row-card en vez de un número al azar. Solo en
   computadora — ver el reset dentro de la media query de abajo. */
.package-pending-card[b-0hndewlb5v] {
    min-height: 432px;
}

/* Nota: acá vivían las clases del encabezado colapsable
   (.package-collapsible-*, .package-recent-mobile-chevron) — se quitaron
   junto con la función de recoger/estirar los paneles (pedido explícito:
   "que ya no se pueda encoger y estirar"). */

/* El título "Pendientes" + su buscador se quedan fijos arriba al hacer
   scroll dentro de la tarjeta (pedido explícito). El truco: "sacar" el
   encabezado del padding de la tarjeta con márgenes negativos (para que su
   fondo cubra hasta el borde) y devolvérselo como padding propio; el mismo
   valor negativo en top hace que, al scrollear, quede pegado exactamente
   donde estaba en vez de dejar un hueco. Solo tiene sentido en computadora:
   en celular la tarjeta ya no scrollea sola (ver el reset más abajo, misma
   media query que ya apaga el max-height/overflow ahí), así que fijarlo
   ahí lo pegaría contra el tope de TODA la pantalla en vez de la tarjeta. */
.package-pending-sticky-header[b-0hndewlb5v] {
    position: sticky;
    top: -24px;
    z-index: 2;
    margin: -24px -24px 14px;
    padding: 24px 24px 14px;
    background: var(--synbex-surface);
    border-radius: var(--synbex-radius-lg) var(--synbex-radius-lg) 0 0;
}

@media (max-width: 800px) {
    .package-columns-grid[b-0hndewlb5v] {
        grid-template-columns: 1fr;
    }

    /* Apiladas en celular no hace falta igualarlas ni toparlas — que crezcan
       con su contenido, como cualquier otra tarjeta de la página. */
    .package-columns-grid > .synbex-card[b-0hndewlb5v] {
        max-height: none;
        overflow-y: visible;
    }

    .package-pending-card[b-0hndewlb5v] {
        min-height: auto;
    }

    .package-pending-sticky-header[b-0hndewlb5v] {
        position: static;
        margin: 0;
        padding: 0;
    }
}

/* Tarjeta de "Pendientes" en celular real (pedido explícito): primera fila
   solo ícono + apartamento + conjunto; abajo, en dos columnas, fecha de
   llegada y recibido por; debajo de eso, centrado y del mismo tamaño de
   siempre, el botón de marcar entregado. Mismo punto de quiebre que el resto
   de "apilado en celular" de la app (.mobile-cards en app.css). */
@media (max-width: 600px) {
    .package-row-card[b-0hndewlb5v] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "header header"
            "date   recipient"
            "action action";
        row-gap: 10px;
        column-gap: 12px;
        align-items: start;
    }

    .package-row-header[b-0hndewlb5v] {
        grid-area: header;
    }

    .package-row-date[b-0hndewlb5v] {
        grid-area: date;
        min-width: 0;
        margin: 0;
    }

    .package-row-recipient[b-0hndewlb5v] {
        grid-area: recipient;
        min-width: 0;
    }

    .package-row-action[b-0hndewlb5v] {
        grid-area: action;
        justify-self: center;
        /* Un poco más separado de la fila de fecha/recibido que tiene arriba
           (pedido explícito) — se suma al row-gap de 10px del grid. */
        margin-top: 8px;
    }

    /* Pendientes recupera acá su propio tope+scroll (pedido explícito: "esos
       cambios son más que todo para celular") — la media query de arriba
       (max-width:800px) lo había apagado para TODAS las tarjetas de esta fila
       asumiendo que en celular alcanza con que la página completa scrollee,
       pero Pendientes puede llegar a tener muchísimas filas y sin esto crece
       sin límite. Selector con la misma especificidad que esas reglas
       (".package-columns-grid > .synbex-card" / ".package-pending-card") y
       más abajo en el archivo — así se sabe que gana por orden, no hace
       falta !important.
       695px = 3 filas completas + un pedacito de la 4ª asomando abajo, como
       pista de que hay más y hay que scrollear (pedido explícito: antes
       entraban ~4 y se querían 3). Medido contra el alto REAL de esta
       pantalla, no estimado: encabezado fijo 131 + margen del listado 14 +
       3 filas de 167 + 2 espacios de 10 = 666, más ~30 del pedacito de la
       4ª. Si cambia el alto de .package-row-card hay que volver a medirlo. */
    .package-columns-grid > .package-pending-card[b-0hndewlb5v] {
        max-height: 695px;
        min-height: 695px;
        overflow-y: auto;
        /* Al llegar al final del scroll interno del panel, el dedo puede
           seguir deslizando y pasa a mover la PÁGINA (pedido explícito) —
           sin esto, en iOS el scroll interno se siente "atascado" y hay que
           levantar el dedo y volver a deslizar desde afuera del panel para
           seguir bajando. overscroll-behavior-y ya es "auto" por defecto
           (nada más en la hoja de estilos lo toca), se deja explícito para
           que quede claro que es a propósito y no se rompa sin querer más
           adelante; -webkit-overflow-scrolling es lo que realmente arregla
           el "atascado" en Safari/iOS. */
        overscroll-behavior-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* El título "Pendientes" + su buscador también se quedan fijos arriba al
       hacer scroll DENTRO del panel en celular (pedido explícito) — mismo
       truco de "sacar" el encabezado del padding de la tarjeta con márgenes
       negativos y devolvérselo como padding propio que ya usa la versión de
       computadora más arriba, solo que con el padding propio de la tarjeta
       en celular (14px) en vez de 24px/18px. La media query de 800px lo
       había apagado (position:static) asumiendo que en celular no hacía
       falta — ya no aplica, porque Pendientes volvió a tener su propio
       scroll interno acá arriba. */
    .package-pending-sticky-header[b-0hndewlb5v] {
        position: sticky;
        top: -14px;
        margin: -14px -14px 14px;
        padding: 14px 14px 14px;
        background: var(--synbex-surface);
        border-radius: var(--synbex-radius-lg) var(--synbex-radius-lg) 0 0;
    }

    /* Resumen del mes: en celular reemplaza por completo a la tarjeta grande
       "Entregados" (que en computadora se sigue viendo en la rejilla, sin
       cambios). Ver .guard-summary-panel más abajo para su formato. */
    .package-mobile-only[b-0hndewlb5v] {
        display: block;
    }

    /* Selector con 2 clases a propósito: ".package-delivered-card" define su
       propio "display:flex" más abajo en el archivo (fuera de esta media
       query, así que también "aplicaría" acá) — con la misma especificidad
       ganaría esa por ir después en el archivo. Combinando las dos clases
       acá se sube la especificidad y se le gana sin depender del orden. */
    .package-delivered-card.package-desktop-only[b-0hndewlb5v] {
        display: none;
    }
}

/* La tarjeta de Entregados pasa a columna flex para que el envoltorio del
   anillo (de abajo) pueda crecer con flex:1 y empujarse hasta el fondo de la
   tarjeta — es lo que hace que el anillo "llegue hasta abajo" del panel en vez
   de quedar flotando en medio de un hueco vacío (pedido explícito). */
.package-delivered-card[b-0hndewlb5v] {
    display: flex;
    flex-direction: column;
}

/* Anillo de "% de entregas" del mes elegido — mismo estilo y misma lógica de
   color que el de Inicio (.guard-summary-ring), pero grande y centrado en el
   espacio que sobra de la tarjeta. flex:1 + justify-content:center reparte
   ese espacio arriba y abajo del anillo por igual; ancho y alto del anillo
   quedan siempre IGUALES entre sí (nunca en %, siempre en px) para que un
   círculo grande no se vea nunca ovalado por más ancha o alta que sea la
   tarjeta que lo contiene. */
.package-percent-ring-wrap[b-0hndewlb5v] {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.package-percent-ring[b-0hndewlb5v] {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--ring-color) calc(var(--ring-percent) * 1%), var(--synbex-border) 0);
}

.package-percent-ring-inner[b-0hndewlb5v] {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--synbex-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.package-percent-ring-value[b-0hndewlb5v] {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}

/* "15 de 80" debajo del porcentaje — mismo patrón que la tarjeta de espacio en
   disco de Monitoreo (número grande + detalle chico debajo). */
.package-percent-ring-count[b-0hndewlb5v] {
    font-size: 13px;
    font-weight: 500;
    color: var(--synbex-text-muted);
}

.package-percent-ring.is-green[b-0hndewlb5v] { --ring-color: var(--synbex-success); }
.package-percent-ring.is-orange[b-0hndewlb5v] { --ring-color: #d97706; }
.package-percent-ring.is-red[b-0hndewlb5v] { --ring-color: var(--synbex-danger); }


/* "Entrega reciente": buscador con lupa adentro, encabezados de columna con
   ícono chico, celdas con caja de ícono (apartamento/persona) o ícono suelto
   (fecha) — mismo lenguaje visual que el resto de la app (.package-icon-box),
   solo que reutilizado dentro de una tabla en vez de una tarjeta. */
.package-recent-search-wrap[b-0hndewlb5v] {
    position: relative;
}

.package-recent-search-icon[b-0hndewlb5v] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--synbex-text-muted);
    pointer-events: none;
}

.package-recent-search-icon svg[b-0hndewlb5v] {
    width: 16px;
    height: 16px;
}

.package-recent-search-input[b-0hndewlb5v] {
    padding-left: 36px;
    box-sizing: border-box;
}

.package-recent-th[b-0hndewlb5v] {
    white-space: nowrap;
}

.package-recent-th-icon[b-0hndewlb5v] {
    display: inline-flex;
    vertical-align: -3px;
    margin-right: 6px;
    color: var(--synbex-text-muted);
}

.package-recent-th-icon svg[b-0hndewlb5v] {
    width: 14px;
    height: 14px;
}

/* Ícono + texto EN FILA, no apilados: .package-icon-box es "display:flex" (o
   sea, de bloque) por diseño para poder usarse suelto en tarjetas — metido tal
   cual dentro de una celda de tabla, el texto de al lado caía a la línea de
   abajo en vez de quedar a la derecha. Esta fila fuerza el eje horizontal y
   centra verticalmente ícono y texto entre sí, sin tocar .package-icon-box
   (que otras pantallas sí usan tal cual). Solo Apartamento y Entregado por
   llevan ícono en la tabla (pedido explícito) — Fecha lo conserva nada más en
   el encabezado de la columna. */
.package-recent-cell-row[b-0hndewlb5v] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Avatar circular para "Entregado por" — mismo .package-icon-box de siempre,
   solo redondeado del todo en vez del cuadrado con esquinas curvas habitual. */
.package-recent-avatar[b-0hndewlb5v] {
    border-radius: 50%;
}

.package-recent-footer-icon[b-0hndewlb5v] {
    flex-shrink: 0;
}

.package-header-search[b-0hndewlb5v] {
    width: 220px;
    max-width: 100%;
}

@media (max-width: 700px) {
    /* En celular el buscador cae en su propia fila (el encabezado envuelve) —
       que ocupe todo el ancho disponible en vez de quedarse en 220px. */
    .package-header-search[b-0hndewlb5v] {
        width: 100%;
    }
}

.package-recent-row[b-0hndewlb5v] {
    cursor: pointer;
}

.package-recent-row:hover[b-0hndewlb5v] {
    background: var(--synbex-primary-soft);
}

/* Ícono de "toca/haz clic para más info" — deja claro que la fila/tarjeta es
   interactiva sin tener que adivinarlo. */
.package-tap-hint[b-0hndewlb5v] {
    color: var(--synbex-text-muted);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.package-tap-hint svg[b-0hndewlb5v] {
    width: 18px;
    height: 18px;
}

/* Botón "Marcar entregado" — verde vivo con un resplandor sutil para que
   resalte de inmediato entre el resto de la tarjeta de pendientes. */
.package-deliver-btn[b-0hndewlb5v] {
    background: #16a34a;
    color: #fff;
    font-weight: 700;
    padding: 10px 18px;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.package-deliver-btn:hover[b-0hndewlb5v] {
    background: #15803d;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.25);
}

/* Botón "Ver detalles" en Entrega reciente — reemplaza el ícono de "toca para
   ver más" por algo explícito, igual en escritorio y móvil. */
.package-details-btn[b-0hndewlb5v] {
    flex-shrink: 0;
}

/* Combo de "Descripción" — input + datalist: se puede escribir libre o abrir
   la lista y elegir una opción común (Paquetería, Comida, etc.), todo en la
   misma caja. El resplandor azul hacia adentro y el borde marcado la hacen
   notoria en vez de perderse como un campo de texto más. */
.package-note-combo[b-0hndewlb5v] {
    border: 2px solid var(--synbex-primary);
    box-shadow: inset 0 0 0 3px var(--synbex-primary-soft);
    font-weight: 600;
    color: var(--synbex-primary);
}

.package-note-combo:focus[b-0hndewlb5v] {
    box-shadow: inset 0 0 0 3px var(--synbex-primary-soft), 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* Botones de resultado de búsqueda ("Apartamento 501 — Conjunto (Edificio)") —
   texto centrado y más grande, con el número del apartamento en un color e
   ícono de peso fuertes para que sea lo primero que se lea. */
.package-unit-result-btn[b-0hndewlb5v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    font-size: 16px;
    padding: 14px;
}

.package-unit-result-btn strong[b-0hndewlb5v] {
    color: var(--synbex-primary);
    font-size: 19px;
}

.package-unit-result-sub[b-0hndewlb5v] {
    font-size: 13px;
    color: var(--synbex-text-muted);
    font-weight: 400;
}

/* Columna de búsqueda (70%) + teclado numérico (30%) en la tarjeta "Buscar
   apartamento" — solo en escritorio; en móvil el teclado no cabe bien ni hace
   falta (ya se usa el teclado nativo del celular). */
.package-search-columns[b-0hndewlb5v] {
    display: block;
}

@media (min-width: 800px) {
    .package-search-columns[b-0hndewlb5v] {
        display: grid;
        grid-template-columns: 7fr 3fr;
        gap: 28px;
        align-items: start;
    }
}

.package-search-keypad-col[b-0hndewlb5v] {
    display: none;
}

@media (min-width: 800px) {
    /* position:sticky (con top:0 dentro de una columna que no scrollea) fija el
       teclado en el mismo lugar sin importar cuánto crezca o encoja la lista de
       resultados a su izquierda — antes, al centrarse verticalmente contra toda
       la fila, se movía y "cambiaba de tamaño" cada vez que la búsqueda filtraba. */
    .package-search-keypad-col[b-0hndewlb5v] {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: sticky;
        /* 76px = el alto de .dashboard-header (64px, también sticky y por encima)
           más un respiro: con top:0 el teclado quedaba escondido debajo de la barra
           de la aplicación al bajar por una lista larga de resultados. */
        top: 76px;
        border-left: 1px solid var(--synbex-border);
        padding-left: 24px;
    }
}

.package-keypad-grid[b-0hndewlb5v] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 200px;
}

.package-keypad-btn[b-0hndewlb5v] {
    aspect-ratio: 1;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-surface);
    color: var(--synbex-text);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.package-keypad-btn:hover[b-0hndewlb5v] {
    background: var(--synbex-primary-soft);
}

.package-keypad-btn:active[b-0hndewlb5v] {
    transform: scale(0.94);
}

.package-keypad-btn.is-action[b-0hndewlb5v] {
    font-size: 15px;
    color: var(--synbex-text-muted);
}

/* ==========================================================================
   Modo compacto para monitores más chicos que un Full HD normal (pedido
   explícito: en 1920×1080 se ve bien, pero en resoluciones menores — 1600,
   1366 — el ancho disponible ya es menor que el máximo de 1400px de la
   página, y todo (íconos, anillo, botones, letra) se ve apretado). Es un
   escalón intermedio de densidad entre el tamaño normal de escritorio y el
   apilado de celular (@media max-width:800px, ya existente más arriba) —
   mismo criterio que un sistema de breakpoints "profesional"
   (Bootstrap/Material tienen ese escalón de por medio, no solo
   desktop/mobile).

   Algunas reglas de acá pisan clases GENÉRICAS de app.css (.page-title,
   .btn-synbex, .synbex-input, .synbex-card, .synbex-table): es a propósito
   y seguro — el aislamiento de CSS de Blazor agrega un atributo invisible
   a cada elemento que ESTA página escribe en su propio markup, así que
   aunque el selector se vea "global" acá adentro, en la práctica solo
   afecta a Paquetería. Ninguna otra pantalla que use esas mismas clases se
   ve tocada por esto. */
@media (max-width: 1600px) and (min-width: 801px) {
    .page-title[b-0hndewlb5v] { font-size: 21px; }
    .page-subtitle[b-0hndewlb5v] { font-size: 13px; margin-bottom: 18px; }

    .btn-synbex[b-0hndewlb5v] { padding: 6px 13px; font-size: 12.5px; }
    .btn-synbex-sm[b-0hndewlb5v] { padding: 4px 10px; font-size: 11.5px; }

    .synbex-input[b-0hndewlb5v] { padding: 8px 10px; font-size: 13.5px; }

    /* El padding de arriba es un shorthand: sin esto, pisaba el
       padding-left:36px que le reserva espacio a la lupa de "Entregas
       recientes" y el ícono quedaba encima de "Buscar por apartamento..."
       (bug real, reportado explícito al hacer zoom — que encoge el ancho
       efectivo en CSS exactamente igual que esta media query). */
    .package-recent-search-input[b-0hndewlb5v] { padding-left: 36px; }

    .synbex-card[b-0hndewlb5v] { padding: 18px; }

    /* Mismo truco de sticky que arriba, pero con -18px (el padding que
       .synbex-card usa acá) en vez de -24px, para que el encabezado siga
       calzando exacto con los bordes de la tarjeta reducida. */
    .package-pending-sticky-header[b-0hndewlb5v] {
        top: -18px;
        margin: -18px -18px 10px;
        padding: 18px 18px 10px;
    }

    .synbex-table th[b-0hndewlb5v] { padding: 0 8px 8px; font-size: 11px; }
    .synbex-table td[b-0hndewlb5v] { padding: 9px 8px; font-size: 13px; }

    .package-icon-box.size-lg[b-0hndewlb5v] { width: 46px; height: 46px; }
    .package-icon-box.size-md[b-0hndewlb5v] { width: 38px; height: 38px; }
    .package-icon-box.size-sm[b-0hndewlb5v] { width: 30px; height: 30px; }

    .package-columns-grid[b-0hndewlb5v] { gap: 14px; margin-bottom: 22px; }
    /* Mismo criterio de "4 filas completas + pedacito de la 5ª" que arriba,
       pero medido en ESTE breakpoint (fila e ícono más chicos, padding de
       tarjeta de 18px en vez de 24px) — no es la misma proporción de 432px,
       hay que medirlo aparte. */
    .package-columns-grid > .synbex-card[b-0hndewlb5v] { max-height: 370px; }
    .package-pending-card[b-0hndewlb5v] { min-height: 370px; }

    .package-stat-box[b-0hndewlb5v] { padding: 8px 4px; }
    .package-stat-number[b-0hndewlb5v] { font-size: 17px; }

    .package-percent-ring[b-0hndewlb5v] { width: 150px; height: 150px; }
    .package-percent-ring-inner[b-0hndewlb5v] { width: 122px; height: 122px; gap: 2px; }
    .package-percent-ring-value[b-0hndewlb5v] { font-size: 26px; }
    .package-percent-ring-count[b-0hndewlb5v] { font-size: 11px; }

    .package-row-card[b-0hndewlb5v] { padding: 10px; gap: 10px; }

    .package-search-hero[b-0hndewlb5v] { margin-bottom: 14px; }
    .package-search-columns[b-0hndewlb5v] { gap: 18px; }
    .package-keypad-grid[b-0hndewlb5v] { max-width: 160px; gap: 6px; }
    .package-keypad-btn[b-0hndewlb5v] { font-size: 15px; }
    .package-keypad-btn.is-action[b-0hndewlb5v] { font-size: 13px; }

    .package-header-search[b-0hndewlb5v] { width: 170px; }

    .package-unit-result-btn[b-0hndewlb5v] { font-size: 14px; padding: 10px; }
    .package-unit-result-btn strong[b-0hndewlb5v] { font-size: 16px; }
    .package-unit-result-sub[b-0hndewlb5v] { font-size: 12px; }

    .package-detail-modal[b-0hndewlb5v] { max-width: 620px; }
    .package-detail-modal-body[b-0hndewlb5v] { padding: 18px 22px; }
}

/* ==========================================================================
   Resumen compacto del mes para el guarda en celular (pedido explícito) —
   reemplaza a la tarjeta grande "Entregados" ahí (ver .package-mobile-only/
   .package-desktop-only más arriba). Dos columnas: izquierda los 3 datos en
   fila (ícono + número + etiqueta chica a la derecha), alineados a la
   izquierda; derecha el anillo de porcentaje, centrado. Debajo de las dos,
   centrado, el mes en letra bien chiquita — "demasiado pequeño" (pedido
   explícito), nada más. */
/* Todo el panel a la mitad de su tamaño anterior (pedido explícito, otra
   vez más chico) — cada medida de acá abajo es literalmente la mitad de la
   que tenía antes (padding, gaps, íconos, letra, anillo). */
.guard-summary-panel[b-0hndewlb5v] {
    padding: 7px 9px;
}

.guard-summary-columns[b-0hndewlb5v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 9px;
}

.guard-summary-stats[b-0hndewlb5v] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.guard-summary-stat-row[b-0hndewlb5v] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.guard-summary-stat-icon[b-0hndewlb5v] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ::deep: HubIcons.Get() devuelve el <svg> como MarkupString (HTML crudo) —
   el compilador de Razor nunca lo ve como una etiqueta propia de esta página,
   así que el aislamiento de CSS de Blazor no le agrega su atributo de
   ámbito; sin ::deep esta regla compilaría pidiendo ESE atributo en el
   svg y nunca calzaría con nada (bug real, encontrado al verificar con
   getComputedStyle — el ícono se seguía viendo al tamaño que ya trae fijo
   por atributo HTML, 26px, sin importar lo que dijera acá). */
.guard-summary-stat-icon[b-0hndewlb5v]  svg {
    width: 23px;
    height: 23px;
}

.guard-summary-stat-number[b-0hndewlb5v] {
    font-size: 12px;
    font-weight: 700;
    color: var(--synbex-text);
}

/* La etiqueta va a la DERECHA del número (pedido explícito), no debajo como
   en las cajitas grandes de siempre (.package-stat-box). */
.guard-summary-stat-label[b-0hndewlb5v] {
    font-size: 10px;
    color: var(--synbex-text-muted);
}

.guard-summary-ring-col[b-0hndewlb5v] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mismas clases que el anillo grande de siempre (.package-percent-ring),
   combinadas con estas para pisar SOLO el tamaño acá — misma lógica de
   color (is-green/is-orange/is-red) y el mismo conic-gradient, sin repetir
   nada de eso.
   Tamaño: pedido explícito "que sea grande, pero que no haga que el panel
   salga más grande, el máximo que permita el panel" — en vez de un px fijo,
   height:100% + aspect-ratio:1/1 hace que el anillo crezca hasta llenar el
   alto real de la fila (columns tiene align-items:stretch, así que esa
   altura la termina marcando la columna de datos, que es la que tiene
   contenido real) sin nunca forzar la tarjeta a crecer más de lo que ya
   mide por su propio contenido. */
.guard-summary-ring.package-percent-ring[b-0hndewlb5v] {
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
}

/* En % (no en px) porque el anillo de afuera ahora mide distinto según el
   alto disponible (ver el comment de arriba) — 80% mantiene la misma
   proporción "aro delgado" que tenía antes en fijo (34/42). */
.guard-summary-ring-inner.package-percent-ring-inner[b-0hndewlb5v] {
    width: 80%;
    height: 80%;
    gap: 0;
}

.guard-summary-ring-value.package-percent-ring-value[b-0hndewlb5v] {
    font-size: 14px;
}

/* Bastante aire a los lados (pedido explícito: "está muy muy muy pegado") —
   el padding-right es mayor que el izquierdo porque el navegador dibuja la
   flechita del desplegable DENTRO de ese lado; con el mismo valor en los dos
   el texto se ve pegado a la flecha aunque el recuadro sí tenga margen. */
.guard-summary-month-select[b-0hndewlb5v] {
    display: block;
    margin: 5px auto 0;
    padding: 3px 12px 3px 16px;
    font-size: 12px;
    line-height: 1.4;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-surface);
    color: var(--synbex-text-muted);
    text-align: center;
    text-align-last: center;
    width: auto;
}

/* ==========================================================================
   Más aire entre cada entrega reciente (pedido explícito). Va acá, en el CSS
   aislado de Paquetería, y NO en app.css: ".mobile-cards" y ".synbex-table"
   son clases compartidas por media app, y separar más las filas ahí
   cambiaría también Visitantes, Usuarios y todas las demás listas. El
   aislamiento de Blazor hace que estas reglas solo alcancen a los elementos
   que ESTA página escribe. */

/* Computadora: la tabla pasa a "bordes separados" para poder dejar espacio
   real entre filas — con border-collapse (lo normal) las filas se tocan y
   ningún margen las separa. */
.table-wrapper .synbex-table[b-0hndewlb5v] {
    border-collapse: separate;
    border-spacing: 0 10px;
}

/* Al separar los bordes, el fondo de cada fila se ve como una tarjeta: se le
   redondean las puntas para que se lea como una pieza y no como un renglón
   suelto. */
.package-recent-row td[b-0hndewlb5v] {
    padding-top: 14px;
    padding-bottom: 14px;
    background: var(--synbex-bg);
}

.package-recent-row td:first-child[b-0hndewlb5v] {
    border-radius: var(--synbex-radius-md) 0 0 var(--synbex-radius-md);
}

.package-recent-row td:last-child[b-0hndewlb5v] {
    border-radius: 0 var(--synbex-radius-md) var(--synbex-radius-md) 0;
}

/* El encabezado no lleva ese fondo: sigue siendo solo texto. */
.table-wrapper .synbex-table thead th[b-0hndewlb5v] {
    background: none;
}

/* Celular: más separación entre tarjetas que el resto de la app. */
@media (max-width: 600px) {
    .mobile-cards[b-0hndewlb5v] {
        gap: 22px;
    }
}

/* --------------------------------------------------------------------------
   "Entregados" por mes (pestaña del guarda) — un solo panel
   -------------------------------------------------------------------------- */

.package-mes-select[b-0hndewlb5v] {
    margin: 14px 0;
}

/* Los dos números y el anillo, los tres del mismo ancho y del mismo alto,
   centrados a lo ancho y a lo alto de su celda — pedido explícito. Tres
   columnas iguales (1fr) hacen el ancho; align-items:center hace el alto, y el
   min-height evita que la fila se encoja al alto del número cuando el anillo
   todavía no pintó. */
.package-mes-resumen[b-0hndewlb5v] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: center;
    /* Baja con el anillo: con 200px y el gráfico a la mitad, el bloque quedaba
       medio vacío. */
    min-height: 140px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
}

.package-mes-item[b-0hndewlb5v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.package-mes-icono[b-0hndewlb5v] {
    display: flex;
}

    .package-mes-icono.is-verde[b-0hndewlb5v] {
        color: var(--synbex-success);
    }

    .package-mes-icono.is-azul[b-0hndewlb5v] {
        color: var(--synbex-primary);
    }

    .package-mes-icono svg[b-0hndewlb5v] {
        width: 28px;
        height: 28px;
    }

/* Los números, del mismo tamaño que el porcentaje del anillo: los tres datos
   pesan lo mismo, ninguno manda sobre el otro. */
.package-mes-numero[b-0hndewlb5v] {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: var(--synbex-text);
}

.package-mes-label[b-0hndewlb5v] {
    font-size: 12px;
    color: var(--synbex-text-muted);
}

/* La mitad de lo que medía (132px) — pedido explícito. Ancho y alto siempre
   iguales entre sí, para que nunca se vea ovalado. */
.package-mes-anillo[b-0hndewlb5v] {
    width: 66px;
    height: 66px;
}

.package-mes-anillo-inner[b-0hndewlb5v] {
    width: 54px;
    height: 54px;
}

.package-mes-anillo-valor[b-0hndewlb5v] {
    font-size: 13px;
}

/* Renglón del conteo + buscador, arriba de la tabla. */
.package-mes-barra[b-0hndewlb5v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.package-mes-conteo[b-0hndewlb5v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* Buscador más grande que los 220px del resto — acá es el único filtro de una
   tabla que puede traer todo un mes (pedido explícito). */
.package-mes-buscador[b-0hndewlb5v] {
    width: 340px;
    max-width: 100%;
}

@media (max-width: 700px) {
    .package-mes-buscador[b-0hndewlb5v] {
        width: 100%;
    }

    /* En un teléfono tres columnas dejan cada dato en una tira ilegible: los
       números arriba en dos columnas y el anillo abajo, a todo el ancho. */
    .package-mes-resumen[b-0hndewlb5v] {
        grid-template-columns: repeat(2, 1fr);
    }

        .package-mes-resumen .package-mes-item:last-child[b-0hndewlb5v] {
            grid-column: 1 / -1;
        }
}

/* La tabla del mes puede ser larga (todas las entregas, ya no cinco), así que
   los encabezados se quedan pegados arriba mientras se baja — pedido explícito:
   "para no perderme en qué estoy viendo".
   El 64px es el alto de .dashboard-header, que también es sticky y va por
   encima (z-index 30): sin ese desplazamiento los encabezados se meterían
   debajo de la barra de la aplicación. */
.package-mes-tabla thead th[b-0hndewlb5v] {
    position: sticky;
    top: 64px;
    z-index: 5;
    background: var(--synbex-surface);
    /* La tabla usa border-collapse:collapse y ahi el borde de un <th> pegajoso no
       viaja con él: se dibuja con sombra interior, que sí lo hace. */
    box-shadow: inset 0 -1px 0 var(--synbex-border);
}
/* /Components/Pages/Dashboard/Parking/Cobros.razor.rz.scp.css */
/* ── Informe de cobros de parqueo ──────────────────────────────────────────── */

/* El título solo existe en el papel: en pantalla ya está el encabezado de la
   página, pero ese va con no-print y la hoja impresa quedaría sin nombre. */
.solo-print[b-yau8rwml9u] {
    display: none;
}

.parqueo-totales[b-yau8rwml9u] {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.parqueo-total-principal[b-yau8rwml9u] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.parqueo-total-chico[b-yau8rwml9u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.parqueo-total-label[b-yau8rwml9u] {
    font-size: 0.8rem;
    color: var(--synbex-text-muted);
}

.parqueo-total-valor[b-yau8rwml9u] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--synbex-text);
}

.parqueo-total-detalle[b-yau8rwml9u] {
    font-size: 0.78rem;
    color: var(--synbex-text-muted);
}

/* Pendientes > 0: caja sin cuadrar. Se marca, no se grita. */
.parqueo-total-chico.es-alerta[b-yau8rwml9u] {
    border-color: var(--synbex-danger);
}

.parqueo-total-chico.es-alerta .parqueo-total-valor[b-yau8rwml9u] {
    color: var(--synbex-danger);
}

.parqueo-graficos[b-yau8rwml9u],
.parqueo-resumenes[b-yau8rwml9u] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* Barras verticales. Alto fijo del área para que los dos gráficos se lean a la
   misma escala visual lado a lado. */
.parqueo-horas[b-yau8rwml9u] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 150px;
    padding-bottom: 18px;
    position: relative;
}

.parqueo-hora-col[b-yau8rwml9u] {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

.parqueo-hora-barra[b-yau8rwml9u] {
    width: 100%;
    border-radius: 3px 3px 0 0;
    background: var(--synbex-primary);
    opacity: 0.85;
}

.parqueo-hora-col:hover .parqueo-hora-barra[b-yau8rwml9u] {
    opacity: 1;
}

.parqueo-hora-label[b-yau8rwml9u] {
    position: absolute;
    bottom: -17px;
    font-size: 0.65rem;
    color: var(--synbex-text-muted);
}

.parqueo-tabla-scroll[b-yau8rwml9u] {
    overflow-x: auto;
}

.parqueo-tabla-chica[b-yau8rwml9u] {
    width: 100%;
    font-size: 0.85rem;
}

.parqueo-estado[b-yau8rwml9u] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.parqueo-estado-cobrado[b-yau8rwml9u] {
    background: color-mix(in srgb, var(--synbex-success) 16%, transparent);
    color: var(--synbex-success);
}

.parqueo-estado-exonerado[b-yau8rwml9u] {
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

.parqueo-estado-pendiente[b-yau8rwml9u] {
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
}

.parqueo-motivo[b-yau8rwml9u] {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--synbex-text-muted);
}

@media (max-width: 900px) {
    .parqueo-totales[b-yau8rwml9u] {
        grid-template-columns: repeat(2, 1fr);
    }

    .parqueo-total-principal[b-yau8rwml9u] {
        grid-column: 1 / -1;
    }

    .parqueo-graficos[b-yau8rwml9u],
    .parqueo-resumenes[b-yau8rwml9u] {
        grid-template-columns: 1fr;
    }
}

@media print {
    .solo-print[b-yau8rwml9u] {
        display: block;
        margin: 0 0 12px;
    }

    .parqueo-tabla-scroll[b-yau8rwml9u] {
        overflow: visible;
    }
}

.parqueo-acciones[b-yau8rwml9u] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.parqueo-accion[b-yau8rwml9u] {
    padding: 2px 8px;
    border: 1px solid var(--synbex-border);
    border-radius: 6px;
    background: var(--synbex-surface);
    color: var(--synbex-text);
    font-size: 0.72rem;
    cursor: pointer;
}

.parqueo-accion:hover:not(:disabled)[b-yau8rwml9u] {
    border-color: var(--synbex-primary);
    color: var(--synbex-primary);
}

.parqueo-accion:disabled[b-yau8rwml9u] {
    opacity: 0.5;
    cursor: default;
}

/* ── Rediseño 2026-10-02 ───────────────────────────────────────────────────── */

/* Línea entre los totales de arriba y los gráficos. */
.parqueo-separador[b-yau8rwml9u] {
    border: 0;
    border-top: 1px solid var(--synbex-border);
    margin: 4px 0 22px;
}

/* Paneles con borde (Por tipo, Placas, Detalle). .report-light-theme le quita el
   borde a toda .synbex-card de adentro (es para el papel); acá se le devuelve a
   estos tres, que es justo lo que se pidió: que cada uno se vea como un bloque. */
.report-light-theme .synbex-card.parqueo-panel[b-yau8rwml9u] {
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    padding: 18px 20px;
}

.parqueo-detalle-panel[b-yau8rwml9u] {
    margin-top: 20px;
}

.parqueo-panel-cabecera[b-yau8rwml9u] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.parqueo-panel-titulo[b-yau8rwml9u] {
    margin: 0;
    font-size: 1.05rem;
}

.parqueo-panel-nota[b-yau8rwml9u] {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--synbex-text-muted);
}

/* ── Donas ─────────────────────────────────────────────────────────────────────
   Paleta de gráficos de la app (la misma que contabilidad), en orden fijo; la
   porción "Otras" en gris. Cada tema con sus propios tonos, no invertidos. */
.parqueo-panel[b-yau8rwml9u] {
    --dona-c1: #2a78d6;
    --dona-c2: #eb6834;
    --dona-c3: #1baf7a;
    --dona-c4: #eda100;
    --dona-c5: #e87ba4;
    --dona-otras: #b4b2ab;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .parqueo-panel[b-yau8rwml9u] {
        --dona-c1: #3987e5;
        --dona-c2: #d95926;
        --dona-c3: #199e70;
        --dona-c4: #c98500;
        --dona-c5: #d55181;
        --dona-otras: #6b6a66;
    }
}

:root[data-theme="dark"] .parqueo-panel[b-yau8rwml9u] {
    --dona-c1: #3987e5;
    --dona-c2: #d95926;
    --dona-c3: #199e70;
    --dona-c4: #c98500;
    --dona-c5: #d55181;
    --dona-otras: #6b6a66;
}

.is-c1[b-yau8rwml9u] { --dona-color: var(--dona-c1); }
.is-c2[b-yau8rwml9u] { --dona-color: var(--dona-c2); }
.is-c3[b-yau8rwml9u] { --dona-color: var(--dona-c3); }
.is-c4[b-yau8rwml9u] { --dona-color: var(--dona-c4); }
.is-c5[b-yau8rwml9u] { --dona-color: var(--dona-c5); }
.is-otras[b-yau8rwml9u] { --dona-color: var(--dona-otras); }

.dona[b-yau8rwml9u] {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.dona-grafico[b-yau8rwml9u] {
    position: relative;
    width: 170px;
    height: 170px;
    flex-shrink: 0;
}

.dona-svg[b-yau8rwml9u] {
    width: 100%;
    height: 100%;
    display: block;
}

.dona-svg circle[b-yau8rwml9u] {
    fill: none;
    stroke-width: 6;
}

/* Sin pista de fondo: entre porción y porción se ve el panel. */
.dona-fondo[b-yau8rwml9u] {
    stroke: transparent;
}

.dona-porcion[b-yau8rwml9u] {
    stroke: var(--dona-color);
    transition: stroke-width 0.12s ease;
}

.dona-porcion:hover[b-yau8rwml9u] {
    stroke-width: 7.2;
}

.dona-centro[b-yau8rwml9u] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dona-centro-valor[b-yau8rwml9u] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--synbex-text);
}

.dona-centro-unidad[b-yau8rwml9u] {
    font-size: 0.78rem;
    color: var(--synbex-text-muted);
}

.dona-leyenda[b-yau8rwml9u] {
    flex: 1 1 180px;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dona-leyenda li[b-yau8rwml9u] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto 44px;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.dona-muestra[b-yau8rwml9u] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--dona-color);
}

.dona-etiqueta[b-yau8rwml9u] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--synbex-text);
}

.dona-valor[b-yau8rwml9u] {
    font-weight: 700;
    color: var(--synbex-text);
}

.dona-pct[b-yau8rwml9u] {
    text-align: right;
    color: var(--synbex-text-muted);
}

/* ── Detalle: buscador y encabezados que ordenan ─────────────────────────────── */
.parqueo-buscador[b-yau8rwml9u] {
    position: relative;
    max-width: 360px;
    margin-bottom: 14px;
}

.parqueo-buscador-icono[b-yau8rwml9u] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--synbex-text-muted);
    pointer-events: none;
}

.parqueo-buscador-icono svg[b-yau8rwml9u] {
    width: 18px;
    height: 18px;
}

.parqueo-buscador .synbex-input[b-yau8rwml9u] {
    padding-left: 38px;
}

.parqueo-th-boton[b-yau8rwml9u] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.parqueo-th-ordenable.is-derecha[b-yau8rwml9u] {
    text-align: right;
}

.parqueo-th-flecha[b-yau8rwml9u] {
    font-size: 0.7em;
    opacity: 0.45;
}

.parqueo-th-boton.is-activa[b-yau8rwml9u] {
    color: var(--synbex-primary);
}

.parqueo-th-boton.is-activa .parqueo-th-flecha[b-yau8rwml9u] {
    opacity: 1;
}

.parqueo-sin-resultados[b-yau8rwml9u] {
    text-align: center;
    color: var(--synbex-text-muted);
    padding: 18px 8px;
}

/* ── Ventana "Ver detalles" ──────────────────────────────────────────────────── */
.parqueo-detalle-modal[b-yau8rwml9u] {
    width: 100%;
    max-width: 640px;
}

.parqueo-detalle-modal-tabla[b-yau8rwml9u] {
    max-height: min(60vh, 520px);
    overflow-y: auto;
}

.parqueo-detalle-modal-acciones[b-yau8rwml9u] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.parqueo-detalle-modal-acciones .btn-synbex[b-yau8rwml9u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.parqueo-detalle-modal-acciones svg[b-yau8rwml9u] {
    width: 18px;
    height: 18px;
}

@media (max-width: 600px) {
    .dona[b-yau8rwml9u] {
        justify-content: center;
    }

    .parqueo-panel-cabecera[b-yau8rwml9u] {
        flex-direction: column;
    }

    .parqueo-buscador[b-yau8rwml9u] {
        max-width: none;
    }
}

/* "Ver detalles" nunca se parte en dos renglones aunque el texto de al lado sea largo. */
.parqueo-panel-cabecera > .btn-synbex[b-yau8rwml9u] {
    flex-shrink: 0;
    white-space: nowrap;
}
/* /Components/Pages/Dashboard/Parking/Configuracion.razor.rz.scp.css */
/* ── Cobro de parqueo, en la configuración ─────────────────────────────────── */

/* El aviso legal. Va en tono de advertencia, no de error: no impide nada, pero
   tampoco se puede pasar de largo. */
.parqueo-aviso-legal[b-zgmx3j2gll] {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 10px;
    border: 1px solid #fcd34d;
    background: #fffbeb;
}

.parqueo-aviso-icono[b-zgmx3j2gll] {
    flex: 0 0 auto;
    color: #b45309;
    display: flex;
}

.parqueo-aviso-legal strong[b-zgmx3j2gll] {
    display: block;
    margin-bottom: 2px;
    color: #92400e;
}

.parqueo-aviso-legal p[b-zgmx3j2gll] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #78350f;
}

.parqueo-tarifas[b-zgmx3j2gll] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.parqueo-tarifa-fila[b-zgmx3j2gll] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--synbex-border, #e5e7eb);
    border-radius: 10px;
}

.parqueo-tarifa-nombre[b-zgmx3j2gll] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.parqueo-tarifa-resumen[b-zgmx3j2gll] {
    font-size: 0.82rem;
    color: var(--synbex-text-muted, #6b7280);
}

.parqueo-recibo-campos[b-zgmx3j2gll] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 0 16px;
}

.parqueo-recibo-ancho[b-zgmx3j2gll] {
    grid-column: 1 / -1;
}

/* ── Editor de una tarifa ──────────────────────────────────────────────────── */

.parqueo-editor-ayuda[b-zgmx3j2gll] {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--synbex-bg);
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--synbex-text-muted, #4b5563);
}

/* Cada grupo contesta una pregunta del administrador, y por eso lleva su propio
   título y su explicación en vez de ser una lista plana de campos. */
.parqueo-editor-grupo[b-zgmx3j2gll] {
    padding: 12px 0;
    border-top: 1px solid var(--synbex-border, #e5e7eb);
}

.parqueo-editor-grupo:first-of-type[b-zgmx3j2gll] {
    border-top: none;
    padding-top: 0;
}

.parqueo-editor-grupo h4[b-zgmx3j2gll] {
    margin: 0 0 2px;
    font-size: 0.92rem;
}

.parqueo-editor-grupo p[b-zgmx3j2gll] {
    margin: 0 0 8px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--synbex-text-muted, #6b7280);
}

.parqueo-editor-grupo p:last-child[b-zgmx3j2gll] {
    margin: 6px 0 0;
}

.parqueo-editor-par[b-zgmx3j2gll],
.parqueo-editor-trio[b-zgmx3j2gll] {
    display: grid;
    gap: 10px;
}

.parqueo-editor-par[b-zgmx3j2gll] {
    grid-template-columns: repeat(2, 1fr);
}

.parqueo-editor-trio[b-zgmx3j2gll] {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 520px) {
    .parqueo-editor-trio[b-zgmx3j2gll] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Nota bajo un campo del recibo que se autocompletó con los datos del conjunto. */
.parqueo-recibo-origen[b-zgmx3j2gll] {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--synbex-text-muted);
}

.parqueo-recibo-aviso[b-zgmx3j2gll] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-primary-soft);
    color: var(--synbex-text);
    font-size: 13px;
    line-height: 1.4;
}

.parqueo-recibo-aviso[b-zgmx3j2gll]  svg {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    color: var(--synbex-primary);
}

/* ── Íconos de información del editor de tarifas ────────────────────────────── */

/* Etiqueta + ícono en una misma línea. El ícono va fuera del <label> a propósito:
   tocarlo no debe enfocar el campo. */
.parqueo-etiqueta[b-zgmx3j2gll] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.parqueo-etiqueta .synbex-label[b-zgmx3j2gll] {
    margin-bottom: 0;
}

.parqueo-editor-par .parqueo-etiqueta[b-zgmx3j2gll],
.parqueo-editor-trio .parqueo-etiqueta[b-zgmx3j2gll] {
    margin-bottom: 6px;
}

.parqueo-editor-grupo h4[b-zgmx3j2gll] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* El editor es una ventana angosta con desplazamiento propio: un globo anclado al
   ícono de la columna "Moto" se salía por la derecha y quedaba cortado. Acá el
   globo se ancla al grupo entero: arranca justo debajo de la línea del ícono y
   ocupa todo el ancho del grupo, sea cual sea la columna. */
.parqueo-editor-grupo[b-zgmx3j2gll] {
    position: relative;
}

.parqueo-editor-grupo[b-zgmx3j2gll]  .ayuda-info {
    position: static;
    flex-shrink: 0;
}

.parqueo-editor-grupo[b-zgmx3j2gll]  .ayuda-info-globo {
    top: auto;
    left: 0;
    right: 0;
    align-self: flex-start;
    width: auto;
    max-width: none;
    margin-top: 26px;
    font-size: 12.5px;
    color: #f9fafb;
}

.parqueo-editor-grupo[b-zgmx3j2gll]  .ayuda-info-globo::before {
    display: none;
}

/* Los párrafos del globo no heredan el gris chico de las descripciones del grupo. */
.parqueo-editor-grupo[b-zgmx3j2gll]  .ayuda-info-globo p,
.parqueo-editor-grupo[b-zgmx3j2gll]  .ayuda-info-globo p:last-child {
    margin: 0;
    font-size: inherit;
    line-height: 1.55;
    color: inherit;
}

.parqueo-editor-grupo[b-zgmx3j2gll]  .ayuda-info-globo p + p {
    margin-top: 8px;
}

.parqueo-editor-activa[b-zgmx3j2gll] {
    padding-bottom: 0;
}

/* ── Tipos de parqueadero en la lista de tarifas ────────────────────────────── */

.parqueo-tipos-encabezado[b-zgmx3j2gll] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.parqueo-tarifa-detalle[b-zgmx3j2gll] {
    font-size: 0.8rem;
    color: var(--synbex-text-muted, #6b7280);
}

.parqueo-tarifa-acciones[b-zgmx3j2gll] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.parqueo-tarifa-acciones[b-zgmx3j2gll]  svg {
    width: 15px;
    height: 15px;
}

@media (max-width: 600px) {
    .parqueo-tarifa-fila[b-zgmx3j2gll] {
        flex-direction: column;
        align-items: stretch;
    }

    .parqueo-tarifa-acciones[b-zgmx3j2gll] {
        justify-content: flex-end;
    }
}

/* Campos de la ventana de tipo: usan el anclaje de globo del editor, sin su borde. */
.parqueo-editor-grupo.parqueo-tipo-campo[b-zgmx3j2gll] {
    padding: 0;
    border-top: none;
}
/* /Components/Pages/Dashboard/Parking/Index.razor.rz.scp.css */
/* --------------------------------------------------------------------------
   Resumen de parqueaderos de visita: libres, ocupados y el anillo
   --------------------------------------------------------------------------

   Mismo molde que el resumen de "Entregados" en Paquetería (pedido explícito),
   pero con sus propias clases: aquel vive en el CSS aislado de esa página y el
   aislamiento por componente de Blazor no cruza de una pantalla a otra. */

.parqueo-resumen-card[b-zkqv0ydhdx] {
    margin-bottom: 20px;
    /* A la mitad de alto que la tarjeta normal: el contenido son tres datos de una
       linea, no un formulario. */
    padding: 12px 24px;
}

/* Tres columnas iguales, centradas a lo ancho y a lo alto. El alto mínimo evita
   que la fila se encoja al alto del número antes de que el anillo pinte. */
.parqueo-resumen[b-zkqv0ydhdx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 72px;
    padding: 10px;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
}

.parqueo-resumen-item[b-zkqv0ydhdx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
}

.parqueo-resumen-icono[b-zkqv0ydhdx] {
    display: flex;
}

    .parqueo-resumen-icono.is-verde[b-zkqv0ydhdx] {
        color: var(--synbex-success);
    }

    .parqueo-resumen-icono.is-rojo[b-zkqv0ydhdx] {
        color: var(--synbex-danger);
    }

    .parqueo-resumen-icono svg[b-zkqv0ydhdx] {
        width: 20px;
        height: 20px;
    }

.parqueo-resumen-numero[b-zkqv0ydhdx] {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--synbex-text);
}

.parqueo-resumen-label[b-zkqv0ydhdx] {
    font-size: 12px;
    color: var(--synbex-text-muted);
}

/* El anillo: un degradado cónico hasta el porcentaje ocupado, y el resto en el
   gris del borde. Ancho y alto SIEMPRE iguales entre sí y en píxeles, nunca en
   porcentaje, para que no se vea ovalado por más ancha que sea la tarjeta. */
.parqueo-anillo[b-zkqv0ydhdx] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--ring-color) calc(var(--ring-percent) * 1%), var(--synbex-border) 0);
}

    .parqueo-anillo.is-green[b-zkqv0ydhdx] {
        --ring-color: var(--synbex-success);
    }

    .parqueo-anillo.is-amber[b-zkqv0ydhdx] {
        --ring-color: #d97706;
    }

    .parqueo-anillo.is-red[b-zkqv0ydhdx] {
        --ring-color: var(--synbex-danger);
    }

.parqueo-anillo-inner[b-zkqv0ydhdx] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--synbex-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.parqueo-anillo-valor[b-zkqv0ydhdx] {
    font-size: 11px;
    font-weight: 700;
    color: var(--synbex-text);
}

@media (max-width: 700px) {
    /* En un teléfono tres columnas dejan cada dato en una tira ilegible: los dos
       números arriba y el anillo abajo, a todo el ancho. */
    .parqueo-resumen[b-zkqv0ydhdx] {
        grid-template-columns: repeat(2, 1fr);
    }

        .parqueo-resumen .parqueo-resumen-item:last-child[b-zkqv0ydhdx] {
            grid-column: 1 / -1;
        }
}

/* La tarjeta de abajo ("Parqueaderos registrados"): su título quedaba pegado al
   borde de arriba — los 24px que trae .synbex-card se sienten cortos justo ahí,
   porque el título es grande y no tiene nada encima que lo separe. */
.parqueo-registrados-card[b-zkqv0ydhdx] {
    padding-top: 34px;
}

/* Encabezado de la tarjeta: título a la izquierda, contador y "+ Agregar" a la
   derecha. Mismo molde que el Checklist de limpieza. */
.parqueo-card-header[b-zkqv0ydhdx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

[b-zkqv0ydhdx] .parqueo-add-form {
    display: block;
}

/* Reemplaza a .table-wrapper, que en celular se oculta. En celular la tabla ya se
   apila en tarjetas (responsive-tables.js); acá solo desliza en pantallas medianas. */
.parqueo-tabla[b-zkqv0ydhdx] {
    overflow-x: auto;
}

/* Dentro de la pestaña "Parqueaderos" de Consultas: ocupa el ancho que le da
   Consultas (sin el ancho máximo de página propia), y el resumen de arriba no se
   separa de la pestaña. */
.catalog-page-container.is-incrustado[b-zkqv0ydhdx] {
    max-width: none;
    margin: 0;
}
/* /Components/Pages/Dashboard/Parking/Recibo.razor.rz.scp.css */
/* Recibo de parqueo.

   Ancho de tirilla (80 mm) porque la mayoría de porterías imprime en impresora
   térmica; en una hoja normal queda centrado y se ve igual de bien. Al imprimir,
   los botones desaparecen y el papel queda solo con el recibo. */

.recibo-hoja[b-dbqchyqcha] {
    max-width: 80mm;
    margin: 24px auto;
    padding: 18px 16px;
    background: #fff;
    color: #111;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

.recibo-encabezado[b-dbqchyqcha] {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px dashed #9ca3af;
}

.recibo-conjunto[b-dbqchyqcha] {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
}

.recibo-linea[b-dbqchyqcha] {
    margin: 1px 0;
    font-size: 11px;
    color: #4b5563;
}

.recibo-titulo[b-dbqchyqcha] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 12px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.recibo-titulo strong[b-dbqchyqcha] {
    font-size: 14px;
}

.recibo-datos[b-dbqchyqcha] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 10px;
    margin: 0 0 12px;
}

.recibo-datos dt[b-dbqchyqcha] {
    color: #6b7280;
}

.recibo-datos dd[b-dbqchyqcha] {
    margin: 0;
    text-align: right;
}

.recibo-detalle[b-dbqchyqcha] {
    padding: 8px 10px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: #f3f4f6;
    font-size: 11px;
    line-height: 1.45;
}

.recibo-total[b-dbqchyqcha] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-top: 1px dashed #9ca3af;
    border-bottom: 1px dashed #9ca3af;
    font-size: 13px;
}

.recibo-total strong[b-dbqchyqcha] {
    font-size: 18px;
}

.recibo-exonerado[b-dbqchyqcha] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-top: 1px dashed #9ca3af;
    border-bottom: 1px dashed #9ca3af;
    font-size: 12px;
}

.recibo-pie[b-dbqchyqcha] {
    margin-top: 12px;
    text-align: center;
}

.recibo-nota[b-dbqchyqcha] {
    margin: 6px 0 0;
    font-size: 10px;
    color: #6b7280;
}

.recibo-acciones[b-dbqchyqcha] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

.recibo-cargando[b-dbqchyqcha] {
    text-align: center;
    margin: 40px auto;
    color: #6b7280;
}

@media print {
    /* En el papel solo va el recibo: ni botones, ni bordes, ni márgenes de
       pantalla. */
    .recibo-acciones[b-dbqchyqcha] {
        display: none;
    }

    .recibo-hoja[b-dbqchyqcha] {
        margin: 0;
        border: none;
        border-radius: 0;
        max-width: none;
    }
}
/* /Components/Pages/Dashboard/PicoYPlaca/Index.razor.rz.scp.css */
.pyp-lista[b-52h1rpexun] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 920px;
}

.pyp-ciudad[b-52h1rpexun] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Apagada: se puede seguir editando, pero se ve que hoy no aplica. */
.pyp-ciudad.is-apagada .pyp-dias[b-52h1rpexun],
.pyp-ciudad.is-apagada .pyp-fila[b-52h1rpexun] {
    opacity: 0.55;
}

.pyp-encabezado[b-52h1rpexun] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.pyp-titulo[b-52h1rpexun] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--synbex-text);
}

.pyp-cubre[b-52h1rpexun] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--synbex-text-muted);
}

.pyp-activa[b-52h1rpexun] {
    flex-shrink: 0;
    gap: 10px;
}

.pyp-fila[b-52h1rpexun] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 40px;
}

.pyp-bloque[b-52h1rpexun] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pyp-opciones[b-52h1rpexun] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.pyp-check[b-52h1rpexun] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--synbex-text);
    cursor: pointer;
}

.pyp-check input[b-52h1rpexun] {
    width: 18px;
    height: 18px;
    accent-color: var(--synbex-primary);
}

.pyp-check small[b-52h1rpexun] {
    color: var(--synbex-text-muted);
}

.pyp-horas[b-52h1rpexun] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--synbex-text-muted);
}

.pyp-horas .synbex-input[b-52h1rpexun] {
    width: 130px;
}

.pyp-dias[b-52h1rpexun] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pyp-dia[b-52h1rpexun] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pyp-dia-nombre[b-52h1rpexun] {
    width: 90px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--synbex-text);
}

.pyp-digitos[b-52h1rpexun] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Un botón por dígito: tocarlo lo prende o lo apaga para ese día. */
.pyp-digito[b-52h1rpexun] {
    width: 38px;
    height: 38px;
    border-radius: var(--synbex-radius-md);
    border: 1px solid var(--synbex-border);
    background: var(--synbex-surface);
    color: var(--synbex-text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.pyp-digito:hover[b-52h1rpexun] {
    border-color: var(--synbex-primary);
}

.pyp-digito.is-on[b-52h1rpexun] {
    background: var(--synbex-primary);
    border-color: var(--synbex-primary);
    color: #fff;
}

.pyp-pie[b-52h1rpexun] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--synbex-border);
}

.pyp-actualizada[b-52h1rpexun] {
    font-size: 13px;
    color: var(--synbex-text-muted);
}

@media (max-width: 600px) {
    .pyp-dia[b-52h1rpexun] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    /* Los 10 dígitos en una sola fila, repartidos en todo el ancho. */
    .pyp-digitos[b-52h1rpexun] {
        display: grid;
        grid-template-columns: repeat(10, minmax(0, 1fr));
        gap: 4px;
    }

    .pyp-digito[b-52h1rpexun] {
        width: auto;
        height: 34px;
        font-size: 14px;
    }

    .pyp-pie .btn-synbex[b-52h1rpexun] {
        width: 100%;
    }
}
/* /Components/Pages/Dashboard/Visitors/Consultas.razor.rz.scp.css */
/* Fila de la tabla: interactiva en cualquier tamaño de pantalla — un toque/clic
   selecciona (resalta), dos toques/clic abren el detalle (ver @ondblclick en el
   markup). El cursor y el resaltado ayudan a que se note que se puede tocar. */
.consultas-table tbody tr[b-dd5xjwl7ob] {
    cursor: pointer;
    transition: background 0.15s ease;
}

.consultas-table tbody tr:hover[b-dd5xjwl7ob] {
    background: var(--synbex-bg);
}

.consultas-row-selected[b-dd5xjwl7ob] {
    background: var(--synbex-primary-soft);
}

.consultas-row-selected:hover[b-dd5xjwl7ob] {
    background: var(--synbex-primary-soft);
}

/* Modal de detalle: mismo ancho estándar que el resto de modales chicos de la
   app (.settings-modal-dialog ya trae max-width:440px de fábrica), acá solo se
   deja un poco más alto de scroll para que quepan todos los campos sin que el
   modal se salga de la pantalla. */
.consultas-detail-modal .settings-modal-body[b-dd5xjwl7ob] {
    max-height: 70vh;
    overflow-y: auto;
}

/* Ícono + etiqueta juntos a la izquierda, valor a la derecha. La etiqueta se
   estira para empujar el valor al borde; con space-between y tres hijos, la
   etiqueta quedaba flotando en el medio. */
.consultas-detail-row[b-dd5xjwl7ob] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--synbex-border);
}

.consultas-detail-row .consultas-detail-label[b-dd5xjwl7ob] {
    flex: 1 1 auto;
    min-width: 0;
}

.consultas-detail-row .consultas-detail-value[b-dd5xjwl7ob] {
    flex-shrink: 0;
    text-align: right;
}

.consultas-detail-row:last-child[b-dd5xjwl7ob] {
    border-bottom: none;
}

.consultas-detail-label[b-dd5xjwl7ob] {
    flex-shrink: 0;
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

.consultas-detail-value[b-dd5xjwl7ob] {
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Todo lo de acá abajo es solo para celular (pedido explícito) — en computadora
   la pantalla se queda exactamente como estaba: título arriba, botones a la
   izquierda, panel de resultados siempre visible, buscador de ancho fijo. */
@media (max-width: 640px) {
    /* "De una vez va a salir el panel para buscar el rango de fechas" — sin el
       título+subtítulo de arriba, el panel de fechas queda como lo primero que
       se ve al entrar. */
    .consultas-header-row[b-dd5xjwl7ob] {
        display: none;
    }

    .consultas-preset-row[b-dd5xjwl7ob] {
        justify-content: center;
    }

    /* "Invisible hasta que le dé buscar" — los datos de "Hoy" ya se precargaron
       en segundo plano (OnInitializedAsync con revealResults:false), así que en
       cuanto toque Buscar o uno de los 4 botones de arriba esto aparece de
       inmediato, sin tener que esperar a que la consulta vuelva a viajar. */
    .consultas-results-hidden[b-dd5xjwl7ob] {
        display: none;
    }

    .consultas-search-input[b-dd5xjwl7ob] {
        max-width: 100% !important;
        width: 100%;
    }

    /* Desde/Hasta/Punto de entrada/Buscar/Exportar Excel: cada uno pasa de ser
       una columna de 220px (o 110px el botón) en una fila que se acomodaba como
       podía, a ocupar el 100% de ancho, uno debajo del otro — pedido explícito.
       !important porque cada campo trae su propio "width" fijo en el atributo
       style (una regla de clase normal no le gana a eso). */
    .consultas-filter-row[b-dd5xjwl7ob] {
        flex-direction: column;
        align-items: stretch !important;
    }

    .consultas-filter-field[b-dd5xjwl7ob] {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   Detalle por bloques
   -------------------------------------------------------------------------- */

/* En celular los bloques van uno debajo del otro; en computadora, en dos
   columnas. Con una sola columna la ventana quedaba altísima y con media
   pantalla vacía a los lados — que es justamente lo que se pidió corregir. */
.consultas-detail-grid[b-dd5xjwl7ob] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

/* Cada bloque va dentro de su propio recuadro con borde redondeado: con solo un
   título encima, los grupos se leían como una lista continua y no se notaba dónde
   terminaba uno y empezaba el otro — pedido explícito. */
.consultas-detail-bloque[b-dd5xjwl7ob] {
    min-width: 0;
    padding: 14px 16px 4px;
    border: 1px solid var(--synbex-border);
    border-radius: 14px;
    background: var(--synbex-surface, #fff);
}

.consultas-detail-bloque-titulo[b-dd5xjwl7ob] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--synbex-primary);
}

.consultas-detail-bloque-titulo svg[b-dd5xjwl7ob] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Ícono de cada dato. Es SVG puesto directamente en la página: sin archivos, sin
   fuente de íconos y sin una sola petición al servidor. */
.consultas-detail-icono[b-dd5xjwl7ob] {
    display: flex;
    flex-shrink: 0;
    color: var(--synbex-text-muted);
}

.consultas-detail-icono svg[b-dd5xjwl7ob] {
    width: 15px;
    height: 15px;
}



/* El último renglón de CADA bloque va sin línea, no solo el último de todos:
   con los bloques separados, esa línea suelta al final se leía como si faltara
   un dato. */
.consultas-detail-bloque .consultas-detail-row:last-child[b-dd5xjwl7ob] {
    border-bottom: none;
}

@media (min-width: 760px) {
    .consultas-detail-modal.settings-modal-dialog[b-dd5xjwl7ob] {
        max-width: 820px;
    }

    .consultas-detail-grid[b-dd5xjwl7ob] {
        grid-template-columns: 1fr 1fr;
        gap: 18px 34px;
    }

    /* Con más ancho ya no hace falta tanto scroll: la ventana crece a lo ancho
       en vez de a lo alto. */
    .consultas-detail-modal .settings-modal-body[b-dd5xjwl7ob] {
        max-height: 78vh;
    }
}


/* --------------------------------------------------------------------------
   Encabezado de la tabla: la línea de abajo y ordenar al tocarlo
   -------------------------------------------------------------------------- */

/* Sin fondo ni letra de color: lo único que marca el encabezado es la línea de
   abajo, en el color de los botones de la app. Con veinte columnas, una franja
   de color arriba cansaba la vista antes de leer nada. */
.consultas-table thead th[b-dd5xjwl7ob] {
    border-bottom: 2px solid var(--synbex-primary);
}

.consultas-th-ordenable[b-dd5xjwl7ob] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

/* Gris al pasar por encima y al ordenar: avisa cuál manda el orden sin meterle
   otro color a una tabla que ya tiene pastillas de colores en dos columnas. */
.consultas-th-ordenable:hover[b-dd5xjwl7ob] {
    background: rgba(148, 163, 184, 0.16);
}

.consultas-th-ordenable.is-ordenada[b-dd5xjwl7ob] {
    background: rgba(148, 163, 184, 0.22);
}

.consultas-th-flecha[b-dd5xjwl7ob] {
    margin-left: 5px;
    font-size: 10px;
}

/* --------------------------------------------------------------------------
   Elegir en qué columna buscar
   -------------------------------------------------------------------------- */

.consultas-columna-picker[b-dd5xjwl7ob] {
    position: relative;
    flex-shrink: 0;
}

.consultas-columna-boton[b-dd5xjwl7ob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 210px;
    text-align: left;
    cursor: pointer;
}

.consultas-columna-actual[b-dd5xjwl7ob] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.consultas-columna-flecha[b-dd5xjwl7ob] {
    display: flex;
    flex-shrink: 0;
    color: var(--synbex-text-muted);
}

.consultas-columna-flecha svg[b-dd5xjwl7ob] {
    /* 20% más chico: el ícono se veía grande al lado del texto; el botón queda igual. */
    width: 13px;
    height: 13px;
}

/* Capa invisible que cubre la pantalla: un clic afuera cierra la lista. */
.consultas-columna-fuera[b-dd5xjwl7ob] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

/* SIEMPRE debajo del botón (top: 100%) y con alto máximo: si no cabe, se
   desplaza dentro de la lista en vez de estirarse o abrirse hacia arriba. */
.consultas-columna-lista[b-dd5xjwl7ob] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 41;
    width: 260px;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--synbex-border);
    border-radius: 12px;
    background: var(--synbex-surface, #fff);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}

.consultas-columna-opcion[b-dd5xjwl7ob] {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--synbex-text);
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.consultas-columna-opcion:hover[b-dd5xjwl7ob] {
    background: rgba(148, 163, 184, 0.16);
}

.consultas-columna-opcion.is-elegida[b-dd5xjwl7ob] {
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   El alto de la tabla: que la barra de la derecha quede siempre a la vista
   -------------------------------------------------------------------------- */

/* La tabla tiene veinte columnas, así que hay que deslizarla a lo ancho. Cuando
   crecía a lo alto sin límite, esa barra horizontal quedaba al final de TODAS las
   filas: con doscientos registros había que bajar hasta el fondo solo para poder
   correrla hacia la derecha.

   Con el alto acotado, las dos barras —la de abajo y la de la derecha— viven en
   este recuadro y están siempre a mano. El alto sigue a la pantalla (60vh, así que
   en un monitor grande se ven más filas y en uno chico menos), pero nunca baja de
   300px ni pasa de 680px: sin piso quedaría una ventanita inservible en una
   pantalla corta, y sin techo volvería el problema en una pantalla muy alta. */
.consultas-table-scroll[b-dd5xjwl7ob] {
    max-height: clamp(300px, 60vh, 680px);
    overflow: auto;
    /* Sin relleno arriba: el encabezado pegajoso se ancla en top:0 del recuadro, y
       los 24px que trae .synbex-card dejaban una franja vacía encima que solo servía
       para que se vieran pasar las filas por detrás. A los lados y abajo se queda el
       relleno de siempre. */
    padding-top: 0;
}

/* El encabezado se queda arriba del recuadro mientras se baja por las filas
   (top:0, no el 64px de la barra de la aplicación: acá el que se mueve es este
   contenedor, no la página).

   border-collapse: separate NO es un detalle: con el "collapse" que trae
   .synbex-table, el navegador pinta el fondo de las FILAS por encima del fondo de
   un <th> pegajoso, y las filas que van pasando por debajo se veían atravesadas
   sobre el encabezado — que es exactamente lo que se reportó. En modo "separate"
   cada celda pinta su propio fondo y el encabezado tapa de verdad lo que pasa por
   atrás. Con border-spacing en 0 la tabla se ve igual que antes: las líneas de las
   filas ya venían de un border-bottom por celda, no del colapso. */
.consultas-table-scroll .consultas-table[b-dd5xjwl7ob] {
    border-collapse: separate;
    border-spacing: 0;
}

.consultas-table-scroll .consultas-table thead th[b-dd5xjwl7ob] {
    position: sticky;
    top: 0;
    /* Por encima de las pastillas de color de las celdas, que traen fondo propio. */
    z-index: 5;
    background: var(--synbex-surface);
    /* .synbex-table th viene sin relleno arriba (el encabezado se apoyaba en el
       aire de la tarjeta). Pegado al borde del recuadro quedaba el texto contra la
       orilla, así que se le da su propio aire. */
    padding-top: 10px;
    /* La línea de abajo como sombra interior además del borde: al desplazar, el
       navegador redondea los píxeles y se colaba un pelo de la fila de atrás entre
       el encabezado y la primera fila. */
    box-shadow: inset 0 -2px 0 var(--synbex-primary);
}
/* /Components/Pages/Dashboard/Visitors/Index.razor.rz.scp.css */
/* Sin título ni subtítulo — pedido explícito, esta pantalla ya la usa el guarda
   todo el día y no necesita esa presentación. "Pantalla completa" vivía acá
   arriba a la derecha; se quitó del todo (escritorio Y celular, pedido
   explícito) — este selector ya no tiene markup que lo use, pero se deja acá
   por si el botón vuelve a hacer falta más adelante en otra forma. */
.visitor-registro-header[b-90u4feafjh] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.registro-tab-header[b-90u4feafjh] {
    margin-bottom: 20px;
}

/* Pedido explícito: pestañas "más coloridas" que el gris neutro de siempre
   (.tab-btn), cada una con su propio color aunque no esté activa — no solo la
   que está seleccionada — y bien 50/50, nunca una más angosta que la otra. El
   50/50 hace falta por encima de la regla general de .tab-btn en celular
   (ver app.css: ahí "flex:1 1 auto" reparte el ancho según el TEXTO de cada
   pestaña, pensado para pantallas con 4-5 pestañas que no caben iguales —
   acá son solo 2, así que sí conviene forzarlas parejas). Verde para
   "Ingresados" (mismo verde que el botón "Ingreso" de más abajo — la persona
   ya está adentro) e índigo para "Registrar" (el color primario de siempre
   de la app), para que se distingan de un vistazo. */
.registro-tab-header .tab-btn[b-90u4feafjh] {
    flex: 1 1 0%;
}

.registro-tab-btn-registrar[b-90u4feafjh] {
    background: var(--synbex-primary-soft);
    border-color: var(--synbex-primary);
    color: var(--synbex-primary);
}

.registro-tab-btn-registrar.is-active[b-90u4feafjh] {
    background: var(--synbex-primary);
    border-color: var(--synbex-primary);
    color: #fff;
}

.registro-tab-btn-ingresados[b-90u4feafjh] {
    background: rgba(21, 128, 61, 0.12);
    border-color: #15803d;
    color: #15803d;
}

.registro-tab-btn-ingresados.is-active[b-90u4feafjh] {
    background: #15803d;
    border-color: #15803d;
    color: #fff;
}

.registro-tab-btn-ingresados .tab-count[b-90u4feafjh] {
    background: #15803d;
    color: #fff;
}

.registro-tab-btn-ingresados.is-active .tab-count[b-90u4feafjh] {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Filas, no columnas: la tarjeta activa (Registrar o Ingresados, ver las
   pestañas de arriba) ocupa todo el ancho disponible, no comparte fila con
   la otra. */
.visitor-registro-grid[b-90u4feafjh] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Documento, Nombre, Placa y campos adicionales fuerzan mayúscula de verdad en
   el valor guardado (ver Upper() en el code-behind), pero ese viaje al servidor
   por cada tecla se nota como una animación si la pantalla no se corrige hasta
   que vuelve la respuesta. Con text-transform la pantalla ya se ve en mayúscula
   al instante (puro CSS, sin esperar nada) — pedido explícito: "que sea fluido
   no sea muy pesado para ir convirtiendo cada letra una por una". */
.visitor-uppercase-input[b-90u4feafjh] {
    text-transform: uppercase;
}

/* Botón cuadrado: el ícono de cámara arriba y la palabra debajo, en vez de una
   barra a todo el ancho con un emoji. Ya no usa btn-synbex porque no es un botón
   de acción más de la fila: es un atajo con su propia forma. */
.visitor-camera-btn[b-90u4feafjh] {
    width: 96px;
    height: 96px;
    /* Centrado, con el aire repartido a los lados: es el atajo principal de la
       pantalla en celular y quedaba pegado al borde izquierdo. */
    margin: 0 auto 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    border-radius: 18px;
    border: none;
    background: var(--synbex-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 24px -12px var(--synbex-primary);
}

.visitor-camera-btn svg[b-90u4feafjh] {
    width: 30px;
    height: 30px;
    color: #fff;
}

.visitor-camera-btn:hover[b-90u4feafjh] {
    background: color-mix(in srgb, var(--synbex-primary) 85%, #000);
}

/* Cámara de documento y cámara de placa, uno al lado del otro y centrados
   (2026-10-02). El margen de abajo pasa a la fila: los botones van pegados. */
.visitor-camera-row[b-90u4feafjh] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 0 auto 18px;
}

.visitor-camera-row .visitor-camera-btn[b-90u4feafjh] {
    margin: 0;
}

/* Aviso de pico y placa debajo de la placa: solo informativo, mismo molde que
   el de menor de edad. */
.visitor-pyp-alert[b-90u4feafjh] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--synbex-radius-md);
    background: rgba(217, 119, 6, 0.14);
    color: #d97706;
    font-size: 13px;
    font-weight: 600;
}

.visitor-pyp-alert svg[b-90u4feafjh] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Botón "Placa" (2026-10-01): lee la placa con la cámara en vez de
   escribirla. Va PEGADO al campo, no suelto como .visitor-camera-btn
   (ese es el atajo principal de la pantalla; este es un ayudante de un
   campo puntual) — mismo alto que el input para que se vean como una
   sola unidad. */
.visitor-plate-field-row[b-90u4feafjh] {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.visitor-plate-field-row .synbex-input[b-90u4feafjh] {
    flex: 1;
    min-width: 0;
}

.visitor-plate-scan-btn[b-90u4feafjh] {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-surface);
    color: var(--synbex-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.visitor-plate-scan-btn:hover[b-90u4feafjh] {
    background: var(--synbex-primary-soft);
}

.visitor-plate-scan-btn svg[b-90u4feafjh] {
    width: 22px;
    height: 22px;
}

/* Guía del escáner de placa: más ancha que la de documentos (esa usa
   1.586, proporción de cédula) — una placa colombiana de carro mide
   aproximadamente el doble de ancho que de alto. El recorte real que lee
   plateScanner.js se calcula aparte, directo sobre el video (ver
   recortarPlaca() en ese archivo) y no depende de esta proporción exacta:
   esto es solo la guía visual para que el guarda encuadre bien. */
.plate-scanner-guide[b-90u4feafjh] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 86%;
    max-width: 640px;
    aspect-ratio: 2.1;
    pointer-events: none;
    border-radius: 14px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
    z-index: 1;
}

/* Diagnóstico TEMPORAL (2026-10-01, ver plateScanner.js) — muestra en vivo
   el recorte exacto que se le manda al lector, para encontrar por qué no
   leía en un celular real sin tener que adivinar. Se borra apenas quede
   resuelto. */
.plate-scanner-debug[b-90u4feafjh] {
    position: absolute;
    left: 50%;
    bottom: max(90px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(92%, 640px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    z-index: 2;
}

.plate-scanner-debug img[b-90u4feafjh] {
    max-width: 100%;
    max-height: 160px;
    border: 2px solid #22c55e;
    border-radius: 8px;
    background: #000;
}

.plate-scanner-debug div[b-90u4feafjh] {
    font-size: 11px;
    line-height: 1.4;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 10px;
    border-radius: 8px;
    text-align: center;
    word-break: break-word;
}

/* Datos personales / Datos adicionales lado a lado, separados por una línea
   gris clara — en celular se apilan y la línea pasa a ser horizontal arriba
   de "Datos adicionales". La línea es su propia columna del grid (no un
   border-right pegado a la primera columna) — con solo border-right, la línea
   quedaba en el borde de la columna 1, medio gap (14px) a la izquierda del
   centro real del renglón, torcida respecto a los botones Ingreso/Salida de
   abajo (esos sí quedan centrados de verdad). Con "1fr auto 1fr" y el mismo
   gap a los dos lados, la columna del medio (la línea) cae exactamente en el
   centro — pedido explícito, para que coincida con esos botones. */
.visitor-form-columns[b-90u4feafjh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.visitor-form-divider[b-90u4feafjh] {
    display: none;
}

@media (min-width: 700px) {
    .visitor-form-columns[b-90u4feafjh] {
        grid-template-columns: 1fr auto 1fr;
        gap: 28px;
    }

    .visitor-form-divider[b-90u4feafjh] {
        display: block;
        width: 1px;
        background: var(--synbex-border);
    }
}

@media (max-width: 699px) {
    .visitor-form-col:first-child[b-90u4feafjh] {
        border-bottom: 1px solid var(--synbex-border);
        padding-bottom: 16px;
    }
}

.visitor-form-col-title[b-90u4feafjh] {
    color: var(--synbex-primary);
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 16px;
}

/* Limpiar a la izquierda, Ingreso/Salida en el medio — con un gemelo invisible
   de Limpiar a la derecha (.visitor-actions-spacer, mismo ancho) el grid queda
   auto/1fr/auto simétrico, así que el par Ingreso/Salida cae centrado de
   verdad en TODO el renglón, no solo en lo que sobra a la derecha de Limpiar.
   Pedido explícito — antes con flex:1 el centrado era relativo al espacio
   sobrante, y el par terminaba corrido hacia la derecha. */
.visitor-actions-row[b-90u4feafjh] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.visitor-actions-buttons-centered[b-90u4feafjh] {
    display: flex;
    gap: 14px;
    justify-content: center;
}

.visitor-actions-buttons-centered .visitor-action-btn[b-90u4feafjh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 190px;
    padding: 11px 28px;
    font-size: 16px;
    font-weight: 700;
}

/* Colores fijos (no las variables --synbex-success/--synbex-danger, que en
   modo oscuro se aclaran mucho y se ven pálidas) — pedido explícito: Salida
   igual de sólido que "Cerrar sesión" (#b91c1c), Ingreso el mismo criterio
   pero en un verde ni muy oscuro ni muy claro. */
.btn-synbex.visitor-action-btn-checkin[b-90u4feafjh] {
    background: #15803d;
    color: #fff;
    border-color: #15803d;
}

.btn-synbex.visitor-action-btn-checkin:hover[b-90u4feafjh] {
    background: #166534;
    border-color: #166534;
}

.btn-synbex.visitor-action-btn-exit[b-90u4feafjh] {
    background: #b91c1c;
    color: #fff;
    border-color: #b91c1c;
}

.btn-synbex.visitor-action-btn-exit:hover[b-90u4feafjh] {
    background: #991b1b;
    border-color: #991b1b;
}

/* Botón "Limpiar" — ámbar para diferenciarlo de un vistazo de Ingreso (verde)
   y Salida (rojo), nunca se confunde con ninguno de los dos. */
.btn-synbex.visitor-clear-btn[b-90u4feafjh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    font-weight: 700;
    background: #d97706;
    color: #fff;
    border-color: #d97706;
}

.btn-synbex.visitor-clear-btn:hover[b-90u4feafjh] {
    background: #b45309;
    border-color: #b45309;
}

/* Gemelo invisible de "Limpiar" — mismo tamaño, sin verse ni responder a
   clics, solo para balancear el ancho de la izquierda y centrar de verdad
   el par Ingreso/Salida (ver comentario de .visitor-actions-row). */
.visitor-actions-spacer[b-90u4feafjh] {
    visibility: hidden;
}

@media (max-width: 480px) {
    .visitor-actions-row[b-90u4feafjh] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* Ingreso/Salida primero (pedido explícito) — en el marcado "Limpiar" va
       antes que este bloque porque así queda bien en escritorio (a la
       izquierda del par centrado), pero en celular el orden visual se
       reacomoda con "order" sin tocar el markup. */
    .visitor-actions-buttons-centered[b-90u4feafjh] {
        flex-direction: column;
        order: 1;
    }

    .visitor-actions-buttons-centered .visitor-action-btn[b-90u4feafjh] {
        min-width: 0;
    }

    /* En celular todo se apila — el gemelo invisible ya no cumple ninguna
       función (no hay renglón horizontal que balancear) y solo ocuparía
       espacio de más. */
    .visitor-actions-spacer[b-90u4feafjh] {
        display: none;
    }

    /* Limpiar al final, con más separación arriba para que no se confunda
       con Ingreso/Salida (pedido explícito). */
    .visitor-clear-btn[b-90u4feafjh] {
        order: 2;
        margin-top: 18px;
    }
}

/* ===== Alerta de coincidencia (Frecuente/Con cita) arriba del todo del panel
   — Blacklisted no usa esto, tiene su propia ventana flotante más abajo. ===== */
.visitor-match-alert[b-90u4feafjh] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: var(--synbex-radius-md);
    font-weight: 600;
    font-size: 14px;
}

.visitor-match-alert svg[b-90u4feafjh] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.visitor-match-alert.is-frequent[b-90u4feafjh] {
    background: color-mix(in srgb, var(--synbex-success) 15%, transparent);
    color: var(--synbex-success);
}

.visitor-match-alert.is-appointment[b-90u4feafjh] {
    background: rgba(234, 179, 8, 0.16);
    color: #a16207;
}

/* ===== Ventana flotante "No deseado" — reemplaza el aviso en línea que tenía
   antes, pedido explícito para que sea imposible pasarlo por alto. ===== */
.visitor-blacklisted-modal[b-90u4feafjh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 32px 28px;
}

.visitor-blacklisted-icon[b-90u4feafjh] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--synbex-danger);
    color: #fff;
}

.visitor-blacklisted-icon svg[b-90u4feafjh] {
    width: 32px;
    height: 32px;
}

.visitor-blacklisted-title[b-90u4feafjh] {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--synbex-danger);
}

.visitor-blacklisted-message[b-90u4feafjh] {
    margin: 0;
    color: var(--synbex-text);
}

/* Confirmación grande debajo de los botones — el guarda no tiene que fijarse
   en el toast (que puede pasar desapercibido) para saber que el ingreso/salida
   sí quedó registrado antes de atender al siguiente visitante. */
.visitor-success-banner[b-90u4feafjh] {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: var(--synbex-radius-md);
    background: color-mix(in srgb, var(--synbex-success) 15%, transparent);
    color: var(--synbex-success);
    font-weight: 700;
    font-size: 19px;
    text-align: center;
}

/* Botón de salida rápida en la tabla de "Visitantes dentro del conjunto" —
   mismo ícono que el botón grande de Salida de arriba (door-out) y el mismo
   rojo, pero en tamaño chico con el texto al lado para que quede claro qué
   hace sin depender solo del ícono. */
/* Mismo rojo fijo que el botón grande de Salida (#b91c1c, no la variable
   --synbex-danger que se aclara en modo oscuro) — pedido explícito, los dos
   "Salida" de la pantalla tienen que verse del mismo color. */
.visitor-quick-checkout-btn[b-90u4feafjh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #b91c1c;
    color: #fff;
    border-color: #b91c1c;
    white-space: nowrap;
}

.visitor-quick-checkout-btn:hover[b-90u4feafjh] {
    background: #991b1b;
    border-color: #991b1b;
}

.visitor-quick-checkout-btn svg[b-90u4feafjh] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Punto de entrada queda aparte, esquinado abajo a la derecha de la tarjeta —
   sin título/label, y más chico que un campo de formulario normal, porque es
   solo un detalle secundario del registro. */
/* Pedido explícito: "mucho espacio en blanco" abajo del todo, entre el
   renglón de Limpiar/Ingreso/Salida y el borde de la tarjeta. No es tanto
   espacio VERTICAL de más (el padding de abajo es el mismo que cualquier
   .synbex-card) — es que este selector, angosto y pegado a la derecha, dejaba
   vacío TODO el ancho a su izquierda en el último renglón visible de la
   tarjeta. Centrado (no flex-end) se ve como el cierre a propósito del
   formulario, no como un control olvidado en la esquina. */
.visitor-entrypoint-corner[b-90u4feafjh] {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.visitor-entrypoint-corner .visitor-entrypoint-field[b-90u4feafjh] {
    width: 100%;
    max-width: 150px;
}

.visitor-entrypoint-corner .visitor-entrypoint-field select[b-90u4feafjh] {
    font-size: 12.5px;
    padding: 6px 10px;
}

@media (max-width: 480px) {
    .visitor-entrypoint-corner .visitor-entrypoint-field[b-90u4feafjh] {
        max-width: 180px;
    }
}

.visitor-list-header[b-90u4feafjh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* Mismo tamaño que "Datos personales"/"Datos adicionales" (.visitor-form-col-title,
   13.5px) — pedido explícito, antes era mucho más grande (20px) que esos títulos. */
.visitor-list-title[b-90u4feafjh] {
    font-size: 13.5px !important;
}

.visitor-search-input[b-90u4feafjh] {
    width: 340px;
    max-width: 100%;
}

/* Cuántos visitantes hay adentro ahora mismo — informativo, junto al buscador. */
.visitor-count-badge[b-90u4feafjh] {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* La tabla de visitantes dentro del conjunto no debe achicar el nombre hasta
   partirlo en varias líneas — todas las celdas quedan en una sola fila y, si
   no caben, la tarjeta (ver regla global .synbex-card:has(> table.synbex-table)
   en app.css) scrollea horizontal en vez de aplastar columnas. */
.visitor-list-card .synbex-table th[b-90u4feafjh],
.visitor-list-card .synbex-table td[b-90u4feafjh] {
    white-space: nowrap;
}

/* Ícono + alerta de "menor de edad" — mismos tonos ámbar/naranja que el resto
   de alertas de advertencia de la app (badge-warning, destino-warning-text). */
.visitor-minor-alert[b-90u4feafjh] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--synbex-radius-md);
    background: rgba(217, 119, 6, 0.14);
    color: #d97706;
    font-size: 13px;
    font-weight: 600;
}

.visitor-minor-alert svg[b-90u4feafjh] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (min-width: 900px) {
    /* El ancho se define UNA vez, en el contenedor, y las tarjetas de adentro lo
       llenan enteras. Antes cada tarjeta llevaba su propio "90% / 1080px" y bastaba
       con que a una le ganara otra regla (o que un elemento quedara fuera de la
       lista) para que se vieran de anchos distintos — que es justo lo que pasaba
       con el panel de autorizaciones y con las pestañas. Así no puede desalinearse:
       comparten el mismo padre y todas miden lo mismo por construcción. */
    .visitor-registro-grid[b-90u4feafjh],
    .registro-tab-header[b-90u4feafjh] {
        width: 90%;
        max-width: 1080px;
        margin-left: auto;
        margin-right: auto;
    }

    .visitor-form-card[b-90u4feafjh],
    .visitor-list-card[b-90u4feafjh],
    .autorizaciones-panel[b-90u4feafjh] {
        width: 100%;
        max-width: none;
    }


    /* El escaneo por cámara es solo para celular — en una pantalla de computadora
       no tiene sentido, así que el botón ni aparece ahí. Nota: esta regla DEBE
       vivir en el stylesheet (no como estilo inline en el botón) porque un estilo
       inline con display siempre le gana a cualquier selector de clase externo,
       sin importar el ancho de pantalla — eso fue justo lo que rompía este
       "ocultar en computadora" la primera vez. */
    .visitor-camera-btn[b-90u4feafjh],
    .visitor-camera-row[b-90u4feafjh] {
        display: none;
    }
}

@keyframes id-scan-barcode-pulse-b-90u4feafjh {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

.id-scan-barcode-zone[b-90u4feafjh] {
    animation: id-scan-barcode-pulse-b-90u4feafjh 1.3s ease-in-out infinite alternate;
}

/* ---- A qué apartamento va un visitante frecuente ----
   Sale al leer el documento, debajo del aviso verde. La misma persona puede ser
   frecuente de varias casas (la empleada que trabaja en dos), así que cuando hay
   más de una el guarda elige; con una sola queda marcada de entrada. */
.visitor-frequent-units[b-90u4feafjh] {
    margin-bottom: 16px;
}

.visitor-frequent-units-label[b-90u4feafjh] {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-text-muted);
}

.visitor-frequent-unit-list[b-90u4feafjh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.visitor-frequent-unit[b-90u4feafjh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-surface);
    color: var(--synbex-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.visitor-frequent-unit:hover[b-90u4feafjh] {
    border-color: var(--synbex-primary);
}

.visitor-frequent-unit.is-selected[b-90u4feafjh] {
    border-color: var(--synbex-primary);
    background: var(--synbex-primary-soft);
}

.visitor-frequent-unit-main[b-90u4feafjh] {
    min-width: 0;
}

/* Que se lea de lejos si hay que llamar al apartamento o si puede pasar directo:
   es lo que el guarda necesita decidir en el momento. */
.visitor-frequent-unit-tag[b-90u4feafjh] {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(217, 119, 6, 0.14);
    color: #b45309;
    font-size: 12px;
    font-weight: 600;
}

.visitor-frequent-unit-tag.is-direct[b-90u4feafjh] {
    background: rgba(21, 128, 61, 0.12);
    color: #15803d;
}

@media (prefers-color-scheme: dark) {
    .visitor-frequent-unit-tag[b-90u4feafjh] {
        color: #fbbf24;
    }

    .visitor-frequent-unit-tag.is-direct[b-90u4feafjh] {
        color: #4ade80;
    }
}

/* Panel de "el apartamento tiene que autorizar", debajo de la lista de
   apartamentos. Cambia de color según en qué quedó, para que el guarda no tenga
   que leer para saber si puede dejar pasar. */
.visitor-approval[b-90u4feafjh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-surface-alt);
    font-size: 13px;
}

.visitor-approval-text[b-90u4feafjh] {
    flex: 1 1 220px;
    min-width: 0;
}

.visitor-approval-text strong[b-90u4feafjh] {
    display: block;
}

.visitor-approval.is-waiting[b-90u4feafjh] {
    border-color: rgba(217, 119, 6, 0.45);
    background: rgba(217, 119, 6, 0.10);
}

.visitor-approval.is-approved[b-90u4feafjh] {
    border-color: rgba(21, 128, 61, 0.45);
    background: rgba(21, 128, 61, 0.10);
}

.visitor-approval.is-rejected[b-90u4feafjh] {
    border-color: rgba(190, 24, 60, 0.45);
    background: rgba(190, 24, 60, 0.10);
}

/* Que se note que la pantalla sigue consultando, sin ocupar toda la fila. */
.visitor-approval-spinner[b-90u4feafjh] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(217, 119, 6, 0.35);
    border-top-color: #b45309;
    border-radius: 50%;
    animation: visitor-approval-spin-b-90u4feafjh 0.8s linear infinite;
}

@keyframes visitor-approval-spin-b-90u4feafjh {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .visitor-approval-spinner[b-90u4feafjh] {
        animation: none;
    }
}

/* Apartamento de una CITA: sin borde de botón ni hover, porque acá no hay nada
   que elegir — el residente ya lo definió al registrarla. */
.visitor-appointment-unit[b-90u4feafjh] {
    padding: 12px 14px;
    border: 1px solid var(--synbex-primary);
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-primary-soft);
}

/* Aviso de "el pase es de otro día". Mismo molde que el de No deseados, pero en
   ámbar: no es una prohibición, es una decisión que toma el guarda. */
.visitor-wrongday-modal[b-90u4feafjh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 32px 28px;
}

.visitor-wrongday-icon[b-90u4feafjh] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d97706;
    color: #fff;
}

.visitor-wrongday-icon svg[b-90u4feafjh] {
    width: 32px;
    height: 32px;
}

.visitor-wrongday-title[b-90u4feafjh] {
    margin: 0;
    font-size: 20px;
}

.visitor-wrongday-message[b-90u4feafjh] {
    margin: 0;
    font-size: 15px;
}

.visitor-wrongday-note[b-90u4feafjh] {
    margin: 0;
    font-size: 13px;
    color: var(--synbex-text-muted);
}

.visitor-wrongday-actions[b-90u4feafjh] {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 6px;
}

.visitor-wrongday-actions .btn-synbex[b-90u4feafjh] {
    flex: 1 1 0;
    justify-content: center;
}


/* --------------------------------------------------------------------------
   Tipo de vehículo (carro / moto / bici) y color de la bici
   -------------------------------------------------------------------------- */

/* Tres botones del mismo ancho: el guarda toca uno y sigue, sin desplegables. */
.visitor-tipo-veh[b-90u4feafjh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.visitor-tipo-veh-btn[b-90u4feafjh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    box-sizing: border-box;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-surface);
    color: var(--synbex-text-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

    .visitor-tipo-veh-btn svg[b-90u4feafjh] {
        width: 26px;
        height: 26px;
    }

    .visitor-tipo-veh-btn:hover[b-90u4feafjh] {
        border-color: var(--synbex-primary);
        color: var(--synbex-text);
    }

    /* El elegido se ve elegido de lejos: la portería se mira de paso, no se
       estudia. */
    .visitor-tipo-veh-btn.is-activo[b-90u4feafjh] {
        border-color: var(--synbex-primary);
        background: var(--synbex-primary-soft);
        color: var(--synbex-primary);
    }

.visitor-color-opcional[b-90u4feafjh] {
    font-weight: 400;
    color: var(--synbex-text-muted);
}

.visitor-color-elegido[b-90u4feafjh] {
    font-weight: 600;
    color: var(--synbex-primary);
}

.visitor-color-fila[b-90u4feafjh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Un círculo por color: se toca, no se escribe. El borde gris hace que el
   blanco se vea sobre el fondo claro de la tarjeta. */
.visitor-color-punto[b-90u4feafjh] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--synbex-border);
    border-radius: 50%;
    background: var(--punto-color);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

    .visitor-color-punto:hover[b-90u4feafjh] {
        transform: scale(1.08);
    }

    /* Anillo alrededor, no un cambio de color: el color del círculo ES el dato,
       así que no se puede tocar para marcar que está elegido. */
    .visitor-color-punto.is-elegido[b-90u4feafjh] {
        box-shadow: 0 0 0 3px var(--synbex-surface), 0 0 0 5px var(--synbex-primary);
    }

.visitor-color-otro[b-90u4feafjh] {
    height: 28px;
    padding: 0 12px;
    border: 1px dashed var(--synbex-border);
    border-radius: 999px;
    background: transparent;
    color: var(--synbex-text-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .visitor-color-otro.is-elegido[b-90u4feafjh] {
        border-style: solid;
        border-color: var(--synbex-primary);
        color: var(--synbex-primary);
    }

.visitor-color-otro-input[b-90u4feafjh] {
    margin-top: 8px;
}

/* ── Ventana de cobro de parqueo ─────────────────────────────────────────────
   Se abre sola al registrar la salida de un vehículo con tarifa. Está pensada
   para leerse de un vistazo y resolverse con un clic: el total domina, y el
   botón principal hace lo más común (cobrar en efectivo e imprimir). */

.parqueo-cobro-total[b-90u4feafjh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 12px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--synbex-primary-soft, #eef2ff);
}

.parqueo-cobro-total-label[b-90u4feafjh] {
    font-size: 0.8rem;
    color: var(--synbex-text-muted, #6b7280);
}

.parqueo-cobro-total-valor[b-90u4feafjh] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--synbex-primary, #2563eb);
}

.parqueo-cobro-datos[b-90u4feafjh] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    margin: 0 0 12px;
    font-size: 0.9rem;
}

.parqueo-cobro-datos dt[b-90u4feafjh] {
    color: var(--synbex-text-muted, #6b7280);
}

.parqueo-cobro-datos dd[b-90u4feafjh] {
    margin: 0;
    text-align: right;
}

/* El desglose: letra chica pero legible, porque es lo que el guarda le muestra
   al visitante cuando pregunta por qué paga eso. */
.parqueo-cobro-detalle[b-90u4feafjh] {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--synbex-bg);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--synbex-text-muted, #4b5563);
}

.parqueo-cobro-metodo[b-90u4feafjh],
.parqueo-cobro-exonerar[b-90u4feafjh] {
    margin-bottom: 14px;
}

.parqueo-cobro-principal[b-90u4feafjh] {
    width: 100%;
    justify-content: center;
}

/* Escáner de placa: botón para tomar la foto a mano (plateScanner.js lo
   maneja) y colores del recuadro mientras analiza / cuando ya leyó. */
.plate-scanner-caption[b-90u4feafjh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.plate-scanner-shutter[b-90u4feafjh] {
    pointer-events: auto;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    padding: 0;
}

.plate-scanner-shutter:active[b-90u4feafjh] {
    background: rgba(255, 255, 255, 0.7);
}

.plate-scanner-shutter.is-busy[b-90u4feafjh] {
    opacity: 0.4;
    pointer-events: none;
}

.plate-scanner-guide.is-analizando .id-scanner-corner[b-90u4feafjh] {
    border-color: #facc15;
}

.plate-scanner-guide.is-listo .id-scanner-corner[b-90u4feafjh] {
    border-color: #22c55e;
}
/* /Components/Pages/Dashboard/Visitors/RegistrosHub.razor.rz.scp.css */
/* Botones grandes para el guarda puro en celular (pedido explícito) — ícono
   arriba centrado, título debajo, descripción chica debajo de eso, todo
   apilado y centrado, mucho más espacio que el tile normal. Solo aplica con
   .is-guard-large (agregado desde el code-behind únicamente cuando
   _isGuardOnly) y solo en celular — en computadora o para cualquier otro rol
   se ve exactamente como el hub-tile normal de siempre (ver app.css).
   El aislamiento de CSS de Blazor agrega su propio atributo a cada elemento
   que ESTA página escribe, así que aunque .hub-tile/.hub-grid se vean
   "globales" acá adentro, en la práctica solo tocan esta pantalla — mismo
   truco que ya usa Paqueteria/Index.razor.css para su modo compacto. */
@media (max-width: 600px) {
    .hub-grid.is-guard-large[b-ddszea3htu] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* Reducido a ~60% del tamaño original (pedido explícito — quedaba
       demasiado alto). */
    .hub-tile.is-guard-large[b-ddszea3htu] {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        min-height: 140px;
        padding: 16px 14px;
        gap: 10px;
    }

    .hub-tile.is-guard-large .hub-tile-icon[b-ddszea3htu] {
        width: 46px;
        height: 46px;
        font-size: 25px;
    }

    .hub-tile.is-guard-large .hub-tile-icon svg[b-ddszea3htu] {
        width: 26px;
        height: 26px;
    }

    .hub-tile.is-guard-large .hub-tile-text[b-ddszea3htu] {
        align-items: center;
    }

    .hub-tile.is-guard-large .hub-tile-title[b-ddszea3htu] {
        font-size: 15px;
    }

    /* El tile normal no deja partir la descripción en más de una línea
       (white-space:nowrap en app.css) — acá sí hace falta, "Ingreso y salida
       de visitantes" no entra en una sola línea a este tamaño de letra. */
    .hub-tile.is-guard-large .hub-tile-desc[b-ddszea3htu] {
        font-size: 12px;
        white-space: normal;
    }
}
/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
.login-page[b-pgemcmbxx0] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
    box-sizing: border-box;
}

.login-card[b-pgemcmbxx0] {
    width: 100%;
    max-width: var(--login-ancho-400);
    background: var(--synbex-surface);
    /* Mismo panel que /login: sin borde y con 40px de esquina, para que pasar
       de una pantalla de sesión a otra no cambie la forma de la tarjeta. */
    border: none;
    border-radius: 40px;
    box-shadow: var(--synbex-shadow);
    padding: var(--login-pad-40) var(--login-pad-36);
    box-sizing: border-box;
}

.login-brand[b-pgemcmbxx0] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--login-sep-28);
}

.login-brand-mark[b-pgemcmbxx0] {
    width: var(--login-caja-56);
    height: var(--login-caja-56);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: var(--login-fz-24);
    flex-shrink: 0;
}

.login-brand-name[b-pgemcmbxx0] {
    font-weight: 700;
    font-size: var(--login-fz-26);
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-header[b-pgemcmbxx0] {
    margin-bottom: var(--login-sep-28);
}

.login-title[b-pgemcmbxx0] {
    margin: 0 0 6px;
    font-size: var(--login-fz-22);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-subtitle[b-pgemcmbxx0] {
    margin: 0;
    font-size: var(--login-fz-14);
    color: var(--synbex-text-muted);
}

.login-field[b-pgemcmbxx0] {
    margin-bottom: var(--login-sep-18);
}

.login-label[b-pgemcmbxx0] {
    display: block;
    margin-bottom: 6px;
    font-size: var(--login-fz-13);
    font-weight: 600;
    color: var(--synbex-text);
}

[b-pgemcmbxx0] .login-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--login-pad-10) var(--login-pad-12);
    /* 16px, no 14.5px — con menos de 16px, iOS Safari hace zoom automático
       de toda la página al enfocar el campo, ver Login.razor.css. */
    font-size: var(--login-fz-16);
    font-family: inherit;
    color: var(--synbex-text);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-pgemcmbxx0] .login-input:focus {
    outline: none;
    border-color: var(--synbex-primary);
    box-shadow: 0 0 0 3px var(--synbex-primary-soft);
}

[b-pgemcmbxx0] .login-input.invalid {
    border-color: var(--synbex-danger);
}

[b-pgemcmbxx0] .login-validation-message {
    display: block;
    margin-top: 6px;
    font-size: var(--login-fz-125);
    color: var(--synbex-danger);
}

.login-submit[b-pgemcmbxx0] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--login-pad-11) var(--login-pad-16);
    font-size: var(--login-fz-145);
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--synbex-primary);
    border: none;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    /* Mismo resplandor que los botones de "agregar" (.synbex-cta-btn en
       app.css): el color sale de la propia marca, así que sigue el tono que
       tenga la aplicación sin repetirlo acá. */
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--synbex-primary) 55%, transparent);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.login-submit:hover[b-pgemcmbxx0] {
    background: var(--synbex-primary-hover);
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--synbex-primary) 65%, transparent);
}

.login-submit:active[b-pgemcmbxx0] {
    transform: translateY(1px);
}

.login-toggle-mode[b-pgemcmbxx0] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: 18px;
    padding: 0;
    background: none;
    border: none;
    text-align: center;
    text-decoration: none;
    font-size: var(--login-fz-125);
    font-family: inherit;
    color: var(--synbex-text-muted);
    cursor: pointer;
}

.login-toggle-mode:hover[b-pgemcmbxx0] {
    color: var(--synbex-primary);
}

@media (max-width: 420px) {
    .login-card[b-pgemcmbxx0] {
        padding: 32px 24px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.landing-page[b-10i57egcoo] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
}

.landing-nav[b-10i57egcoo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.landing-brand[b-10i57egcoo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.landing-brand-mark[b-10i57egcoo] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.landing-brand-name[b-10i57egcoo] {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.landing-hero[b-10i57egcoo] {
    max-width: 720px;
    margin: 48px auto 24px;
    padding: 0 24px;
    text-align: center;
    box-sizing: border-box;
}

.landing-hero-title[b-10i57egcoo] {
    margin: 0 0 16px;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--synbex-text);
}

.landing-hero-subtitle[b-10i57egcoo] {
    margin: 0 0 28px;
    font-size: 17px;
    line-height: 1.5;
    color: var(--synbex-text-muted);
}

.landing-hero-cta[b-10i57egcoo] {
    padding: 12px 28px;
    font-size: 15px;
}

.landing-hero-list[b-10i57egcoo] {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 8px 28px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.landing-hero-list li[b-10i57egcoo] {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    color: var(--synbex-text-muted);
}

.landing-hero-list li[b-10i57egcoo]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--synbex-primary);
}

/* ---- Filas alternadas imagen + texto ---- */

.landing-row[b-10i57egcoo] {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 24px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.landing-row-reverse .landing-row-image[b-10i57egcoo] {
    order: 2;
}

.landing-row-reverse .landing-row-text[b-10i57egcoo] {
    order: 1;
}

/* Relleno hasta que haya capturas reales de la app — mismo tamaño/forma que va
   a tener la imagen final, para que el reemplazo no mueva nada del layout. */
.landing-row-image[b-10i57egcoo] {
    aspect-ratio: 4 / 3;
    border-radius: var(--synbex-radius-lg);
    background: linear-gradient(135deg, var(--synbex-primary-soft), var(--synbex-surface));
    border: 1px solid var(--synbex-border);
    box-shadow: var(--synbex-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-row-image img[b-10i57egcoo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.landing-row-image-icon[b-10i57egcoo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 22px;
    background: var(--synbex-surface);
    color: var(--synbex-primary);
    box-shadow: var(--synbex-shadow);
}

.landing-row-image-icon svg[b-10i57egcoo] {
    width: 40px;
    height: 40px;
}

.landing-row-eyebrow[b-10i57egcoo] {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--synbex-primary);
}

.landing-row-title[b-10i57egcoo] {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--synbex-text);
}

.landing-row-desc[b-10i57egcoo] {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--synbex-text-muted);
}

/* ---- Tarjetas chicas para las funciones restantes ---- */

.landing-extras[b-10i57egcoo] {
    max-width: 1100px;
    width: 100%;
    margin: 24px auto 60px;
    padding: 0 24px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 20px;
}

.landing-extra-card[b-10i57egcoo] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 22px;
}

.landing-extra-icon[b-10i57egcoo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    flex-shrink: 0;
}

.landing-extra-icon svg[b-10i57egcoo] {
    width: 22px;
    height: 22px;
}

.landing-extra-title[b-10i57egcoo] {
    margin: 0 0 4px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--synbex-text);
}

.landing-extra-desc[b-10i57egcoo] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--synbex-text-muted);
}

/* ---- Preguntas frecuentes ---- */

.landing-faq[b-10i57egcoo] {
    max-width: 720px;
    width: 100%;
    margin: 20px auto 60px;
    padding: 0 24px;
    box-sizing: border-box;
}

.landing-faq-title[b-10i57egcoo] {
    text-align: center;
    margin-bottom: 20px;
}

.landing-faq-item[b-10i57egcoo] {
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    padding: 16px 20px;
    margin-bottom: 12px;
}

.landing-faq-item summary[b-10i57egcoo] {
    cursor: pointer;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--synbex-text);
    list-style: none;
}

.landing-faq-item summary[b-10i57egcoo]::-webkit-details-marker {
    display: none;
}

.landing-faq-item summary[b-10i57egcoo]::before {
    content: "+";
    display: inline-block;
    width: 18px;
    color: var(--synbex-primary);
    font-weight: 700;
}

.landing-faq-item[open] summary[b-10i57egcoo]::before {
    content: "–";
}

.landing-faq-item p[b-10i57egcoo] {
    margin: 10px 0 0 18px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--synbex-text-muted);
}

/* ---- CTA fijo en móvil (ver media query) ---- */

.landing-mobile-cta[b-10i57egcoo] {
    display: none;
}

/* ---- Contacto ---- */

.landing-contact[b-10i57egcoo] {
    max-width: 560px;
    width: 100%;
    margin: 20px auto 60px;
    padding: 0 24px;
    box-sizing: border-box;
}

.landing-contact-intro[b-10i57egcoo] {
    text-align: center;
    margin-bottom: 28px;
}

.landing-contact-form[b-10i57egcoo] {
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 28px;
    box-sizing: border-box;
}

.landing-contact-field[b-10i57egcoo] {
    margin-bottom: 18px;
}

.landing-contact-label[b-10i57egcoo] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-text);
}

[b-10i57egcoo] .landing-contact-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--synbex-text);
    background: var(--synbex-bg);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-10i57egcoo] .landing-contact-input:focus {
    outline: none;
    border-color: var(--synbex-primary);
    box-shadow: 0 0 0 3px var(--synbex-primary-soft);
}

[b-10i57egcoo] .landing-contact-textarea {
    resize: vertical;
    min-height: 90px;
    font-family: inherit;
}

[b-10i57egcoo] .landing-contact-validation {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--synbex-danger);
}

.landing-contact-error[b-10i57egcoo] {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    font-size: 13.5px;
}

/* Señuelo anti-bot: fuera de la vista (no display:none) para que una persona
   real jamás lo note ni lo llene, pero siga presente en el DOM para atrapar
   bots que completan todos los campos automáticamente. */
.landing-contact-honeypot[b-10i57egcoo] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cf-turnstile[b-10i57egcoo] {
    margin-bottom: 18px;
}

.landing-contact-submit[b-10i57egcoo] {
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
    font-size: 14.5px;
}

.landing-contact-success[b-10i57egcoo] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(22, 163, 74, 0.12);
    color: var(--synbex-success);
    border-radius: var(--synbex-radius-lg);
    padding: 22px 24px;
    font-size: 14.5px;
}

.landing-contact-success span[b-10i57egcoo] {
    font-size: 22px;
    font-weight: 700;
}

.landing-contact-success p[b-10i57egcoo] {
    margin: 0;
}

/* ---- Pie ---- */

.landing-footer[b-10i57egcoo] {
    margin-top: auto;
    padding: 24px;
    text-align: center;
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

.landing-footer p[b-10i57egcoo] {
    margin: 4px 0;
}

.landing-footer a[b-10i57egcoo] {
    color: var(--synbex-primary);
    text-decoration: none;
}

.landing-footer a:hover[b-10i57egcoo] {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .landing-nav[b-10i57egcoo] {
        padding: 16px 20px;
    }

    .landing-hero[b-10i57egcoo] {
        margin-top: 32px;
    }

    .landing-hero-title[b-10i57egcoo] {
        font-size: 28px;
    }

    .landing-hero-subtitle[b-10i57egcoo] {
        font-size: 15px;
    }

    /* En celular, las filas dejan de ser dos columnas y pasan a apilarse — la
       imagen siempre arriba de su texto, sin importar si la fila era "reverse"
       en escritorio. */
    .landing-row[b-10i57egcoo] {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px 20px;
    }

    .landing-row-reverse .landing-row-image[b-10i57egcoo],
    .landing-row-reverse .landing-row-text[b-10i57egcoo] {
        order: initial;
    }

    .landing-row-title[b-10i57egcoo] {
        font-size: 22px;
    }

    .landing-hero-list[b-10i57egcoo] {
        grid-template-columns: 1fr;
        justify-content: start;
        justify-items: start;
    }

    /* Deja espacio abajo para que el CTA fijo no tape el pie de página. */
    .landing-page[b-10i57egcoo] {
        padding-bottom: 68px;
    }

    .landing-mobile-cta[b-10i57egcoo] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
        background-color: var(--synbex-primary);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
        color: #fff;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login-page[b-sablvngdox] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-ambient-glow), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-ambient-glow), transparent 45%),
        var(--synbex-bg);
    box-sizing: border-box;
}

.login-card[b-sablvngdox] {
    width: 100%;
    max-width: var(--login-ancho-400);
    background: var(--synbex-surface);
    /* Sin borde y con 40px de esquina: el panel se lee como una sola pieza
       redondeada sobre el gris del fondo, no como una tarjeta con marco. */
    border: none;
    border-radius: 40px;
    box-shadow: var(--synbex-shadow);
    padding: var(--login-pad-40) var(--login-pad-36);
    box-sizing: border-box;
}

.login-brand[b-sablvngdox] {
    display: flex;
    align-items: center;
    /* Centrado también sin logo del conjunto: con logo ya se centraba solo
       (margin:0 auto en #login-brand-mark.has-logo), pero la marca genérica
       "S Synbex" quedaba pegada a la izquierda y desalineada con todo lo
       demás, que está centrado. */
    justify-content: center;
    gap: 14px;
    margin-bottom: var(--login-sep-28);
}

.login-brand-mark[b-sablvngdox] {
    width: var(--login-caja-56);
    height: var(--login-caja-56);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: var(--login-fz-24);
    flex-shrink: 0;
}

.login-brand-name[b-sablvngdox] {
    font-weight: 700;
    font-size: var(--login-fz-26);
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

/* .login-brand-mark.has-logo vive en app.css (global), NO acá — tenant-logo.js
   le agrega esa clase con JavaScript puro (la sesión de login todavía no
   existe, no hay forma de que Blazor la renderice), y el aislamiento de CSS
   con ámbito de Blazor solo aplica el atributo "b-xxxx" a markup que el propio
   Razor compila — una clase agregada por JS en runtime nunca lo recibe, así
   que esa regla tiene que vivir en el CSS global para calzar con el elemento. */

.login-header[b-sablvngdox] {
    margin-bottom: var(--login-sep-28);
    text-align: center;
}

.login-title[b-sablvngdox] {
    /* Sin margen abajo: ya no hay subtítulo debajo del que separarse. En gris
       tenue y no en el casi-negro de siempre: el título no compite con los
       campos ni con el botón, que es lo que la persona viene a usar. */
    margin: 0;
    font-size: var(--login-fz-30);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--synbex-text-muted);
}

.login-alert[b-sablvngdox] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--login-sep-20);
    padding: var(--login-pad-12) var(--login-pad-14);
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    font-size: var(--login-fz-135);
    line-height: 1.4;
}

.login-alert svg[b-sablvngdox] {
    flex-shrink: 0;
    margin-top: 1px;
}

.login-alert.is-success[b-sablvngdox] {
    background: rgba(22, 163, 74, 0.12);
    color: var(--synbex-success);
}

.login-field[b-sablvngdox] {
    margin-bottom: var(--login-sep-18);
}

/* Los campos ya no llevan etiqueta arriba: el propio texto de adentro dice qué
   va en cada uno (pedido explícito, y son solo dos campos conocidos). */

/* InputText/InputCheckbox/ValidationMessage renderizan su <input>/<div> real dentro de un
   componente del framework: ::deep es el mecanismo de Blazor para que el CSS aislado de esta
   página alcance ese elemento igual, sin tener que quitarle el aislamiento a todo el archivo. */
[b-sablvngdox] .login-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--login-pad-13) var(--login-pad-14);
    /* 16px, no 14.5px — pedido explícito: con menos de 16px, iOS Safari hace
       zoom automático de toda la página al enfocar el campo (correo o
       clave), porque interpreta que el texto es "muy chico para leer". Mismo
       motivo que .synbex-date-input en app.css. */
    font-size: var(--login-fz-16);
    font-family: inherit;
    color: var(--synbex-text);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-sablvngdox] .login-input:focus {
    outline: none;
    border-color: var(--synbex-primary);
    box-shadow: 0 0 0 3px var(--synbex-primary-soft);
}

[b-sablvngdox] .login-input.invalid {
    border-color: var(--synbex-danger);
}

.login-input-wrap[b-sablvngdox] {
    position: relative;
}

.login-input-wrap[b-sablvngdox]  .login-input {
    padding-right: var(--login-pad-42);
}

.login-pwd-toggle[b-sablvngdox] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: var(--login-caja-32);
    height: var(--login-caja-32);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--synbex-radius-md);
    font-size: var(--login-fz-15);
    line-height: 1;
    cursor: pointer;
    color: var(--synbex-text-muted);
    transition: background 0.15s ease;
}

.login-pwd-toggle:hover[b-sablvngdox] {
    background: var(--synbex-primary-soft);
}

[b-sablvngdox] .login-validation-message {
    display: block;
    margin-top: 6px;
    font-size: var(--login-fz-125);
    color: var(--synbex-danger);
}

.login-remember-row[b-sablvngdox] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--login-sep-24);
}

.login-remember-label[b-sablvngdox] {
    font-size: var(--login-fz-135);
    font-weight: 500;
    color: var(--synbex-text);
    cursor: pointer;
}

.login-forgot-link[b-sablvngdox] {
    display: block;
    margin-top: 16px;
    text-align: center;
    font-size: var(--login-fz-125);
    font-weight: 600;
    color: var(--synbex-primary);
    text-decoration: none;
}

.login-forgot-link:hover[b-sablvngdox] {
    text-decoration: underline;
}

.login-submit[b-sablvngdox] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--login-pad-13) var(--login-pad-16);
    font-size: var(--login-fz-145);
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--synbex-primary);
    border: none;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    /* Mismo resplandor que los botones de "agregar" (.synbex-cta-btn en
       app.css): el color sale de la propia marca, así que sigue el tono que
       tenga la aplicación sin repetirlo acá. */
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--synbex-primary) 55%, transparent);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.login-submit:hover[b-sablvngdox] {
    background: var(--synbex-primary-hover);
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--synbex-primary) 65%, transparent);
}

.login-submit:active[b-sablvngdox] {
    transform: translateY(1px);
}

.login-footer[b-sablvngdox] {
    margin-top: 24px;
    text-align: center;
    font-size: var(--login-fz-125);
    color: var(--synbex-text-muted);
}

/* Fuera de .login-card a propósito (pedido explícito) — pie de página de
   toda la pantalla, no del panel. .login-page ya es flex-column centrado, así
   que basta con el margen de arriba para separarlo de la tarjeta. */
.login-copyright[b-sablvngdox] {
    margin-top: 20px;
    text-align: center;
    font-size: var(--login-fz-11);
    color: var(--synbex-text-muted);
    line-height: 1.6;
}

.login-copyright a[b-sablvngdox] {
    color: var(--synbex-primary);
    text-decoration: none;
}

.login-copyright a:hover[b-sablvngdox] {
    text-decoration: underline;
}

@media (max-width: 420px) {
    .login-card[b-sablvngdox] {
        padding: 32px 24px;
    }
}

/* "Acceso exclusivo para usuarios registrados en Synbex." solo en computadora:
   en un teléfono la pantalla es corta y esa línea empujaba el copyright fuera de
   la vista, sin decir nada que la pantalla no diga ya — pedido explícito. */
@media (max-width: 640px) {
    .login-footer-solo-escritorio[b-sablvngdox] {
        display: none;
    }
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
.login-page[b-6oevjwy1ob] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
    box-sizing: border-box;
}

.login-card[b-6oevjwy1ob] {
    width: 100%;
    max-width: var(--login-ancho-400);
    background: var(--synbex-surface);
    /* Mismo panel que /login: sin borde y con 40px de esquina, para que pasar
       de una pantalla de sesión a otra no cambie la forma de la tarjeta. */
    border: none;
    border-radius: 40px;
    box-shadow: var(--synbex-shadow);
    padding: var(--login-pad-40) var(--login-pad-36);
    box-sizing: border-box;
}

.login-brand[b-6oevjwy1ob] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--login-sep-28);
}

.login-brand-mark[b-6oevjwy1ob] {
    width: var(--login-caja-56);
    height: var(--login-caja-56);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: var(--login-fz-24);
    flex-shrink: 0;
}

.login-brand-name[b-6oevjwy1ob] {
    font-weight: 700;
    font-size: var(--login-fz-26);
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-header[b-6oevjwy1ob] {
    margin-bottom: var(--login-sep-28);
}

.login-title[b-6oevjwy1ob] {
    margin: 0 0 6px;
    font-size: var(--login-fz-22);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-subtitle[b-6oevjwy1ob] {
    margin: 0;
    font-size: var(--login-fz-14);
    color: var(--synbex-text-muted);
}

.login-alert[b-6oevjwy1ob] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--login-sep-20);
    padding: var(--login-pad-12) var(--login-pad-14);
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    font-size: var(--login-fz-135);
    line-height: 1.4;
}

.login-alert svg[b-6oevjwy1ob] {
    flex-shrink: 0;
    margin-top: 1px;
}

.login-alert.is-info[b-6oevjwy1ob] {
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

.pwd-requirements[b-6oevjwy1ob] {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.pwd-requirements li[b-6oevjwy1ob] {
    font-size: var(--login-fz-12);
    font-weight: 600;
    color: var(--synbex-text-muted);
    padding-left: 16px;
    position: relative;
}

.pwd-requirements li[b-6oevjwy1ob]::before {
    content: "•";
    position: absolute;
    left: 2px;
    color: var(--synbex-primary);
}

.pwd-requirements li.is-missing[b-6oevjwy1ob] {
    color: var(--synbex-danger);
}

.pwd-requirements li.is-missing[b-6oevjwy1ob]::before {
    color: var(--synbex-danger);
}

.pwd-requirements li.is-met[b-6oevjwy1ob] {
    color: var(--synbex-success);
}

.pwd-requirements li.is-met[b-6oevjwy1ob]::before {
    content: "✓";
    color: var(--synbex-success);
}

.login-field[b-6oevjwy1ob] {
    margin-bottom: var(--login-sep-18);
}

.login-label[b-6oevjwy1ob] {
    display: block;
    margin-bottom: 6px;
    font-size: var(--login-fz-13);
    font-weight: 600;
    color: var(--synbex-text);
}

[b-6oevjwy1ob] .login-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--login-pad-10) var(--login-pad-12);
    /* 16px, no 14.5px — con menos de 16px, iOS Safari hace zoom automático
       de toda la página al enfocar el campo, ver Login.razor.css. */
    font-size: var(--login-fz-16);
    font-family: inherit;
    color: var(--synbex-text);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-6oevjwy1ob] .login-input:focus {
    outline: none;
    border-color: var(--synbex-primary);
    box-shadow: 0 0 0 3px var(--synbex-primary-soft);
}

[b-6oevjwy1ob] .login-input.invalid {
    border-color: var(--synbex-danger);
}

[b-6oevjwy1ob] .login-input[readonly] {
    color: var(--synbex-text-muted);
    background: var(--synbex-bg);
    cursor: default;
}

[b-6oevjwy1ob] .login-code-input {
    text-align: center;
    letter-spacing: 0.2em;
}

.login-input-wrap[b-6oevjwy1ob] {
    position: relative;
}

.login-input-wrap[b-6oevjwy1ob]  .login-input {
    padding-right: var(--login-pad-42);
}

.login-pwd-toggle[b-6oevjwy1ob] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: var(--login-caja-32);
    height: var(--login-caja-32);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--synbex-radius-md);
    font-size: var(--login-fz-15);
    line-height: 1;
    cursor: pointer;
    color: var(--synbex-text-muted);
    transition: background 0.15s ease;
}

.login-pwd-toggle:hover[b-6oevjwy1ob] {
    background: var(--synbex-primary-soft);
}

[b-6oevjwy1ob] .login-validation-message {
    display: block;
    margin-top: 6px;
    font-size: var(--login-fz-125);
    color: var(--synbex-danger);
}

.login-submit[b-6oevjwy1ob] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--login-pad-11) var(--login-pad-16);
    font-size: var(--login-fz-145);
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--synbex-primary);
    border: none;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    /* Mismo resplandor que los botones de "agregar" (.synbex-cta-btn en
       app.css): el color sale de la propia marca, así que sigue el tono que
       tenga la aplicación sin repetirlo acá. */
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--synbex-primary) 55%, transparent);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.login-submit:hover[b-6oevjwy1ob] {
    background: var(--synbex-primary-hover);
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--synbex-primary) 65%, transparent);
}

.login-submit:active[b-6oevjwy1ob] {
    transform: translateY(1px);
}

.login-toggle-mode[b-6oevjwy1ob] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: 18px;
    padding: 0;
    background: none;
    border: none;
    text-align: center;
    text-decoration: none;
    font-size: var(--login-fz-125);
    font-family: inherit;
    color: var(--synbex-text-muted);
    cursor: pointer;
}

.login-toggle-mode:hover[b-6oevjwy1ob] {
    color: var(--synbex-primary);
}

@media (max-width: 420px) {
    .login-card[b-6oevjwy1ob] {
        padding: 32px 24px;
    }
}
/* /Components/Pages/SelectUnit.razor.rz.scp.css */
.login-page[b-xkgmn9stfg] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
    box-sizing: border-box;
}

.login-card[b-xkgmn9stfg] {
    width: 100%;
    max-width: var(--login-ancho-400);
    background: var(--synbex-surface);
    /* Mismo panel que /login: sin borde y con 40px de esquina, para que pasar
       de una pantalla de sesión a otra no cambie la forma de la tarjeta. */
    border: none;
    border-radius: 40px;
    box-shadow: var(--synbex-shadow);
    padding: var(--login-pad-40) var(--login-pad-36);
    box-sizing: border-box;
}

.login-brand[b-xkgmn9stfg] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--login-sep-28);
}

.login-brand-mark[b-xkgmn9stfg] {
    width: var(--login-caja-56);
    height: var(--login-caja-56);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: var(--login-fz-24);
    flex-shrink: 0;
}

.login-brand-name[b-xkgmn9stfg] {
    font-weight: 700;
    font-size: var(--login-fz-26);
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-header[b-xkgmn9stfg] {
    margin-bottom: var(--login-sep-28);
}

.login-title[b-xkgmn9stfg] {
    margin: 0 0 6px;
    font-size: var(--login-fz-22);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-subtitle[b-xkgmn9stfg] {
    margin: 0;
    font-size: var(--login-fz-14);
    color: var(--synbex-text-muted);
}

.login-alert[b-xkgmn9stfg] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--login-sep-20);
    padding: var(--login-pad-12) var(--login-pad-14);
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    font-size: var(--login-fz-135);
    line-height: 1.4;
}

.login-alert svg[b-xkgmn9stfg] {
    flex-shrink: 0;
    margin-top: 1px;
}

.login-submit[b-xkgmn9stfg] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--login-pad-11) var(--login-pad-16);
    font-size: var(--login-fz-145);
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--synbex-primary);
    border: none;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    /* Mismo resplandor que los botones de "agregar" (.synbex-cta-btn en
       app.css): el color sale de la propia marca, así que sigue el tono que
       tenga la aplicación sin repetirlo acá. */
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--synbex-primary) 55%, transparent);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.login-submit:hover[b-xkgmn9stfg] {
    background: var(--synbex-primary-hover);
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--synbex-primary) 65%, transparent);
}

.login-submit:active[b-xkgmn9stfg] {
    transform: translateY(1px);
}

[b-xkgmn9stfg] .unit-option-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

[b-xkgmn9stfg] .unit-option-card:has(input:checked) {
    border-color: var(--synbex-primary);
    background: var(--synbex-primary-soft);
}

[b-xkgmn9stfg] .unit-option-card input[type="radio"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--synbex-primary);
}

.unit-option-info[b-xkgmn9stfg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.unit-option-info strong[b-xkgmn9stfg] {
    font-size: var(--login-fz-145);
    color: var(--synbex-text);
}

.unit-option-place[b-xkgmn9stfg] {
    font-size: var(--login-fz-125);
    color: var(--synbex-text-muted);
}

@media (max-width: 420px) {
    .login-card[b-xkgmn9stfg] {
        padding: 32px 24px;
    }
}
/* /Components/Pages/SetupTwoFactor.razor.rz.scp.css */
.pwd-page[b-qqwlx0bsj1] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
    box-sizing: border-box;
}

.pwd-card[b-qqwlx0bsj1] {
    width: 100%;
    max-width: calc(var(--login-ancho-400) + 20px);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: var(--login-pad-40) var(--login-pad-36);
    box-sizing: border-box;
}

.pwd-icon[b-qqwlx0bsj1] {
    width: var(--login-caja-56);
    height: var(--login-caja-56);
    margin: 0 auto 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--login-fz-26);
    box-shadow: 0 8px 20px -6px var(--synbex-primary);
}

.pwd-header[b-qqwlx0bsj1] {
    text-align: center;
    margin-bottom: var(--login-sep-26);
}

.pwd-title[b-qqwlx0bsj1] {
    margin: 0 0 6px;
    font-size: var(--login-fz-21);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.pwd-subtitle[b-qqwlx0bsj1] {
    margin: 0;
    font-size: var(--login-fz-135);
    color: var(--synbex-text-muted);
    line-height: 1.5;
}

.pwd-alert[b-qqwlx0bsj1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--login-sep-20);
    padding: var(--login-pad-12) var(--login-pad-14);
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    font-size: var(--login-fz-135);
    line-height: 1.4;
}

.pwd-alert svg[b-qqwlx0bsj1] {
    flex-shrink: 0;
    margin-top: 1px;
}

.pwd-field[b-qqwlx0bsj1] {
    margin-bottom: var(--login-sep-18);
}

.pwd-label[b-qqwlx0bsj1] {
    display: block;
    margin-bottom: 6px;
    font-size: var(--login-fz-13);
    font-weight: 600;
    color: var(--synbex-text);
}

.pwd-input-wrap[b-qqwlx0bsj1] {
    position: relative;
}

[b-qqwlx0bsj1] .pwd-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--login-pad-10) var(--login-pad-42) var(--login-pad-10) var(--login-pad-12);
    /* 16px, no 14.5px — con menos de 16px, iOS Safari hace zoom automático
       de toda la página al enfocar el campo, ver Login.razor.css. */
    font-size: var(--login-fz-16);
    font-family: inherit;
    color: var(--synbex-text);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-qqwlx0bsj1] .pwd-input:focus {
    outline: none;
    border-color: var(--synbex-primary);
    box-shadow: 0 0 0 3px var(--synbex-primary-soft);
}

[b-qqwlx0bsj1] .pwd-input.invalid {
    border-color: var(--synbex-danger);
}

.pwd-toggle[b-qqwlx0bsj1] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: var(--login-caja-32);
    height: var(--login-caja-32);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--synbex-radius-md);
    font-size: var(--login-fz-15);
    line-height: 1;
    cursor: pointer;
    color: var(--synbex-text-muted);
    transition: background 0.15s ease;
}

.pwd-toggle:hover[b-qqwlx0bsj1] {
    background: var(--synbex-primary-soft);
}

[b-qqwlx0bsj1] .pwd-validation-message {
    display: block;
    margin-top: 6px;
    font-size: var(--login-fz-125);
    color: var(--synbex-danger);
}

.pwd-submit[b-qqwlx0bsj1] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: var(--login-pad-11) var(--login-pad-16);
    font-size: var(--login-fz-145);
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--synbex-primary);
    border: none;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    /* Mismo resplandor que los botones de "agregar" (.synbex-cta-btn en app.css):
       el color sale de la marca al 55 %, no al 100 %, o la sombra se ve como un
       borrón sólido debajo del botón en vez de un halo. */
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--synbex-primary) 55%, transparent);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.pwd-submit:hover[b-qqwlx0bsj1] {
    background: var(--synbex-primary-hover);
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--synbex-primary) 65%, transparent);
}

.pwd-submit:active[b-qqwlx0bsj1] {
    transform: translateY(1px);
}

.pwd-submit:disabled[b-qqwlx0bsj1] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.twofa-finish-link[b-qqwlx0bsj1] {
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

.twofa-qr-wrap[b-qqwlx0bsj1] {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.twofa-qr-img[b-qqwlx0bsj1] {
    width: 200px;
    height: 200px;
    border-radius: var(--synbex-radius-md);
    border: 1px solid var(--synbex-border);
    background: #fff;
    padding: 10px;
}

.twofa-instructions[b-qqwlx0bsj1] {
    margin-bottom: 10px;
    text-align: center;
}

.twofa-manual-key[b-qqwlx0bsj1] {
    margin: 0 0 22px;
    padding: var(--login-pad-10) var(--login-pad-12);
    background: var(--synbex-primary-soft);
    border-radius: var(--synbex-radius-md);
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--login-fz-14);
    letter-spacing: 0.05em;
    color: var(--synbex-text);
    word-break: break-all;
}

[b-qqwlx0bsj1] .twofa-code-input {
    text-align: center;
    font-size: var(--login-fz-20);
    letter-spacing: 0.3em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.twofa-recovery-codes[b-qqwlx0bsj1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 22px;
    padding: 14px;
    background: var(--synbex-primary-soft);
    border-radius: var(--synbex-radius-md);
}

.twofa-recovery-code[b-qqwlx0bsj1] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--login-fz-135);
    text-align: center;
    color: var(--synbex-text);
    padding: 4px 0;
}

@media (max-width: 420px) {
    .pwd-card[b-qqwlx0bsj1] {
        padding: 32px 22px;
    }

    .twofa-qr-img[b-qqwlx0bsj1] {
        width: 170px;
        height: 170px;
    }
}
/* /Components/Pages/VerifyTwoFactor.razor.rz.scp.css */
.login-page[b-7km5l7unk7] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
    box-sizing: border-box;
}

.login-card[b-7km5l7unk7] {
    width: 100%;
    max-width: var(--login-ancho-400);
    background: var(--synbex-surface);
    /* Mismo panel que /login: sin borde y con 40px de esquina, para que pasar
       de una pantalla de sesión a otra no cambie la forma de la tarjeta. */
    border: none;
    border-radius: 40px;
    box-shadow: var(--synbex-shadow);
    padding: var(--login-pad-40) var(--login-pad-36);
    box-sizing: border-box;
}

.login-brand[b-7km5l7unk7] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--login-sep-28);
}

.login-brand-mark[b-7km5l7unk7] {
    width: var(--login-caja-56);
    height: var(--login-caja-56);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--synbex-primary), var(--synbex-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: var(--login-fz-24);
    flex-shrink: 0;
}

.login-brand-name[b-7km5l7unk7] {
    font-weight: 700;
    font-size: var(--login-fz-26);
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-header[b-7km5l7unk7] {
    margin-bottom: var(--login-sep-28);
}

.login-title[b-7km5l7unk7] {
    margin: 0 0 6px;
    font-size: var(--login-fz-22);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.login-subtitle[b-7km5l7unk7] {
    margin: 0;
    font-size: var(--login-fz-14);
    color: var(--synbex-text-muted);
}

.login-alert[b-7km5l7unk7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--login-sep-20);
    padding: var(--login-pad-12) var(--login-pad-14);
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    font-size: var(--login-fz-135);
    line-height: 1.4;
}

.login-alert svg[b-7km5l7unk7] {
    flex-shrink: 0;
    margin-top: 1px;
}

.login-field[b-7km5l7unk7] {
    margin-bottom: var(--login-sep-18);
}

.login-label[b-7km5l7unk7] {
    display: block;
    margin-bottom: 6px;
    font-size: var(--login-fz-13);
    font-weight: 600;
    color: var(--synbex-text);
}

[b-7km5l7unk7] .login-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--login-pad-10) var(--login-pad-12);
    /* 16px, no 14.5px — con menos de 16px, iOS Safari hace zoom automático
       de toda la página al enfocar el campo, ver Login.razor.css. */
    font-size: var(--login-fz-16);
    font-family: inherit;
    color: var(--synbex-text);
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    text-align: center;
    letter-spacing: 0.15em;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-7km5l7unk7] .login-input:focus {
    outline: none;
    border-color: var(--synbex-primary);
    box-shadow: 0 0 0 3px var(--synbex-primary-soft);
}

[b-7km5l7unk7] .login-input.invalid {
    border-color: var(--synbex-danger);
}

[b-7km5l7unk7] .login-validation-message {
    display: block;
    margin-top: 6px;
    font-size: var(--login-fz-125);
    color: var(--synbex-danger);
}

.login-submit[b-7km5l7unk7] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--login-pad-11) var(--login-pad-16);
    font-size: var(--login-fz-145);
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--synbex-primary);
    border: none;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    /* Mismo resplandor que los botones de "agregar" (.synbex-cta-btn en
       app.css): el color sale de la propia marca, así que sigue el tono que
       tenga la aplicación sin repetirlo acá. */
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--synbex-primary) 55%, transparent);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.login-submit:hover[b-7km5l7unk7] {
    background: var(--synbex-primary-hover);
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--synbex-primary) 65%, transparent);
}

.login-submit:active[b-7km5l7unk7] {
    transform: translateY(1px);
}

.login-toggle-mode[b-7km5l7unk7] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: 18px;
    padding: 0;
    background: none;
    border: none;
    text-align: center;
    text-decoration: none;
    font-size: var(--login-fz-125);
    font-family: inherit;
    color: var(--synbex-text-muted);
    cursor: pointer;
}

.login-toggle-mode:hover[b-7km5l7unk7] {
    color: var(--synbex-primary);
}

@media (max-width: 420px) {
    .login-card[b-7km5l7unk7] {
        padding: 32px 24px;
    }
}
/* /Components/Shared/PaginaLegal.razor.rz.scp.css */
.legal-page[b-gnwqd9mmwo] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 15% 10%, var(--synbex-primary-soft), transparent 45%),
        radial-gradient(circle at 85% 90%, var(--synbex-primary-soft), transparent 45%),
        var(--synbex-bg);
}

.legal-nav[b-gnwqd9mmwo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.legal-brand[b-gnwqd9mmwo] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.legal-brand-mark[b-gnwqd9mmwo] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.legal-brand-name[b-gnwqd9mmwo] {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.legal-main[b-gnwqd9mmwo] {
    flex: 1;
    padding: 8px 16px 40px;
}

.legal-doc[b-gnwqd9mmwo] {
    max-width: 820px;
    margin: 0 auto;
    padding: 40px 48px;
    background: var(--synbex-surface, #fff);
    border: 1px solid var(--synbex-border);
    border-radius: 16px;
    box-sizing: border-box;
    color: var(--synbex-text);
    font-size: 15px;
    line-height: 1.65;
}

.legal-doc h1[b-gnwqd9mmwo] {
    margin: 0 0 4px;
    font-size: 30px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.legal-vigencia[b-gnwqd9mmwo] {
    margin: 0 0 24px;
    color: var(--synbex-text-muted);
    font-size: 13.5px;
}

.legal-indice[b-gnwqd9mmwo] {
    margin: 0 0 32px;
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--synbex-primary-soft);
}

.legal-indice-titulo[b-gnwqd9mmwo] {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--synbex-primary);
}

.legal-indice[b-gnwqd9mmwo]  ol {
    margin: 0;
    padding-left: 22px;
    columns: 2;
    column-gap: 32px;
    font-size: 14px;
}

.legal-indice[b-gnwqd9mmwo]  li {
    break-inside: avoid;
    margin: 2px 0;
}

.legal-doc[b-gnwqd9mmwo]  a {
    color: var(--synbex-primary);
}

.legal-doc[b-gnwqd9mmwo]  h2 {
    margin: 36px 0 10px;
    font-size: 19px;
    letter-spacing: -0.01em;
    line-height: 1.3;
    scroll-margin-top: 16px;
}

.legal-doc[b-gnwqd9mmwo]  h3 {
    margin: 20px 0 6px;
    font-size: 15.5px;
}

.legal-doc[b-gnwqd9mmwo]  p {
    margin: 0 0 12px;
}

.legal-doc[b-gnwqd9mmwo]  ul,
.legal-doc[b-gnwqd9mmwo]  ol {
    margin: 0 0 12px;
    padding-left: 22px;
}

.legal-doc[b-gnwqd9mmwo]  li {
    margin: 4px 0;
}

.legal-doc[b-gnwqd9mmwo]  .legal-nota {
    padding: 12px 16px;
    border-left: 3px solid var(--synbex-primary);
    border-radius: 0 10px 10px 0;
    background: var(--synbex-primary-soft);
}

.legal-doc[b-gnwqd9mmwo]  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: 14px;
}

.legal-doc[b-gnwqd9mmwo]  th,
.legal-doc[b-gnwqd9mmwo]  td {
    padding: 8px 10px;
    border: 1px solid var(--synbex-border);
    text-align: left;
    vertical-align: top;
}

.legal-doc[b-gnwqd9mmwo]  th {
    background: var(--synbex-primary-soft);
}

.legal-footer[b-gnwqd9mmwo] {
    padding: 24px 16px;
    text-align: center;
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

.legal-footer p[b-gnwqd9mmwo] {
    margin: 4px 0;
}

.legal-footer a[b-gnwqd9mmwo] {
    color: var(--synbex-primary);
    text-decoration: none;
}

.legal-footer a:hover[b-gnwqd9mmwo] {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .legal-nav[b-gnwqd9mmwo] {
        padding: 16px;
    }

    .legal-main[b-gnwqd9mmwo] {
        padding: 0 12px 24px;
    }

    .legal-doc[b-gnwqd9mmwo] {
        padding: 24px 18px;
        font-size: 14.5px;
    }

    .legal-doc h1[b-gnwqd9mmwo] {
        font-size: 24px;
    }

    .legal-indice[b-gnwqd9mmwo]  ol {
        columns: 1;
    }
}
/* /Components/Shared/SinDatos.razor.rz.scp.css */
/* Mensaje de "todavía no hay nada". Ver SinDatos.razor. */
.sin-datos[b-q3aj2jtbr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    padding: 30px 24px;
    text-align: left;
}

.sin-datos-figura[b-q3aj2jtbr1] {
    flex-shrink: 0;
    line-height: 0;
}

.sin-datos-dibujo[b-q3aj2jtbr1] {
    width: 168px;
    height: 132px;
    /* El gris del dibujo; los destellos y el sello van en el color principal. */
    color: var(--synbex-text-muted);
}

.sin-datos-circulo[b-q3aj2jtbr1] {
    fill: var(--synbex-primary-soft);
}

.sin-datos-destellos[b-q3aj2jtbr1] {
    color: var(--synbex-primary);
    opacity: 0.75;
}

.sin-datos-sello circle[b-q3aj2jtbr1] {
    fill: var(--synbex-primary);
}

.sin-datos-sello path[b-q3aj2jtbr1] {
    stroke: #fff;
}

.sin-datos-sello circle + path + circle[b-q3aj2jtbr1] {
    fill: #fff;
}

/* Un ícono de HubIcons dentro del círculo: hereda el gris del dibujo y se estira
   al tamaño de la ventana que lo contiene. */
.sin-datos-icono-libre[b-q3aj2jtbr1] {
    width: 44px;
    height: 44px;
    color: var(--synbex-text-muted);
}

.sin-datos-icono-libre[b-q3aj2jtbr1]  svg {
    width: 44px;
    height: 44px;
    stroke-width: 1.4;
}

/* La rayita vertical que separa el dibujo del texto (maqueta del usuario). */
.sin-datos-texto[b-q3aj2jtbr1] {
    padding-left: 26px;
    border-left: 1px solid var(--synbex-border);
    max-width: 460px;
}

.sin-datos-titulo[b-q3aj2jtbr1] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--synbex-text);
    line-height: 1.35;
}

.sin-datos-mensaje[b-q3aj2jtbr1] {
    margin: 6px 0 0;
    font-size: 14.5px;
    color: var(--synbex-text-muted);
    line-height: 1.5;
}

.sin-datos-acciones[b-q3aj2jtbr1] {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Versión chica: tarjetas del inicio, paneles laterales, columnas angostas. */
.sin-datos.es-compacto[b-q3aj2jtbr1] {
    gap: 16px;
    padding: 18px 12px;
}

.sin-datos.es-compacto .sin-datos-dibujo[b-q3aj2jtbr1] {
    width: 104px;
    height: 82px;
}

.sin-datos.es-compacto .sin-datos-texto[b-q3aj2jtbr1] {
    padding-left: 16px;
    max-width: 320px;
}

.sin-datos.es-compacto .sin-datos-titulo[b-q3aj2jtbr1] {
    font-size: 15px;
}

.sin-datos.es-compacto .sin-datos-mensaje[b-q3aj2jtbr1] {
    font-size: 13.5px;
}

/* En celular el dibujo y el texto se apilan y todo va centrado: de lado a lado
   no cabían sin que el texto quedara en una columna de dos palabras. */
@media (max-width: 640px) {
    .sin-datos[b-q3aj2jtbr1] {
        flex-direction: column;
        gap: 14px;
        padding: 24px 16px;
        text-align: center;
    }

    .sin-datos-dibujo[b-q3aj2jtbr1] {
        width: 132px;
        height: 104px;
    }

    .sin-datos-texto[b-q3aj2jtbr1] {
        padding-left: 0;
        border-left: none;
    }

    .sin-datos-acciones[b-q3aj2jtbr1] {
        justify-content: center;
    }

    .sin-datos.es-compacto[b-q3aj2jtbr1] {
        padding: 16px 12px;
    }
}