/* =================================================================================================
   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;
    --dm-space-1: 4px;
    --dm-space-2: 8px;
    --dm-space-3: 12px;
    --dm-space-4: 16px;
    --dm-space-5: 24px;
    --dm-space-6: 32px;

    --dm-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .1);
    --dm-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, .1), 0 4px 6px -4px rgba(15, 23, 42, .1);

    /* --- Tipografia ----------------------------------------------------------------------- */
    --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;
    --dm-text-sm: .8125rem;
    --dm-text-base: .875rem;
    --dm-text-lg: 1rem;
    --dm-text-xl: 1.25rem;
    --dm-text-2xl: 1.75rem;

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

    /* --- Barra lateral -------------------------------------------------------------------
       La barra tiene su propia paleta y no la general, porque va en oscuro sobre azul mientras
       el resto de la pagina va en claro: si usara --dm-surface y --dm-text-soft como antes, el
       texto quedaria ilegible al cambiarle el fondo.

       Son variables y no colores escritos en las reglas justamente para que una aplicacion
       pueda cambiarlas -- MasterConfiguration las sobrescribe con lo que el operador guarde en
       la configuracion de aspecto, sin tocar una sola regla de este fichero. */
    --dm-sidebar-bg: #1e3a8a;
    --dm-sidebar-text: #c7d7f5;
    --dm-sidebar-text-strong: #ffffff;
    --dm-sidebar-hover-bg: rgba(255, 255, 255, .08);
    --dm-sidebar-active-bg: rgba(255, 255, 255, .14);
    --dm-sidebar-border: rgba(255, 255, 255, .14);
}

/* =================================================================================================
   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;
}

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

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

/* El armazon plegado. No lo usa el esqueleto -que se sirve en SSR y no tiene como plegar nada-,
   pero tiene que existir: la barra se estrecha sola con .sidebar--collapsed, y sin esta clase una
   aplicacion interactiva que marque el armazon no tiene donde colgar sus ajustes. Ver
   Sidebar.ShowToggle. */
.app-shell--collapsed {
    /* Deliberadamente sin reglas propias: hoy todo el trabajo lo hace .sidebar--collapsed sobre
       el aside. Esto es el gancho, no el efecto. */
}

.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-5);
}

/* 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-5);
    font-size: var(--dm-text-2xl);
}

.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. */

/* =================================================================================================
   Pantallas estrechas
   ================================================================================================= */

/*
   El armazon no tenia una sola media query: en un movil o una tableta la aplicacion se veia como
   un escritorio encogido, con 240px de barra lateral comiendose media pantalla y el contenido
   apretado en lo que quedaba.

   No hay barra que plegar a mano ni menu hamburguesa -- eso es un componente con estado y aqui no
   se puede tener, porque el armazon se sirve en SSR estatico. Lo que si se puede es lo que hace
   .sidebar--collapsed cuando se pulsa el boton: dejar la barra en su ancho estrecho, con los
   iconos y sin los textos. Por debajo de 900px se hace eso solo, sin que nadie pulse nada, y los
   textos se esconden con CSS: el menu sigue entero y navegable, y el contenido recupera la
   pantalla.

   Los textos NO se quitan del DOM -se ocultan visualmente- para que un lector de pantalla siga
   leyendo el nombre de cada entrada. El title de cada enlace, que ya venia puesto, es lo que
   ensena el nombre al pasar el raton.
*/
@media (max-width: 900px) {
    .sidebar {
        flex-basis: var(--dm-sidebar-width-collapsed);
        width: var(--dm-sidebar-width-collapsed);
    }

    .sidebar__text,
    .sidebar__title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .sidebar__link {
        justify-content: center;
        padding-left: var(--dm-space-2);
        padding-right: var(--dm-space-2);
    }

    .app-header {
        gap: var(--dm-space-2);
        padding: 0 var(--dm-space-3);
    }

    .app-shell__content {
        padding: var(--dm-space-4);
    }

    /* Una tabla ancha se desplaza dentro de su caja; la pagina no se desplaza en horizontal. */
    .table-wrap,
    .data-table {
        display: block;
        overflow-x: auto;
    }
}

/*
   Por debajo de 600px la barra se va del todo y el menu pasa a ser una fila de iconos ARRIBA.
   Una columna de 60px en una pantalla de movil sigue siendo la sexta parte del ancho, y el
   contenido de esta aplicacion -- tablas de documentos, formularios de dos columnas -- la
   necesita entera.
*/
@media (max-width: 600px) {
    .app-shell {
        flex-direction: column;
    }

    .sidebar {
        flex: 0 0 auto;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--dm-sidebar-border);
    }

    .sidebar__brand {
        display: none;
    }

    .sidebar__nav,
    .sidebar__bottom {
        padding: 0;
        border-top: none;
    }

    .sidebar__list {
        display: flex;
        overflow-x: auto;
    }

    .sidebar__link {
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .sidebar__link--active {
        border-left-color: transparent;
        border-bottom-color: var(--dm-sidebar-text-strong);
    }

    .app-shell__content {
        padding: var(--dm-space-3);
    }

    /* Formularios y rejillas de dos columnas, a una sola. */
    .form-field,
    .config-section__body {
        grid-template-columns: minmax(0, 1fr);
    }
}