:root {
    --synbex-primary: #4f46e5;
    --synbex-primary-hover: #4338ca;
    --synbex-primary-soft: #eef2ff;
    --synbex-danger: #dc2626;
    --synbex-danger-soft: #fef2f2;
    --synbex-success: #16a34a;
    --synbex-success-hover: #15803d;
    --synbex-text: #111827;
    --synbex-text-muted: #6b7280;
    --synbex-border: #e5e7eb;
    --synbex-surface: #ffffff;
    --synbex-bg: #f6f7fb;
    --synbex-radius-lg: 16px;
    --synbex-radius-md: 10px;
    --synbex-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 32px -8px rgba(17, 24, 39, 0.12);
    --synbex-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --synbex-phone-link: #0d9488;
}

@media (prefers-color-scheme: dark) {
    :root {
        --synbex-primary: #818cf8;
        --synbex-primary-hover: #a5b4fc;
        --synbex-primary-soft: rgba(129, 140, 248, 0.14);
        --synbex-danger: #f87171;
        --synbex-danger-soft: rgba(248, 113, 113, 0.12);
        --synbex-success: #4ade80;
        --synbex-success-hover: #86efac;
        --synbex-text: #f3f4f6;
        --synbex-text-muted: #9ca3af;
        --synbex-border: #2b2f3a;
        --synbex-surface: #1a1d27;
        --synbex-bg: #111319;
        --synbex-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.5);
        --synbex-phone-link: #2dd4bf;
    }
}

/* Preferencia de tema explícita (página Configuración) — prima sobre prefers-color-scheme */
:root[data-theme="dark"] {
    --synbex-primary: #818cf8;
    --synbex-primary-hover: #a5b4fc;
    --synbex-primary-soft: rgba(129, 140, 248, 0.14);
    --synbex-danger: #f87171;
    --synbex-danger-soft: rgba(248, 113, 113, 0.12);
    --synbex-success: #4ade80;
    --synbex-success-hover: #86efac;
    --synbex-text: #f3f4f6;
    --synbex-text-muted: #9ca3af;
    --synbex-border: #2b2f3a;
    --synbex-surface: #1a1d27;
    --synbex-bg: #111319;
    --synbex-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.5);
    --synbex-phone-link: #2dd4bf;
}

:root[data-theme="light"] {
    --synbex-primary: #4f46e5;
    --synbex-primary-hover: #4338ca;
    --synbex-primary-soft: #eef2ff;
    --synbex-danger: #dc2626;
    --synbex-danger-soft: #fef2f2;
    --synbex-success: #16a34a;
    --synbex-success-hover: #15803d;
    --synbex-text: #111827;
    --synbex-text-muted: #6b7280;
    --synbex-border: #e5e7eb;
    --synbex-surface: #ffffff;
    --synbex-bg: #f6f7fb;
    --synbex-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 32px -8px rgba(17, 24, 39, 0.12);
    --synbex-phone-link: #0d9488;
}

body {
    margin: 0;
    font-family: var(--synbex-font);
    color: var(--synbex-text);
    background: var(--synbex-bg);
    touch-action: manipulation;
}

/* Barra de scroll delgada y del mismo tema de la app (en vez de la gris/blanca
   predeterminada del navegador) — aplica a cualquier contenedor con scroll
   interno (tarjetas, tablas, modales, menús desplegables, etc.), no solo a
   uno en particular, y cambia sola entre claro/oscuro con las mismas
   variables de siempre. Firefox usa scrollbar-color; el resto, ::-webkit-*. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--synbex-border) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--synbex-border);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--synbex-text-muted);
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

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

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

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

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

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ======================================
   Dashboard — clases compartidas entre páginas administrativas
   ====================================== */

.page-title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--synbex-text);
}

.page-subtitle {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--synbex-text-muted);
}

.page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.stat-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    padding: 18px 20px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--synbex-text);
}

.stat-value.stat-active { color: #16a34a; }
.stat-value.stat-blocked { color: var(--synbex-danger); }

.stat-label {
    font-size: 13px;
    color: var(--synbex-text-muted);
}

.synbex-presence-tenant {
    margin-bottom: 20px;
}

.synbex-presence-tenant:last-child {
    margin-bottom: 0;
}

.synbex-presence-tenant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.synbex-presence-tenant-counts {
    font-size: 13px;
    color: var(--synbex-text-muted);
}

.synbex-presence-connected {
    color: #16a34a;
    font-weight: 600;
}

.synbex-presence-disconnected {
    color: var(--synbex-danger);
    font-weight: 600;
}

.stat-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--synbex-primary);
    text-decoration: none;
}

.stat-link:hover {
    text-decoration: underline;
}

.synbex-card {
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    padding: 24px;
}

.synbex-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.synbex-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--synbex-text-muted);
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--synbex-border);
}

.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.sortable-th:hover {
    color: var(--synbex-primary);
}

.synbex-table td {
    padding: 12px;
    border-bottom: 1px solid var(--synbex-border);
    color: var(--synbex-text);
    vertical-align: middle;
}

.synbex-table tr:last-child td {
    border-bottom: none;
}

.tenant-row {
    cursor: pointer;
    transition: background 0.12s ease;
}

.tenant-row:hover {
    background: var(--synbex-primary-soft);
}

.tenant-row-chevron {
    text-align: right;
    color: var(--synbex-text-muted);
    font-size: 12px;
    width: 24px;
}

.tenant-expand-row td {
    padding: 0;
    border-bottom: 1px solid var(--synbex-border);
    background: var(--synbex-bg);
}

.tenant-expand-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    padding: 18px 20px;
}

.tenant-expand-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tenant-expand-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--synbex-text-muted);
}

.tenant-expand-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
}

.badge-active {
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
}

.badge-blocked {
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
}

.badge-platform {
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

.btn-synbex {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--synbex-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-synbex-primary {
    background: var(--synbex-primary);
    color: #fff;
}

.btn-synbex-primary:hover {
    background: var(--synbex-primary-hover);
}

.btn-synbex-secondary {
    background: transparent;
    color: var(--synbex-text);
    border-color: var(--synbex-border);
}

.btn-synbex-secondary:hover {
    background: var(--synbex-primary-soft);
}

.btn-synbex-danger {
    background: transparent;
    color: var(--synbex-danger);
    border-color: var(--synbex-danger);
}

.btn-synbex-danger:hover {
    background: var(--synbex-danger-soft);
}

.btn-synbex-sm {
    padding: 5px 12px;
    font-size: 12.5px;
}

.btn-synbex-lg {
    padding: 14px 28px;
    font-size: 18px;
}

.btn-synbex-success {
    background: var(--synbex-success);
    color: #fff;
}

.btn-synbex-success:hover {
    background: var(--synbex-success-hover);
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.hub-tile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    text-decoration: none;
    color: var(--synbex-text);
    text-align: left;
    overflow: hidden;
    position: relative;
    transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
}

.hub-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--synbex-primary-soft);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.hub-tile:hover {
    border-color: var(--synbex-primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--synbex-primary) 45%, transparent);
}

.hub-tile:hover::before {
    opacity: 1;
}

.hub-tile:active {
    transform: translateY(-1px);
}

/* Cuando el "tile" es un <button> (ej. Configuración, que abre una ventana
   flotante en vez de navegar a otra página) en vez de un <a> — mismo look,
   solo se resetean las diferencias por defecto del navegador. */
button.hub-tile {
    width: 100%;
    font: inherit;
    cursor: pointer;
}

button.hub-tile:disabled {
    opacity: 0.6;
    cursor: default;
}

button.hub-tile:disabled:hover {
    border-color: var(--synbex-border);
    transform: none;
    box-shadow: var(--synbex-shadow);
}

button.hub-tile:disabled:hover::before {
    opacity: 0;
}

.hub-tile-icon {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Variantes de color para distinguir tarjetas a simple vista (Mi unidad) —
   el resto de los hubs sigue usando el morado por defecto de arriba. */
.hub-tile-icon.is-teal {
    background: rgba(13, 148, 136, 0.12);
    color: var(--synbex-phone-link);
}

.hub-tile-icon.is-orange {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.hub-tile-icon.is-green {
    background: rgba(22, 163, 74, 0.12);
    color: var(--synbex-success);
}

.hub-tile-icon.is-red {
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
}

.hub-tile-icon.is-slate {
    background: rgba(107, 114, 128, 0.14);
    color: var(--synbex-text-muted);
}

.hub-tile:hover .hub-tile-icon {
    transform: scale(1.12) rotate(-4deg);
}

/* Para hubs con pocas opciones que igual quedan cortos de alto (ej. "Mi
   unidad" con 3, "Comunidad" con 5-6) — un poco más grandes que el tamaño
   normal, para llegar hasta abajo sin tener que deslizar. Misma clase para
   ambos hubs a propósito: deben verse del mismo tamaño. */
.hub-grid-medium .hub-tile {
    padding: 22px 24px;
}

.hub-grid-medium .hub-tile-icon {
    width: 54px;
    height: 54px;
}

.hub-grid-medium .hub-tile-icon svg {
    width: 26px;
    height: 26px;
}

.hub-grid-medium .hub-tile-title {
    font-size: 16px;
}

.hub-grid-medium .hub-tile-desc {
    font-size: 13.5px;
}

/* Notificación sin leer dentro de esa sección — punto naranja sobre el ícono +
   borde parpadeante en la tarjeta, mismo lenguaje visual que el resto de avisos
   parpadeantes de la app. */
.hub-tile.has-unread {
    border-color: #d97706;
    animation: hub-tile-unread-blink 1.4s ease-in-out infinite;
}

.hub-tile.has-unread .hub-tile-icon::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #d97706;
    border: 2px solid var(--synbex-surface);
}

@keyframes hub-tile-unread-blink {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.45);
    }

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

@media (prefers-reduced-motion: reduce) {
    .hub-tile.has-unread {
        animation: none;
    }
}

.hub-tile-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.hub-tile-title {
    font-weight: 600;
    font-size: 15.5px;
    color: var(--synbex-text);
}

.hub-tile-desc {
    font-size: 13px;
    color: var(--synbex-text-muted);
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.synbex-field {
    margin-bottom: 18px;
}

.synbex-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--synbex-text);
}

.synbex-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14.5px;
    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;
}

/* En celular, cualquier campo con letra menor a 16px hace que el navegador
   acerque la pantalla sola al tocarlo para escribir (y hay que alejar de nuevo
   después) — es un comportamiento del navegador, no algo que se pueda apagar
   desde JS/CSS directamente, así que la solución real es no bajar de 16px acá. */
@media (max-width: 600px) {
    .synbex-input {
        font-size: 16px;
    }
}

/* Fecha de inicio/fin del modal de reporte de limpieza — el input nativo de
   fecha no se achica bien con solo "width:100%" dentro de una ventana angosta
   (el navegador le da un ancho mínimo propio); con menos padding y letra más
   chica entra sin que una tape a la otra. */
.cleaning-date-input {
    padding: 8px 6px;
    font-size: 13px;
    min-width: 0;
}

/* Los 4 botones de rango (Esta semana/Este mes/Este año/Otro) dentro de la
   ventana flotante de reporte, en una cuadrícula de 2 columnas x 2 filas. */
.cleaning-modal-preset-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cleaning-modal-preset-btn {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 13px 14px;
    font-size: 14px;
}

/* Solo en celular: Fecha de inicio arriba y Fecha fin abajo, cada una en su
   propia fila a todo lo ancho — en computadora/tablet siguen lado a lado. */
@media (max-width: 600px) {
    .cleaning-date-range-row {
        flex-direction: column;
    }
}

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

.synbex-input.invalid {
    border-color: var(--synbex-danger);
}

.synbex-validation-message {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--synbex-danger);
}

.synbex-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.synbex-checkbox-row {
    display: flex;
    gap: 24px;
    margin-bottom: 18px;
}

.synbex-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--synbex-text);
    cursor: pointer;
}

.synbex-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--synbex-primary);
    cursor: pointer;
}

.synbex-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.synbex-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.synbex-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--synbex-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.synbex-toggle-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.synbex-toggle input:checked + .synbex-toggle-slider {
    background: var(--synbex-primary);
}

.synbex-toggle input:checked + .synbex-toggle-slider::before {
    transform: translateX(18px);
}

.synbex-toggle-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--synbex-border);
    font-size: 14px;
    color: var(--synbex-text);
}

/* Variante para filas donde la etiqueta debe quedar pegada al interruptor (ej.
   "Por correo"/"Por WhatsApp" anidados bajo "Recibe mensajes") en vez de
   estirarse a los extremos del contenedor. */
.synbex-toggle-field-compact {
    justify-content: flex-start;
    gap: 10px;
}

.document-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 20px;
    border: 2px dashed var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    background: var(--synbex-bg);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.document-dropzone:hover {
    border-color: var(--synbex-primary);
    background: var(--synbex-primary-soft);
}

.document-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.document-dropzone-icon {
    font-size: 32px;
}

.document-dropzone-text {
    font-weight: 600;
    color: var(--synbex-text);
    font-size: 14.5px;
}

.document-dropzone-hint {
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

.import-progress {
    margin: 16px 0;
}

.import-progress progress {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    accent-color: var(--synbex-primary);
}

.document-file-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 14px;
    background: var(--synbex-primary-soft);
    border-radius: var(--synbex-radius-md);
    font-size: 13.5px;
    color: var(--synbex-text);
}

/* Grid en vez de flex-wrap: con más de 3 fotos, flex-wrap las repartía mal en
   la fila de abajo (dependía del ancho sobrante de la última fila de arriba).
   Con grid, cada foto siempre cae en su propia celda del mismo tamaño. */
.cleaning-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 120px));
    gap: 10px;
}

.cleaning-photo-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
    transition: transform 0.15s ease;
}

.cleaning-photo-thumb:hover {
    transform: scale(1.04);
}

/* En el historial de limpieza (vista admin) las miniaturas se ven más chicas
   que en "Mi limpieza" del residente — ahí sí queremos que se noten grandes,
   pero en el historial hay muchas filas y no hace falta que ocupen tanto. */
.cleaning-detail-row .cleaning-photo-thumb {
    width: 70px;
    height: 70px;
    aspect-ratio: unset;
}

.cleaning-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cleaning-checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--synbex-text);
}

.cleaning-checklist-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--synbex-text-muted);
}

.cleaning-checklist-icon.is-done {
    color: var(--synbex-success);
}

.photo-lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: zoom-out;
    padding: 24px;
}

.photo-lightbox-backdrop img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 10px;
    box-shadow: var(--synbex-shadow);
    cursor: default;
}

.synbex-booking-modal {
    max-width: 500px;
    width: 100%;
    cursor: default;
    transition: max-width 0.35s ease, padding 0.35s ease;
}

.synbex-booking-modal-success {
    max-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px 20px;
    text-align: center;
    animation: synbex-success-pop 0.3s ease;
}

.synbex-success-check {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 32px;
    line-height: 64px;
    animation: synbex-check-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Mismo círculo grande y centrado que synbex-success-check, pero en rojo y con
   el ícono de basurero — para las ventanas de confirmar eliminación. */
.resident-delete-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.resident-delete-icon svg {
    width: 32px;
    height: 32px;
}

.synbex-success-text {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: var(--synbex-text, #1f2937);
}

@keyframes synbex-success-pop {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes synbex-check-pop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}

.cleaning-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.cleaning-checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cleaning-checklist-item:hover {
    border-color: var(--synbex-primary);
}

.cleaning-checklist-item.is-done {
    background: var(--synbex-primary-soft);
    border-color: var(--synbex-primary);
}

.cleaning-checklist-item input {
    width: 18px;
    height: 18px;
    accent-color: var(--synbex-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.cleaning-checklist-item span {
    font-size: 14.5px;
    color: var(--synbex-text);
}

.cleaning-checklist-item.is-done span {
    text-decoration: line-through;
    color: var(--synbex-text-muted);
}

.cleaning-photo-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.cleaning-photo-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cleaning-photo-btn input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
}

.cleaning-photo-btn.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.destino-field {
    position: relative;
}

.destino-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin-top: 4px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    box-shadow: var(--synbex-shadow);
}

.destino-suggestion-item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--synbex-border);
    color: var(--synbex-text);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.destino-suggestion-item:last-child {
    border-bottom: none;
}

.destino-suggestion-item:hover {
    background: var(--synbex-primary-soft);
}

.destino-warning-text {
    margin: 6px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--synbex-danger);
}

.cleaning-chart {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    overflow-x: auto;
    padding: 8px 4px 0;
    min-height: 190px;
}

.cleaning-chart-bar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 44px;
}

.cleaning-chart-count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--synbex-text);
}

.cleaning-chart-bar {
    width: 28px;
    min-height: 4px;
    background: var(--synbex-primary);
    border-radius: 6px 6px 0 0;
}

.cleaning-chart-label {
    font-size: 12px;
    color: var(--synbex-text-muted);
    white-space: nowrap;
}

.cleaning-report-summary-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: stretch;
}

.cleaning-report-summary-row .stat-row {
    flex: 1 1 200px;
    gap: 10px;
    margin-bottom: 0;
    flex-wrap: nowrap;
}

.cleaning-report-summary-row .stat-card {
    min-width: 0;
    flex: 1;
    padding: 12px 14px;
}

.cleaning-report-cta-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 15px;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--synbex-primary) 55%, transparent);
}

.cleaning-report-cta-btn:hover {
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--synbex-primary) 65%, transparent);
}

.cleaning-report-generate-btn {
    width: 100%;
    padding: 16px 20px;
    font-size: 16px;
}

/* En computadora, el calendario y el panel de reporte (presets + estadísticas +
   Generar reporte) se ven lado a lado; en móvil el panel queda oculto y solo
   se usa el botón "Generar reporte" de ancho completo, que abre la ventana
   flotante — pedido explícito: "móvil como está ahorita está bien". */
.cleaning-desktop-report-panel {
    display: none;
}

@media (min-width: 900px) {
    .cleaning-page-top {
        display: flex;
        gap: 16px;
        align-items: stretch;
    }

    .cleaning-page-top .cleaning-calendar-card,
    .cleaning-page-top .cleaning-desktop-report-panel {
        display: flex;
        flex-direction: column;
    }

    .cleaning-page-top .cleaning-calendar-card {
        flex: 0 0 380px;
    }

    .cleaning-desktop-report-panel {
        display: block;
        flex: 1;
        min-width: 0;
        margin-bottom: 16px;
    }

    .cleaning-mobile-only-btn {
        display: none;
    }
}

.cleaning-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.cleaning-panel-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.cleaning-stat-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 12px;
}

.cleaning-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--synbex-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cleaning-stat-icon-purple {
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

.cleaning-stat-icon-green {
    background: color-mix(in srgb, var(--synbex-success) 15%, transparent);
    color: var(--synbex-success);
}

.cleaning-desktop-report-panel .cleaning-chart {
    min-height: 0;
}

.cleaning-panel-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 14px;
    color: var(--synbex-text);
    margin-bottom: 6px;
}

.cleaning-panel-chart-period {
    font-size: 12px;
    font-weight: 600;
    color: var(--synbex-text-muted);
    background: var(--synbex-bg);
    padding: 3px 10px;
    border-radius: 999px;
}

.cleaning-panel-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--synbex-text-muted);
    text-align: center;
}

.cleaning-calendar-nav-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
}

.cleaning-report-summary-row .cleaning-chart-card {
    flex: 1 1 240px;
    margin: 0;
}

.cleaning-report-summary-row .cleaning-chart-card h3 {
    margin-bottom: 8px;
    font-size: 14px;
}

.cleaning-report-summary-row .cleaning-chart {
    min-height: 100px;
    gap: 10px;
    padding-top: 4px;
}

.report-light-theme {
    background: var(--synbex-surface);
    color: var(--synbex-text);
    border-radius: var(--synbex-radius-lg);
    padding: 16px;
}

.report-light-theme .stat-card {
    align-items: center;
    text-align: center;
}

/* La tarjeta de datos del reporte (tabla o mensaje de "sin resultados") no lleva
   borde/radio/sombra — solo la línea gris entre filas que ya trae .synbex-table.
   Las tarjetas de arriba (Entregas registradas/Pendientes/Entregadas) usan
   .stat-card, no .synbex-card, así que no las toca esta regla. */
.report-light-theme .synbex-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Al exportar/imprimir (window.print) el reporte siempre sale en tema claro,
   sin importar el tema elegido en pantalla — solo aplica dentro de @media print. */
@media print {
    .report-light-theme {
        --synbex-primary: #4f46e5;
        --synbex-primary-hover: #4338ca;
        --synbex-primary-soft: #eef2ff;
        --synbex-danger: #dc2626;
        --synbex-danger-soft: #fef2f2;
        --synbex-success: #16a34a;
        --synbex-success-hover: #15803d;
        --synbex-text: #111827;
        --synbex-text-muted: #6b7280;
        --synbex-border: #e5e7eb;
        --synbex-surface: #ffffff;
        --synbex-bg: #f6f7fb;
    }
}

/* Sin límite de ancho, la tarjeta ocupaba todo el ancho de la página en
   computadora y cada casilla del calendario se veía enorme — se topa a un
   ancho cómodo de escritorio; en celular sigue ocupando el 100% normal. */
@media (min-width: 640px) {
    .cleaning-calendar-card {
        max-width: 380px;
    }
}

.cleaning-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}

.cleaning-calendar-weekday {
    font-size: 11px;
    color: var(--synbex-text-muted);
    font-weight: 600;
    padding-bottom: 4px;
}

.cleaning-calendar-day {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 13px;
    color: var(--synbex-text);
    background: var(--synbex-bg);
}

.cleaning-calendar-day.is-empty {
    background: transparent;
}

.cleaning-calendar-day.has-cleaning {
    background: var(--synbex-primary);
    color: #fff;
    font-weight: 700;
}

.cleaning-calendar-caption {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--synbex-text-muted);
}

/* Calendario de Solicitudes de reserva: pendiente en amarillo, confirmada en
   verde (mismos tonos que .badge-pending/.badge-active), y cualquier fecha ya
   pasada en gris — sin importar el estado, porque ya no aplica ninguna accion. */
.cleaning-calendar-day.has-pending {
    background: rgba(217, 119, 6, 0.14);
    color: #d97706;
    font-weight: 700;
    cursor: pointer;
}

.cleaning-calendar-day.has-confirmed {
    background: rgba(22, 163, 74, 0.14);
    color: #16a34a;
    font-weight: 700;
    cursor: pointer;
}

.cleaning-calendar-day.is-past {
    background: rgba(107, 114, 128, 0.14);
    color: var(--synbex-text-muted);
}

/* Un dia pasado que SI tuvo una reserva (pendiente o confirmada) se distingue
   del resto de dias pasados (vacios) con un gris bien mas marcado. */
.cleaning-calendar-day.is-past-reserved {
    background: rgba(107, 114, 128, 0.4);
    color: var(--synbex-text);
    font-weight: 700;
    cursor: pointer;
}

.reservations-top-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

/* "Todas" queda sola arriba, y Confirmadas/Pendientes/Finalizadas se reparten
   una fila aparte debajo — en vez de las cuatro pestañas repartidas en una
   sola fila (ver .tab-header, que sigue siendo la base: gap y margen). */
.reservations-tab-header {
    flex-direction: column;
}

.reservations-tab-row {
    display: flex;
    gap: 8px;
}

/* Pestañas de estado reutilizables (Mis reservas, Mis mantenimientos, y
   cualquier otra lista que se divida por estado): se reparten el ancho a
   partes iguales; la activa queda resaltada con el color primario. */
.tab-header {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--synbex-border);
    background: var(--synbex-bg);
    color: var(--synbex-text-muted);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 12px;
    border-radius: var(--synbex-radius-md);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Fondo suave (no el mismo morado sólido de los botones de acción como
   "Nueva solicitud") para que la pestaña activa se distinga claramente de
   un botón de acción primario. */
.tab-btn.is-active {
    background: var(--synbex-primary-soft);
    border-color: var(--synbex-primary);
    color: var(--synbex-primary);
}

.tab-count {
    font-size: 12px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    padding: 1px 7px;
    line-height: 1.5;
}

.tab-btn.is-active .tab-count {
    background: var(--synbex-primary);
    color: #fff;
}

/* Pestaña "Pendientes" del admin — si hay pendientes y no es la pestaña activa,
   parpadea en naranja para llamar la atención, pero el fondo se queda gris
   (el mismo tab-btn de siempre); al hacerle clic y quedar activa, se ve como
   cualquier otra pestaña activa (azul), sin parpadeo. */
.tab-btn.has-pending-alert:not(.is-active) {
    border-color: #d97706;
    color: #d97706;
    animation: tab-pending-blink 1.4s ease-in-out infinite;
}

.tab-btn.has-pending-alert:not(.is-active) .tab-count {
    background: #d97706;
    color: #fff;
}

@keyframes tab-pending-blink {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.5);
    }

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

@media (prefers-reduced-motion: reduce) {
    .tab-btn.has-pending-alert:not(.is-active) {
        animation: none;
    }
}

/* Selector de mes de "Mis paquetes" (pestaña Historial de retiros) — en
   escritorio se queda pegado a la derecha de las pestañas, como siempre. */
.packages-month-select {
    width: auto;
    margin-left: auto;
}

@media (max-width: 600px) {
    /* En celular ya no cabe al lado de los dos botones — pasa a su propia
       fila debajo, a un 60% de ancho y centrado, en vez de ir al 100%. */
    .packages-tab-header {
        flex-wrap: wrap;
    }

    .packages-month-select {
        flex: 0 0 60%;
        margin: 10px auto 0;
    }
}

@media (max-width: 600px) {
    /* Con 3 pestañas (Mis mantenimientos) el texto+ícono no cabe cómodo con el
       tamaño de escritorio — se compacta un poco solo en móvil. */
    .tab-btn {
        font-size: 12.5px;
        padding: 9px 6px;
        gap: 4px;
    }

    .tab-btn svg {
        width: 16px;
        height: 16px;
    }

    /* Casos tiene 5 pestañas — no caben cómodas en una sola fila en celular.
       Se agrupan en cuadrícula de 2, con "Todos" (la más usada, va primera)
       ocupando la fila completa arriba: 1 / 2 / 2. */
    .casos-tab-header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .casos-tab-header .casos-tab-all,
    .casos-tab-header .casos-tab-month {
        grid-column: 1 / -1;
    }
}

.reservations-list-card {
    display: flex;
    flex-direction: column;
}

/* Antes tenía un tope fijo de 360px sin importar el tamaño de pantalla, lo que
   dejaba mucho espacio vacío debajo en celulares altos. Ahora el tope se
   calcula según el alto real de la pantalla (100dvh, que en móvil sí cuenta
   el navegador con su barra de direcciones) menos lo que ocupa el resto de la
   página arriba (header, título, pestañas) — así aprovecha lo que quede
   disponible sin importar el dispositivo. Si hay pocas reservas, la lista
   igual se encoge a su contenido (max-height, no height fija). */
.reservations-list-scroll {
    flex: 1;
    min-height: 220px;
    max-height: calc(100vh - 320px);
    max-height: calc(100dvh - 320px);
    overflow-y: auto;
}

@media (max-width: 600px) {
    .reservations-list-scroll {
        max-height: calc(100vh - 360px);
        max-height: calc(100dvh - 360px);
    }
}

.reservation-history-list {
    display: flex;
    flex-direction: column;
}

.reservation-history-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--synbex-border);
}

.reservation-history-row:last-child {
    border-bottom: none;
}

.reservation-history-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.reservation-history-title {
    font-weight: 600;
    color: var(--synbex-text);
}

.reservation-history-date {
    font-size: 13px;
    color: var(--synbex-text-muted);
}

.synbex-icon-text-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 270px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--synbex-border);
    background: var(--synbex-surface);
    color: var(--synbex-text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    overflow: hidden;
}

.synbex-icon-text-btn:hover {
    border-color: var(--synbex-primary);
}

.synbex-icon-text-btn input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
}

.synbex-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 270px;
    height: 200px;
    border: 2px dashed var(--synbex-border);
    border-radius: 8px;
    background: var(--synbex-bg);
    color: var(--synbex-text-muted);
    font-size: 32px;
}

.synbex-input-currency {
    position: relative;
}

.synbex-input-currency-symbol {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--synbex-text-muted);
    font-size: 14px;
    pointer-events: none;
}

.synbex-input-currency input {
    padding-left: 24px;
}

.reservation-request-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--synbex-border);
}

/* ---- Documentos ---- */

.synbex-page-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.doc-file-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    flex-shrink: 0;
}

.doc-icon-pdf { background: #dc2626; }
.doc-icon-doc { background: #2563eb; }
.doc-icon-xls { background: #16a34a; }
.doc-icon-img { background: #9333ea; }
.doc-icon-generic { background: var(--synbex-text-muted); }

/* ---- Componentes reutilizables: fila de acciones con ícono, menú de "más
   opciones" (⋮) y paginación. Usados por Documentos, Contactos y cualquier
   otra tabla con el mismo patrón. ---- */

.synbex-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.synbex-icon-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--synbex-radius-md);
    border: 1px solid var(--synbex-border);
    background: var(--synbex-surface);
    color: var(--synbex-text);
    cursor: pointer;
    font-size: 15px;
    text-decoration: none;
    box-sizing: border-box;
}

/* Los íconos de línea de HubIcons vienen a 26px por defecto (pensados para las
   tarjetas grandes de los hubs) — acá el botón es chico, así que se achican al
   tamaño que ya usaba el emoji que reemplazan. */
.synbex-icon-btn svg {
    width: 18px;
    height: 18px;
}

.synbex-icon-btn:hover {
    background: var(--synbex-primary-soft);
    border-color: var(--synbex-primary);
}

.synbex-icon-btn-whatsapp {
    color: #25d366;
}

/* ======================================
   Pantalla de "procesando" a pantalla completa. Global (no scoped) a propósito:
   la usan DOS componentes distintos — LoadingOverlay (mensaje fijo) y
   BulkSendOverlay (con contador de correos enviados) —, y el CSS aislado de uno
   no alcanza el markup del otro. Mismo motivo por el que las reglas de
   MobileTabBar viven acá y no en su .razor.css.
   ====================================== */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}

.loading-overlay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 40px;
    background: var(--synbex-surface);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    max-width: 320px;
    text-align: center;
}

.loading-overlay-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid var(--synbex-primary-soft);
    border-top-color: var(--synbex-primary);
    animation: loading-overlay-spin 0.8s linear infinite;
}

.loading-overlay-message {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--synbex-text);
}

@keyframes loading-overlay-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 420px) {
    .loading-overlay-card {
        max-width: 260px;
        padding: 28px 30px;
    }
}

.synbex-menu-wrapper {
    position: relative;
}

.synbex-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.synbex-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    min-width: 190px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
    box-shadow: var(--synbex-shadow);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.synbex-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--synbex-text);
    font-size: 13.5px;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
}

.synbex-menu-item:hover {
    background: var(--synbex-primary-soft);
}

.synbex-menu-item-danger {
    color: var(--synbex-danger);
}

.synbex-menu-item-danger:hover {
    background: var(--synbex-danger-soft);
}

.synbex-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--synbex-border);
}

.synbex-pagination-pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.synbex-pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--synbex-radius-md);
    border: 1px solid var(--synbex-border);
    background: var(--synbex-surface);
    color: var(--synbex-text);
    cursor: pointer;
    font-size: 13.5px;
    box-sizing: border-box;
}

.synbex-pagination-btn:hover:not(:disabled) {
    background: var(--synbex-primary-soft);
    border-color: var(--synbex-primary);
}

.synbex-pagination-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.synbex-pagination-btn-active {
    background: var(--synbex-primary);
    border-color: var(--synbex-primary);
    color: #fff;
}

/* ---- Contactos ---- */

.contact-phone-link {
    color: var(--synbex-phone-link);
    text-decoration: underline;
}

/* Botones de Llamar/WhatsApp: más grandes y horizontales que el resto de los
   íconos de acción (⋮, Ver, Descargar en Documentos), que se quedan como están. */
.contact-action-btn {
    width: 56px;
    height: 42px;
    font-size: 19px;
}

.contact-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.contact-icon-plumbing { background: rgba(147, 51, 234, 0.16); color: #9333ea; }
.contact-icon-security { background: var(--synbex-primary-soft); color: var(--synbex-primary); }
.contact-icon-admin { background: rgba(22, 163, 74, 0.14); color: #16a34a; }
.contact-icon-electric { background: rgba(217, 119, 6, 0.16); color: #d97706; }
.contact-icon-emergency { background: var(--synbex-danger-soft); color: var(--synbex-danger); }
.contact-icon-generic { background: rgba(107, 114, 128, 0.16); color: var(--synbex-text-muted); }

.badge-purple {
    background: rgba(147, 51, 234, 0.14);
    color: #9333ea;
}

.badge-warning {
    background: rgba(217, 119, 6, 0.14);
    color: #d97706;
}

.badge-neutral {
    background: rgba(107, 114, 128, 0.16);
    color: var(--synbex-text-muted);
}

/* Tarjetas de móvil (Contactos, Documentos, y cualquier otra tabla que
   necesite el mismo tratamiento): ocultas por default — escritorio/tablet usan
   la tabla de siempre —, se activan solo bajo el breakpoint de abajo. */
.mobile-cards {
    display: none;
}

@media (max-width: 600px) {
    .table-wrapper {
        display: none;
    }

    .mobile-cards {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .mobile-card {
        display: flex;
        flex-direction: column;
        text-align: left;
        gap: 12px;
        max-width: 380px;
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
    }

    .mobile-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-card-icon {
        width: 46px;
        height: 46px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }

    .mobile-card-headertext {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
    }

    .mobile-card-title {
        font-weight: 700;
        font-size: 16px;
        color: var(--synbex-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-card-subtitle {
        font-size: 12px;
        color: var(--synbex-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-card-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-top: 12px;
        border-top: 1px solid var(--synbex-border);
    }

    .mobile-card-row-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        background: var(--synbex-bg);
        flex-shrink: 0;
    }

    .mobile-card-row-body {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        flex: 1;
    }

    .mobile-card-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--synbex-text-muted);
    }

    .mobile-card-row-body a,
    .mobile-card-row-body span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Botones grandes con texto (Llamar/WhatsApp, Ver/Descargar) — distintos de
       los botones de ícono solo que usa la tabla de escritorio. */
    .mobile-card-buttons {
        display: flex;
        gap: 10px;
        margin-top: 2px;
    }

    .mobile-card-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px;
        border-radius: var(--synbex-radius-md);
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        border: none;
        box-sizing: border-box;
    }

    .mobile-card-btn-indigo {
        background: var(--synbex-primary);
        color: #fff;
    }

    .mobile-card-btn-green {
        background: #25d366;
        color: #fff;
    }

    .mobile-card-btn-disabled {
        opacity: 0.4;
        pointer-events: none;
    }

    .mobile-card-pagination .synbex-pagination {
        flex-direction: column;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    .mobile-card-pagination .synbex-pagination-pages {
        justify-content: center;
    }

    .mobile-card-pagination .synbex-page-size-select {
        display: none;
    }
}

.documents-search-wrapper {
    position: relative;
    flex: 1;
    min-width: 180px;
}

.documents-search-wrapper .documents-search-input {
    padding-left: 38px;
    box-sizing: border-box;
    width: 100%;
}

.documents-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.55;
    pointer-events: none;
}

.documents-filters-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--synbex-border);
    background: var(--synbex-surface);
    color: var(--synbex-primary);
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.documents-filters-extra {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .documents-page-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .documents-page-title {
        font-size: 28px;
        text-align: center;
    }

    .documents-search-wrapper {
        width: 100%;
    }

    .documents-search-input {
        font-size: 16px;
        padding-top: 12px;
        padding-bottom: 12px;
        max-width: 100% !important;
    }

    .documents-category-select {
        flex: 1;
        border-radius: 999px;
    }

    .documents-filters-toggle {
        display: inline-flex;
    }

    .documents-filters-extra {
        display: none;
        width: 100%;
    }

    .documents-filters-extra.documents-filters-extra-open {
        display: flex;
    }
}

.reservation-request-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cleaning-calendar-check {
    position: absolute;
    bottom: 1px;
    right: 3px;
    font-size: 8px;
    line-height: 1;
}

.cleaning-month-group summary.cleaning-month-header {
    cursor: pointer;
    font-weight: 600;
    color: var(--synbex-text);
    list-style: none;
}

.cleaning-month-group summary.cleaning-month-header::-webkit-details-marker {
    display: none;
}

.cleaning-month-group summary.cleaning-month-header::before {
    content: "▸";
    display: inline-block;
    margin-right: 8px;
    color: var(--synbex-primary);
    transition: transform 0.15s ease;
}

.cleaning-month-group[open] summary.cleaning-month-header::before {
    transform: rotate(90deg);
}

.synbex-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    font-size: 13.5px;
    line-height: 1.4;
}

.synbex-alert-success {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--synbex-radius-md);
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
    font-size: 13.5px;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .synbex-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .page-header-row {
        flex-wrap: wrap;
    }

    .synbex-card {
        padding: 16px;
    }

    /* Las tablas no se achican de forma legible en pantallas angostas — se deja
       que conserven un ancho mínimo y que la tarjeta que las contiene scrollee
       horizontal en vez de aplastar las columnas. */
    .synbex-card:has(> table.synbex-table),
    .synbex-card:has(> .synbex-table-wrap) {
        overflow-x: auto;
    }

    .synbex-table {
        min-width: 520px;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 20px;
    }

    .synbex-card {
        padding: 14px;
    }
}

.synbex-announcements-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.synbex-announcement-card {
    background: var(--synbex-primary-soft);
    color: var(--synbex-text);
    justify-content: space-between;
    align-items: center;
}

.synbex-priority-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
    white-space: nowrap;
    vertical-align: middle;
}

.synbex-document-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.badge-pending {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.synbex-case-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.synbex-case-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Casos propios (los que reportó quien está viendo la lista) resaltados entre
   los del resto del conjunto — borde + fondo suave con el color primario. */
.synbex-case-card-mine {
    border-color: var(--synbex-primary);
    background: var(--synbex-primary-soft);
}

/* Íconos de línea (HubIcons) puestos junto a texto normal, en vez de emoji —
   nacen a 26x26 (pensados para las tarjetas grandes de los hubs), acá se
   achican y se alinean con la línea de base del texto que los acompaña. */
.synbex-inline-icon {
    display: inline-flex;
    vertical-align: -3px;
}

.synbex-inline-icon svg {
    width: 15px;
    height: 15px;
}

.synbex-case-icon {
    flex-shrink: 0;
}

.synbex-case-title {
    font-size: 17px;
}

/* Grid de 3 columnas (contenido 55% / línea divisoria / metadatos) con filas
   explícitas, para que "Creado el" quede a la misma altura que la ubicación, y
   "Asignado a" a la misma altura que "Reportado por" — algo que con dos
   columnas flex independientes (una por texto de arriba a abajo, otra igual)
   no se puede lograr, porque no comparten las mismas filas. */
.synbex-case-grid {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 55%) 1px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 8px;
    align-items: center;
}

.synbex-case-divider {
    grid-column: 2;
    grid-row: 1 / -1;
    background: var(--synbex-border);
}

/* Ubicación, Reportado por, Creado el y Asignado a comparten esta misma clase
   a propósito: misma letra y tamaño para las cuatro, en una sola línea cada
   una (etiqueta + valor), en vez de la etiqueta arriba y el valor abajo.
   Reemplaza también el margin-bottom:24px que trae .page-subtitle (bueno para
   separar un subtítulo de página del contenido de abajo, pero acá adentro de
   la tarjeta solo hace falta el espacio parejo que ya da el row-gap del grid). */
.synbex-case-line {
    margin: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--synbex-text-muted);
    white-space: nowrap;
}

/* El valor (no la etiqueta) va en negrita, mismo color — así se distingue sin
   necesitar un segundo tono de gris. */
.synbex-case-line strong {
    font-weight: 600;
    color: inherit;
}

.synbex-case-col-title {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.synbex-case-col-desc {
    grid-column: 1;
    grid-row: 2;
    margin: 0 0 6px;
}

.synbex-case-col-location {
    grid-column: 1;
    grid-row: 3;
}

.synbex-case-col-reporter {
    grid-column: 1;
    grid-row: 4;
}

.synbex-case-col-comment {
    grid-column: 1;
    grid-row: 5;
}

.synbex-case-col-reactions {
    grid-column: 1;
    grid-row: 6;
}

.synbex-case-meta-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--synbex-text-muted);
}

/* "¿Se resolvió bien?" va a la derecha (columna de metadatos), separado de los
   likes/dislikes del caso en sí — antes salían pegados en la misma fila y se
   confundían como si fueran el mismo par de botones. */
.synbex-case-resolution {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.synbex-case-col-resolution {
    grid-column: 3;
    grid-row: 5;
}

.synbex-case-resolution-buttons {
    display: flex;
    gap: 8px;
}

.synbex-case-comment {
    background: var(--synbex-primary-soft);
    color: var(--synbex-text);
    margin: 6px 0;
}

.synbex-case-col-created {
    grid-column: 3;
    grid-row: 3;
}

.synbex-case-col-assigned {
    grid-column: 3;
    grid-row: 4;
}

@media (max-width: 640px) {
    .synbex-case-card {
        flex-wrap: wrap;
    }

    .synbex-case-grid {
        grid-template-columns: minmax(0, 1fr);
        flex-basis: 100%;
    }

    .synbex-case-divider {
        display: none;
    }

    .synbex-case-line {
        white-space: normal;
    }

    .synbex-case-col-title,
    .synbex-case-col-desc,
    .synbex-case-col-location,
    .synbex-case-col-reporter,
    .synbex-case-col-comment,
    .synbex-case-col-reactions,
    .synbex-case-col-created,
    .synbex-case-col-assigned,
    .synbex-case-col-resolution {
        grid-column: 1;
    }

    .synbex-case-col-location { grid-row: 3; }
    .synbex-case-col-created { grid-row: 4; }
    .synbex-case-col-reporter { grid-row: 5; }
    .synbex-case-col-assigned { grid-row: 6; }
    .synbex-case-col-resolution { grid-row: 7; }
    .synbex-case-col-comment { grid-row: 8; }
    .synbex-case-col-reactions { grid-row: 9; }
}

.synbex-case-reactions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Botón "Agregar nuevo caso del conjunto" — grande y centrado a propósito,
   en vez del botoncito chico de siempre en la esquina del encabezado: es la
   acción principal de esta pantalla. */
.casos-new-case-row {
    display: flex;
    justify-content: center;
    margin: 28px 0;
}

.casos-new-case-btn {
    width: 70%;
    max-width: 520px;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
}

@media (max-width: 640px) {
    .casos-new-case-btn {
        width: 100%;
    }
}

/* Máximo 3 tarjetas por fila — con flexbox + justify-content:center en vez de
   CSS grid, para que si hay 1 o 2 áreas (menos de 3) queden centradas en la
   fila en vez de pegadas a la izquierda; con 3 llenan la fila completa. */
.synbex-area-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.synbex-area-card {
    flex: 0 1 calc(33.333% - 14px);
    max-width: 380px;
    min-width: 300px;
}

@media (max-width: 640px) {
    .synbex-area-card {
        flex-basis: 100%;
        max-width: 420px;
    }
}

/* Botón "Solicitudes" de Áreas comunes — un poco más ancho/alto que un botón
   normal, y cuando hay solicitudes pendientes se pone naranja y parpadea, con
   una pastilla mostrando cuántas hay, para que sea imposible no notarlo. */
.areas-requests-btn {
    position: relative;
    box-sizing: border-box;
    width: 190px;
    height: 46px;
    padding: 12px 26px;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Mismo ancho y alto que .areas-requests-btn (arriba), solo para "+ Nueva área"
   — no se toca .catalog-add-btn porque ese es compartido con otras 16 pantallas.
   El selector compuesto (no solo .areas-new-btn) es a propósito: así gana sin
   importar el orden en el archivo sobre el margin-top:4px de .catalog-add-btn. */
.catalog-add-btn.areas-new-btn {
    box-sizing: border-box;
    width: 190px;
    height: 46px;
    padding: 12px 26px;
    font-size: 15px;
    justify-content: center;
    margin: 0;
}

.areas-requests-btn.has-pending {
    background: #d97706;
    border-color: #d97706;
    color: #fff;
    animation: areas-requests-blink 1.4s ease-in-out infinite;
}

.areas-requests-btn.has-pending:hover {
    background: #b45309;
    border-color: #b45309;
}

.areas-requests-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff;
    color: #d97706;
    font-size: 12.5px;
    font-weight: 800;
}

@keyframes areas-requests-blink {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.55);
    }

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

@media (prefers-reduced-motion: reduce) {
    .areas-requests-btn.has-pending {
        animation: none;
    }
}

.synbex-area-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.synbex-area-photo {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.synbex-area-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.synbex-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.synbex-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.synbex-calendar-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--synbex-text-muted);
    padding: 4px 0;
}

.synbex-calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--synbex-radius-md);
    font-size: 13px;
    font-family: inherit;
    border: 1px solid transparent;
    background: transparent;
    color: var(--synbex-text);
    position: relative;
}

.synbex-calendar-day-empty {
    background: transparent;
}

.synbex-calendar-day-disabled {
    color: var(--synbex-text-muted);
    opacity: 0.4;
}

.synbex-calendar-day-available {
    background: var(--synbex-primary-soft);
    cursor: pointer;
    transition: background 0.15s ease;
}

.synbex-calendar-day-available:hover {
    background: var(--synbex-primary);
    color: #fff;
}

/* ======================================
   Accesibilidad — barra flotante (AccessibilityWidget)
   El tamaño de texto y la escala de grises se aplican solo sobre
   #synbex-app-content (ver App.razor), no sobre <html>/<body>, para que la
   propia barra de accesibilidad nunca cambie de tamaño ni de color junto
   con el contenido que controla.
   ====================================== */

html.a11y-underline-links a {
    text-decoration: underline !important;
}

html.a11y-readable-font,
html.a11y-readable-font * {
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: 0.02em !important;
    line-height: 1.6 !important;
}

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

#synbex-app-content.a11y-grayscale {
    filter: grayscale(1);
}

/* Misma especificidad que :root[data-theme] (pseudo-clase + atributo) — con
   selector de tipo "html" en vez de ":root" esta regla pierde siempre contra
   el tema claro/oscuro sin importar el orden en el archivo. */
:root[data-a11y-contrast="high"] {
    --synbex-primary: #ffff00;
    --synbex-primary-hover: #ffff66;
    --synbex-primary-soft: #333300;
    --synbex-text: #ffffff;
    --synbex-text-muted: #ffff00;
    --synbex-border: #ffffff;
    --synbex-surface: #000000;
    --synbex-bg: #000000;
}

.synbex-calendar-day-selected {
    background: var(--synbex-primary);
    color: #fff;
}

.synbex-calendar-day-booked {
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
}

/* El día de hoy se marca con un anillo — independiente de si además está
   disponible, reservado o (si el conjunto lo permitiera) en el pasado, para
   que la persona ubique "dónde estamos" de un vistazo sin importar el resto
   del estado del día. */
.synbex-calendar-day-today {
    box-shadow: inset 0 0 0 2px var(--synbex-primary);
    font-weight: 700;
}

.synbex-calendar-x {
    font-size: 11px;
}

.synbex-calendar-dot {
    font-size: 8px;
    line-height: 1;
    margin-top: 2px;
}

/* Resumen del área al reservar (foto + datos) — foto baja (100px) porque acá
   solo importan nombre/descripción/tipo, no es la ficha completa del área
   (esa vive en /dashboard/areas-comunes). En celular se apilan en vez de ir
   lado a lado. */
.booking-area-summary {
    max-width: 700px;
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.booking-area-summary-photo {
    width: 200px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.booking-area-summary-details {
    min-width: 0;
}

@media (max-width: 640px) {
    .booking-area-summary {
        flex-direction: column;
        align-items: stretch;
    }

    .booking-area-summary-photo {
        width: 100%;
        height: 100px;
    }
}

/* "Selecciona una fecha para reservar" arriba del calendario — usa el mismo
   acento morado que ya cambia de tono entre claro/oscuro en toda la app
   (var(--synbex-primary)), así que ya sale llamativo en los dos temas sin
   necesidad de un color aparte para cada uno. */
.booking-calendar-instruction {
    margin: 0 0 10px;
    text-align: center;
    font-weight: 600;
    color: var(--synbex-primary);
}

@media print {
    html,
    body {
        background: #ffffff !important;
    }

    body * {
        visibility: hidden;
    }

    .print-area,
    .print-area * {
        visibility: visible;
    }

    .print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .no-print {
        display: none !important;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    .stat-card,
    .cleaning-chart-bar-wrap,
    .cleaning-task-card,
    .synbex-card:not(:has(table)) {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* La tarjeta que envuelve la tabla del reporte sí debe poder partirse entre
       paginas — si no, al no caber completa se empuja entera a la pagina
       siguiente y deja un hueco enorme al final de la anterior. Las filas no
       se parten a la mitad, y el encabezado se repite en cada pagina. */
    .synbex-table thead {
        display: table-header-group;
    }

    .synbex-table tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Los encabezados ordenables usan white-space:nowrap para que la flechita de
       orden no salte de linea en pantalla — pero en una tabla de 7 columnas eso
       fuerza a la tabla a ser mas ancha que la pagina impresa, empujando el borde
       derecho de la tarjeta fuera del area imprimible (por eso "desaparecia").
       table-layout:fixed obliga a la tabla a respetar el 100% del ancho de la
       tarjeta, y el texto que no quepa se parte en vez de ensanchar la columna. */
    .synbex-table {
        table-layout: fixed;
    }

    .synbex-table th,
    .synbex-table td {
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* ======================================
   Novedades — feed de actividad reciente en el inicio del residente
   ====================================== */

.synbex-novedades-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.synbex-novedad-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, transform 0.1s ease;
}

.synbex-novedad-card:hover {
    background: var(--synbex-primary-soft);
    transform: translateY(-1px);
}

.synbex-novedad-icon {
    font-size: 22px;
    flex-shrink: 0;
    color: var(--synbex-primary);
}

.synbex-novedad-icon svg {
    width: 20px;
    height: 20px;
}

.synbex-novedad-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.synbex-novedad-kind {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--synbex-primary);
}

.synbex-novedad-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--synbex-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.synbex-novedad-subtitle {
    font-size: 12.5px;
    color: var(--synbex-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.synbex-novedad-date {
    font-size: 12.5px;
    color: var(--synbex-text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Insertado por JS (tenant-logo.js) en el login cuando hay un logo guardado en
   el navegador de una sesión anterior — va en el CSS global (no en el .razor.css
   con scope de Blazor) porque un elemento creado por JS después de cargar la
   página no lleva el atributo de scope, así que el CSS aislado no lo alcanzaría. */
.login-brand-logo {
    max-width: 200px;
    margin: 0 auto;
    display: block;
}

/* Barra de navegación inferior en móvil (MobileTabBar.razor) — se define acá,
   en el CSS global, y no en el .razor.css aislado del componente: el <nav> se
   renderiza como un hijo flex más de `.dashboard` (junto al sidebar y al
   contenido), así que necesita `position:fixed` para salir de ese flujo, y
   puesto en el CSS global no hay ninguna duda de que la regla se aplica. */
.mobile-tabbar {
    display: none;
}

/* Modo "solo registro" (ej. Visitantes en celular): oculta el header de
   arriba y la barra de navegación de abajo (viven en otros componentes con
   su propio CSS aislado, por eso la regla va acá) para que la página activa
   llene toda la pantalla — ver Synbex.toggleFocusMode en fullscreen.js. */
body.synbex-focus-mode .dashboard-header,
body.synbex-focus-mode .dashboard-sidebar,
body.synbex-focus-mode .dashboard-nav-backdrop,
body.synbex-focus-mode .mobile-tabbar {
    display: none !important;
}

body.synbex-focus-mode .dashboard-main {
    padding-bottom: 16px !important;
}

/* El input nativo type="date" no se achica bien con solo width:100% dentro de
   un campo angosto — el navegador le impone un ancho mínimo propio y el
   contenido (ej. el día) queda cortado a la derecha. Mismo motivo que
   .cleaning-date-input, de uso general para cualquier campo de fecha. */
.synbex-date-input {
    min-width: 0;
    padding-right: 6px;
}

@media (max-width: 600px) {
    /* Isla flotante: separada de los tres bordes (abajo y los dos laterales),
       con esquinas redondeadas — a propósito ya NO llega de lado a lado ni
       queda pegada al fondo, así se ve como un elemento aparte flotando sobre
       el contenido, no como una barra fija de borde a borde.
       .is-compact (ver mobile-tabbar-scroll.js) la achica al deslizar hacia
       abajo y la devuelve a su tamaño normal al deslizar hacia arriba — el
       radio de las esquinas se queda igual en los dos estados, solo cambia el
       padding/tamaño interno, para que siga pareciendo la misma isla. */
    .mobile-tabbar {
        display: flex;
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        width: auto;
        box-sizing: border-box;
        z-index: 60;
        background: var(--synbex-surface);
        border: 1px solid var(--synbex-border);
        border-radius: 20px;
        padding: 6px 2px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
        transition: padding 0.2s ease;
    }

    /* Con el menú desplegable de la izquierda abierto, la isla se esconde (no
       tiene sentido verla flotando encima del cajón) — y vuelve a aparecer
       sola en cuanto se cierra. .dashboard-nav-toggle-input es el checkbox
       (sin JS) que ya controla ese cajón, ver DashboardLayout.razor. */
    .dashboard-nav-toggle-input:checked ~ .mobile-tabbar {
        display: none;
    }

    .mobile-tabbar.is-compact {
        padding: 4px 2px;
    }

    .mobile-tabbar-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 4px 1px;
        text-decoration: none;
        color: var(--synbex-text-muted);
        background: transparent;
        border: none;
        font-family: inherit;
        cursor: pointer;
        transition: padding 0.2s ease, gap 0.2s ease;
    }

    .mobile-tabbar.is-compact .mobile-tabbar-item {
        padding: 2px 1px;
        gap: 1px;
    }

    .mobile-tabbar-icon {
        display: flex;
        line-height: 1;
        position: relative;
    }

    .mobile-tabbar-icon svg {
        display: block;
        width: 21px;
        height: 21px;
        transition: width 0.2s ease, height 0.2s ease;
    }

    .mobile-tabbar.is-compact .mobile-tabbar-icon svg {
        width: 19px;
        height: 19px;
    }

    /* Notificación sin leer en alguna de las secciones de esta pestaña — punto
       naranja parpadeante sobre el ícono (el "abajo" del celular ya lo cubre la
       barra misma, que vive pegada al fondo de la pantalla). */
    .mobile-tabbar-item.has-unread .mobile-tabbar-icon::after {
        content: "";
        position: absolute;
        top: -1px;
        right: -3px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #d97706;
        border: 1.5px solid var(--synbex-surface);
        animation: mobile-nav-unread-blink 1.4s ease-in-out infinite;
    }

    @media (prefers-reduced-motion: reduce) {
        .mobile-tabbar-item.has-unread .mobile-tabbar-icon::after {
            animation: none;
        }
    }

    @keyframes mobile-nav-unread-blink {
        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);
        }
    }

    /* Sin recorte con "...": las etiquetas largas (Áreas comunes, Configuración)
       bajan a una segunda línea en vez de cortarse, para que siempre se lea el
       nombre completo y todos los botones se vean parejos entre sí. */
    .mobile-tabbar-label {
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1.15;
        white-space: normal;
        text-align: center;
        max-width: 100%;
        transition: font-size 0.2s ease;
    }

    .mobile-tabbar.is-compact .mobile-tabbar-label {
        font-size: 9px;
    }

    .mobile-tabbar-item.active {
        color: var(--synbex-primary);
    }

    .dashboard-main {
        padding-bottom: 120px;
    }
}

/* Modal flotante genérico (fondo desenfocado + tarjeta centrada) — usado por
   SettingsMenu (Tema/Mi cuenta) y por el reporte de Mi limpieza. Global porque
   más de un componente lo necesita. */
.settings-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 21, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 20px;
}

.settings-modal-dialog {
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--synbex-surface);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
    box-shadow: var(--synbex-shadow);
    animation: settings-modal-in 0.15s ease;
}

@keyframes settings-modal-in {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(6px);
    }

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

.settings-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--synbex-border);
}

.settings-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--synbex-text);
}

.settings-modal-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--synbex-text-muted);
}

.settings-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--synbex-radius-md);
    background: transparent;
    color: var(--synbex-text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.settings-modal-close:hover {
    background: var(--synbex-primary-soft);
    color: var(--synbex-text);
}

.settings-modal-body {
    padding: 18px;
}

/* Encabezado de "Mi cuenta": inicial(es) del nombre en un círculo, dentro de
   su propia tarjeta, junto al nombre completo y el rol/apartamento debajo. A
   propósito SIN ícono de cámara ni forma de subir foto — el residente no
   puede ponerse una foto de perfil. */
.account-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin-bottom: 20px;
    background: var(--synbex-bg);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
}

.account-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    font-weight: 700;
    font-size: 18px;
}

.account-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--synbex-text);
}

.account-role-line {
    font-size: 13px;
    color: var(--synbex-text-muted);
    margin-top: 2px;
}

.account-divider {
    border: none;
    border-top: 1px solid var(--synbex-border);
    margin: 16px 0;
}

/* Encabezado de sección (Información de contacto / Preferencias de
   notificaciones): ícono en caja redondeada + título + una línea de
   explicación debajo — a diferencia de .catalog-section-header (ícono suelto,
   sin subtítulo), que se usa en otras pantallas y no convenía tocar. */
.account-section-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 24px 0 14px;
}

.account-section-header:first-of-type {
    margin-top: 0;
}

.account-section-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--synbex-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

.account-section-icon svg {
    width: 19px;
    height: 19px;
}

.account-section-header h3 {
    margin: 0;
    font-size: 15px;
    color: var(--synbex-text);
}

.account-section-header p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

/* Cada campo (correo, celular, teléfono) con su propio ícono a la izquierda,
   alineado con la etiqueta y la caja del campo juntas. */
.account-field-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.account-field-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    margin-top: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

.account-field-icon svg {
    width: 16px;
    height: 16px;
}

.account-field-body {
    flex: 1;
    min-width: 0;
}

/* Correo: mismo aspecto de caja que los demás campos (igual que en el
   diseño), pero no editable — es un <p>, no un <input>. */
.account-readonly-value {
    margin: 0;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14.5px;
    color: var(--synbex-text);
    background: var(--synbex-bg);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
}

.account-channel-hint {
    font-size: 12px;
    color: var(--synbex-text-muted);
}

.account-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    background: var(--synbex-bg);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-md);
}

.account-toggle-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.account-toggle-desc {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--synbex-text-muted);
}

/* Panel "cristalizado": mismo fondo que ya tiene el modal detrás, con un
   tinte blanco translúcido apenas encima (aclara un poco en oscuro, casi
   imperceptible en claro) y borde visible — envuelve cada sección
   (Información de contacto / Preferencias de notificaciones) para que se
   distingan como paneles aparte, con el mismo estilo entre sí. */
.account-panel {
    padding: 16px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--synbex-border);
    border-radius: var(--synbex-radius-lg);
}

.account-panel:last-of-type {
    margin-bottom: 0;
}

.account-panel .account-toggle-row:last-child {
    margin-bottom: 0;
}

.account-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.account-actions .btn-synbex {
    flex: 1;
    justify-content: center;
}

.account-actions .btn-synbex svg {
    width: 16px;
    height: 16px;
}

.cleaning-report-modal-actions {
    display: flex;
    gap: 10px;
}

.cleaning-report-modal-actions .btn-synbex {
    flex: 1;
}

@media screen {
    .cleaning-report-preview.is-collapsed {
        display: none;
    }
}

/* Tarjeta móvil de "Mis mantenimientos" / "Mis reservas" — ícono de estado
   (arriba a la izquierda, sin fondo) coloreado según el estado del caso. */
.maintenance-status-icon {
    display: inline-flex;
    line-height: 1;
}

.maintenance-status-icon.is-pending {
    color: #d97706;
}

.maintenance-status-icon.is-inprogress {
    color: var(--synbex-primary);
}

.maintenance-status-icon.is-completed,
.maintenance-status-icon.is-confirmed {
    color: var(--synbex-success);
}

.maintenance-status-icon.is-rejected {
    color: var(--synbex-danger);
}

/* Franja superior de la tarjeta móvil: el mismo color que hay detrás del texto
   del badge (Pendiente/En progreso/Finalizado, o Pendiente/Confirmada/Rechazada
   en reservas) ahora cubre todo el ancho de esa primera fila (ícono + estado),
   y el resto de la tarjeta sigue blanca. Se estira con margen negativo para
   tapar el padding de .synbex-card y llegar hasta los bordes/esquinas
   redondeadas de arriba. Clase compartida por Mantenimiento y Reservas. */
.mobile-card-status-band {
    margin: -16px -16px 0;
    padding: 14px 16px;
    border-radius: var(--synbex-radius-lg) var(--synbex-radius-lg) 0 0;
}

.mobile-card-status-band.is-pending {
    background: rgba(217, 119, 6, 0.12);
}

.mobile-card-status-band.is-inprogress {
    background: var(--synbex-primary-soft);
}

.mobile-card-status-band.is-completed,
.mobile-card-status-band.is-confirmed {
    background: rgba(22, 163, 74, 0.12);
}

.mobile-card-status-band.is-rejected {
    background: var(--synbex-danger-soft);
}

/* El badge ya no necesita su propio fondo — la franja entera ya lleva ese
   mismo color, así que acá solo se ve como texto en negrita de color. */
.mobile-card-status-band .badge {
    background: transparent;
    padding: 0;
}

@media (max-width: 480px) {
    .mobile-card-status-band {
        margin: -14px -14px 0;
    }
}

@media (max-width: 600px) {
    .maintenance-new-request-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 15px;
        margin-top: 4px;
    }
}

/* Ícono redondo de "Mis mantenimientos": un solo ícono estándar (la llave
   inglesa) para todas las tarjetas — solo el color de fondo cambia según el
   estado, reutilizando los mismos tonos de .mobile-card-status-band. */
.mobile-card-icon.is-pending {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.mobile-card-icon.is-inprogress {
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

.mobile-card-icon.is-completed {
    background: rgba(22, 163, 74, 0.12);
    color: var(--synbex-success);
}

/* Fila de fechas de la tarjeta de mantenimiento: "Solicitada" y "Atención
   estimada" una debajo de la otra. */
.maintenance-date-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--synbex-border);
}

.maintenance-date-col {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.maintenance-date-value {
    font-size: 12.5px;
}

@media (max-width: 600px) {
    /* Más espacio entre cada tarjeta de mantenimiento, a pedido del usuario. */
    .maintenance-mobile-cards {
        gap: 22px;
    }
}

/* ======================================
   Diseño "Catálogo" — patrón reutilizable para pantallas simples de
   administración que agregan/eliminan ítems de una lista corta (campos de
   registro de visitantes, checklist de limpieza, puntos de entrada, etc.):
   encabezado con ícono + título + pastilla informativa a la derecha, tarjeta
   "Agregar nuevo X" con título en índigo + línea divisoria + grid de
   formulario + botón degradado, y tarjeta "X registrados" con pastilla de
   conteo + tabla con un ícono cuadrado por fila. Global (no scoped) a
   propósito, para reusarlo tal cual en varias páginas sin duplicar CSS.
   ====================================== */
.catalog-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Botón "Volver" de MobileBackButton.razor — solo en celular, de vuelta al
   hub de botones grandes (Mi unidad / Comunidad / Áreas comunes). Oculto en
   escritorio a propósito: ahí ya está el menú lateral siempre visible. */
.mobile-back-btn {
    display: none;
}

@media (max-width: 600px) {
    .mobile-back-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        width: fit-content;
        margin-bottom: 14px;
        padding: 8px 14px;
        border-radius: 999px;
        background: var(--synbex-primary);
        color: #fff;
        font-weight: 700;
        font-size: 13.5px;
        text-decoration: none;
    }

    .mobile-back-btn:active {
        background: var(--synbex-primary-hover);
    }

    .mobile-back-btn-icon {
        display: flex;
    }

    .mobile-back-btn-icon svg {
        width: 16px;
        height: 16px;
    }
}

.catalog-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.catalog-icon-box {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

/* Mismos colores que ya usan las tarjetas grandes de los hubs (hub-tile-icon),
   para que el ícono del encabezado de cada sub-página combine con el color que
   ya tenía su tarjeta en Comunidad/Áreas comunes/etc. */
.catalog-icon-box.is-orange {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.catalog-icon-box.is-teal {
    background: rgba(13, 148, 136, 0.12);
    color: var(--synbex-phone-link);
}

.catalog-icon-box.is-green {
    background: rgba(22, 163, 74, 0.12);
    color: var(--synbex-success);
}

.catalog-icon-box.is-red {
    background: var(--synbex-danger-soft);
    color: var(--synbex-danger);
}

.catalog-icon-box.is-slate {
    background: rgba(107, 114, 128, 0.14);
    color: var(--synbex-text-muted);
}

/* Ícono ("logo") del encabezado de Áreas comunes — oculto solo en celular a
   pedido del usuario. Clase propia (no .catalog-icon-box a secas) para no
   afectar las demás páginas que reusan ese mismo componente visual. */
@media (max-width: 600px) {
    .areas-comunes-icon-box {
        display: none;
    }
}

/* Tarjetas de Conjuntos: horizontales y una por fila (a diferencia de
   synbex-area-grid, que agrupa varias tarjetas cuadradas por fila) — con un
   avatar de la inicial del nombre en vez de una foto. Si esta prueba gusta,
   se replica en Usuarios y Pisos. */
.facility-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.facility-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
}

.facility-avatar {
    font-size: 22px;
    font-weight: 700;
}

.facility-card-body {
    flex: 1;
    min-width: 0;
}

.facility-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.facility-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .facility-card {
        flex-wrap: wrap;
    }

    .facility-card-actions {
        width: 100%;
        padding-left: 72px;
    }
}

.catalog-info-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.catalog-info-pill svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.catalog-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.catalog-section-header svg {
    width: 20px;
    height: 20px;
    color: var(--synbex-primary);
    flex-shrink: 0;
}

.catalog-section-header h3 {
    margin: 0;
    color: var(--synbex-primary);
    font-size: 16px;
}

.catalog-section-divider {
    height: 1px;
    background: var(--synbex-primary-soft);
    margin-bottom: 20px;
}

.catalog-add-btn {
    background: linear-gradient(135deg, var(--synbex-primary), #7c6ff0);
    color: #fff;
    font-weight: 700;
    border: none;
    margin-top: 4px;
}

.catalog-add-btn:hover {
    filter: brightness(1.08);
}

.catalog-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.catalog-count-pill {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.catalog-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    flex-shrink: 0;
}

.catalog-row-icon svg {
    width: 18px;
    height: 18px;
}

.catalog-row-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.catalog-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.catalog-delete-btn svg {
    width: 14px;
    height: 14px;
}

/* Tope de ancho para las páginas de "Diseño Catálogo": en computadora, todo el
   contenido (encabezado + tarjetas) ocupa como máximo el 60% del panel — en
   celular/tablet angosto no tendría sentido, así que ahí se deja a todo el
   ancho disponible. Global (no scoped) para poder reusarlo en Campos,
   Entradas, Visitantes frecuentes, Citas, No deseados, Permisos y Reportes. */
.catalog-page-container {
    width: 100%;
}

@media (min-width: 900px) {
    .catalog-page-container {
        max-width: 60%;
        margin: 0 auto;
    }
}
/* Sección bloqueada porque el conjunto no tiene ese módulo contratado
   (ver ModuleErrorBoundary.razor). Mismo lenguaje visual que catalog-icon-box. */
.module-blocked-card {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.module-blocked-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--synbex-radius-md);
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
}

.module-blocked-card .btn-synbex {
    margin-left: auto;
}

/* Botón "Mejorar plan" al pie del menú lateral: solo lo ven los administradores de
   empresa/conjunto y solo cuando les falta algún módulo (ver DashboardLayout). */
.dashboard-upgrade-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: var(--synbex-radius-md);
    border: 1px solid color-mix(in srgb, #d97706 45%, transparent);
    background: color-mix(in srgb, #d97706 12%, transparent);
    color: #b45309;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dashboard-upgrade-btn:hover {
    background: color-mix(in srgb, #d97706 22%, transparent);
    border-color: #d97706;
}

.dashboard-upgrade-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.dashboard-upgrade-icon svg {
    width: 18px;
    height: 18px;
}

.dashboard-upgrade-count {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #d97706;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (prefers-color-scheme: dark) {
    .dashboard-upgrade-btn { color: #fbbf24; }
}

[data-theme="dark"] .dashboard-upgrade-btn { color: #fbbf24; }
[data-theme="light"] .dashboard-upgrade-btn { color: #b45309; }

/* Pantalla "Mejorar plan": una tarjeta por módulo que le falta al conjunto. */
.upgrade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.upgrade-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.upgrade-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.upgrade-card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--synbex-text);
}

.upgrade-card-tagline {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--synbex-text-muted);
}

.upgrade-card-badge {
    margin-left: auto;
    flex-shrink: 0;
}

.upgrade-card-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upgrade-card-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--synbex-text);
}

.upgrade-card-check {
    flex-shrink: 0;
    display: inline-flex;
    color: #16a34a;
}

.upgrade-card-check svg {
    width: 16px;
    height: 16px;
}

.upgrade-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* ==========================================================================
   Pantalla de Monitoreo (solo SuperAdmin)
   ========================================================================== */
.monitor-status {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 20px;
    border-left: 4px solid var(--synbex-border);
}

.monitor-status.is-good { border-left-color: #16a34a; }
.monitor-status.is-bad { border-left-color: #dc2626; }

.monitor-status-headline {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.monitor-status-light {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 5px;
}

.monitor-status.is-good .monitor-status-light {
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
}

.monitor-status.is-bad .monitor-status-light {
    background: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18);
    animation: monitor-alert-pulse 1.6s ease-in-out infinite;
}

@keyframes monitor-alert-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18); }
    50% { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
    .monitor-status.is-bad .monitor-status-light { animation: none; }
}

.monitor-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--synbex-border);
}

.monitor-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.monitor-stat-number {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--synbex-text);
    font-variant-numeric: tabular-nums;
}

.monitor-stat-number.is-bad { color: #dc2626; }
.monitor-stat-number.is-warn { color: #d97706; }

.monitor-stat-label {
    font-size: 12px;
    color: var(--synbex-text-muted);
}

.monitor-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.monitor-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.monitor-entry {
    border-left: 3px solid var(--synbex-border);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.monitor-entry.level-error { border-left-color: #dc2626; }
.monitor-entry.level-advertencia { border-left-color: #d97706; }
.monitor-entry.level-actividad { border-left-color: #64748b; }

.monitor-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.monitor-entry-time {
    font-weight: 600;
    color: var(--synbex-text);
    white-space: nowrap;
}

.monitor-entry-source {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--synbex-primary-soft);
    color: var(--synbex-primary);
    font-weight: 600;
}

.monitor-entry-meta { color: var(--synbex-text-muted); }

.monitor-entry-message {
    margin: 0;
    font-size: 14px;
    color: var(--synbex-text);
    word-break: break-word;
}

.monitor-entry-details summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--synbex-text-muted);
}

.monitor-entry-details pre {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--synbex-surface-alt, rgba(127, 127, 127, 0.1));
    font-size: 11px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Barra de nivel de seguridad de la contraseña (ver password-strength.js).
   Solo informa: nunca impide guardar. */
/* Siempre ocupa su espacio (visibility, no display:none) — antes desaparecía
   del todo mientras el campo estaba vacío y aparecía de golpe al escribir,
   empujando todo lo de abajo y dando un salto visual. */
.pwd-strength {
    display: flex;
    visibility: hidden;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
}

.pwd-strength.is-visible { visibility: visible; }

.pwd-strength-track {
    height: 5px;
    border-radius: 999px;
    background: var(--synbex-border);
    overflow: hidden;
}

.pwd-strength-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 0.2s ease, background-color 0.2s ease;
}

/* display:block + line-height/min-height fijos (no "normal") — un <span> vacío
   puede medir un pelo distinto a uno con texto según la fuente, y eso era lo
   que seguía corriendo "Al menos 10 caracteres" hacia abajo un par de
   píxeles al aparecer el mensaje. Con altura fija, es exactamente la misma
   con o sin texto. */
.pwd-strength-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    min-height: 15px;
}

.pwd-strength[data-level="insegura"] .pwd-strength-fill { background: #dc2626; }
.pwd-strength[data-level="insegura"] .pwd-strength-label { color: #dc2626; }

.pwd-strength[data-level="normal"] .pwd-strength-fill { background: #d97706; }
.pwd-strength[data-level="normal"] .pwd-strength-label { color: #d97706; }

.pwd-strength[data-level="segura"] .pwd-strength-fill { background: #16a34a; }
.pwd-strength[data-level="segura"] .pwd-strength-label { color: #16a34a; }

@media (prefers-reduced-motion: reduce) {
    .pwd-strength-fill { transition: none; }
}

/* Aviso "confirma tu correo" en el panel (ver DashboardLayout). Solo informa, no
   bloquea nada — se puede cerrar y reaparece en el próximo inicio de sesión. */
.dashboard-email-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 24px 12px;
}

.dashboard-email-banner-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.dashboard-email-banner-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: inherit;
    opacity: 0.6;
    padding: 4px;
}

.dashboard-email-banner-close:hover { opacity: 1; }