/* Portal del cliente — estilos propios del host (el portal usa el tema base de MudBlazor,
   sin las variables de cristal del broker/backoffice, así que aquí van valores literales). */

/* ── §0 · GEOMETRÍA: LOS DOS RADIOS DEL MANUAL ────────────────────────────────────────────────────
   El manual de marca declara DOS y solo dos: 9 px para los controles y 14 px para las tarjetas. Este
   host no declaraba NINGUNO —ni aquí ni en su MudTheme—, así que todo lo suyo caía a los 4 px por
   defecto de MudBlazor y a los respaldos que las hojas compartidas del RCL traen escritos.

   🎫 Se declaran como TOKEN y no como literal por dos motivos, y el segundo es el que importa:
     1. los tres nombres son los mismos que usan los otros dos hosts, así que un radio del manual se
        cambia en un sitio por host y no pantalla a pantalla;
     2. las hojas COMPARTIDAS del RCL ya los leen con respaldo —`insDetail.css` pinta la banda de
        detalle con `var(--app-radius-input, 8px)` y `insResilience.css` el aviso de reconexión con
        `var(--app-radius-card, 12px)`—. Mientras este host no los declarara, esas superficies suyas
        se pintaban con el respaldo del RCL, que es de otra época y de nadie. Declararlos aquí las
        alinea sin tocar ni una línea de la zona compartida.

   🔲 «Control» incluye el botón y el campo: el manual les da el mismo radio, así que
   `--app-radius-button` y `--app-radius-input` valen lo mismo hoy. Se conservan como DOS nombres
   porque son dos papeles —un día el manual puede separarlos— y porque el RCL ya distingue entre los
   dos: fundirlos ahora obligaría a adivinar cuál quería cada consumidor. */
:root {
    --app-radius-card: 14px;
    --app-radius-input: 9px;
    --app-radius-button: 9px;
}

/* ── §0-bis · Y QUIÉN LOS LEE ─────────────────────────────────────────────────────────────────────
   Declarar un token no redondea nada: MudBlazor pinta sus superficies con `--mud-default-borderradius`,
   que sale del `LayoutProperties` del tema y que este host no declara. Así que las superficies del
   manual se enganchan aquí, una a una y por su clase.

   🚫 Se enumeran en vez de reescribir el defecto global a propósito: el manual habla de TARJETAS y
   CONTROLES, no de «todo». Un radio global se cuela también en lo que no debe llevarlo —las pastillas,
   los avatares, la barra— y eso no está medido.

   ⚠️ Las tres exclusiones no son cosmética. `.mud-paper` es la clase base de MUCHO más que una tarjeta:
   la barra de aplicación y el cajón la llevan también (redondearlos les despegaría las esquinas del
   borde de la ventana), y `.mud-paper-square` es la forma que tiene MudBlazor de decir «esta superficie
   va a canto vivo» — pisarla desde aquí sería contestar a una decisión de la pantalla. */
.mud-paper:not(.mud-paper-square):not(.mud-appbar):not(.mud-drawer) {
    border-radius: var(--app-radius-card);
}

/* Un desplegable es un CONTROL, no una tarjeta: sale del campo que lo abre y comparte su canto. */
.mud-popover-paper {
    border-radius: var(--app-radius-input);
}

/* 🎫 El `!important` de estas dos es el mismo que el host del corredor ya lleva medido: MudBlazor pinta
   el canto del campo y el del botón desde su propia hoja con reglas más específicas que la clase suelta,
   y sin él la declaración de la casa no llega. 🚫 Y gobierna GEOMETRÍA, nunca color: el color del canto
   sigue saliendo de `--mud-palette-lines-inputs`, que la barrera de `PortalBrandTheme` declara por tema. */
.mud-input-outlined-border {
    border-radius: var(--app-radius-input) !important;
}

.mud-input-control .mud-input-slot {
    border-radius: var(--app-radius-input);
}

/* `:not(.mud-icon-button)` porque un botón de icono NO es un control rectangular: MudBlazor lo pinta
   redondo (50 %) y la barra del portal va llena de ellos —menú, buzón, idioma, tema, salir—. Meterlos en
   el radio de control los convertiría en cuadrados con las esquinas limadas, que es un cambio de forma
   que nadie ha pedido y que el manual no dice. */
.mud-button-root:not(.mud-icon-button) {
    border-radius: var(--app-radius-button) !important;
}

/* ── Barra compacta "pegajosa" de páginas de detalle (DetailStickyBar): SOLO SU TEMA ──
   🧹 s73 · Su geometría, su ritmo y su despliegue viven en `insDetail.css` (RCL), que es el SSOT de la
   banda de detalle y lo enlazan los tres hosts. Aquí estaban las 35 líneas enteras, que eran una
   TERCERA copia —divergente— de las de los dos hosts de cristal.
   Las divergencias del portal se conservan sin necesidad de copia: el radio y el canto los resuelve el
   bloque compartido con `var(--token, fallback)`, y la sombra, que es SOLO suya, se queda aquí. El portal
   usa el tema base de MudBlazor, sin cristal: aquí su relieve es una sombra y no un tinte con desenfoque.

   📐 Aquí ponía que este host no declaraba `--app-radius-input`, y por eso la banda caía al respaldo que
   trae escrito el RCL. Desde §0 SÍ lo declara: el radio de esta banda es ya el de control del manual, el
   mismo que llevan sus campos y sus botones. Lo que sigue sin declarar es `--glass-border`, así que el
   canto sigue cayendo —a propósito— en `--mud-palette-lines-default`. */
.ins-detail-stickybar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ── Conmutador de SECCIÓN del portal externo (S2.6) ──────────────────────────────────────────────
   Solo lo ve quien pertenece a las dos poblaciones (es asegurado Y colaborador de la misma
   correduría). Vive sobre la barra de aplicación.

   🎨 M-675 · TODOS SUS TONOS SALEN DE LA BARRA, y ya no del blanco. La barra lleva ahora el color
   EXACTO que eligió la correduría (`--mud-palette-appbar-background`) y su tinta se DERIVA de ese
   color (`--mud-palette-appbar-text`, ver `Services/PortalBrandTheme.cs`). Con blancos cableados,
   una correduría con marca clara —un amarillo, un lima— dejaba este conmutador ilegible: blanco al
   78 % sobre amarillo se queda en ~1,3:1.

   🎫 Y no queda ningún tono a medias, a propósito: el par tinta/barra está garantizado por
   construcción en 4,58:1 como mínimo, pero una pastilla translúcida ENCIMA de la barra vuelve a
   bajarlo (medido sobre el peor fondo posible: una pista al 16 % de la tinta hunde ese mismo par a
   3,40:1, por debajo del suelo de 4,5:1 para texto). Así que la jerarquía se expresa con formas
   —aro, pastilla sólida, subrayado— y no con alfas:
     · el GRUPO lleva un aro de 1 px en la tinta de la barra (≥4,58:1, muy por encima del 3:1 de
       WCAG 2.1 SC 1.4.11 para el límite de un control);
     · la sección EN CURSO invierte el par exacto de la barra, así que su contraste ES el de la
       barra;
     · la otra va en la tinta a plena fuerza sobre la barra, o sea el mismo par otra vez. */
.ins-area-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-appbar-text);
}

.ins-area-switch > button {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 4px 14px;
    border-radius: 999px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mud-palette-appbar-text);
    background-color: transparent;
    transition: background-color 140ms ease, color 140ms ease;
}

/* Señalar una sección no la tiñe: la subraya. Teñirla la haría indistinguible de la sección en curso,
   y bajarle el alfa la sacaría del suelo. */
.ins-area-switch > button:hover:not(.is-current) {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* La sección EN CURSO: sólida y con el texto en el color de la barra — inconfundible de un vistazo, y
   con el contraste del par de la barra por construcción (es ese par, invertido). */
.ins-area-switch > button.is-current {
    color: var(--mud-palette-appbar-background);
    background-color: var(--mud-palette-appbar-text);
    cursor: default;
}

.ins-area-switch > button:focus-visible {
    outline: 2px solid var(--mud-palette-appbar-text);
    outline-offset: 2px;
}

/* ── Empty State (gadget compartido `EmptyState` de la RCL) ─────────────────────────────
   La clase que el gadget requiere en el CSS de cada host (M-580): el portal referenciaba la RCL pero
   era el único host SIN esta clase, y por eso sus cinco vacíos seguían cableados a mano. Copiada del
   broker, incluido el `>` del glifo: sin él, el icono de una eventual salida se inflaría a 64 px. */
.app-empty-state {
    padding: 64px 24px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* 💡 El halo sale del ACENTO DE LA CORREDURÍA, no de un azul de la plataforma. Se copió del broker con
   su azul cableado dentro, y en ESTE host eso es marca ajena: el tomador está mirando la pantalla de SU
   correduría, y un vacío que brilla en azul cuando su correduría es verde delata al fabricante en la
   única superficie que se le vendió como suya.
   🎫 No hay suelo de contraste que atender —es un desenfoque decorativo detrás de un glifo que ya va al
   30 % y que nunca es la única señal: el vacío lo dice su texto—, así que aquí el color del tenant entra
   SIN pasar por la barrera, que es para la tinta que hay que leer.
   ⚠️ El respaldo del `var()` es el primario del manual, para el instante en que el tema todavía no ha
   emitido sus variables; si un navegador no resuelve `color-mix`, decae al glifo sin halo. */
.app-empty-state > .mud-icon-root {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.30;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--mud-palette-primary, #2563eb) 30%, transparent));
}

/* ── 🏷️ CO-BRANDING SAAS EN LA BARRA DEL PORTAL ──────────────────────────────────────────────────
   Decisión suya (28-ago-2026): el portal del tomador NO es white-label absoluto, es co-branding al
   estándar SaaS — la casa es de la correduría y detrás se presenta quién fabrica la plataforma.

   Antes esto no existía y el hueco se tapaba mal: cuando la correduría no tenía nombre configurado, el
   TÍTULO de la barra caía a «abistack», o sea que al tomador se le decía que su correduría se llama
   así. Ahora cada marca ocupa su sitio y ninguna suplanta a la otra.

   📐 Discreto por definición: es la firma del fabricante, no un reclamo. Y se retira por debajo de
   `sm` (`d-none d-sm-flex` en el marcado) porque en la barra estrecha el sitio es para la correduría,
   que es de quien el tomador cree que es el portal — no para nuestra firma. */
/* 🎨 s149 · LA MARCA MADRE NO NECESITA UN COLOR PROPIO AQUÍ, y que no lo necesite es la señal de
   que la barra está bien pintada.

   Hubo en este punto un `--ins-brand-umbrella: #67e8f9`, porque el AppBar iba en índigo pleno y la
   barrera de contraste del tema no mide contra él: había que elegir el color a mano. Con el AppBar
   pintado del color del PAPEL —como en los otros dos hosts—, esa superficie entra ya en lo que la
   barrera mide, y el token cae solo al secundario del tema: legible en claro y en oscuro sin
   decidir nada desde aquí.

   ⚖️ Un override que deja de hacer falta se retira. Si algún día vuelve a hacer falta, será la
   señal de que la barra se salió otra vez de lo que la barrera sabe medir. */
.portal-cobranding {
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid currentColor;
    font-size: 11px;
    line-height: 1;
    opacity: 0.55;
    white-space: nowrap;
}