/* =================================================================================================
   mainmodule.css - el estilo de las pantallas de ESTA aplicacion
   MainModule · .NET 10.00

   Tres cosas, y ninguna es del framework: el tema del interior -las pantallas con sesion-, el aviso
   a pagina completa del error y el sin permiso, y la rejilla del panel por rol.

   Las variables (--dm-*) son del framework y aqui se sobrescriben, que es justo para lo que estan:
   dameti.css no escribe un solo color en sus reglas, asi que cambiarlas aqui cambia el aspecto de
   todos los componentes sin tocar una linea de Framework1000.

   Se carga la ULTIMA (App.razor): a igual especificidad, lo de aqui gana a lo del framework.

   La familia .login se fue de aqui el 2026-09-11: la entrada pasa a estilarse bajo .pj en
   signup.css, con la landing y el alta. Ninguna otra pantalla usaba esas clases (Error,
   AccessDenied y NotFound usan .notice), y la entrada de MasterConfiguration no carga esta hoja.
   ================================================================================================= */

/* =================================================================================================
   Tema del interior (2026-09-11)

   El interior deja el azul de fabrica de Framework1000 y pasa a la tinta azul sobre papel de la
   parte publica, en version ligera. El usuario rechazo llevar el papel pijama entero dentro
   («puede causar rechazo»), asi que aqui solo viajan la barra en azul de tablero, el papel, la
   tinta, los tipos y un margen de arrastre fino. Maqueta aprobada: mockups/propuestas/Panel.html.

   Sobre .app-shell y no sobre :root: .app-shell es la raiz de MainLayout, el armazon de las
   pantallas con sesion. La entrada, el error y el sin permiso van en EmptyLayout (.app-plain), y
   la landing y el alta en PublicLayout bajo .pj (signup.css): ninguno cuelga de .app-shell, asi que
   el tema no los toca. Y no se toca dameti.css porque lo comparte la consola de plataforma
   (MasterConfiguration), que no cambia y no carga esta hoja.

   Las variables se heredan por el DOM, no por la hoja: cualquier regla del framework que diga
   var(--dm-primary) dentro del armazon lee este valor.
   ================================================================================================= */

.app-shell {
    /* --- Marca: la tinta azul ------------------------------------------------------------- */
    --dm-primary: #1D4278;
    --dm-primary-dark: #132F58;
    --dm-primary-light: #DAE6F4;

    /* --- Intencion. Cada texto pasa AA (4,5:1) sobre su propio fondo claro: los de fabrica
       (#16a34a, #d97706) no llegaban ni sobre blanco. -------------------------------------- */
    --dm-success: #166534;
    --dm-success-light: #DCFCE7;
    --dm-warning: #92400E;
    --dm-warning-light: #FEF3C7;
    --dm-danger: #B91C1C;
    --dm-danger-light: #FEE2E2;
    --dm-info: #075985;
    --dm-info-light: #E0F2FE;
    --dm-neutral: #3E5578;
    --dm-neutral-light: #EEF3FA;

    /* --- Papel y texto. Ningun gris por debajo de 4,5:1: el --dm-text-muted de fabrica
       (#94a3b8) se quedaba en 2,6:1 y era el color de fechas y metadatos, o sea, de lo que
       se lee. -------------------------------------------------------------------------------- */
    --dm-bg: #FBFCFD;
    --dm-surface: #FFFFFF;
    --dm-surface-alt: #EEF3FA;
    --dm-border: #D5DEEA;
    --dm-border-strong: #A9BAD1;
    --dm-text: #101217;
    --dm-text-soft: #2E4568;
    --dm-text-muted: #4F6485;

    /* --- Cuadrado, como los botones y los campos de la landing y del login ---------------- */
    --dm-radius: 0;
    --dm-radius-sm: 0;

    /* --- Sombras con desplazamiento y en tinta: la gris de fabrica ensuciaba el papel ------ */
    --dm-shadow: 0 1px 2px rgba(19, 47, 88, .06), 0 2px 6px rgba(19, 47, 88, .08);
    --dm-shadow-lg: 0 12px 28px -8px rgba(19, 47, 88, .22), 0 4px 10px -4px rgba(19, 47, 88, .12);

    /* --- Tipos, autoalojados en css/fonts.css. La estrecha no tiene variable en el framework:
       --app-font-condensed es de esta aplicacion, y dossiers.css la lee con la misma familia
       de reserva por si el modulo se monta en otro host. Texto base a 15px: la estrecha y
       Sofia Sans a 14px se leian pequenas, y 15px es la medida de la maqueta. --------------- */
    --dm-font: "Sofia Sans", "Segoe UI", Arial, sans-serif;
    --dm-font-mono: "Courier Prime", "Courier New", monospace;
    --app-font-condensed: "Sofia Sans Condensed", "Arial Narrow", "Segoe UI", sans-serif;
    --dm-text-base: .9375rem;

    /* --- Barra lateral: el azul de tablero de la landing ---------------------------------- */
    --dm-sidebar-width: 232px;
    --dm-sidebar-bg: #142C50;
    --dm-sidebar-text: #D5E0F0;
    --dm-sidebar-text-strong: #FFFFFF;
    --dm-sidebar-hover-bg: #1C3A66;
    --dm-sidebar-active-bg: #FBFCFD;
    --dm-sidebar-border: rgba(233, 239, 248, .14);

    /* body lee las variables en :root, fuera del armazon: sin repetir aqui fondo, letra y color
       seguirian siendo los de fabrica. */
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    color: var(--dm-text);
    background: var(--dm-bg);
}

.app-shell ::selection {
    color: var(--dm-bg);
    background: var(--dm-primary);
}

/* --- Tipos -----------------------------------------------------------------------------------
   Titulos, rotulos, botones y navegacion en la estrecha; el texto corrido en Sofia Sans, que ya
   es la --dm-font de arriba. La lista es de clases del framework: son las que pintan esas cuatro
   cosas en todas las pantallas del interior, y ninguna declara familia propia. */

.app-shell h1,
.app-shell h2,
.app-shell h3,
.app-shell h4,
.app-shell .btn,
.app-shell .tag,
.app-shell .tabs__tab,
.app-shell .form-field__label,
.app-shell .input__label,
.app-shell .tbl__head-cell,
.app-shell .sidebar__title,
.app-shell .sidebar__link,
.app-shell .app-header__heading,
.app-shell .app-header__avatar-initials {
    font-family: var(--app-font-condensed);
}

.app-shell h1 {
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--dm-primary);
}

.app-shell h2,
.app-shell h3,
.app-shell h4 {
    font-weight: 700;
}

/* La estrecha a 14px queda pequena en un boton: sube a 16px, que es la medida de la maqueta. Los
   dos tamanos se reponen despues porque .app-shell .btn les gana en especificidad. */
.app-shell .btn {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.app-shell .btn--small { font-size: var(--dm-text-sm); }
.app-shell .btn--large { font-size: 1.125rem; }

.app-shell .form-field__label,
.app-shell .input__label {
    font-size: .875rem;
    font-weight: 600;
}

/* Cuadrada como todo lo demas: la pastilla de fabrica era lo unico redondo que quedaba. */
.app-shell .tag {
    font-weight: 600;
    border-radius: 0;
}

/* --- Tablas ----------------------------------------------------------------------------------
   Filas alternas en azul muy palido: son las bandas del papel pijama de la landing, que en el
   interior se quedan donde nacieron -en los listados- y no en la pagina entera. La cabecera, como
   los rotulos de la maqueta: versalitas en tinta sobre una raya de tinta.

   La banda va con :where() para que pese solo dos clases: cualquier fila con color propio -la
   seleccionada, la narrativa de la ficha del expediente- la gana sin pelearse con el armazon. */

.app-shell .tbl__head-cell {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dm-primary);
    background: var(--dm-surface);
    border-bottom: 1px solid var(--dm-primary);
}

:where(.app-shell) .tbl__row:nth-child(even) { background: var(--dm-surface-alt); }
:where(.app-shell) .tbl__row.tbl__row--selected { background: var(--dm-primary-light); }

/* Al pasar, la banda fuerte: con la de fabrica (--dm-surface-alt) una fila par no cambiaba. */
.app-shell .tbl--selectable .tbl__row:not(.tbl__row--state):hover { background: var(--dm-primary-light); }

/* --- Barra lateral ---------------------------------------------------------------------------
   El tablero azul de la landing. El activo va en papel con la letra en tinta, como una pestana de
   la hoja que tiene al lado.

   Se sobrescribe la regla concreta de dameti-components.css y no solo su variable: el framework
   pinta el activo con --dm-sidebar-active-bg de fondo pero con --dm-sidebar-text-strong (blanco)
   de letra, y blanco sobre papel no se lee. Con :hover incluido, porque .sidebar__link:hover pesa
   lo mismo que el activo y lo volvia azul oscuro al pasar el raton. Y sin la raya blanca de abajo
   que el framework le pone por debajo de 600px: el papel ya dice cual es. */

.app-shell .sidebar__title {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 28px;
    letter-spacing: -.01em;
}

.app-shell .sidebar__link {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color .15s cubic-bezier(.16, 1, .3, 1);
}

.app-shell .sidebar__link--active,
.app-shell .sidebar__link--active:hover {
    font-weight: 700;
    color: var(--dm-primary);
    background: var(--dm-sidebar-active-bg);
    border-left-color: transparent;
    border-bottom-color: transparent;
}

/* La geometria de la maqueta -enlaces de 40px, separados del borde, sin la raya de 3px- solo con
   la barra desplegada. Plegada (60px, solo iconos) y en pantalla estrecha manda la del framework:
   con el sangrado de la maqueta el icono no cabe en 60px. */
@media (min-width: 901px) {
    .app-shell .sidebar:not(.sidebar--collapsed) .sidebar__list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0 10px;
    }

    .app-shell .sidebar:not(.sidebar--collapsed) .sidebar__link {
        min-height: 40px;
        padding: 0 12px;
        border-left-width: 0;
    }
}

/* --- Cabecera --------------------------------------------------------------------------------
   Sin fondo propio: es el borde de arriba de la hoja, cerrado con una raya de tinta. El relleno
   izquierdo deja sitio al margen de arrastre (20px) y al mismo aire que el contenido. */

.app-shell .app-header {
    padding: 0 32px 0 52px;
    background: transparent;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--dm-primary);
}

/* El nombre de la organizacion, como el rotulo de la maqueta. */
.app-shell .app-header__heading {
    font-size: .75rem;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dm-primary);
}

.app-shell .app-header__avatar {
    width: 32px;
    height: 32px;
    border-radius: 0;
}

.app-shell .app-header__avatar-initials {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.app-shell .app-header__badge,
.app-shell .app-header__menu-count {
    border-radius: 0;
}

/* --- Margen de arrastre ----------------------------------------------------------------------
   El unico adorno que viaja de la landing al interior: una tira de 20px contra la barra, con
   taladros pequenos en el azul del tablero -se ve la mesa a traves del papel- y la perforacion
   discontinua. Es el ::before de .main en la maqueta; aqui .app-shell__body, que es lo mismo
   -cabecera mas contenido- en el armazon de MainLayout.

   pointer-events:none porque va encima de lo que pase por esos 20px, y un adorno no puede
   quedarse con un clic. */

.app-shell .app-shell__body {
    position: relative;
}

.app-shell .app-shell__body::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 20px;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 50% 36px, var(--dm-sidebar-bg) 0 3.6px, transparent 4.2px),
        linear-gradient(to bottom, var(--dm-border-strong) 0 5px, transparent 5px 10px);
    background-size: 100% 72px, 1px 10px;
    background-repeat: repeat-y;
    background-position: 0 0, 100% 0;
}

.app-shell .app-shell__content {
    padding: 32px 32px 56px 52px;
}

/* Por debajo de 900px la barra se pliega (dameti.css) y la tira se va: en pantalla estrecha, 20px
   de adorno son 20px menos de lista. Mismo corte que el del framework, para que no haya un tramo
   con la barra plegada y la tira puesta. Los rellenos estrechos se repiten aqui porque las reglas
   de arriba ganan en especificidad a las media queries de dameti.css. */
@media (max-width: 900px) {
    .app-shell .app-shell__body::before { display: none; }

    .app-shell .app-header { padding: 0 16px; }

    .app-shell .app-shell__content { padding: 24px 16px 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell .sidebar__link { transition: none; }
}

/* =================================================================================================
   Aviso a pagina completa: el error y el sin permiso

   No es lo mismo que el componente Banner del framework, aunque la revision lo leyera como un
   duplicado: Banner es una franja de aviso dentro de un formulario, y esto una tarjeta centrada que
   ocupa la pantalla porque no hay nada mas que mostrar.
   ================================================================================================= */

.notice {
    max-width: 420px;
    padding: var(--dm-space-6);
    text-align: center;
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
    box-shadow: var(--dm-shadow);
}

.notice__title {
    margin-bottom: var(--dm-space-3);
    font-size: var(--dm-text-xl);
}

.notice__text {
    margin-bottom: var(--dm-space-4);
    color: var(--dm-text-soft);
}

/* Error.razor y AccessDenied.razor emitian esta clase y no la definia nadie: el enlace de vuelta
   al panel salia sin estilo, o sea, como un enlace suelto en medio de la tarjeta. */
.notice__link {
    display: inline-block;
    padding: var(--dm-space-2) var(--dm-space-4);
    font-weight: 500;
    color: var(--dm-primary);
    text-decoration: none;
    border: 1px solid var(--dm-primary);
    border-radius: var(--dm-radius-sm);
}

.notice__link:hover {
    color: var(--dm-primary-contrast);
    background: var(--dm-primary);
}

/* =================================================================================================
   Panel por rol
   ================================================================================================= */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--dm-space-4);
}

/* =================================================================================================
   Iconos del menu

   Son SVG de trazo pintados como MASCARA, no formas dibujadas con bordes de CSS.

   Antes cada icono era un <span> vacio con un ::before al que se le daban bordes, radios y
   tamanos hasta que se pareciera a algo: un circulo por «regional», medio rectangulo por
   «clientes». De cerca parecian glifos rotos, y no habia forma de dibujar un engranaje o una
   papelera con esa tecnica.

   Con mask el color lo pone `background: currentColor`, asi que el icono hereda el color del
   enlace -- incluido el estado activo y el hover -- sin repetir un solo valor. Y sin fuente de
   iconos ni fichero externo: van como data URI en esta misma hoja, que es lo que pide la regla de
   no meter bibliotecas de terceros.
   ================================================================================================= */

.icon-dashboard::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%229%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%225%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2212%22%20width%3D%227%22%20height%3D%229%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2216%22%20width%3D%227%22%20height%3D%225%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%229%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%225%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2212%22%20width%3D%227%22%20height%3D%229%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2216%22%20width%3D%227%22%20height%3D%225%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.icon-settings::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M19.4%2015a1.65%201.65%200%200%200%20.33%201.82l.06.06a2%202%200%201%201-2.83%202.83l-.06-.06a1.65%201.65%200%200%200-1.82-.33%201.65%201.65%200%200%200-1%201.51V21a2%202%200%201%201-4%200v-.09A1.65%201.65%200%200%200%209%2019.4a1.65%201.65%200%200%200-1.82.33l-.06.06a2%202%200%201%201-2.83-2.83l.06-.06A1.65%201.65%200%200%200%204.6%2015a1.65%201.65%200%200%200-1.51-1H3a2%202%200%201%201%200-4h.09A1.65%201.65%200%200%200%204.6%209a1.65%201.65%200%200%200-.33-1.82l-.06-.06a2%202%200%201%201%202.83-2.83l.06.06A1.65%201.65%200%200%200%209%204.6a1.65%201.65%200%200%200%201-1.51V3a2%202%200%201%201%204%200v.09a1.65%201.65%200%200%200%201%201.51%201.65%201.65%200%200%200%201.82-.33l.06-.06a2%202%200%201%201%202.83%202.83l-.06.06A1.65%201.65%200%200%200%2019.4%209c.24.58.8.98%201.51%201H21a2%202%200%201%201%200%204h-.09a1.65%201.65%200%200%200-1.51%201z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M19.4%2015a1.65%201.65%200%200%200%20.33%201.82l.06.06a2%202%200%201%201-2.83%202.83l-.06-.06a1.65%201.65%200%200%200-1.82-.33%201.65%201.65%200%200%200-1%201.51V21a2%202%200%201%201-4%200v-.09A1.65%201.65%200%200%200%209%2019.4a1.65%201.65%200%200%200-1.82.33l-.06.06a2%202%200%201%201-2.83-2.83l.06-.06A1.65%201.65%200%200%200%204.6%2015a1.65%201.65%200%200%200-1.51-1H3a2%202%200%201%201%200-4h.09A1.65%201.65%200%200%200%204.6%209a1.65%201.65%200%200%200-.33-1.82l-.06-.06a2%202%200%201%201%202.83-2.83l.06.06A1.65%201.65%200%200%200%209%204.6a1.65%201.65%200%200%200%201-1.51V3a2%202%200%201%201%204%200v.09a1.65%201.65%200%200%200%201%201.51%201.65%201.65%200%200%200%201.82-.33l.06-.06a2%202%200%201%201%202.83%202.83l-.06.06A1.65%201.65%200%200%200%2019.4%209c.24.58.8.98%201.51%201H21a2%202%200%201%201%200%204h-.09a1.65%201.65%200%200%200-1.51%201z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.icon-users::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M23%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M23%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.icon-roles::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202%204%206v6c0%205%203.4%209.2%208%2010%204.6-.8%208-5%208-10V6z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202%204%206v6c0%205%203.4%209.2%208%2010%204.6-.8%208-5%208-10V6z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.icon-organization::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3Cpath%20d%3D%22M5%2021V7l7-4%207%204v14%22%2F%3E%3Cpath%20d%3D%22M9%2021v-4h6v4%22%2F%3E%3Cpath%20d%3D%22M9%209h.01M15%209h.01M9%2013h.01M15%2013h.01%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3Cpath%20d%3D%22M5%2021V7l7-4%207%204v14%22%2F%3E%3Cpath%20d%3D%22M9%2021v-4h6v4%22%2F%3E%3Cpath%20d%3D%22M9%209h.01M15%209h.01M9%2013h.01M15%2013h.01%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.icon-profile::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021v-1a7%207%200%200%201%2014%200v1%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021v-1a7%207%200%200%201%2014%200v1%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Soporte. Un bocadillo de conversacion: es lo que hay al otro lado del enlace -- alguien con
   quien hablar -, no una llave inglesa. Misma tecnica de mascara que los de arriba. */
.icon-support::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.4%208.4%200%200%201-9%208.4%209.1%209.1%200%200%201-3.9-.8L3%2021l1.9-4.9A8.4%208.4%200%200%201%2012%203.1a8.4%208.4%200%200%201%209%208.4z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.4%208.4%200%200%201-9%208.4%209.1%209.1%200%200%201-3.9-.8L3%2021l1.9-4.9A8.4%208.4%200%200%201%2012%203.1a8.4%208.4%200%200%201%209%208.4z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* El h1 de cada pantalla sin marco de foco (2026-09-11).
   FocusOnNavigate (Routes.razor) mueve el foco al h1 al cargar cada ruta, para que el lector de
   pantalla empiece por el titulo. Chrome trata ese foco puesto por codigo como :focus-visible y le
   pintaba un recuadro negro al titular de la landing y al saludo del panel. El foco se queda; solo
   se quita el marco, que en un titulo que no se puede pulsar no dice nada. El selector lleva el
   tabindex que pone FocusOnNavigate para pesar mas que ".pj :focus-visible" de signup.css. */
h1[tabindex="-1"]:focus {
    outline: none;
}

/* La configuracion, a dos columnas y con «Guardar» siempre a la vista (2026-09-12).

   La ficha de la organizacion tiene doce campos: en una sola columna el pie con «Guardar» caia
   fuera de la pantalla, habia que bajar hasta el final para pulsarlo y volver a subir para revisar
   lo escrito. El cuerpo de cada bloque pasa a dos columnas -- dameti.css ya lo devuelve a una sola
   en pantalla estrecha, porque el framework contaba con que alguien lo pusiera en rejilla -- y el
   pie se queda pegado al fondo del bloque mientras quede formulario por debajo. */
.app-shell .config-section__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dm-space-3) var(--dm-space-5);
    align-items: start;
}

.app-shell .config-section__actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 0 calc(var(--dm-space-5) * -1) calc(var(--dm-space-5) * -1);
    padding: var(--dm-space-3) var(--dm-space-5);
    background: var(--dm-surface);
    box-shadow: 0 -6px 12px -8px rgba(16, 34, 64, .28);
}

@media (max-width: 900px) {
    .app-shell .config-section__body {
        grid-template-columns: minmax(0, 1fr);
    }
}