/* Login SIAC — estética de la demo sobre Kendo UI 2021 (kendo-textbox)
   Paleta institucional Gobierno de México
========================================================================== */
:root {
    /* Paleta del Sistema Nacional de Diseño (snd.gob.mx/estilos/colores) y guía GOB.mx v3.
       Principales: guinda 900, verde 900 y dorado 600. */
    --snd-guinda-100: #F3E4E9; --snd-guinda-200: #E1BDC9; --snd-guinda-300: #CE92A6; --snd-guinda-400: #BA6783;
    --snd-guinda-500: #A84565; --snd-guinda-600: #9B2247; --snd-guinda-700: #8E1D3F; --snd-guinda-800: #781838;
    --snd-guinda-900: #611232; --snd-guinda-950: #4A0C26;
    --snd-verde-100: #E0E9E8; --snd-verde-200: #B3C8C6; --snd-verde-300: #82A4A0; --snd-verde-400: #51807A;
    --snd-verde-500: #335955; --snd-verde-600: #004D40; --snd-verde-700: #004339; --snd-verde-800: #003931;
    --snd-verde-900: #002F2A; --snd-verde-950: #001D1A;
    --snd-dorado-100: #F6F2EA; --snd-dorado-200: #E4D9C0; --snd-dorado-300: #DBCCAB; --snd-dorado-400: #C9B280;
    --snd-dorado-500: #B79956; --snd-dorado-600: #A57F2C; --snd-dorado-700: #846623; --snd-dorado-800: #634C1A;
    --snd-dorado-900: #423312; --snd-dorado-950: #32260D;
    --snd-neutro-100: #FFFFFF; --snd-neutro-200: #F9F9F9; --snd-neutro-300: #F3F3F3; --snd-neutro-400: #DDDDDD;
    --snd-neutro-500: #AAAAAA; --snd-neutro-600: #767676; --snd-neutro-700: #434343; --snd-neutro-800: #161A1D;
    /* Primitivos semánticos: 100 = fondo, 500 = texto/acento */
    --snd-rojo-100: #FAE5E5; --snd-rojo-500: #9B0F15;          /* error */
    --snd-verde-ok-100: #F0FAF5; --snd-verde-ok-500: #086308;  /* éxito */
    --snd-azul-100: #EDF2FE; --snd-azul-500: #224497;          /* información */
    --snd-amarillo-100: #FFEB99; --snd-amarillo-500: #684700;  /* alerta */
    --snd-morado-100: #ECE2F5; --snd-morado-500: #6708C1;
    --snd-naranja-100: #F9D9A9; --snd-naranja-500: #6E3700;

    --siac-guinda: var(--snd-guinda-600);
    --siac-guinda-oscuro: var(--snd-guinda-900);
    --siac-dorado: var(--snd-dorado-600);
    --siac-dorado-claro: var(--snd-dorado-300);
    --siac-gris: var(--snd-neutro-600);
    --siac-fondo: var(--snd-neutro-200);
    --siac-borde-campo: var(--snd-neutro-400);
    --siac-fuente-titulos: 'Patria', 'Noto Sans', Georgia, serif;
}

/* Tipografía institucional Patria (títulos h1–h3, guía GOB.mx v3). Archivos en wwwroot/fonts/patria
   (los mismos que publica framework-gb.cdn.gob.mx). El texto general sigue en Noto Sans. */
@font-face {
    font-family: 'Patria';
    src: url('../fonts/patria/Patria_Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Patria';
    src: url('../fonts/patria/Patria_Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Patria';
    src: url('../fonts/patria/Patria_Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.login-siac h1,
.login-siac .login-hero .sigla {
    font-family: var(--siac-fuente-titulos);
}

html, body {
    height: 100%;
}

body.login-siac {
    margin: 0;
    font-family: 'Noto Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--siac-fondo);
    color: var(--snd-neutro-800);
}

.login-siac .login-wrapper {
    display: flex;
    min-height: 100vh;
}

/* Panel izquierdo: video + identidad
========================================================================== */
.login-siac .login-hero {
    position: relative;
    flex: 1 1 58%;
    overflow: hidden;
    color: #fff;
    background-color: var(--siac-guinda-oscuro);
}

.login-siac .login-hero video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.login-siac .login-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(97, 18, 50, .92) 0%, rgba(155, 34, 71, .78) 55%, rgba(165, 127, 44, .55) 100%);
}

.login-siac .login-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 3rem 3.5rem;
}

.login-siac .login-hero .sigla {
    font-size: 4.5rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
}

.login-siac .login-hero .sigla-detalle {
    max-width: 30rem;
    margin-top: 1rem;
    font-size: 1.35rem;
    font-weight: 300;
    line-height: 1.4;
}

.login-siac .login-hero .divisor {
    width: 4rem;
    height: 4px;
    margin: 1.75rem 0;
    border-radius: 2px;
    background-color: var(--siac-dorado);
}

/* Accesos pegados al borde derecho del panel, junto al formulario */
.login-siac .login-hero .accesos {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.login-siac .login-hero .accesos a {
    display: inline-flex;
    /* app.bundle.css fuerza el subrayado en a[target] */
    text-decoration: none !important;
    align-items: center;
    margin: 0 0 .5rem 1.5rem;
    color: #fff;
    opacity: .85;
    font-size: .9rem;
}

.login-siac .login-hero .accesos a:hover {
    opacity: 1;
    text-decoration: none;
}

.login-siac .login-hero .accesos i {
    margin-right: .5rem;
    color: var(--siac-dorado-claro);
}

/* Panel derecho: formulario
========================================================================== */
.login-siac .login-panel {
    display: flex;
    flex: 0 0 480px;
    flex-direction: column;
    max-width: 100%;
    background-color: var(--siac-fondo);
    box-shadow: -8px 0 24px rgba(0, 0, 0, .08);
}

.login-siac .login-panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 3rem;
}

/* Logo SIAC sobre el banner de la SICT */
.login-siac .login-logo-siac {
    display: block;
    width: 96px;
    height: 96px;
    /* el margen superior automático reparte el espacio libre con el banner del pie,
       así el formulario queda centrado y el banner pegado al fondo */
    margin: auto auto 1.25rem;
}

.login-siac .login-banner {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin-bottom: 2rem;
}

/* Banner de la SICT pegado al fondo del panel (sobre el pie) */
.login-siac .login-banner-pie {
    margin: auto auto 0;
    padding-top: 2rem;
}

.login-siac h1 {
    margin-bottom: .25rem;
    text-align: center;
    color: var(--siac-guinda-oscuro);
    font-size: 1.6rem;
    font-weight: 700;
}

.login-siac .subtitulo {
    margin-bottom: 1.75rem;
    text-align: center;
    color: var(--siac-gris);
}

.login-siac label {
    color: var(--snd-neutro-700);
    font-size: .85rem;
    font-weight: 600;
}

/* Campo con ícono: envuelve un kendo-textbox (span.k-textbox > input.k-input)
   El ícono va a la izquierda y el botón opcional (ver contraseña) a la derecha */
.login-siac .campo {
    position: relative;
}

.login-siac .campo > .campo-icono,
.login-siac .campo > .campo-accion {
    position: absolute;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 100%;
    color: var(--siac-gris);
}

.login-siac .campo > .campo-icono {
    left: 0;
    pointer-events: none;
}

.login-siac .campo > .campo-accion {
    right: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.login-siac .campo > .campo-accion:hover,
.login-siac .campo:focus-within > .campo-icono {
    color: var(--siac-guinda);
}

.login-siac .campo .k-textbox {
    width: 100%;
    height: calc(1.5em + 1.25rem + 2px);
    border-color: var(--siac-borde-campo);
    border-radius: 4px;
    background-color: #fff;
    box-shadow: none;
}

.login-siac .campo .k-textbox > .k-input {
    height: 100%;
    padding: .625rem 2.75rem;
    font-size: .95rem;
}

.login-siac .campo .k-textbox:hover {
    border-color: var(--snd-neutro-500);
}

.login-siac .campo .k-textbox.k-state-focused,
.login-siac .campo .k-textbox:focus-within {
    border-color: var(--siac-guinda);
    box-shadow: 0 0 0 .2rem rgba(155, 34, 71, .15);
}

.login-siac .campo .k-textbox.k-state-invalid,
.login-siac .campo .k-textbox.input-validation-error {
    border-color: var(--snd-rojo-500);
}

.login-siac .validation-summary-valid {
    display: none;
}

.login-siac .field-validation-error {
    display: block;
    margin-top: .3rem;
    color: var(--snd-rojo-500);
    font-size: .8rem;
}

.login-siac .input-validation-error {
    border-color: var(--snd-rojo-500);
}

.login-siac a.enlace {
    color: var(--siac-guinda);
    font-weight: 600;
}

.login-siac .btn-siac {
    padding: .7rem 1rem;
    border: 0;
    background-color: var(--siac-guinda);
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background-color .15s ease-in-out;
}

.login-siac .btn-siac:hover,
.login-siac .btn-siac:focus {
    background-color: var(--siac-guinda-oscuro);
    color: #fff;
}

.login-siac .btn-siac-outline {
    border: 1px solid var(--siac-dorado);
    background-color: #fff;
    color: var(--siac-guinda-oscuro);
    font-weight: 600;
}

.login-siac .btn-siac-outline:hover {
    background-color: var(--snd-dorado-100);
    color: var(--siac-guinda-oscuro);
}

.login-siac .separador {
    display: flex;
    align-items: center;
    margin: 1.75rem 0 1.25rem;
    color: var(--siac-gris);
    font-size: .8rem;
}

.login-siac .separador::before,
.login-siac .separador::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--snd-neutro-400);
}

.login-siac .separador span {
    padding: 0 .75rem;
}

.login-siac .login-panel-footer {
    padding: 1rem 3rem;
    border-top: 1px solid var(--snd-neutro-400);
    color: var(--siac-gris);
    font-size: .75rem;
}

.login-siac .login-panel-footer a {
    color: var(--siac-guinda);
}

/* Responsivo
========================================================================== */
@media (max-width: 991.98px) {
    .login-siac .login-hero {
        display: none;
    }

    .login-siac .login-panel {
        flex: 1 1 100%;
        box-shadow: none;
    }

    .login-siac .login-panel-body {
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
        padding: 2rem 1.5rem;
    }

    .login-siac .login-panel-footer {
        padding: 1rem 1.5rem;
        text-align: center;
    }
}