/* ========================================================================
   Nexis Intranet — custom branding for the Authelia portal
   Injected by nginx sub_filter on auth.nexisdefense.com.
   Source palette: nexis-app/src/app.css (Sistema de Diseño UI v2 — Centro
   de Control de Misión Crítica).
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    /* Nexis palette — verde militar + khaki, sin azul */
    --nexis-bg-base:       #080A08;
    --nexis-bg-panel:      #0E120E;
    --nexis-bg-input:      #0C100C;
    --nexis-text-primary:  #C8CCBE;
    --nexis-text-bright:   #E0E4D8;
    --nexis-text-muted:    #4A5040;
    --nexis-text-label:    #6A7458;
    --nexis-accent:        #3A5A40;
    --nexis-accent-bright: #5A8A62;
    --nexis-khaki-bright:  #B8A44C;
    --nexis-border-panel:  #3A4A3A;
    --nexis-border-focus:  #4F6A4F;
    --nexis-font:          'JetBrains Mono', 'Consolas', 'Courier New', monospace;
}

/* ── Global base ──────────────────────────────────────────────────────── */
html, body {
    background: var(--nexis-bg-base) !important;
    font-family: var(--nexis-font) !important;
    color: var(--nexis-text-primary) !important;
}

body, #root, .MuiContainer-root {
    background: var(--nexis-bg-base) !important;
}

* {
    font-family: var(--nexis-font) !important;
}

/* ── Centrar el contenido de Ajustes y pantallas largas a max 960px ───── */
main,
.MuiContainer-root,
.MuiContainer-maxWidthLg,
.MuiContainer-maxWidthMd,
.MuiContainer-maxWidthXl,
[class*="SettingsLayout"],
[class*="settings-layout"] {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* ── Login form — anchura natural de lectura (max 420px) ─────────────────
   SIN scope a `form`: el markup de Authelia cambió y los campos ya no cuelgan
   de un <form> que casara con el selector viejo, así que la caja tomaba el
   ancho del contenedor general (960px). Constreñimos los controles del login
   directamente: TextField (usuario/contraseña), botón full-width (Iniciar
   sesión) y el FormControlLabel (Recordarme). No tocamos el selector de idioma
   (Select/IconButton) ni los icon-buttons. */
.MuiTextField-root,
.MuiButton-root.MuiButton-fullWidth,
.MuiFormControlLabel-root {
    max-width: 420px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* "Recordarme" alineado a la izquierda dentro del bloque de 420px centrado */
.MuiFormControlLabel-root {
    display: flex !important;
    justify-content: flex-start !important;
}

/* "Olvidé mi contraseña": Authelia lo mete en un grid item con
   justify-content: flex-end, así que queda descolgado a la derecha. Lo
   centramos bajo el formulario para racionalizar el bloque. */
.MuiGrid-root:has(> .MuiLink-button) {
    justify-content: center !important;
}

/* Reset-password: la fila de botones (Restablecer/Cancelar) son dos grid
   items xs-6 y sale a ~760px, más ancha que los campos (420px). La alineamos
   al mismo ancho centrado. El selector solo casa esa fila de dos botones
   (el login tiene un único botón full-width, no la matchea). */
.MuiGrid-container:has(> .MuiGrid-grid-xs-6 > button) {
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── Material UI Paper (login card) ──────────────────────────────────── */
.MuiPaper-root {
    background: var(--nexis-bg-panel) !important;
    border: 1px solid var(--nexis-border-panel) !important;
    color: var(--nexis-text-primary) !important;
    box-shadow: 0 0 0 1px var(--nexis-border-panel) !important;
    border-radius: 3px !important;
}

/* ── Typography ───────────────────────────────────────────────────────── */
.MuiTypography-root,
h1, h2, h3, h4, h5, h6 {
    color: var(--nexis-text-bright) !important;
    font-family: var(--nexis-font) !important;
    letter-spacing: 0.02em !important;
}

.MuiTypography-h1, .MuiTypography-h2,
.MuiTypography-h3, .MuiTypography-h4,
.MuiTypography-h5, .MuiTypography-h6 {
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 600 !important;
}

.MuiTypography-caption,
.MuiTypography-body2 {
    color: var(--nexis-text-muted) !important;
}

/* ── Inputs ───────────────────────────────────────────────────────────── */
.MuiInputBase-root,
.MuiOutlinedInput-root,
.MuiFilledInput-root {
    background: var(--nexis-bg-input) !important;
    color: var(--nexis-text-bright) !important;
    font-family: var(--nexis-font) !important;
    border-radius: 3px !important;
}

.MuiOutlinedInput-notchedOutline {
    border-color: var(--nexis-border-panel) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: var(--nexis-border-focus) !important;
}

.MuiInputLabel-root {
    color: var(--nexis-text-label) !important;
    font-family: var(--nexis-font) !important;
}

.MuiInputLabel-root.Mui-focused {
    color: var(--nexis-accent-bright) !important;
}

.MuiFormHelperText-root {
    color: var(--nexis-text-muted) !important;
    font-family: var(--nexis-font) !important;
}

/* ── Chrome / Edge autofill — quitar el azul claro nativo ─────────────── */
/* WebKit pinta los campos auto-rellenados con un fondo amarillo/azul que
   pisa nuestra paleta. Inyectamos un box-shadow "fake background" del color
   Nexis para neutralizarlo, mantenemos texto bright, y caret verde. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--nexis-bg-input) inset !important;
    -webkit-text-fill-color: var(--nexis-text-bright) !important;
    caret-color: var(--nexis-accent-bright) !important;
    /* Truco para que el navegador no re-aplique su color tras 1-2 segundos. */
    transition: background-color 100000s ease-in-out 0s, color 100000s ease-in-out 0s !important;
    border-radius: 3px !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.MuiButton-root {
    font-family: var(--nexis-font) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 600 !important;
    border-radius: 3px !important;
}

.MuiButton-containedPrimary,
button[type="submit"].MuiButton-contained {
    background: var(--nexis-accent) !important;
    color: var(--nexis-text-bright) !important;
    border: 1px solid var(--nexis-accent-bright) !important;
    box-shadow: none !important;
}

.MuiButton-containedPrimary:hover,
button[type="submit"].MuiButton-contained:hover {
    background: var(--nexis-accent-bright) !important;
    box-shadow: 0 0 12px rgba(58, 90, 64, 0.4) !important;
}

.MuiButton-outlined {
    border-color: var(--nexis-border-panel) !important;
    color: var(--nexis-text-primary) !important;
}

/* ── Checkbox (Remember me) ──────────────────────────────────────────── */
.MuiCheckbox-root {
    color: var(--nexis-text-label) !important;
}

.MuiCheckbox-root.Mui-checked {
    color: var(--nexis-accent-bright) !important;
}

/* ── Avatares Material UI con color (info/primary/etc) → verde Nexis ─── */
/* Cubre el bubble "i" del card OTP y la silueta default del usuario.    */
.MuiAvatar-colorDefault,
.MuiAvatar-colorPrimary,
.MuiAvatar-colorSecondary,
.MuiAvatar-colorInfo,
.MuiAvatar-colorWarning,
.MuiAvatar-colorError,
.MuiAvatar-colorSuccess {
    background-color: var(--nexis-accent) !important;
    color: var(--nexis-text-bright) !important;
}

.MuiAvatar-colorDefault > svg,
.MuiAvatar-colorPrimary > svg,
.MuiAvatar-colorSecondary > svg,
.MuiAvatar-colorInfo > svg {
    color: var(--nexis-text-bright) !important;
    fill: var(--nexis-text-bright) !important;
}

/* ── Botones text "error" rojos (CERRAR SESIÓN, CAMBIAR USUARIO, MÉTODOS) ── */
.MuiButton-textError,
.MuiButton-text.MuiButton-colorError,
button[class*="Error"]:not([class*="Alert"]),
a[class*="Error"]:not([class*="Alert"]) {
    color: var(--nexis-accent-bright) !important;
}

.MuiButton-textError:hover,
.MuiButton-text.MuiButton-colorError:hover {
    color: var(--nexis-khaki-bright) !important;
    background: transparent !important;
}

/* ── Language selector top-right ─────────────────────────────────────── */
.MuiSelect-root,
.MuiMenuItem-root {
    color: var(--nexis-text-primary) !important;
    font-family: var(--nexis-font) !important;
}

.MuiMenu-paper {
    background: var(--nexis-bg-panel) !important;
    border: 1px solid var(--nexis-border-panel) !important;
}

/* ── Links ────────────────────────────────────────────────────────────── */
a, .MuiLink-root {
    color: var(--nexis-accent-bright) !important;
    text-decoration: none !important;
}

a:hover, .MuiLink-root:hover {
    color: var(--nexis-khaki-bright) !important;
    text-decoration: underline !important;
}

/* ── Footer "Desarrollado por Authelia" — ocultar completamente ──────── */
footer, .footer,
[class*="footer"], [class*="Footer"],
[class*="PoweredBy"], [class*="powered-by"],
[id*="powered-by"], [id*="footer"],
[class*="Branding"], [class*="branding"] {
    display: none !important;
}

/* ── Icons (eye toggle, etc.) ────────────────────────────────────────── */
.MuiSvgIcon-root,
.MuiIconButton-root .MuiSvgIcon-root {
    color: var(--nexis-text-label) !important;
}

.MuiIconButton-root:hover .MuiSvgIcon-root {
    color: var(--nexis-accent-bright) !important;
}

/* ── Loading bars / progress ─────────────────────────────────────────── */
.MuiLinearProgress-root {
    background: var(--nexis-bg-input) !important;
}

.MuiLinearProgress-bar {
    background: var(--nexis-accent-bright) !important;
}

.MuiCircularProgress-circle {
    stroke: var(--nexis-accent-bright) !important;
}

/* ── Botón flotante "Ir a la intranet" inyectado por nginx sub_filter ── */
.nexis-back-to-app {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--nexis-accent);
    color: var(--nexis-text-bright) !important;
    padding: 0.75rem 1.25rem;
    font-family: var(--nexis-font);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    text-decoration: none !important;
    border: 1px solid var(--nexis-accent-bright);
    border-radius: 3px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    transition: background 0.2s, box-shadow 0.2s;
}

.nexis-back-to-app:hover {
    background: var(--nexis-accent-bright);
    color: var(--nexis-text-bright) !important;
    box-shadow: 0 0 16px rgba(58, 90, 64, 0.6);
    text-decoration: none !important;
}

/* ── Aviso de enlace de reset caducado/inválido ──────────────────────────
   Authelia deshabilita los campos de contraseña cuando el token de reset no
   es válido (caducado o ausente), pero NO lo dice claramente: el usuario ve
   un formulario que "no deja escribir". Cuando detectamos un <input
   type=password> deshabilitado (solo ocurre en reset-password/step2 con token
   malo; en el login el campo nunca está disabled), pintamos un banner. CSS
   puro vía :has() — sin tocar el JS del portal. */
body:has(input[type="password"]:disabled)::before {
    content: "El enlace de restablecimiento ha caducado o no es válido (válido 30 min). Vuelve a \201COlvidé mi contraseña\201D y solicita uno nuevo.";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: #3A1414;
    color: var(--nexis-text-bright);
    border-bottom: 1px solid #8A3A3A;
    font-family: var(--nexis-font);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    line-height: 1.4;
    padding: 0.9rem 1.5rem;
    text-align: center;
}

/* ── Alerts / errors ─────────────────────────────────────────────────── */
.MuiAlert-root {
    background: var(--nexis-bg-panel) !important;
    border: 1px solid var(--nexis-border-panel) !important;
    color: var(--nexis-text-primary) !important;
    font-family: var(--nexis-font) !important;
    border-radius: 3px !important;
}

.MuiAlert-standardError {
    border-color: #5A2020 !important;
}

.MuiAlert-standardSuccess {
    border-color: var(--nexis-accent) !important;
}