/* =================================================================================================
   dameti.css - base y armazon
   Framework1000 · .NET 10.00

   Este fichero define el tema y la estructura de pagina. Los componentes tienen el suyo en
   dameti-components.css.

   Todo el color, el espaciado y la tipografia salen de las variables de :root. Una aplicacion
   que quiera otro aspecto redefine esas variables en su propia hoja y no toca nada mas: por eso
   aqui no hay ni un solo color escrito directamente en una regla.
   ================================================================================================= */

:root {
    /* --- Color de marca ------------------------------------------------------------------- */
    --dm-primary: #2563eb;
    --dm-primary-dark: #1d4ed8;
    --dm-primary-light: #dbeafe;
    --dm-primary-contrast: #ffffff;

    /* --- Color de intencion --------------------------------------------------------------- */
    --dm-info: #0284c7;
    --dm-info-light: #e0f2fe;
    --dm-success: #16a34a;
    --dm-success-light: #dcfce7;
    --dm-warning: #d97706;
    --dm-warning-light: #fef3c7;
    --dm-danger: #dc2626;
    --dm-danger-light: #fee2e2;
    --dm-neutral: #64748b;
    --dm-neutral-light: #f1f5f9;

    /* --- Superficies y texto -------------------------------------------------------------- */
    --dm-bg: #f8fafc;
    --dm-surface: #ffffff;
    --dm-surface-alt: #f1f5f9;
    --dm-border: #e2e8f0;
    --dm-border-strong: #cbd5e1;
    --dm-text: #0f172a;
    --dm-text-soft: #475569;
    --dm-text-muted: #94a3b8;

    /* --- Medidas -------------------------------------------------------------------------- */
    --dm-radius: 8px;
    --dm-radius-sm: 4px;
    /* El panel de un modal: 8px en un cuadro de 640 de ancho se ve a canto. */
    --dm-radius-lg: 14px;
    --dm-space-1: 4px;
    --dm-space-2: 8px;
    --dm-space-3: 12px;
    --dm-space-4: 16px;
    --dm-space-5: 24px;
    --dm-space-6: 32px;

    /* Tres alturas y no dos. La sombra de una tarjeta en reposo y la de un menu que acaba de
       abrirse no pueden ser la misma: la primera solo tiene que separar del fondo, la segunda
       tiene que decir «esto esta ENCIMA». En medio faltaba la de un elemento que se levanta al
       pasar por encima, y sin ella el hover de una tarjeta solo podia cambiar de color. */
    --dm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
    --dm-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
    --dm-shadow-md: 0 2px 4px rgba(15, 23, 42, .05), 0 4px 12px -2px rgba(15, 23, 42, .08);
    --dm-shadow-lg: 0 4px 6px -2px rgba(15, 23, 42, .05), 0 12px 28px -6px rgba(15, 23, 42, .16);

    /* El anillo de foco. Una variable y no un color suelto: es lo que se pinta alrededor de TODO
       lo que se enfoca, y tenerlo en un sitio permite cambiarlo entero de una vez. */
    --dm-ring: 0 0 0 3px color-mix(in srgb, var(--dm-primary) 25%, transparent);

    /* --- Tipografia -----------------------------------------------------------------------
       Dos puntos menos de cuerpo que un tema de texto corrido. Una ficha de seis campos no puede
       pedir scroll: esto es una aplicacion de administracion, no un articulo.
    ---------------------------------------------------------------------------------------- */
    --dm-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --dm-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    /* Un escalon por debajo del pequeno, para el momento de un aviso en un desplegable de 320px. */
    --dm-text-xs: .6875rem;
    --dm-text-sm: .75rem;
    --dm-text-base: .8125rem;
    --dm-text-lg: .9375rem;
    --dm-text-xl: 1.0625rem;
    --dm-text-2xl: 1.25rem;

    /* --- Armazon -------------------------------------------------------------------------- */
    --dm-sidebar-width: 240px;
    --dm-sidebar-width-collapsed: 60px;
    --dm-header-height: 56px;
    --dm-avatar-size: 32px;

    /* --- Barra lateral: el color, configurable ---------------------------------------------
       Van aparte de las superficies porque la barra es oscura y el resto de la aplicacion claro,
       y porque el fondo y el texto los pone la organizacion en las variables de configuracion.
    ---------------------------------------------------------------------------------------- */
    --dm-sidebar-bg: #0f172a;
    --dm-sidebar-text: #cbd5e1;
    --dm-sidebar-text-strong: #ffffff;
    --dm-sidebar-border: #1e293b;
    --dm-sidebar-hover: #1e293b;
    --dm-sidebar-active-bg: var(--dm-primary);
    --dm-sidebar-active-text: var(--dm-primary-contrast);
}

/* =================================================================================================
   Reinicio corto
   ================================================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    line-height: 1.5;
    color: var(--dm-text);
    background: var(--dm-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
}

p {
    margin: 0;
}

a {
    color: var(--dm-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    font: inherit;
    color: inherit;
}

code {
    font-family: var(--dm-font-mono);
    font-size: .9em;
}

/* Foco visible siempre: quitarlo deja la aplicacion inutilizable con teclado. */
:focus-visible {
    outline: 2px solid var(--dm-primary);
    outline-offset: 2px;
    border-radius: var(--dm-radius-sm);
}

/*
   LO QUE NO ES FOCALIZABLE NO PINTA FOCO, aunque alguien se lo de por codigo.

   Un elemento con tabindex="-1" no esta en el recorrido del tabulador: no se llega a el pulsando
   Tab, solo llamando a focus() desde un script. Enseñarle el anillo de foco al que llega asi es
   enseñar un cerco alrededor de un texto que nadie ha tocado —y eso era exactamente lo que se veia
   al entrar en la aplicacion: un rectangulo alrededor del titulo de la cabecera, sin nada
   editable, en cada pantalla—.

   La causa concreta ya no esta (era <FocusOnNavigate Selector="h1"> en Routes.razor, que le ponia
   tabindex="-1" al primer h1 del documento y lo enfocaba en cada navegacion), pero la regla se
   queda: cualquier aplicacion que vuelva a mover el foco por codigo hacia un contenedor —para que
   un lector de pantalla anuncie la pantalla nueva, que es para lo que sirve— no tiene por que
   pintar un cerco. El foco de VERDAD, el que se mueve con el teclado, sigue viendose entero.
*/
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

/* =================================================================================================
   Armazon de la aplicacion
   ================================================================================================= */

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* El armazon plegado. Es el gancho para una aplicacion interactiva que quiera llevar el plegado
   dentro de su circuito en vez de dejarselo al armazon; el plegado de fabrica lo hace
   data-sidebar sobre <html>, unas lineas mas abajo. Ver Sidebar.ShowToggle. */
.app-shell--collapsed {
    /* Deliberadamente sin reglas propias: el efecto lo pone .sidebar--collapsed sobre el aside. */
}

/* --- La barra plegada -----------------------------------------------------------------------------
   EL ESTADO VIVE EN <html>, en data-sidebar, y no en un <input type="checkbox"> dentro del armazon.
   Ese es todo el cambio, y hay un motivo concreto detras.

   Antes el hamburguesa era un <label for> de un checkbox que iba de primer hijo de .app-shell, y
   funcionaba: pulsarlo estrechaba la barra sin una linea de script. Lo que no funcionaba era lo
   siguiente. La aplicacion se sirve en SSR y blazor.web.js repinta el cuerpo entero en cada
   navegacion; «marcado» es estado del DOM y no un atributo, asi que el checkbox volvia a nacer
   vacio: se plegaba la barra, se pulsaba cualquier entrada del menu, y la barra estaba otra vez
   abierta. Desde fuera eso no se lee como «se ha perdido una preferencia» sino como «el
   hamburguesa no hace nada».

   <html> queda FUERA de lo que Blazor repinta —parchea la cabeza y el cuerpo, no el elemento
   raiz—, asi que el atributo sobrevive a la navegacion. Quien lo pone y lo recuerda es
   wwwroot/js/ui.js, que ademas lo guarda en el almacenamiento local: la barra sigue como se dejo
   al volver mañana. Eso ya no se puede hacer sin script, y por eso se hace con el.
------------------------------------------------------------------------------------------------ */

:root[data-sidebar="collapsed"] .sidebar {
    flex-basis: var(--dm-sidebar-width-collapsed);
    width: var(--dm-sidebar-width-collapsed);
}

:root[data-sidebar="collapsed"] .sidebar__text,
:root[data-sidebar="collapsed"] .sidebar__title,
:root[data-sidebar="collapsed"] .sidebar__section,
:root[data-sidebar="collapsed"] .sidebar__group-arrow {
    display: none;
}

:root[data-sidebar="collapsed"] .sidebar__link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

:root[data-sidebar="collapsed"] .sidebar__brand {
    justify-content: center;
    padding: 0;
}

/* Plegada no hay sitio para desplegar el grupo: se muestran sus entradas sueltas, en iconos. */
:root[data-sidebar="collapsed"] .sidebar__group-summary {
    border-bottom: 1px solid var(--dm-sidebar-border);
}

:root[data-sidebar="collapsed"] .sidebar__list--nested .sidebar__link {
    padding-left: 0;
}

/* La raya vertical que marca la sangria de las entradas hijas no tiene nada que marcar cuando solo
   se ven iconos, y ademas caeria justo encima de ellos. */
:root[data-sidebar="collapsed"] .sidebar__list--nested {
    background: none;
}

:root[data-sidebar="collapsed"] .sidebar__list--nested::before {
    display: none;
}

.app-shell__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0; /* sin esto, una tabla ancha empuja el armazon y rompe el ancho */
}

.app-shell__content {
    flex: 1 1 auto;
    padding: var(--dm-space-4) var(--dm-space-5);

    /* El mismo cinturon que .app-shell__body, y hace falta igual: en un contenedor flex el hijo
       arranca con min-width:auto, o sea «lo que mida su contenido», y un bloque ancho de dentro
       -una tabla, un <pre>- ensancha el area de contenido, empuja el armazon y saca la pagina
       entera de la ventana. Lo que desborde se queda con su propio scroll y no arrastra la
       aplicacion. */
    min-width: 0;
}

/* Pantallas sin sesion: entrada, error, sin permiso. */
.app-plain {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--dm-space-5);
}

/* =================================================================================================
   Piezas sueltas de pagina
   ================================================================================================= */

.page-title {
    margin-bottom: var(--dm-space-3);
    font-size: var(--dm-text-xl);
    letter-spacing: -.015em;
}

/* El titulo y la accion principal en la MISMA linea. Una lista que gasta una linea en el titulo,
   otra en un enlace de alta y otra en blanco empieza tres lineas mas abajo de lo necesario. */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--dm-space-3);
    margin-bottom: var(--dm-space-3);
}

.page-head > .page-title {
    margin-bottom: 0;
}

/* El titulo y su enlace de volver, apilados. El enlace va ENCIMA y no al lado: se lee antes que el
   titulo, que es el orden en que se mira una pantalla, y ocupa una linea que ya estaba en blanco. */
.page-head__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.page-head__heading > .page-title {
    margin-bottom: 0;
}

.page-head__actions {
    display: flex;
    align-items: center;
    gap: var(--dm-space-2);
    flex-wrap: wrap;
}

/* Volver a la pantalla de arriba. Pequeno y en gris: es una salida, no la accion de la pantalla, y
   compitiendo con el titulo lo unico que consigue es que no se lea ninguno de los dos. */
.page-back {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    font-size: var(--dm-text-xs);
    color: var(--dm-text-muted);
    text-decoration: none;
}

.page-back:hover {
    color: var(--dm-primary);
    text-decoration: none;
}

/* La flecha se desplaza un pixel hacia donde lleva. Es lo unico que se mueve: un enlace de salida
   que crece o cambia de fondo al pasar por encima pide mas atencion de la que merece. */
.page-back__icon {
    transition: transform .12s ease;
}

.page-back:hover .page-back__icon {
    transform: translateX(-2px);
}

.page-loading {
    padding: var(--dm-space-6);
    color: var(--dm-text-muted);
    text-align: center;
}

.muted {
    color: var(--dm-text-muted);
}

/* Aqui estaba .dashboard-grid, que es la rejilla del panel de MainModule y no del framework: se
   ha ido a Interfaces/MainModule/wwwroot/css/mainmodule.css con las clases de .login. */

.datalist {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--dm-space-2) var(--dm-space-4);
    margin: 0;
}

.datalist dt {
    color: var(--dm-text-muted);
    font-size: var(--dm-text-sm);
}

.datalist dd {
    margin: 0;
    word-break: break-word;
}

/* Aqui estaban .notice y la familia .login, que son de las pantallas que MainModule trae de
   fabrica —el error, el sin permiso y la entrada— y no del framework. Se han ido a
   Interfaces/MainModule/wwwroot/css/mainmodule.css.

   .notice se leyo en la revision como un duplicado de .banner, y no lo es: .banner es una franja
   de aviso dentro de un formulario y .notice una tarjeta centrada a pagina completa. Lo que si
   era es CSS de dos pantallas concretas dentro del codigo comun, que es el motivo de la mudanza. */