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

   Aqui va lo que es de las pantallas que trae el preforma de fabrica —la entrada y la rejilla del
   panel—, y no del framework.

   Estaba en Framework1000/wwwroot/css/dameti.css, que es la hoja comun. Un framework que van a
   consumir decenas de aplicaciones no puede llevar dentro el CSS de la pantalla de login de una de
   ellas: toda aplicacion futura heredaba el aspecto de un formulario que quiza no monta igual, y
   nada avisaba de que esas clases no eran del sistema de diseno sino de una pantalla concreta.

   Las variables (--dm-*) SI son del framework y se siguen usando: eso es justo para lo que estan,
   y es lo que hace que estas pantallas cambien de tema con el resto sin tocar una linea.
   ================================================================================================= */

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

/* =================================================================================================
   Pantalla de entrada
   ================================================================================================= */

.login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.login__card {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-4);
    width: 100%;
    max-width: 360px;
    padding: var(--dm-space-6);
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
    box-shadow: var(--dm-shadow-lg);
}

.login__title {
    font-size: var(--dm-text-xl);
    text-align: center;
}

.login__field {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-1);
}

.login__label {
    font-size: var(--dm-text-sm);
    color: var(--dm-text-soft);
}

.login__input {
    padding: var(--dm-space-2) var(--dm-space-3);
    font: inherit;
    color: var(--dm-text);
    background: var(--dm-surface);
    border: 1px solid var(--dm-border-strong);
    border-radius: var(--dm-radius-sm);
}

.login__input:focus {
    border-color: var(--dm-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--dm-primary-light);
}

.login__submit {
    padding: var(--dm-space-3);
    font-weight: 600;
    color: var(--dm-primary-contrast);
    background: var(--dm-primary);
    border: none;
    border-radius: var(--dm-radius-sm);
    cursor: pointer;
}

.login__submit:hover {
    background: var(--dm-primary-dark);
}

.login__error {
    padding: var(--dm-space-2) var(--dm-space-3);
    color: var(--dm-danger);
    background: var(--dm-danger-light);
    border-radius: var(--dm-radius-sm);
    font-size: var(--dm-text-sm);
}

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

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

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

/* La unica entrada de menu del esqueleto (MainLayout.MenuDelRol) pedia .icon-dashboard y esa clase
   no estaba definida en ninguna hoja: el icono no se veia, y asi se copiaba a cada aplicacion.
   Se dibuja con CSS y no con una fuente de iconos a proposito: las cinco librerias de iconos que
   habia en el proyecto se retiraron en la revision 006 y no se van a volver a meter. */
.icon-dashboard::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
    border: 2px solid currentColor;
    border-radius: 2px;
    box-shadow: inset 0 -6px 0 -3px currentColor;
}

/* La entrada de menu de /settings (UserConfiguration, memoria 015 bloque C paso 5). Un
   engranaje simplificado: un circulo con un anillo interior, dibujado igual que el de arriba
   -con CSS, sin fuente de iconos- para no arrastrar una dependencia nueva por un solo icono. */
.icon-settings::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--dm-surface, #fff);
}

/* Las entradas de UserConfiguration (memoria 015, bloque D paso 7). Mismo criterio que las de
   arriba: formas geometricas simples con CSS, sin fuente de iconos. */
.icon-users::before {
    content: "";
    display: block;
    width: 14px;
    height: 10px;
    margin: 2px auto 0;
    border-radius: 40% 40% 0 0;
    border: 2px solid currentColor;
    border-bottom: none;
}

.icon-roles::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: 1px auto 0;
    border: 2px solid currentColor;
    transform: rotate(45deg);
}

.icon-organization::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: 1px auto 0;
    border: 2px solid currentColor;
    box-shadow: inset 3px -3px 0 -1px currentColor;
}

.icon-profile::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: 2px auto 0;
    border: 2px solid currentColor;
    border-radius: 50%;
}