/**
 * Fundacion visual compartida del Panel Admin (Fase 14) — tipografias y
 * colores como variables CSS, pensadas para reusarse en TODAS las
 * paginas del panel: este Hero (/admin-home) y las paginas de contenido
 * que se arman en pedidos separados despues (Archivos, Avisos,
 * Consultas, Cuentas).
 *
 * Mismo criterio de asset estatico que assets/js/saxum-scope-selector.js:
 * se sirve con SAXUM_PLUGIN_URL y cache-busting por filemtime() (ver
 * quien la encola, ej. SAXUM_Auth::render_admin_home_hero()). Las
 * tipografias (Google Fonts) se cargan aparte, con un <link> propio en
 * el <head> de cada pagina — mismo criterio "CDN sin build step" que ya
 * usa Alpine.js.
 *
 * Deliberadamente minimo por ahora (solo tipografia + paleta base, sin
 * componentes) — se va a ir refinando pagina por pagina, no es un
 * sistema de diseno completo todavia.
 */

:root {

    /* Blanco y gris: dominante, la mayor parte de cada pagina (fondos,
       texto secundario). */
    --saxum-color-white: #FFFFFF;
    --saxum-color-gray-light: #F4F5F7;
    /* Corregido a #757575 el 2026-09-12 (ajuste de precisión sobre
       /admin-home, ver CONTEXTO.md) — "el gris estándar para todo texto
       gris de acá en adelante", pedido explícito del usuario. Token
       corregido en vez de un valor suelto: ya era la única fuente de
       verdad para el gris en todo el Panel. */
    --saxum-color-gray: #757575;
    --saxum-color-gray-border: #E2E5EA;

    /* Secundario: detalles y elementos importantes. Dos variantes para
       poder elegir contraste segun el fondo de cada contexto (variante
       clara sobre fondo oscuro, variante oscura sobre fondo claro).
       --saxum-color-secondary-light corregido a #1B3C59 el 2026-09-12
       (ajuste de precision sobre /admin-home, ver CONTEXTO.md): valor
       exacto pedido por el usuario para "el azul" (barra lateral,
       bordes, flecha de Proyecto, barra de Torre, encabezado de
       Notificaciones) — antes no coincidia exacto (#224B7E). Se corrigio
       el TOKEN (no un valor hardcodeado en cada selector) porque ya era
       la unica fuente de verdad que usaba la barra lateral en TODAS las
       paginas del Panel, no solo el Hero. Reemplazado de nuevo a
       #1C4768 el 2026-09-13 (tercera tanda de correcciones sobre
       /admin-home, ver CONTEXTO.md) — mismo criterio, un solo token a
       corregir, sin valores sueltos que buscar (se grepeo el proyecto
       entero para confirmarlo). --saxum-color-
       secondary-dark NO se tocó: se usa como color de TEXTO en todo el
       Panel (h1, titulos de tarjeta, etc.), no era parte del pedido. */
    --saxum-color-secondary-light: #1C4768;
    --saxum-color-secondary-dark: #0C1827;

    /* Acento: detalles chicos (links, hover, badges puntuales). */
    --saxum-color-accent: #2985C3;

    /* Montserrat: h1, h2. Barlow: h3-h6 y todo el texto de cuerpo
       (parrafos, labels, botones, etc). */
    --saxum-font-heading: 'Montserrat', sans-serif;
    --saxum-font-body: 'Barlow', sans-serif;

    /* Radios de borde (agregado 2026-09-11, ajuste visual del Hero-
       dashboard contra el mockup real — ver CONTEXTO.md): pildora
       completa para buscadores/filtros/botones de acento, tarjeta para
       filas de Proyecto/Unidad. Token nuevo en vez de hardcodear el
       valor en cada selector — confirmado con el usuario antes de
       aplicar. Por ahora solo los usa el Hero (/admin-home); el resto
       del Panel sigue con el radio chico (4px) hasta que le toque en un
       pedido futuro. */
    --saxum-radius-pill: 999px;
    --saxum-radius-card: 12px;

    /* Sombra y timing de transicion (agregado 2026-09-14, pasada de
       modernizacion no estructural sobre el Panel — ver CONTEXTO.md):
       sombra sutil para separar tarjetas del fondo gris sin romper el
       estilo flat existente, y una sola duracion/easing para hover/focus
       en todo el Panel en vez de valores sueltos por componente. */
    --saxum-shadow-card: 0 1px 3px rgba(12, 24, 39, 0.08), 0 1px 2px rgba(12, 24, 39, 0.05);
    --saxum-transition-fast: 150ms ease;
}

body {
    margin: 0;
    background: var(--saxum-color-white);
    color: var(--saxum-color-secondary-dark);
    font-family: var(--saxum-font-body);
}

h1, h2 {
    font-family: var(--saxum-font-heading);
}

h3, h4, h5, h6,
p, label, span, li, td, th,
button, input, select, textarea, a {
    font-family: var(--saxum-font-body);
}

a {
    color: var(--saxum-color-accent);
    text-decoration: none;
    transition: color var(--saxum-transition-fast), background-color var(--saxum-transition-fast);
}

a:hover {
    color: var(--saxum-color-secondary-light);
    text-decoration: underline;
}

/* Foco de teclado visible en todo el Panel (agregado 2026-09-14):
   ninguna pagina definia :focus-visible propio, asi que sin esto no
   habia indicador de foco en absoluto para navegacion por teclado.
   Selector global en la fundacion compartida en vez de repetirlo por
   componente/pagina. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--saxum-color-accent);
    outline-offset: 2px;
}

/* Transiciones + sombra de componentes compartidos del Panel (agregado
   2026-09-14): estos selectores ya existen, duplicados, en el <style>
   inline de cada pagina (sidebar, tarjetas de dashboard, botones de
   accion) — ver CONTEXTO.md. En vez de tocar cada archivo, se agregan
   acá una sola vez: como esta hoja se carga en TODAS las paginas del
   Panel (ver docblock de arriba) y estas reglas solo suman propiedades
   nuevas (transition/box-shadow) sin pisar ninguna ya definida inline,
   el orden de carga entre esta hoja y el <style> de cada pagina no
   importa. */
.saxum-sidebar-item,
.saxum-dashboard-card-header a,
.saxum-panel-btn,
.saxum-action-pill,
.saxum-icon-btn,
.saxum-quick-menu button,
.saxum-picker-row,
.saxum-modal-close,
.saxum-auth-btn {
    transition: background var(--saxum-transition-fast), background-color var(--saxum-transition-fast), color var(--saxum-transition-fast), opacity var(--saxum-transition-fast);
}

/* Definición completa de .saxum-dashboard-card + variantes de header
   (pedido explícito del usuario, ver CONTEXTO.md: diferenciar las
   pantallas de "más información" de cada entidad sin agregar íconos
   ni colores nuevos). Hasta ahora esta tarjeta solo la definía por
   completo /admin-home (class-saxum-auth.php, inline, sigue igual,
   no se toca — el mismo valor ahí no cambia nada visualmente). Se
   centraliza acá para que Proyecto/Cuenta/Unidad puedan usar la
   MISMA tarjeta "de dashboard" (borde suave + sombra + radio grande)
   para la sección más importante de cada una — mismo criterio ya
   confirmado con el usuario en /admin-home: "Notificaciones
   recientes" (is-solid) y "Consultas recientes" (is-outline-bar) son
   la misma tarjeta con cabeceras a propósito distintas, no una
   inconsistencia. El resto de cada página sigue usando
   .saxum-action-card (caja lisa de 4px) sin cambios, así los botones/
   formularios se ven y comportan igual en todos lados. */
.saxum-dashboard-card {
    background: var(--saxum-color-white);
    border: 1px solid var(--saxum-color-gray-border);
    border-radius: var(--saxum-radius-card);
    padding: 20px;
    overflow: hidden;
    box-shadow: var(--saxum-shadow-card);
}
.saxum-dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.saxum-dashboard-card-header h2 { font-size: 16px; margin: 0; color: var(--saxum-color-secondary-dark); }
.saxum-dashboard-card-header a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.saxum-dashboard-card-header.is-solid {
    background: var(--saxum-color-secondary-light);
    margin: -20px -20px 14px;
    padding: 14px 20px;
}
.saxum-dashboard-card-header.is-solid h2,
.saxum-dashboard-card-header.is-solid a { color: var(--saxum-color-white); }
.saxum-dashboard-card-header.is-outline-bar {
    /* Sección 59: sin el recuadro azul dentro de la tarjeta (pastilla
       dentro de pastilla): título con una línea azul debajo. */
    background: var(--saxum-color-white);
    color: var(--saxum-color-secondary-dark);
    border: none;
    border-bottom: 2px solid var(--saxum-color-secondary-light);
    border-radius: 0;
    margin: -4px 0 10px;
    padding: 0 0 10px;
}

/* Centrado del SVG dentro de .saxum-icon-btn (agregado 2026-09-14, junto
   con el reemplazo de emojis/caracteres sueltos por SVG en los botones
   de accion rapida — ver CONTEXTO.md): .saxum-icon-btn no definia
   display propio (quedaba en el inline-block por defecto de <button>),
   suficiente para un caracter de texto pero deja al SVG con el hueco de
   ~4px que agregan los elementos inline por default. display:flex
   centra el ícono sin tocar el resto de la regla (padding/color/hover)
   que sigue viviendo en el <style> de cada pagina. */
.saxum-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Pasada de diseño 2026-09-18 (ver CONTEXTO.md): Consultas/Archivos/
   Comunicados comparten el mismo "cascarón" visual (buscador+filtros+
   carpetas) y se confundían entre sí. Se agrega acá — una sola vez,
   para las 3 páginas a la vez, mismo criterio que el resto de este
   archivo — un ícono de módulo junto al título (reusa el mismo SVG
   que ya tiene cada ítem de la barra lateral, ver get_sidebar_icon_svg()
   en class-saxum-auth.php) y un ícono chico por fila que marca de un
   vistazo qué tipo de contenido es. Ninguna función nueva: mismos
   botones, mismos campos, mismo JS de cada página.
   ============================================================ */
.saxum-page-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--saxum-color-secondary-light);
    color: var(--saxum-color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--saxum-shadow-card);
}
.saxum-page-icon svg { width: 18px; height: 18px; display: block; }

.saxum-row-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--saxum-color-gray-light);
    color: var(--saxum-color-secondary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.saxum-row-icon svg { width: 15px; height: 15px; display: block; }

/* Etiqueta de Alcance como "chip" en vez de texto gris suelto — mismo
   criterio que .saxum-pending-badge de Consultas, aplicado a la línea
   de Alcance de las filas de Archivo/Aviso. */
.saxum-scope-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--saxum-color-gray-light);
    border: 1px solid var(--saxum-color-gray-border);
    border-radius: var(--saxum-radius-pill);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--saxum-color-secondary-light);
    margin-top: 4px;
}

/* Línea de fecha ("Subido: dd/mm/aaaa hh:mm") de las filas de
   Archivo/Comunicado: texto gris suelto, sin pastilla — a diferencia
   del chip de Alcance, la fecha es dato secundario. */
.saxum-date-line {
    font-size: 11px;
    font-weight: 500;
    color: var(--saxum-color-gray);
    margin-top: 2px;
}

/* ============================================================
   Modal de "Editar/Agregar Alcance" (Archivos y Comunicados): mismo
   formulario y mismo saxum-scope-selector.js de siempre, rediseñado
   visualmente. Se activa envolviendo el .saxum-modal-overlay existente
   con la clase .saxum-alcance-modal — así ningún otro modal del Panel
   (detalle de Ticket, Vincular Unidad, etc.) se ve afectado. Campos:
   fieldset.saxum-alcance-fields pasa a grid de 2 columnas; los <label>
   que ya envolvían cada <select> (sin tocar su estructura ni sus
   x-model/@change) se estilizan como celda de grid.
   ============================================================ */
.saxum-alcance-modal .saxum-modal-box {
    padding: 0;
    max-width: 560px;
    border-radius: var(--saxum-radius-card);
    box-shadow: 0 20px 50px rgba(12, 24, 39, 0.22);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.saxum-alcance-head {
    flex: 0 0 auto;
    background: var(--saxum-color-secondary-dark);
    color: var(--saxum-color-white);
    padding: 20px 26px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.saxum-alcance-head-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
}
.saxum-alcance-head-icon svg { width: 17px; height: 17px; display: block; }
.saxum-alcance-head h3 { margin: 0; font-size: 17px; }
.saxum-alcance-head-sub { font-size: 12px; color: #A9BCCB; margin-top: 2px; font-family: var(--saxum-font-body); word-break: break-word; }
.saxum-alcance-body { flex: 1 1 auto; overflow-y: auto; padding: 24px 26px 26px; }

.saxum-alcance-check-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--saxum-color-gray-light);
    border-radius: var(--saxum-radius-card);
    padding: 12px 14px;
    margin-bottom: 16px;
    cursor: pointer;
}
.saxum-alcance-check-card input[type=checkbox] { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--saxum-color-secondary-light); }
.saxum-alcance-check-title { display: block; font-weight: 600; font-size: 13.5px; color: var(--saxum-color-secondary-dark); }
.saxum-alcance-check-sub { display: block; font-size: 11.5px; color: var(--saxum-color-gray); margin-top: 2px; line-height: 1.4; }
.saxum-alcance-check-compact { margin-top: -4px; }

.saxum-alcance-search-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.saxum-alcance-field-label-text { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--saxum-color-gray); }
.saxum-alcance-search-field input[type=text] {
    border: 1px solid var(--saxum-color-gray-border);
    border-radius: var(--saxum-radius-pill);
    padding: 9px 15px;
    font-size: 13.5px;
    box-sizing: border-box;
}

fieldset.saxum-alcance-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    border: none;
    padding: 0;
    margin: 0;
}
.saxum-alcance-fields .saxum-field-full { grid-column: 1 / -1; }
.saxum-alcance-fields > label,
.saxum-alcance-fields > div:not(.saxum-alcance-section-label) {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--saxum-color-gray);
}
.saxum-alcance-fields > label br { display: none; }
.saxum-alcance-fields select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--saxum-color-gray-border);
    border-radius: var(--saxum-radius-pill);
    padding: 9px 30px 9px 15px;
    font-size: 13.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--saxum-color-secondary-dark);
    background-color: var(--saxum-color-white);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232985C3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px;
}
.saxum-alcance-fields select:disabled { opacity: 0.55; }
.saxum-alcance-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--saxum-color-secondary-light);
    margin: 6px 0 0;
    padding-top: 14px;
    border-top: 1px dashed var(--saxum-color-gray-border);
}

.saxum-alcance-btnrow { display: flex; gap: 10px; margin-top: 22px; }
.saxum-btn-primary {
    background: var(--saxum-color-secondary-light);
    color: var(--saxum-color-white);
    border: none;
    border-radius: var(--saxum-radius-pill);
    padding: 11px 24px;
    font-family: var(--saxum-font-body);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.saxum-btn-primary:hover { background: var(--saxum-color-secondary-dark); }
/* Deshabilitado (agregado 2026-10-05, sección 38): antes se veía igual que activo. */
.saxum-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; background: var(--saxum-color-secondary-light); }
.saxum-btn-ghost {
    background: transparent;
    color: var(--saxum-color-gray);
    border: none;
    border-radius: var(--saxum-radius-pill);
    padding: 11px 18px;
    font-family: var(--saxum-font-body);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.saxum-btn-ghost:hover { color: var(--saxum-color-secondary-dark); background: var(--saxum-color-gray-light); }

/* Bug real (ver CONTEXTO.md): con Alpine cargado por <script defer>
   desde un CDN externo, el navegador pinta el HTML ya parseado antes
   de que Alpine termine de bajar/ejecutar — cualquier elemento con
   x-show (queda siempre en el DOM con su display por defecto, o el
   que fuerce su propia clase/estilo) se ve un instante suelto al
   entrar a cualquier pagina del Panel (modales, wizards, formularios
   plegables). x-cloak lo oculta por CSS hasta que Alpine arranca y
   se lo saca solo. Centralizado aca porque este archivo se encola en
   TODAS las paginas del Panel Admin/Cliente — no duplicar esta regla
   por pagina. */
[x-cloak] { display: none !important; }

/* Links legales dentro del menú "Perfil" de la barra lateral (agregado
   2026-09-25, ver SAXUM_Legal y CONTEXTO.md sección 25): discretos,
   debajo de "Cerrar sesión". */
.saxum-user-indicator-legal { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--saxum-color-gray-border); font-size: 12px; color: var(--saxum-color-gray); }
.saxum-user-indicator-legal a { color: var(--saxum-color-gray); text-decoration: underline; text-underline-offset: 2px; }

/* Sistema de botones de pagina (pedido 2026-09-26, ver CONTEXTO.md):
   tres jerarquias visualmente distintas en vez de todo "pildora con
   borde", que hacia que en Consultas no se distinguiera navegar de
   filtrar de crear.
   1) .saxum-primary-action — la accion principal de la pagina (crear
      algo nuevo): "Enviar Mensaje" (Consultas), "Subir archivo"
      (Archivos), "Subir Comunicado" (Comunicados). Rellena + icono "+".
      Si se cambia una, cambian las tres (es la misma clase).
   2) .saxum-nav-link — arriba a la derecha del titlebar, lleva a otra
      vista/pagina: "Chat cerrados", "Archivados", "Estadisticas",
      "Volver a...". Sin borde, texto + icono + flecha, fondo solo al
      hover: se lee como link, no como boton de accion.
   3) Los filtros (ej. "Sin responder") usan su propio chip en cada
      pagina, alineado con los <select> de la barra de filtros. */
.saxum-primary-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--saxum-color-secondary-light);
    color: var(--saxum-color-white);
    border: none;
    border-radius: var(--saxum-radius-pill);
    padding: 10px 20px 10px 16px;
    font-family: var(--saxum-font-body);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(12, 24, 39, 0.18);
    text-decoration: none;
    transition: background var(--saxum-transition-fast), box-shadow var(--saxum-transition-fast), transform var(--saxum-transition-fast);
}
.saxum-primary-action svg { width: 16px; height: 16px; flex: 0 0 auto; }
.saxum-primary-action:hover { background: var(--saxum-color-secondary-dark); color: var(--saxum-color-white); box-shadow: 0 4px 10px rgba(12, 24, 39, 0.22); text-decoration: none; }
.saxum-primary-action:active { transform: translateY(1px); }
/* Sección 58, bloque 9: el botón de crear de una lista va al final de la
   fila de filtros, a la derecha (como "Subir archivo"), nunca al lado del
   título. En celular baja a su propia línea. */
.saxum-filters-actions { display: flex; gap: 10px; margin-left: auto; align-self: flex-end; }
@media (max-width: 700px) {
    .saxum-filters-actions { margin-left: 0; width: 100%; }
}
.saxum-primary-action:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
/* Sección 58, bloque 3: el mismo botón, cuando su formulario está abierto
   y pasa a decir "Cancelar", se ve como secundario (trazo gris). */
.saxum-primary-action.is-cancel,
.saxum-primary-action.is-cancel:hover { background: var(--saxum-color-white); color: var(--saxum-color-secondary-dark); box-shadow: inset 0 0 0 1px var(--saxum-color-gray-border); }
.saxum-primary-action.is-cancel:hover { background: var(--saxum-color-gray-light); }

.saxum-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: var(--saxum-color-secondary-light);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: var(--saxum-font-body);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--saxum-transition-fast), color var(--saxum-transition-fast);
}
.saxum-nav-link svg { width: 16px; height: 16px; flex: 0 0 auto; }
.saxum-nav-link .saxum-nav-link-arrow { transition: transform var(--saxum-transition-fast); }
.saxum-nav-link:hover { background: var(--saxum-color-gray-light); color: var(--saxum-color-secondary-dark); text-decoration: none; }
.saxum-nav-link:hover .saxum-nav-link-arrow { transform: translateX(2px); }
.saxum-nav-link.is-active { background: var(--saxum-color-gray-light); color: var(--saxum-color-secondary-dark); }

/* Wizard compartido (pedido 2026-09-26, ver CONTEXTO.md sección 27):
   "Crear Proyecto" (/admin-proyectos) y "Crear unidades"
   (/admin-unidades) usan EXACTAMENTE estas clases, para que se vean
   iguales. Clases propias (.saxum-wizard-*) en vez de reusar
   .saxum-modal-box: esa clase la redefine inline cada página con
   valores distintos (radio 4px vs 24px), y el <style> inline se carga
   después de esta hoja, así que la pisaría. El overlay
   (.saxum-modal-overlay) y la "×" (.saxum-modal-close) siguen siendo
   los de cada página. */
.saxum-wizard-box {
    position: relative;
    background: var(--saxum-color-white);
    width: 90%;
    max-width: 680px;
    max-height: 90vh;
    overflow: auto;
    box-sizing: border-box;
    padding: 28px 32px 24px;
    border-radius: 24px;
    border: 3px solid var(--saxum-color-secondary-light);
}
.saxum-wizard-title { margin: 0 0 4px; font-family: var(--saxum-font-heading); font-size: 20px; color: var(--saxum-color-secondary-dark); }
.saxum-wizard-context { margin: 0 0 20px; font-size: 13.5px; color: var(--saxum-color-gray); }
.saxum-wizard-context strong { color: var(--saxum-color-secondary-dark); }

/* Etiqueta DEBAJO de cada punto y líneas elásticas entre puntos: con
   5-6 pasos, etiqueta al costado no entraba en una sola fila. */
.saxum-wizard-progress {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--saxum-color-gray-border);
}
.saxum-wizard-progress-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; max-width: 96px; text-align: center; }
.saxum-wizard-progress-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid var(--saxum-color-gray-border);
    color: var(--saxum-color-gray);
    flex: 0 0 auto;
    box-sizing: border-box;
}
.saxum-wizard-progress-step.is-active .saxum-wizard-progress-dot,
.saxum-wizard-progress-step.is-done .saxum-wizard-progress-dot {
    border-color: var(--saxum-color-secondary-light);
    background: var(--saxum-color-secondary-light);
    color: var(--saxum-color-white);
}
.saxum-wizard-progress-label { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--saxum-color-gray); }
.saxum-wizard-progress-step.is-active .saxum-wizard-progress-label,
.saxum-wizard-progress-step.is-done .saxum-wizard-progress-label { color: var(--saxum-color-secondary-dark); }
.saxum-wizard-progress-line { flex: 1 1 auto; min-width: 12px; height: 2px; margin-top: 11px; background: var(--saxum-color-gray-border); }
.saxum-wizard-progress-line.is-done { background: var(--saxum-color-secondary-light); }

/* Campos: etiqueta chica arriba + input redondeado. Todo prefijado con
   .saxum-wizard-box para ganarle a reglas de página: el Wizard de
   "Crear Proyecto" vive DENTRO de .saxum-filters (su x-data está en la
   barra de filtros), y `.saxum-filters label/input/select` —definidas
   inline, cargadas después de esta hoja— lo pisaban. */
.saxum-wizard-box .saxum-wizard-field { display: block; min-width: 0; margin: 0 0 14px; }
.saxum-wizard-box .saxum-wizard-field > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--saxum-color-secondary-dark); }
.saxum-wizard-box .saxum-wizard-field input[type=text],
.saxum-wizard-box .saxum-wizard-field input[type=number],
.saxum-wizard-box .saxum-wizard-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--saxum-color-gray-border);
    border-radius: 10px;
    background: var(--saxum-color-white);
    font-family: var(--saxum-font-body);
    font-size: 14px;
    color: var(--saxum-color-secondary-dark);
    height: auto;
    line-height: 1.3;
}
.saxum-wizard-box .saxum-wizard-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232985C3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}
.saxum-wizard-box .saxum-wizard-field input:focus,
.saxum-wizard-box .saxum-wizard-field select:focus { outline: none; border-color: var(--saxum-color-accent); box-shadow: 0 0 0 3px rgba(41, 133, 195, 0.15); }
.saxum-wizard-box .saxum-wizard-field select:disabled { background-color: var(--saxum-color-gray-light); color: var(--saxum-color-gray); }
.saxum-wizard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; gap: 0 14px; }
.saxum-wizard-hint { margin: -6px 0 14px; font-size: 12px; color: var(--saxum-color-gray); }
.saxum-wizard-radio-group { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 14px; font-size: 14px; }
.saxum-wizard-box .saxum-wizard-radio-group label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; min-width: 0; width: auto; cursor: pointer; }

/* Tarjetas de elección (ej. "Una unidad" / "Varias unidades"). */
.saxum-wizard-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.saxum-wizard-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
    background: var(--saxum-color-white);
    border: 2px solid var(--saxum-color-gray-border);
    border-radius: 16px;
    padding: 18px;
    cursor: pointer;
    font-family: var(--saxum-font-body);
    transition: border-color var(--saxum-transition-fast), background var(--saxum-transition-fast);
}
.saxum-wizard-choice:hover { border-color: var(--saxum-color-secondary-light); background: var(--saxum-color-gray-light); }
.saxum-wizard-choice-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--saxum-color-gray-light);
    color: var(--saxum-color-secondary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.saxum-wizard-choice:hover .saxum-wizard-choice-icon { background: var(--saxum-color-secondary-light); color: var(--saxum-color-white); }
.saxum-wizard-choice-icon svg { width: 20px; height: 20px; }
.saxum-wizard-choice-title { font-size: 15px; font-weight: 600; color: var(--saxum-color-secondary-dark); }
.saxum-wizard-choice-sub { font-size: 12.5px; line-height: 1.4; color: var(--saxum-color-gray); }

/* Resumen / previsualización. */
.saxum-wizard-summary {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--saxum-color-gray-light);
    font-size: 14px;
}
.saxum-wizard-summary-row { margin: 0 0 6px; font-size: 14px; color: var(--saxum-color-secondary-dark); }
.saxum-wizard-summary-row:last-child { margin-bottom: 0; }
.saxum-wizard-preview-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--saxum-color-gray-border);
    border-radius: 12px;
    background: var(--saxum-color-gray-light);
}
.saxum-wizard-preview-list li { padding: 6px 14px; font-size: 13px; color: var(--saxum-color-secondary-dark); border-bottom: 1px solid var(--saxum-color-gray-border); }
.saxum-wizard-preview-list li:last-child { border-bottom: none; }
.saxum-wizard-error { color: #B3261E; font-size: 13px; margin: 0 0 12px; }
.saxum-wizard-success { color: var(--saxum-color-secondary-dark); font-size: 15px; font-weight: 600; margin: 0 0 16px; }

/* Botonera: "Atrás"/"Omitir" a la izquierda como ghost, la acción que
   avanza a la derecha como .saxum-primary-action. */
.saxum-wizard-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--saxum-color-gray-border); }
.saxum-wizard-actions-end { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.saxum-wizard-actions .saxum-primary-action:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.saxum-wizard-actions .saxum-btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }

/* Contador de la barra lateral (agregado 2026-09-29, CONTEXTO.md sección
   31): hoy solo lo usa "Reservas" (reservas nuevas que el admin no vio).
   Va acá y no en el <style> inline de la barra porque esta hoja se carga
   en todas las páginas del Panel. margin-left:auto lo empuja al borde
   derecho del ítem. */
.saxum-sidebar-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: var(--saxum-radius-pill);
    background: var(--saxum-color-accent);
    color: var(--saxum-color-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* =====================================================================
   Patrones generales de texto largo, modales y listas (agregado
   2026-10-02, CONTEXTO.md sección 36). Valen para TODAS las pantallas
   del Panel (admin y cliente cargan esta hoja); las pantallas nuevas no
   tienen que repetirlos.
   ===================================================================== */

/* 1. Texto que escribe la gente (mensajes, notas, comunicados,
   descripciones): una palabra o un link larguísimo sin espacios corta
   donde haga falta en vez de salirse del contorno. overflow-wrap se
   hereda: alcanza con ponerlo en body. */
body { overflow-wrap: break-word; }

/* Globos de chat y notas: además, "anywhere" baja el ancho mínimo del
   contenido (un globo o una columna flex nunca se estira por una
   palabra larga) y min-width: 0 deja que el ítem flex se achique. */
.saxum-chat-bubble,
.saxum-chat-bubble-content,
.saxum-note-item,
.saxum-note-content,
.saxum-user-text {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

/* Contador de caracteres (assets/js/saxum-char-counter.js). */
.saxum-char-count {
    margin: 4px 6px 0;
    font-size: 12px;
    color: var(--saxum-color-gray);
    text-align: right;
}
.saxum-char-count.is-limit { color: #b00020; font-weight: 600; }

/* 2. Barra de scroll de modales y listas con scroll: fina, redondeada y
   con el riel corrido 20px arriba y abajo para que no pise las esquinas
   redondeadas del borde (antes quedaba un rectángulo recto encima del
   trazo). Chrome/Edge/Safari: ::-webkit-scrollbar. Firefox no tiene esos
   pseudo-elementos: barra fina del sistema (scrollbar-width), que ya
   respeta el radio. Se separa con @supports porque Chrome ignora
   ::-webkit-scrollbar si además hay scrollbar-width/scrollbar-color. */
.saxum-modal-box::-webkit-scrollbar,
.saxum-wizard-box::-webkit-scrollbar,
.saxum-rsv-modal::-webkit-scrollbar,
.saxum-ticket-wizard-box::-webkit-scrollbar,
.saxum-detail-body::-webkit-scrollbar,
.saxum-alcance-body::-webkit-scrollbar,
.saxum-chat-thread::-webkit-scrollbar,
.saxum-notes-list::-webkit-scrollbar,
.saxum-canned-list::-webkit-scrollbar,
.saxum-picker-list::-webkit-scrollbar,
.saxum-units-scroll::-webkit-scrollbar,
.saxum-wizard-preview-list::-webkit-scrollbar,
.saxum-composer-input::-webkit-scrollbar { width: 10px; height: 10px; }

.saxum-modal-box::-webkit-scrollbar-track,
.saxum-wizard-box::-webkit-scrollbar-track,
.saxum-rsv-modal::-webkit-scrollbar-track,
.saxum-ticket-wizard-box::-webkit-scrollbar-track { background: transparent; margin: 20px 0; }

.saxum-detail-body::-webkit-scrollbar-track,
.saxum-alcance-body::-webkit-scrollbar-track,
.saxum-chat-thread::-webkit-scrollbar-track,
.saxum-notes-list::-webkit-scrollbar-track,
.saxum-canned-list::-webkit-scrollbar-track,
.saxum-picker-list::-webkit-scrollbar-track,
.saxum-units-scroll::-webkit-scrollbar-track,
.saxum-wizard-preview-list::-webkit-scrollbar-track,
.saxum-composer-input::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }

.saxum-modal-box::-webkit-scrollbar-thumb,
.saxum-wizard-box::-webkit-scrollbar-thumb,
.saxum-rsv-modal::-webkit-scrollbar-thumb,
.saxum-ticket-wizard-box::-webkit-scrollbar-thumb,
.saxum-detail-body::-webkit-scrollbar-thumb,
.saxum-alcance-body::-webkit-scrollbar-thumb,
.saxum-chat-thread::-webkit-scrollbar-thumb,
.saxum-notes-list::-webkit-scrollbar-thumb,
.saxum-canned-list::-webkit-scrollbar-thumb,
.saxum-picker-list::-webkit-scrollbar-thumb,
.saxum-units-scroll::-webkit-scrollbar-thumb,
.saxum-wizard-preview-list::-webkit-scrollbar-thumb,
.saxum-composer-input::-webkit-scrollbar-thumb {
    background-color: #C5CED8;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
.saxum-modal-box::-webkit-scrollbar-thumb:hover,
.saxum-wizard-box::-webkit-scrollbar-thumb:hover,
.saxum-rsv-modal::-webkit-scrollbar-thumb:hover,
.saxum-ticket-wizard-box::-webkit-scrollbar-thumb:hover,
.saxum-detail-body::-webkit-scrollbar-thumb:hover,
.saxum-alcance-body::-webkit-scrollbar-thumb:hover,
.saxum-chat-thread::-webkit-scrollbar-thumb:hover,
.saxum-notes-list::-webkit-scrollbar-thumb:hover,
.saxum-canned-list::-webkit-scrollbar-thumb:hover,
.saxum-picker-list::-webkit-scrollbar-thumb:hover,
.saxum-units-scroll::-webkit-scrollbar-thumb:hover,
.saxum-wizard-preview-list::-webkit-scrollbar-thumb:hover,
.saxum-composer-input::-webkit-scrollbar-thumb:hover { background-color: #9AA8B6; }

@supports not selector(::-webkit-scrollbar) {
    .saxum-modal-box, .saxum-wizard-box, .saxum-rsv-modal, .saxum-ticket-wizard-box,
    .saxum-detail-body, .saxum-alcance-body, .saxum-chat-thread, .saxum-notes-list,
    .saxum-canned-list, .saxum-picker-list, .saxum-units-scroll, .saxum-wizard-preview-list,
    .saxum-composer-input {
        scrollbar-width: thin;
        scrollbar-color: #C5CED8 transparent;
    }
}

/* 3. Selector de listas largas (ej. elegir cuenta al iniciar una
   Consulta): nunca una lista con TODO de una. Regla general — un botón
   abre una ventana aparte con buscador + resultados paginados del
   servidor (ver CONTEXTO.md sección 36). */
/* Encima de cualquier otra ventana (se abre desde adentro de un wizard). */
.saxum-modal-overlay.saxum-picker-overlay { z-index: 1050; }
.saxum-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid var(--saxum-color-gray-border);
    border-radius: 10px;
    background: var(--saxum-color-white);
    font-family: var(--saxum-font-body);
    font-size: 14px;
    color: var(--saxum-color-secondary-dark);
    text-align: left;
    cursor: pointer;
}
.saxum-picker-trigger:hover { border-color: var(--saxum-color-secondary-light); }
.saxum-picker-trigger .is-placeholder { color: var(--saxum-color-gray); }
.saxum-picker-trigger-action { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--saxum-color-accent); }
.saxum-picker-box {
    position: relative;
    background: var(--saxum-color-white);
    width: 92%;
    max-width: 560px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 24px;
    border-radius: 24px;
    border: 3px solid var(--saxum-color-secondary-light);
}
/* La "×" de cada página tiene estilos distintos: acá se fija arriba a la derecha. */
.saxum-picker-box .saxum-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    margin: 0;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--saxum-color-gray);
    cursor: pointer;
}
.saxum-picker-box .saxum-modal-close:hover { color: var(--saxum-color-secondary-dark); }
.saxum-picker-box h3 { margin: 0 0 12px; font-family: var(--saxum-font-heading); font-size: 18px; color: var(--saxum-color-secondary-dark); }
.saxum-picker-search {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 14px;
    border: 1px solid var(--saxum-color-gray-border);
    border-radius: var(--saxum-radius-pill);
    font-family: var(--saxum-font-body);
    font-size: 14px;
    margin-bottom: 10px;
}
.saxum-picker-list { flex: 1 1 auto; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.saxum-picker-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--saxum-color-gray-light);
    font-family: var(--saxum-font-body);
    font-size: 14px;
    color: var(--saxum-color-secondary-dark);
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.saxum-picker-item:hover,
.saxum-picker-item:focus-visible { border-color: var(--saxum-color-secondary-light); outline: none; }
.saxum-picker-item.is-on { background: #EAF3FA; border-color: var(--saxum-color-accent); }
.saxum-picker-item small { font-size: 12.5px; color: var(--saxum-color-gray); }
.saxum-picker-empty { font-size: 13.5px; color: var(--saxum-color-gray); padding: 10px 4px; }
.saxum-picker-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--saxum-color-gray); }
.saxum-picker-pager button {
    border: 1px solid var(--saxum-color-gray-border);
    border-radius: var(--saxum-radius-pill);
    background: var(--saxum-color-white);
    padding: 6px 14px;
    font-family: var(--saxum-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--saxum-color-secondary-dark);
    cursor: pointer;
}
.saxum-picker-pager button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Quién abrió una consulta (sección 53): en los detalles de Cuenta y de
   Unidad. Misma forma que la etiqueta "Inquilino"; Cliente en celeste,
   Administración en gris, Inquilino en violeta. Cerrada, en gris. */
.saxum-opener-badge {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #BFD6EA;
    border-radius: var(--saxum-radius-pill);
    background: #E8F1F9;
    color: var(--saxum-color-secondary-light);
    padding: 1px 8px;
    font-family: var(--saxum-font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.saxum-opener-badge.is-ADMIN { background: var(--saxum-color-gray-light); color: #4A4F57; border-color: var(--saxum-color-gray-border); }
.saxum-opener-badge.is-TENANT { background: #F2ECFA; color: #6A3FA0; border-color: #D9C8F0; }
.saxum-ticket-closed { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--saxum-color-gray); white-space: nowrap; }

/* Etiqueta "Inquilino" (agregado 2026-10-06, CONTEXTO.md sección 39,
   paso 3): violeta, para distinguir de un vistazo a las cuentas de
   inquilino de las de propietario en Inquilinos, Unidad, Cuenta,
   Consultas y Reservas. Colores propios (no hay otro violeta en el
   Panel) con contraste AA sobre su fondo claro. */
:root {
    --saxum-color-tenant: #6A3FA0;
    --saxum-color-tenant-light: #F2ECFA;
}
.saxum-tenant-badge {
    display: inline-block;
    vertical-align: middle;
    background: var(--saxum-color-tenant-light);
    color: var(--saxum-color-tenant);
    border: 1px solid #D9C8F0;
    border-radius: var(--saxum-radius-pill);
    padding: 1px 8px;
    font-family: var(--saxum-font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Buscadores (sección 53, pedido del 2026-10-22): sin la etiqueta
   "Buscar" arriba; el texto de ayuda ("Buscar cuenta…") va adentro de la
   pastilla, con la lupa a la izquierda. La etiqueta para lectores de
   pantalla va en aria-label del mismo campo. El padding izquierdo es
   !important porque cada página define el suyo para su buscador. */
input.saxum-search-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 13px 50%;
    background-size: 14px 14px;
    padding-left: 34px !important;
    text-overflow: ellipsis;
}
input.saxum-search-field::placeholder { color: var(--saxum-color-gray); opacity: 1; }

/* "Quitar filtros" (agregado 2026-10-09, CONTEXTO.md sección 41): cruz
   gris y discreta al final de cada fila de filtros. Solo aparece
   cuando hay algún filtro aplicado (x-show="hasActiveFilters") y los
   vuelve todos a su valor inicial. align-self:flex-end la alinea con
   los <select> (los <label> de la fila miden etiqueta + campo). */
.saxum-filters-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    flex: none;
    width: 30px;
    height: 30px;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--saxum-color-gray);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.saxum-filters-clear:hover {
    background: var(--saxum-color-gray-light);
    color: var(--saxum-color-secondary-dark);
}
.saxum-filters-clear:focus-visible {
    outline: 2px solid var(--saxum-color-accent);
    outline-offset: 1px;
}
.saxum-filters-clear svg {
    width: 16px;
    height: 16px;
}
/* Franja "Vista de zona · {zona}" (sección 48): arriba de las
   sub-pestañas de "Administrador" para el Admin de Zona, para que se
   note de un vistazo que es la vista acotada a su zona. */
.saxum-zone-band {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 0 14px;
    padding: 9px 14px;
    border-radius: 10px;
    background: #E8F1F9;
    border: 1px solid #BFD6EA;
    color: var(--saxum-color-secondary-dark);
    font-size: 13.5px;
}
.saxum-zone-band svg { width: 16px; height: 16px; flex: none; color: var(--saxum-color-secondary-light); }
.saxum-zone-band strong { font-weight: 700; }
.saxum-zone-band span { color: var(--saxum-color-gray); }

/* Campo obligatorio que falta (2026-10-14, CONTEXTO.md sección 47): se
   marca recién al intentar enviar, con el borde en rojo y un mensaje
   corto debajo que dice qué falta. Se va solo al completarlo. */
.saxum-field-error {
    display: block;
    margin: 4px 0 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #B3261E;
}
select.is-missing,
input.is-missing,
textarea.is-missing,
.is-missing > select {
    border-color: #B3261E !important;
    box-shadow: 0 0 0 1px #B3261E;
}
.saxum-dropzone.is-missing {
    border-color: #B3261E;
    background: #FDF3F2;
}
.saxum-scope-missing {
    outline: 1.5px solid #B3261E;
    outline-offset: 4px;
    border-radius: 10px;
}

/* En pantallas táctiles (2026-10-14, CONTEXTO.md sección 47) el área
   que se puede tocar crece a 40x40 sin mover el resto de la fila: el
   margen negativo compensa los 10px extra. El dibujo sigue igual. */
@media (pointer: coarse) {
    .saxum-filters-clear {
        width: 40px;
        height: 40px;
        margin: -5px;
    }
}

/* =====================================================================
   Barra lateral en celular (CONTEXTO.md sección 49, etapa 1; el Panel
   Cliente desde la sección 50). El <aside> de los dos paneles lleva
   .saxum-sidebar--admin (nombre de la sección 49). En escritorio no pasa nada; por
   debajo de 900 px la barra fija se esconde, arriba queda una barra
   con el logo y un botón que la abre como cajón
   (assets/js/saxum-admin-drawer.js).

   Las páginas reservan el lugar de la barra con "body { padding-left:
   209px }" en su propio <style>; body:has(...) tiene más especificidad
   y gana sin tocar cada página. El interior de cada pantalla todavía
   no está adaptado al celular (pendiente anotado en la sección 13).
   ===================================================================== */
.saxum-admin-topbar,
.saxum-admin-drawer-backdrop {
    display: none;
}

@media (max-width: 900px) {

    body:has(.saxum-sidebar--admin) {
        padding-left: 0;
        padding-top: calc(56px + env(safe-area-inset-top, 0px));
    }

    .saxum-admin-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 120;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        height: calc(56px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
        background: var(--saxum-color-secondary-light);
    }
    .saxum-admin-topbar-logo { display: flex; align-items: center; }
    .saxum-admin-topbar-logo img { display: block; height: 26px; width: auto; }
    .saxum-admin-topbar-menu {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        border-radius: var(--saxum-radius-card);
        background: none;
        color: var(--saxum-color-white);
        cursor: pointer;
    }
    .saxum-admin-topbar-menu:hover { background: rgba(255, 255, 255, 0.08); }
    .saxum-admin-topbar-menu:focus-visible { outline: 2px solid var(--saxum-color-white); outline-offset: 2px; }
    .saxum-admin-topbar-menu .saxum-sidebar-badge {
        position: absolute;
        top: 3px;
        right: 1px;
        margin: 0;
    }

    /* El cajón: la misma barra, más ancha, fuera de pantalla hasta que
       se abre. visibility la saca del orden de tabulación cerrada. */
    .saxum-sidebar.saxum-sidebar--admin {
        width: min(280px, 85vw);
        z-index: 130;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
        overflow-y: auto;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 200ms ease, visibility 0s linear 200ms;
    }
    body.saxum-drawer-open .saxum-sidebar.saxum-sidebar--admin {
        transform: none;
        visibility: visible;
        transition: transform 200ms ease;
        box-shadow: 4px 0 24px rgba(12, 24, 39, 0.3);
    }
    .saxum-sidebar.saxum-sidebar--admin .saxum-sidebar-item { min-height: 44px; box-sizing: border-box; }

    .saxum-admin-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 125;
        background: rgba(12, 24, 39, 0.5);
    }
    .saxum-admin-drawer-backdrop[hidden] { display: none; }
    body.saxum-drawer-open { overflow: hidden; }

    /* Margen lateral mínimo de 16 px en el contenedor principal. */
    body:has(.saxum-sidebar--admin) .saxum-hero-main {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    .saxum-sidebar.saxum-sidebar--admin,
    body.saxum-drawer-open .saxum-sidebar.saxum-sidebar--admin {
        transition: none;
    }
}

/* =====================================================================
   Panel Cliente en celular (CONTEXTO.md sección 50). Su <aside> lleva
   además .saxum-sidebar--client; body:has(...) le gana al <style> de
   cada página sin tocarlas.
   - Campos con letra de 16 px: con menos, el iPhone hace zoom al tocarlos.
     Desde la sección 51 vale también para el Panel Admin (--admin lo
     llevan los dos <aside>).
   - Campos de Perfil (sin estilo propio) a lo ancho y con 44 px de alto.
   - Botones chicos con 40 px de alto en pantallas táctiles (los dos
     paneles desde la sección 51).
   - El chat de Consultas ocupa toda la pantalla.
   ===================================================================== */
@media (max-width: 900px) {
    body:has(.saxum-sidebar--admin) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    body:has(.saxum-sidebar--admin) select,
    body:has(.saxum-sidebar--admin) textarea,
    /* Sección 51, etapa 3: ".saxum-wizard-box .saxum-wizard-field
       select" (Crear Proyecto) es más específica y los dejaba en 14 px. */
    body:has(.saxum-sidebar--admin) .saxum-wizard-box select,
    body:has(.saxum-sidebar--admin) .saxum-wizard-box input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
        font-size: 16px;
    }
    body:has(.saxum-sidebar--client) .saxum-profile-form input:not([type="checkbox"]):not([type="radio"]) {
        box-sizing: border-box;
        width: 100%;
        min-height: 44px;
        padding: 8px 10px;
    }

    body:has(.saxum-sidebar--client) .saxum-modal-overlay:has(.saxum-chat-thread) { padding: 0; }
    body:has(.saxum-sidebar--client) .saxum-modal-box:has(.saxum-chat-thread) {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
    }
    body:has(.saxum-sidebar--client) .saxum-modal-box .saxum-chat-thread {
        flex: 1 1 auto;
        min-height: 160px;
        max-height: none;
    }
}
@media (max-width: 900px) and (pointer: coarse) {
    body:has(.saxum-sidebar--admin) .saxum-panel-btn-small,
    body:has(.saxum-sidebar--client) .saxum-bn-dismiss {
        min-height: 40px;
    }
    /* Con el alto mínimo, el texto quedaba pegado arriba donde el botón
       es un <span> (ej. "Elegir" en el paso de Unidad de Consultas). */
    body:has(.saxum-sidebar--admin) .saxum-panel-btn-small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    body:has(.saxum-sidebar--admin) .saxum-modal-close {
        min-width: 44px;
        min-height: 44px;
    }
}

/* =====================================================================
   Panel Admin en celular, etapa 3 (CONTEXTO.md sección 51.3):
   formularios, wizards y botones de fila de todas las pantallas.
   - Pasos de los wizards (Crear Proyecto, + Unidad): solo el paso
     actual lleva texto; con las 4-6 etiquetas la ventana entera se
     deslizaba de costado.
   - Táctil: campos y selects con 40 px de alto como mínimo (los
     formularios viejos sin estilo, ej. Crear cuenta cliente o Invitar
     cliente, medían 23-25 px; los filtros, 34-35 px). Botones de fila
     (Editar Alcance, Archivar, Desactivar...), íconos (⋯, carpetas) y
     cruces de los formularios con 40-44 px. En escritorio, nada.
   ===================================================================== */
@media (max-width: 900px) {
    body:has(.saxum-sidebar--admin) .saxum-wizard-progress-step:not(.is-active) .saxum-wizard-progress-label { display: none; }
}
@media (max-width: 700px) {
    /* Con 6 pasos y el texto del actual tampoco entraba en 287 px. */
    body:has(.saxum-sidebar--admin) .saxum-wizard-box { width: calc(100% - 24px); padding: 20px 16px; border-radius: 18px; }
    body:has(.saxum-sidebar--admin) .saxum-wizard-progress { gap: 4px; }
    body:has(.saxum-sidebar--admin) .saxum-wizard-progress-line { min-width: 6px; }
}
@media (max-width: 900px) and (pointer: coarse) {
    body:has(.saxum-sidebar--admin) select,
    body:has(.saxum-sidebar--admin) input:is(:not([type]), [type="text"], [type="email"], [type="password"], [type="number"], [type="search"], [type="tel"], [type="url"], [type="date"]):not(.saxum-composer-name) {
        min-height: 40px;
        box-sizing: border-box;
    }
    body:has(.saxum-sidebar--admin) .saxum-action-pill,
    body:has(.saxum-sidebar--admin) .saxum-category-pill { min-height: 40px; }
    body:has(.saxum-sidebar--admin) .saxum-icon-btn {
        min-width: 40px;
        min-height: 40px;
    }
    body:has(.saxum-sidebar--admin) .saxum-upload-card-close,
    body:has(.saxum-sidebar--admin) button[aria-label="Cerrar"] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ==========================================================
   Sección 49, etapa 2: carpetas de Proyectos (.saxum-pf-*) y marco del
   espacio de proyecto (.saxum-pw-*). La carpeta es la misma de Reservas
   (.saxum-rsv-folder: borde azul 2px, radio 12.5px, título Montserrat),
   pero acá es un enlace real (abrir en otra pestaña, copiar el link).
   Las pestañas (.saxum-pw-tabs) llevan un contador al lado; desde la
   etapa 7 también las usa "Administrador". Las usan las carpetas y todas las secciones del
   proyecto, por eso viven en la hoja base.
   ========================================================== */
.saxum-pf-group + .saxum-pf-group { margin-top: 24px; }
.saxum-pf-zone {
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--saxum-color-secondary-light);
    font-family: var(--saxum-font-heading);
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--saxum-color-secondary-light);
}
/* Carpetas casi cuadradas (pedido del 2026-10-19): ícono arriba, nombre
   en hasta 2 renglones, datos y chips abajo. En celular, dos por fila. */
.saxum-pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.saxum-pf-folder {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    /* Alto fijo en lugar de aspect-ratio: con aspect-ratio el contenido
       alto ensanchaba la tarjeta más allá de su columna. */
    min-height: 196px;
    background: var(--saxum-color-white);
    border: 2px solid var(--saxum-color-secondary-light);
    border-radius: 12.5px;
    padding: 16px;
    color: var(--saxum-color-secondary-dark);
    text-decoration: none;
    transition: box-shadow var(--saxum-transition-fast), transform var(--saxum-transition-fast);
}
.saxum-pf-folder:hover { box-shadow: 0 4px 14px rgba(12, 24, 39, 0.14); transform: translateY(-1px); text-decoration: none; color: var(--saxum-color-secondary-dark); }
.saxum-pf-folder:focus-visible { outline: 2px solid var(--saxum-color-accent); outline-offset: 2px; }
.saxum-pf-folder.has-news { box-shadow: inset 4px 0 0 var(--saxum-color-accent); }
.saxum-pf-folder.has-news:hover { box-shadow: inset 4px 0 0 var(--saxum-color-accent), 0 4px 14px rgba(12, 24, 39, 0.14); }
.saxum-pf-folder.is-disabled { opacity: 0.6; background: var(--saxum-color-gray-light); }
.saxum-pf-folder.is-general { border-style: dashed; }
.saxum-pf-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.saxum-pf-head svg { flex: 0 0 auto; width: 30px; height: 30px; color: var(--saxum-color-secondary-light); }
.saxum-pf-title { font-family: var(--saxum-font-heading); font-weight: 600; font-size: 17px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.saxum-pf-meta { font-size: 13.5px; line-height: 1.35; color: var(--saxum-color-gray); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.saxum-pf-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; margin-top: auto; }
@media (max-width: 520px) {
    .saxum-pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .saxum-pf-folder { min-height: 150px; padding: 12px; gap: 6px; }
    .saxum-pf-head svg { width: 26px; height: 26px; }
    .saxum-pf-title { font-size: 15px; }
    .saxum-pf-skeleton { min-height: 150px; }
    .saxum-pf-meta { font-size: 12.5px; }
    .saxum-pf-chip { white-space: normal; font-size: 11.5px; padding: 3px 8px; }
}
.saxum-pf-chip {
    display: inline-block;
    border-radius: var(--saxum-radius-pill);
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.saxum-pf-chip.is-new     { background: var(--saxum-color-accent); color: var(--saxum-color-white); }
.saxum-pf-chip.is-pending { background: #FFF4D6; color: #7A5300; }
.saxum-pf-chip.is-ok      { background: #E3F4E8; color: #0A6B2B; }
.saxum-pf-chip.is-muted   { background: var(--saxum-color-gray-light); color: var(--saxum-color-gray); border: 1px solid var(--saxum-color-gray-border); }

.saxum-pf-skeleton {
    min-height: 196px;
    border-radius: 12.5px;
    background: linear-gradient(90deg, #ECEEF2 0%, #F6F7F9 50%, #ECEEF2 100%);
    background-size: 200% 100%;
    animation: saxum-pf-shimmer 1.2s linear infinite;
}
@keyframes saxum-pf-shimmer { to { background-position: -200% 0; } }

.saxum-pf-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 22px; }
.saxum-pf-pager button {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: var(--saxum-radius-pill);
    border: 1px solid var(--saxum-color-gray-border);
    background: var(--saxum-color-white);
    font-family: var(--saxum-font-body);
    font-weight: 600;
    color: var(--saxum-color-secondary-dark);
    cursor: pointer;
}
.saxum-pf-pager button.is-current { background: var(--saxum-color-secondary-light); border-color: var(--saxum-color-secondary-light); color: var(--saxum-color-white); }
.saxum-pf-pager button:disabled:not(.is-current) { opacity: 0.4; cursor: not-allowed; }
.saxum-pf-pager-info { width: 100%; margin-top: 4px; text-align: center; font-size: 13px; color: var(--saxum-color-gray); }

.saxum-pf-state {
    padding: 32px 20px;
    border-radius: 12px;
    background: var(--saxum-color-white);
    box-shadow: 0 1px 3px rgba(12, 24, 39, 0.08);
    text-align: center;
    color: var(--saxum-color-gray);
}
.saxum-pf-state strong { display: block; margin-bottom: 6px; font-size: 16px; color: var(--saxum-color-secondary-dark); }
.saxum-pf-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #FDECEC;
    color: #8A1C1C;
    font-size: 14px;
}

/* Marco del espacio de proyecto */
.saxum-pw-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 14px; color: var(--saxum-color-gray); }
.saxum-pw-crumbs a { font-weight: 600; }
.saxum-pw-title { min-width: 0; overflow-wrap: anywhere; }
.saxum-pw-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--saxum-color-gray-border);
    overflow-x: auto;
    scrollbar-width: thin;
}
.saxum-pw-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 16px;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    white-space: nowrap;
    color: var(--saxum-color-gray);
    text-decoration: none;
}
.saxum-pw-tabs a:hover { color: var(--saxum-color-secondary-dark); text-decoration: none; }
.saxum-pw-tabs a.is-active { color: var(--saxum-color-secondary-dark); border-bottom-color: var(--saxum-color-secondary-light); }
.saxum-pw-count {
    border-radius: var(--saxum-radius-pill);
    padding: 1px 8px;
    background: var(--saxum-color-gray-light);
    color: var(--saxum-color-secondary-dark);
    font-size: 12px;
    font-weight: 700;
}
.saxum-pw-count.is-hot { background: var(--saxum-color-accent); color: var(--saxum-color-white); }
.saxum-pw-count.is-pending { background: #FFF4D6; color: #7A5300; }

/* "Más información" */
.saxum-pw-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.saxum-pw-card { min-width: 0; padding: 20px 22px; border-radius: 12px; background: var(--saxum-color-white); box-shadow: 0 1px 3px rgba(12, 24, 39, 0.08), 0 1px 2px rgba(12, 24, 39, 0.05); }
.saxum-pw-card h2 { margin: 0 0 14px; font-size: 17px; color: var(--saxum-color-secondary-dark); }
.saxum-pw-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.saxum-pw-stat {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--saxum-color-gray-border);
    border-radius: 10px;
    color: var(--saxum-color-secondary-dark);
    text-decoration: none;
}
.saxum-pw-stat:hover { border-color: var(--saxum-color-accent); color: var(--saxum-color-secondary-dark); text-decoration: none; }
.saxum-pw-stat b { display: block; font-family: var(--saxum-font-heading); font-size: 24px; }
.saxum-pw-stat span { font-size: 13.5px; color: var(--saxum-color-gray); }
.saxum-pw-stat.is-hot b { color: var(--saxum-color-accent); }
.saxum-pw-data { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 14.5px; }
.saxum-pw-data dt { color: var(--saxum-color-gray); }
.saxum-pw-data dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.saxum-pw-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.saxum-pw-note { margin: 10px 0 0; font-size: 13.5px; color: var(--saxum-color-gray); }
.saxum-pw-form label { display: block; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; color: var(--saxum-color-gray); }
.saxum-pw-form input[type=text],
.saxum-pw-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 9px 12px;
    border: 1px solid var(--saxum-color-gray-border);
    border-radius: 8px;
    font-family: var(--saxum-font-body);
    font-size: 14.5px;
    font-weight: 400;
    color: var(--saxum-color-secondary-dark);
}
.saxum-pw-msg { margin: 10px 0 0; font-size: 14px; }

/* ==========================================================
   Sección 59: criterio único de contenedores (Panel Admin y Cliente).
   - Tarjeta (.saxum-card): borde de 1 px #E2E5EA, radio 12, fondo
     blanco. Solo cuando agrupa cosas DISTINTAS (un número, unas filas y
     un botón) y eso aporta algo.
   - Sección plana (.saxum-flat-section): título + filas, sin recuadro.
   - Fila (.saxum-flat-row): separada por una línea gris fina. Una fila
     nunca es una pastilla, y una lista de filas nunca va dentro de otro
     recuadro.
   ========================================================== */
:root { --saxum-card-border: 1px solid var(--saxum-color-gray-border); --saxum-card-radius: 12px; }
.saxum-card { background: var(--saxum-color-white); border: var(--saxum-card-border); border-radius: var(--saxum-card-radius); padding: 16px 18px; }
.saxum-flat-section { margin: 28px 0 0; }
.saxum-flat-section > h2,
.saxum-flat-section > h3 { margin: 0 0 6px; font-family: var(--saxum-font-heading); font-size: 18px; color: var(--saxum-color-secondary-dark); }
.saxum-flat-row { padding: 10px 0; border-bottom: 1px solid var(--saxum-color-gray-border); }
.saxum-flat-row:last-child { border-bottom: none; }

/* ==========================================================
   Sección 59: Panel Cliente (celular primero).
   Fila compacta de aviso (.saxum-ann-row), botones del cliente
   (.saxum-client-btn) y lector "Ver más" (.saxum-reader): hoja desde
   abajo en celular, ventana centrada desde 700 px.
   ========================================================== */
.saxum-ann-row { position: relative; padding: 10px 0; border-bottom: 1px solid var(--saxum-color-gray-border); }
.saxum-ann-row:last-child { border-bottom: none; }
.saxum-ann-row.is-new { margin-left: -12px; padding-left: 9px; border-left: 3px solid var(--saxum-color-accent); background: linear-gradient(90deg, #EAF3FA, rgba(234, 243, 250, 0) 85%); }
.saxum-ann-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.saxum-ann-title { margin: 0; min-width: 0; font-family: var(--saxum-font-body); font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--saxum-color-secondary-dark); overflow-wrap: anywhere; }
.saxum-ann-tag { flex: 0 0 auto; border-radius: var(--saxum-radius-pill); padding: 1px 8px; font-size: 11.5px; font-weight: 700; line-height: 1.5; }
.saxum-ann-tag.is-important { background: #FDECEA; color: #B3261E; }
.saxum-ann-tag.is-new { background: var(--saxum-color-accent); color: var(--saxum-color-white); }
.saxum-ann-date { margin-left: auto; flex: 0 0 auto; font-size: 12.5px; color: var(--saxum-color-gray); white-space: nowrap; }
.saxum-ann-text { margin: 3px 0 0; font-size: 14.5px; line-height: 1.45; color: #2C3440; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.saxum-ann-more { margin: 2px 0 0; padding: 6px 0; min-height: 32px; border: none; background: none; font-family: var(--saxum-font-body); font-size: 14px; font-weight: 600; color: var(--saxum-color-accent); cursor: pointer; }
.saxum-ann-more:focus-visible { outline: 2px solid var(--saxum-color-accent); outline-offset: 2px; }

.saxum-client-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 22px; border-radius: var(--saxum-radius-pill); font-family: var(--saxum-font-body); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.saxum-client-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.saxum-client-btn.is-primary { border: none; background: var(--saxum-color-secondary-light); color: var(--saxum-color-white); box-shadow: 0 2px 6px rgba(12, 24, 39, 0.18); }
.saxum-client-btn.is-primary:hover { background: var(--saxum-color-secondary-dark); color: var(--saxum-color-white); text-decoration: none; }
.saxum-client-btn.is-secondary { border: 1px solid var(--saxum-color-gray-border); background: var(--saxum-color-white); color: var(--saxum-color-secondary-dark); }
.saxum-client-btn.is-secondary:hover { background: var(--saxum-color-gray-light); color: var(--saxum-color-secondary-dark); text-decoration: none; }
.saxum-client-btn.is-secondary.is-active { border-color: var(--saxum-color-secondary-light); background: #EAF3FA; }
.saxum-client-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.saxum-client-btn:focus-visible { outline: 2px solid var(--saxum-color-accent); outline-offset: 2px; }

/* Estados de carga, error y vacío de las pantallas del cliente. */
.saxum-client-skeleton { height: 62px; margin: 0 0 10px; border-radius: 10px; background: linear-gradient(90deg, #EEF0F3 25%, #F7F8FA 50%, #EEF0F3 75%); background-size: 200% 100%; animation: saxum-client-shimmer 1.2s ease-in-out infinite; }
.saxum-client-skeleton.is-short { height: 40px; }
@keyframes saxum-client-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .saxum-client-skeleton { animation: none; } }
.saxum-client-error { margin: 6px 0; color: #B3261E; font-size: 14.5px; }

html.saxum-reader-lock, html.saxum-reader-lock body { overflow: hidden; }
.saxum-reader { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; }
.saxum-reader-backdrop { position: absolute; inset: 0; background: rgba(12, 24, 39, 0.55); }
.saxum-reader-box { position: relative; width: 100%; max-height: 86vh; overflow-y: auto; box-sizing: border-box; padding: 10px 20px 24px; border-radius: 20px 20px 0 0; background: var(--saxum-color-white); box-shadow: 0 -8px 30px rgba(12, 24, 39, 0.25); transition: transform 0.2s ease; overscroll-behavior: contain; }
.saxum-reader-grip { width: 40px; height: 4px; margin: 2px auto 12px; border-radius: 4px; background: var(--saxum-color-gray-border); }
.saxum-reader-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: none; border-radius: 50%; background: none; font-size: 28px; line-height: 1; color: var(--saxum-color-gray); cursor: pointer; }
.saxum-reader-close:hover { background: var(--saxum-color-gray-light); color: var(--saxum-color-secondary-dark); }
.saxum-reader-img { display: block; width: 100%; max-height: 220px; object-fit: cover; margin: 0 0 14px; border-radius: 12px; }
.saxum-reader-kicker { display: flex; align-items: center; gap: 8px; margin: 0 48px 4px 0; font-size: 12.5px; font-weight: 600; color: var(--saxum-color-gray); }
.saxum-reader-title { margin: 0 48px 2px 0; font-family: var(--saxum-font-heading); font-size: 19px; line-height: 1.3; color: var(--saxum-color-secondary-dark); overflow-wrap: anywhere; }
.saxum-reader-date { margin: 0 0 12px; font-size: 13px; color: var(--saxum-color-gray); }
.saxum-reader-text { font-size: 15.5px; line-height: 1.55; color: #2C3440; white-space: pre-line; overflow-wrap: anywhere; }
.saxum-reader-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.saxum-reader-error { margin: 10px 0 0; color: #B3261E; font-size: 14px; }
@media (min-width: 700px) {
    .saxum-reader { align-items: center; padding: 24px; }
    .saxum-reader-box { max-width: 620px; max-height: 84vh; padding: 24px 28px 26px; border-radius: 16px; }
    .saxum-reader-grip { display: none; }
    .saxum-reader-actions { flex-direction: row; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
    .saxum-reader-box { transition: none; }
}

/* "Este correo ya está registrado" / invitación pendiente (sección 58,
   bloque 6): SAXUM_Invitations::render_email_check_notice(). */
.saxum-email-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid #F2D9A6; background: #FFF8E8; color: #6A4A00; font-size: 14px; line-height: 1.4; }
.saxum-email-check p { flex: 1 1 240px; margin: 0; }
.saxum-email-check.is-info { border-color: #C7DDEE; background: #EAF3FA; color: var(--saxum-color-secondary-light); }

/* "Consultas por categoría" de Más información (sección 58, bloque 8). */
.saxum-pw-cats { margin-top: 18px; }
.saxum-pw-cats-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; }
.saxum-pw-cats-head h2 { margin-bottom: 4px; }
.saxum-pw-cats-total { margin: 0; font-size: 14px; color: var(--saxum-color-gray); }
.saxum-pw-cats-total b { font-size: 20px; color: var(--saxum-color-secondary-dark); }
.saxum-pw-cats-period select { min-height: 36px; padding: 6px 30px 6px 12px; border: 1px solid var(--saxum-color-gray-border); border-radius: var(--saxum-radius-pill); background: var(--saxum-color-white); font-family: var(--saxum-font-body); font-size: 13.5px; color: var(--saxum-color-secondary-dark); }
.saxum-pw-cats-list { list-style: none; margin: 0; padding: 0; }
.saxum-pw-cats-list li { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 82px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--saxum-color-gray-border); }
.saxum-pw-cats-list li:last-child { border-bottom: none; }
.saxum-pw-cats-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: 14px; color: var(--saxum-color-secondary-dark); overflow-wrap: anywhere; }
.saxum-pw-cats-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.saxum-pw-cats-bar { display: block; height: 10px; border-radius: var(--saxum-radius-pill); background: var(--saxum-color-gray-light); overflow: hidden; }
.saxum-pw-cats-bar > span { display: block; height: 100%; border-radius: inherit; }
.saxum-pw-cats-n { text-align: right; font-size: 13px; color: var(--saxum-color-gray); white-space: nowrap; }
.saxum-pw-cats-n b { font-size: 15px; color: var(--saxum-color-secondary-dark); }
@media (max-width: 560px) {
    .saxum-pw-cats-list li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
    .saxum-pw-cats-bar { grid-column: 1 / -1; grid-row: 2; }
}
.saxum-pw-msg.is-error { color: #B3261E; font-weight: 600; }
.saxum-pw-msg.is-ok { color: #0A6B2B; font-weight: 600; }
.saxum-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid var(--saxum-color-secondary-light);
    border-radius: 6px;
    background: var(--saxum-color-white);
    color: var(--saxum-color-secondary-dark);
    font-family: var(--saxum-font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.saxum-btn-outline:hover { background: var(--saxum-color-gray-light); }
.saxum-btn-outline:disabled { opacity: 0.5; cursor: not-allowed; }
.saxum-btn-outline.is-danger { border-color: #B3261E; color: #B3261E; }

/* Regla común de acciones destructivas (pedido del 2026-10-19): Archivar,
   Borrar/Eliminar, Rechazar, Desvincular, Deshabilitar/Desactivar,
   Finalizar y Cancelar una invitación van en rojo (#B3261E), con
   contorno; al pasar el mouse se rellenan. Las acciones que revierten
   (Activar, Habilitar) quedan en azul. "body" sube la especificidad
   para ganarle al <style> de cada pantalla, que se imprime después. */
body .saxum-action-pill.is-danger,
body .saxum-panel-btn.is-danger,
body .saxum-panel-btn-small.is-danger {
    background: var(--saxum-color-white);
    color: #B3261E;
    border: 2px solid #B3261E;
}
body .saxum-panel-btn-small.is-danger { border-width: 1px; }
body .saxum-action-pill.is-danger:hover:not(:disabled),
body .saxum-panel-btn.is-danger:hover:not(:disabled),
body .saxum-panel-btn-small.is-danger:hover:not(:disabled) { background: #B3261E; color: var(--saxum-color-white); }
body .saxum-pu-link-btn.is-danger,
body .saxum-quick-menu button.is-danger { color: #B3261E; }

/* Jerarquía de botones en filas de detalle (sección 53, CONTEXTO.md):
   - destructivo (Desvincular, Finalizar, Cancelar invitación,
     Deshabilitar, Archivar): relleno rojo, texto blanco semibold;
   - secundario (Editar, Reenviar): trazo gris, texto oscuro;
   - agregar o vincular: trazo y texto celeste;
   - la acción principal sigue siendo .saxum-btn-primary (relleno azul).
   Mismo alto y radio en los tres para que una columna de acciones se
   lea pareja. */
.saxum-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 34px;
    padding: 6px 14px;
    border: 1.5px solid var(--saxum-color-gray-border);
    border-radius: 8px;
    background: var(--saxum-color-white);
    color: var(--saxum-color-secondary-dark);
    font-family: var(--saxum-font-body);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.saxum-row-btn:focus-visible { outline: 2px solid var(--saxum-color-accent); outline-offset: 2px; }
.saxum-row-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.saxum-row-btn.is-secondary { border-color: #B7B7B7; }
.saxum-row-btn.is-secondary:hover:not(:disabled) { border-color: var(--saxum-color-gray); background: var(--saxum-color-gray-light); }
.saxum-row-btn.is-destructive { background: #B3261E; border-color: #B3261E; color: var(--saxum-color-white); }
.saxum-row-btn.is-destructive:hover:not(:disabled) { background: #8F1E18; border-color: #8F1E18; }
.saxum-row-btn.is-add { border-color: var(--saxum-color-accent); color: var(--saxum-color-accent); }
.saxum-row-btn.is-add:hover:not(:disabled) { background: #EAF3FA; }
.saxum-row-btn.is-large { min-height: 42px; padding: 10px 22px; font-size: 14.5px; }

/* ==========================================================
   Sección 49, etapa 7: navegación de Administrador. Las pestañas
   (Cuentas · Inquilinos · Novedades · Más) son las del proyecto
   (.saxum-pw-tabs).

   Sección 58, bloque 2: barra de secciones ÚNICA (.saxum-seg-nav),
   para todo lo que está debajo de una pestaña y cambia de vista o de
   página dentro de ella: las píldoras de Administrador (Cuentas ·
   Invitaciones · Solicitudes · Administradores), "Inquilinos actuales
   · Invitaciones" y "Calendario · Historial · Amenities" de Reservas.
   Estructura de la de Inquilinos (riel gris redondeado con los botones
   adentro), activa rellena en azul oscuro y alto de las píldoras de
   Cuentas. Sirve igual con <a> (páginas) o <button> (vistas con
   Alpine). En celular se desliza a lo ancho, sin desbordar la página.
   ========================================================== */
.saxum-hub-tabs { margin-bottom: 14px; }
.saxum-seg-nav {
    display: inline-flex;
    max-width: 100%;
    box-sizing: border-box;
    gap: 4px;
    padding: 4px;
    margin: 0 0 24px;
    background: var(--saxum-color-gray-light);
    border: 1px solid var(--saxum-color-gray-border);
    border-radius: var(--saxum-radius-pill);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.saxum-seg-nav::-webkit-scrollbar { display: none; }
.saxum-seg-nav > a,
.saxum-seg-nav > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 32px;
    box-sizing: border-box;
    padding: 6px 14px;
    border: none;
    border-radius: var(--saxum-radius-pill);
    background: none;
    font-family: var(--saxum-font-body);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--saxum-color-secondary-light);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--saxum-transition-fast), color var(--saxum-transition-fast), box-shadow var(--saxum-transition-fast);
}
.saxum-seg-nav > a:hover,
.saxum-seg-nav > button:hover { background: var(--saxum-color-white); color: var(--saxum-color-secondary-dark); text-decoration: none; }
.saxum-seg-nav > .is-active,
.saxum-seg-nav > .is-active:hover { background: var(--saxum-color-secondary-dark); color: var(--saxum-color-white); box-shadow: 0 1px 3px rgba(12, 24, 39, 0.18); }
.saxum-seg-nav > .is-active .saxum-pw-count:not(.is-hot) { background: rgba(255, 255, 255, 0.18); color: var(--saxum-color-white); }
.saxum-seg-nav > a:focus-visible,
.saxum-seg-nav > button:focus-visible,
.saxum-pw-tabs a:focus-visible { outline: 2px solid var(--saxum-color-accent); outline-offset: 2px; }
.saxum-seg-nav > a:focus-visible,
.saxum-seg-nav > button:focus-visible { outline-offset: -2px; }
@media (max-width: 900px) and (pointer: coarse) {
    .saxum-seg-nav > a,
    .saxum-seg-nav > button { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .saxum-seg-nav { scroll-behavior: auto; }
    .saxum-seg-nav > a,
    .saxum-seg-nav > button { transition: none; }
}

@media (max-width: 900px) {
    .saxum-pw-grid { grid-template-columns: minmax(0, 1fr); }
    .saxum-pw-data { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .saxum-pw-data dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .saxum-pf-skeleton { animation: none; }
    .saxum-pf-folder { transition: none; }
}

/* ==========================================================
   Sección 52, bloque D: "Editar alcance" de Archivos y Comunicados
   (SAXUM_Scope_Editor + saxum-scope-editor.js). Usa el dibujo de la
   ventana anterior (.saxum-alcance-*) y suma: "Ahora / Va a quedar",
   los tres niveles como tarjetas de opción y la cruz en la cabecera.
   ========================================================== */
.saxum-se .saxum-modal-box { max-width: 620px; width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
.saxum-se .saxum-alcance-head { position: relative; padding-right: 56px; }
.saxum-se-head-text { min-width: 0; }
.saxum-se-close {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--saxum-color-white);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.saxum-se-close:hover { background: rgba(255, 255, 255, 0.24); }
.saxum-se-close:focus-visible { outline: 2px solid var(--saxum-color-white); outline-offset: 2px; }
.saxum-se-now {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: var(--saxum-radius-card);
    background: var(--saxum-color-gray-light);
    font-size: 14px;
    color: var(--saxum-color-secondary-dark);
    overflow-wrap: anywhere;
}
.saxum-se-now > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.saxum-se-now-label { flex: 0 0 auto; min-width: 86px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--saxum-color-gray); }
.saxum-se-now-label.is-new { color: var(--saxum-color-accent); }
.saxum-se-now .saxum-link-btn { align-self: flex-start; padding: 0; border: none; background: none; font-size: 13px; font-weight: 600; color: var(--saxum-color-accent); cursor: pointer; }
.saxum-se-now .saxum-link-btn:hover { text-decoration: underline; }
.saxum-se-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.saxum-se-level {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px 12px 40px;
    border: 2px solid var(--saxum-color-gray-border);
    border-radius: var(--saxum-radius-card);
    background: var(--saxum-color-white);
    cursor: pointer;
    transition: border-color var(--saxum-transition-fast), background var(--saxum-transition-fast);
}
.saxum-se-level input { position: absolute; left: 14px; top: 14px; width: 17px; height: 17px; margin: 0; accent-color: var(--saxum-color-accent); }
.saxum-se-level:hover { border-color: var(--saxum-color-accent); }
.saxum-se-level.is-on { border-color: var(--saxum-color-accent); background: #EEF6FC; }
.saxum-se-level:focus-within { outline: 2px solid var(--saxum-color-accent); outline-offset: 2px; }
.saxum-se-level-title { font-family: var(--saxum-font-heading); font-weight: 700; font-size: 14px; color: var(--saxum-color-secondary-dark); }
.saxum-se-level-sub { font-size: 12px; color: var(--saxum-color-gray); line-height: 1.35; }
.saxum-se-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 14px; }
.saxum-se-fields > label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--saxum-color-gray);
}
.saxum-se-fixed { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--saxum-color-secondary-dark); }
.saxum-se-dropped { margin: 0; font-size: 13px; color: #7A5300; background: #FFF4D6; border-radius: 8px; padding: 8px 10px; }
.saxum-se-note { margin: 4px 0 0; font-size: 12.5px; color: var(--saxum-color-gray); }
.saxum-se-message { margin: 12px 0 0; font-size: 13.5px; color: var(--saxum-color-secondary-dark); }
.saxum-se-message.is-error { color: #B3261E; }
@media (max-width: 560px) {
    .saxum-se .saxum-alcance-head { padding: 16px 56px 16px 16px; }
    .saxum-se .saxum-alcance-body { padding: 18px 16px 20px; }
    .saxum-se-fields { grid-template-columns: 1fr; }
    .saxum-se-levels { grid-template-columns: 1fr; }
}

/* ==========================================================
   Sección 52, bloque D3: ventana de detalle (Archivos y Comunicados).
   Era CSS propio de Archivos; el detalle de Comunicados había quedado
   con el dibujo viejo (campos sin estilo, estado en inglés, "Cerrar"
   nativo) y ahora usa el mismo.
   ========================================================== */
/* Modal de Detalle — cabecera propia distinta de la de Alcance
   (sólida oscura): fondo blanco + borde inferior azul de 2px,
   mismo color/grosor que .is-outline-bar de las tarjetas de
   dashboard (ver saxum-admin-panel-base.css). */
.saxum-detail-modal .saxum-modal-box {
    padding: 0;
    max-width: 520px;
    border-radius: var(--saxum-radius-card);
    box-shadow: 0 20px 50px rgba(12, 24, 39, 0.22);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Rediseño 2026-09-26 (pedido del usuario: paddings/distribución,
   flecha en vez de "Cerrar", campos con el estilo de la página):
   cabecera con flecha para volver, cuerpo con los 2 campos editables
   + un bloque gris de solo lectura (Estado/Alcance), y una botonera
   fija abajo — acción secundaria a la izquierda, "Guardar cambios" a
   la derecha. */
.saxum-detail-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--saxum-color-white);
    border-bottom: 2px solid var(--saxum-color-secondary-light);
    padding: 18px 24px;
}
.saxum-detail-back {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--saxum-color-gray-light);
    color: var(--saxum-color-secondary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background var(--saxum-transition-fast), color var(--saxum-transition-fast);
}
.saxum-detail-back:hover { background: var(--saxum-color-secondary-light); color: var(--saxum-color-white); }
.saxum-detail-head-text { min-width: 0; }
.saxum-detail-head h3 { margin: 0; font-size: 17px; color: var(--saxum-color-secondary-dark); }
.saxum-detail-head-sub { font-size: 12.5px; color: var(--saxum-color-gray); margin: 2px 0 0; word-break: break-word; }
.saxum-detail-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.saxum-detail-body { flex: 1 1 auto; overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.saxum-detail-modal .saxum-detail-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.saxum-detail-field-label { font-size: 13px; font-weight: 600; color: var(--saxum-color-secondary-dark); }
/* Mismo estilo que los campos del formulario "Subir archivo" de
   esta página (píldora, borde gris, chevron celeste). */
.saxum-detail-modal .saxum-detail-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--saxum-color-gray-border);
    border-radius: var(--saxum-radius-pill);
    background-color: var(--saxum-color-white);
    padding: 10px 16px;
    font-family: var(--saxum-font-body);
    font-size: 14px;
    color: var(--saxum-color-secondary-dark);
}
.saxum-detail-modal select.saxum-detail-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232985C3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 11px;
}
.saxum-detail-modal .saxum-detail-input:focus { outline: none; border-color: var(--saxum-color-accent); box-shadow: 0 0 0 3px rgba(41, 133, 195, 0.15); }
.saxum-detail-meta {
    background: var(--saxum-color-gray-light);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13.5px;
}
.saxum-detail-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.saxum-detail-meta-key { flex: 0 0 64px; color: var(--saxum-color-gray); font-weight: 600; font-size: 12.5px; }
.saxum-detail-meta-value { flex: 1 1 auto; min-width: 0; color: var(--saxum-color-secondary-dark); }
.saxum-detail-status { display: inline-block; padding: 2px 10px; border-radius: var(--saxum-radius-pill); font-size: 12px; font-weight: 600; background: #E3F0F9; color: var(--saxum-color-secondary-light); }
.saxum-detail-status.is-disabled { background: var(--saxum-color-white); color: var(--saxum-color-gray); border: 1px solid var(--saxum-color-gray-border); }
.saxum-detail-link { background: none; border: none; padding: 0; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--saxum-color-accent); }
.saxum-detail-link:hover { text-decoration: underline; }
.saxum-detail-message { margin: 0; font-size: 13px; color: var(--saxum-color-secondary-dark); }
.saxum-detail-message.is-error { color: #B3261E; }
/* Botón "Borrar" (borrado físico, pedido 2026-10-01): mismo rojo
   que .saxum-detail-message.is-error, contorno para que no compita
   con "Guardar cambios". */
.saxum-detail-footer-left { display: flex; align-items: center; gap: 10px; }
.saxum-detail-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--saxum-color-gray-border);
}
.saxum-detail-modal textarea.saxum-detail-input { min-height: 140px; resize: vertical; line-height: 1.45; border-radius: 14px; font-family: inherit; }
.saxum-detail-modal .saxum-alcance-check-card { margin: 0; }
.saxum-detail-hint { margin: -6px 0 0; font-size: 12px; color: var(--saxum-color-gray); }
.saxum-detail-status.is-draft { background: #FFF4D6; color: #7A5300; }
.saxum-detail-footer-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (max-width: 560px) {
    .saxum-detail-footer { flex-wrap: wrap; }
}

/* Sección 56: invitación vencida = fila gris, como desactivada (misma
   convención que .is-disabled de carpetas y unidades). Sigue siendo
   clickeable para abrir el detalle y reenviarla. */
.saxum-row-expired { opacity: 0.55; background: var(--saxum-color-gray-light) !important; }
.saxum-row-expired:hover { opacity: 0.8; }