/* SIRIUP — Login estilo "futurista" (mismo estilo que SIREDE)
   Split-screen claro, glassmorphism y acentos en tonos azules. */

:root {
    --sf-bg: #eef3f9;
    --sf-bg-2: #eef6fd;
    --sf-panel: #ffffffb3;
    --sf-panel-border: #0a3d6220;
    --sf-primary: #0d6efd;
    --sf-info: #0dcaf0;
    --sf-navy: #0a3d62;
    --sf-text: #1b2733;
    --sf-muted: #64748b;
    --sf-radius: 22px;
}

.sf-body {
    margin: 0;
    min-height: 100vh;
    background: var(--sf-bg);
    color: var(--sf-text);
    font-family: 'Jost', sans-serif;
    overflow-x: hidden;
}

.sf-shell {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
}

/* -------- Panel izquierdo (hero) -------- */

.sf-hero {
    /* Fondo sólido, sin textura de puntos: más limpio y con un juego de
       azules (no gris-pizarra) acorde a los colores del logo de Talonario Digital. */
    --sf-primary: #2563eb;
    --sf-info: #60a5fa;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 72px;
    overflow: hidden;
    background:
        linear-gradient(to bottom, transparent 0%, transparent 45%, #0d1f3d 100%),
        linear-gradient(150deg, #1a3462 0%, #1f3f72 55%, #234785 100%);
}

/* Resplandor azul ambiental: solo uno, arriba a la derecha, lejos tanto del
   logo (arriba-izq.) como del acento naranja (abajo-der.) para que ningún
   color se pise ni se mezcle con otro. */
.sf-hero::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    top: -140px;
    right: -160px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--sf-info), transparent 70%);
    opacity: .12;
    pointer-events: none;
}

.sf-hero__shape {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

/* Acento de marca: hexágono en los azules del logo de Talonario Digital,
   pegado a la esquina inferior derecha, con un brillo suave para que no quede plano. */
.sf-hero__shape--2 {
    width: 320px;
    height: 320px;
    right: -50px;
    bottom: -50px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background:
        radial-gradient(circle at 30% 25%, #ffffff40, transparent 60%),
        linear-gradient(155deg, #4fa3e3 0%, #1e6fb8 55%, #0f3d63 100%);
    opacity: .24;
}

/* Rombo delgado que se asoma por el borde izquierdo: un guiño al icono
   cuadrado "TD" del logo, sin competir con el hexágono. */
.sf-hero__shape--3 {
    width: 150px;
    height: 150px;
    left: -50px;
    top: 8%;
    border-radius: 18px;
    border: 2px solid #4fa3e355;
    transform: rotate(45deg);
}

.sf-hero__content {
    position: relative;
    z-index: 1;
    max-width: 480px;
}

.sf-logos {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-bottom: 40px;
}

.sf-logos img {
    display: block;
    object-fit: contain;
}

.sf-logos__seal {
    width: 108px;
    height: 108px;
}

.sf-logos__divider {
    width: 1px;
    height: 54px;
    background: #ffffff26;
}

.sf-logos__sirede {
    height: 84px;
    width: auto;
}

.sf-hero h1 {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 600;
    margin: 0 0 18px;
    letter-spacing: -.02em;
    color: #94a3b8;
}

.sf-hero h1 span {
    background: linear-gradient(90deg, var(--sf-primary), var(--sf-info));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sf-hero p.sf-lead {
    color: #9aa7b8;
    font-size: 16.5px;
    line-height: 1.6;
    margin-bottom: 36px;
}

.sf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sf-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff0f;
    border: 1px solid #ffffff1f;
    padding: 9px 15px;
    border-radius: 12px;
    font-size: 13.5px;
    color: #eef2f7;
    box-shadow: 0 6px 16px -8px #00000066;
}

.sf-chip i {
    color: var(--sf-primary);
    font-size: 13px;
}

/* -------- Panel derecho (formulario) -------- */

.sf-form-side {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 28px;
    background: var(--sf-bg-2);
}

.sf-card {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border: 1px solid #0a3d6214;
    border-radius: var(--sf-radius);
    padding: 40px 32px;
    box-shadow: 0 30px 60px -20px #0a3d6233;
    animation: sf-card-in .55s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes sf-card-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sf-card__eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
    color: var(--sf-primary);
    margin-bottom: 8px;
    font-weight: 600;
}

.sf-card__title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--sf-navy);
}

.sf-card__subtitle {
    color: var(--sf-muted);
    font-size: 14px;
    margin-bottom: 30px;
}

.sf-field {
    margin-bottom: 18px;
    text-align: left;
}

.sf-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sf-muted);
    margin-bottom: 8px;
}

.sf-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #f4f8fc;
    border: 1.5px solid #0a3d6217;
    border-radius: 14px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.sf-input-wrap:focus-within {
    border-color: var(--sf-primary);
    background: #fff;
    box-shadow: 0 0 0 4px #0d6efd21;
}

.sf-input-wrap .sf-icon {
    width: 44px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-primary);
    opacity: .85;
    font-size: 14.5px;
}

.sf-input-wrap select.sf-control,
.sf-input-wrap input.sf-control {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    padding: 13px 14px 13px 0;
    font-size: 15px;
    color: var(--sf-text);
    font-family: 'Jost', sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.sf-input-wrap select.sf-control {
    cursor: pointer;
    color-scheme: light;
}

.sf-input-wrap select.sf-control::-ms-expand {
    display: none;
}

/* Estilo propio de las opciones del <select>: sin esto, Windows/Firefox
   pintan la lista con los colores nativos del sistema (fea, inconsistente
   con Mac) y en modo oscuro el texto claro queda sobre un fondo blanco
   que el navegador fuerza por defecto. */
.sf-input-wrap select.sf-control option {
    background-color: #ffffff;
    color: var(--sf-text);
    padding: 10px;
}

.sf-input-wrap input.sf-control::placeholder {
    color: #9aa7b8;
}

.sf-input-wrap .sf-toggle,
.sf-input-wrap .sf-caret {
    width: 42px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-muted);
    font-size: 14px;
}

.sf-input-wrap .sf-toggle {
    cursor: pointer;
    transition: color .15s ease;
}

.sf-input-wrap .sf-toggle:hover {
    color: var(--sf-primary);
}

.sf-row-between {
    display: flex;
    justify-content: flex-end;
    margin: 2px 0 24px;
}

.sf-forgot {
    font-size: 13px;
    color: var(--sf-primary);
    opacity: .9;
    transition: opacity .15s ease;
}

.sf-forgot:hover {
    opacity: 1;
    text-decoration: underline;
}

.sf-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 14px;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    font-family: 'Jost', sans-serif;
    cursor: pointer;
    background: linear-gradient(90deg, var(--sf-primary), var(--sf-info));
    box-shadow: 0 14px 30px -10px #0d6efd55;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.sf-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -8px #0d6efd66;
    filter: brightness(1.05);
}

.sf-btn:active {
    transform: translateY(0);
}

.sf-page-foot {
    padding: 18px 20px 22px;
    text-align: center;
    font-size: 14px;
    color: var(--sf-muted);
    line-height: 1.6;
}

/* -------- Responsive -------- */

@media (max-width: 980px) {
    .sf-shell {
        grid-template-columns: 1fr;
    }

    .sf-hero {
        padding: 40px 28px 60px;
    }

    .sf-hero h1 {
        font-size: 32px;
    }

    .sf-hero p.sf-lead {
        font-size: 14px;
    }

    .sf-chips {
        display: none;
    }

    /* El anillo se diseñó para el panel alto de escritorio: en cuanto el
       layout se apila (hero como banner corto) cruza el logo, así que se
       oculta desde aquí, no solo en celulares muy angostos. */
    .sf-hero__shape--3 {
        display: none;
    }

    /* El hexágono se reduce para que no domine el poco alto
       disponible del panel una vez apilado. */
    .sf-hero__shape--2 {
        width: 190px;
        height: 190px;
    }
}

@media (max-width: 480px) {
    .sf-card {
        padding: 30px 20px;
    }

    .sf-hero {
        padding: 34px 20px 44px;
    }

    .sf-hero h1 {
        font-size: 27px;
    }
}

@media (max-width: 600px) {

    /* Modo celular: quitamos la frase secundaria y subimos el bloque de login */
    .sf-hero {
        padding: 28px 20px 16px;
    }

    .sf-lead__sub {
        display: none;
    }

    .sf-form-side {
        padding-top: 12px;
    }

    /* Logos más chicos y compactos para que cuadren bien en pantallas angostas */
    .sf-logos {
        gap: 14px;
        margin-top: 14px;
        margin-bottom: 22px;
    }

    .sf-logos__seal {
        width: 72px;
        height: 72px;
    }

    .sf-logos__divider {
        height: 38px;
    }

    .sf-logos__sirede {
        height: 56px;
    }

    /* En celulares muy angostos el hexágono se reduce todavía más. */
    .sf-hero__shape--2 {
        width: 150px;
        height: 150px;
    }
}

/* -------- Botón flotante: modo oscuro -------- */

.theme-toggle {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 50;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sf-panel);
    border: 1px solid var(--sf-panel-border);
    backdrop-filter: blur(12px);
    color: var(--sf-navy);
    cursor: pointer;
    font-size: 18px;
    box-shadow: 0 8px 20px -8px #0a3d6240;
    transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.theme-toggle:hover {
    transform: translateY(-2px) scale(1.05);
}

/* Pequeño giro + fundido al cambiar de ícono (luna <-> sol), disparado por
   la clase "is-switching" que agrega el script al hacer clic. */
@keyframes sf-theme-spin {
    from {
        transform: rotate(-50deg) scale(.5);
        opacity: 0;
    }

    to {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

/* Los dos íconos siempre están en el HTML; cuál se ve lo decide solo esta
   hoja de estilos según la clase "dark-mode" del <body> — el script solo
   pone/quita esa clase, nunca toca el ícono directamente.
   Selector "i.theme-toggle__icon" (no solo ".theme-toggle__icon") a propósito:
   fonts/css/all.min.css trae ".fa-solid{display:inline-block}" con la misma
   especificidad, y en index.php ese archivo se carga después de este — con
   la misma especificidad gana el que carga al final. Sumar el tipo de
   elemento (i) sube la especificidad para que esta regla gane siempre, sin
   importar el orden de los <link>. */
i.theme-toggle__icon {
    display: none;
}

i.theme-toggle__icon--moon {
    display: inline-block;
}

.sf-body.dark-mode i.theme-toggle__icon--moon {
    display: none;
}

.sf-body.dark-mode i.theme-toggle__icon--sun {
    display: inline-block;
}

.theme-toggle.is-switching .theme-toggle__icon {
    animation: sf-theme-spin .4s cubic-bezier(.2, .8, .2, 1);
}

/* -------- Tema oscuro -------- */

.sf-body.dark-mode {
    --sf-bg: #070b13;
    --sf-bg-2: #0d1420;
    --sf-panel: #ffffff0f;
    --sf-panel-border: #ffffff1f;
    --sf-navy: #eef2f7;
    --sf-text: #eef2f7;
    --sf-muted: #9aa7b8;
}

.sf-body.dark-mode .theme-toggle {
    box-shadow: 0 8px 20px -8px #00000066;
}

.sf-body.dark-mode .sf-hero {
    --sf-primary: #1d4ed8;
    --sf-info: #3b82f6;
    background:
        linear-gradient(to bottom, transparent 0%, transparent 45%, #0b1426 100%),
        linear-gradient(150deg, #101f3a 0%, #142544 55%, #172c50 100%);
}

.sf-body.dark-mode .sf-card__eyebrow,
.sf-body.dark-mode .sf-input-wrap .sf-icon,
.sf-body.dark-mode .sf-forgot,
.sf-body.dark-mode .sf-chip i {
    color: var(--sf-info);
}

.sf-body.dark-mode .sf-card {
    background: #ffffff0d;
    border: 1px solid #ffffff1f;
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 60px -20px #00000080;
}

.sf-body.dark-mode .sf-input-wrap {
    background: #ffffff0a;
    border: 1.5px solid #ffffff1a;
}

.sf-body.dark-mode .sf-input-wrap:focus-within {
    border-color: var(--sf-info);
    background: #ffffff14;
    box-shadow: 0 0 0 4px #38bdf82a;
}

.sf-body.dark-mode .sf-input-wrap select.sf-control,
.sf-body.dark-mode .sf-input-wrap input.sf-control {
    color-scheme: dark;
}

.sf-body.dark-mode .sf-input-wrap select.sf-control option {
    background-color: var(--sf-bg-2);
    color: var(--sf-text);
}

.sf-body.dark-mode .sf-input-wrap input.sf-control::placeholder {
    color: #7c8894;
}

/* -------- SweetAlert2: alerta de contraseñas -------- */

.sf-swal-popup {
    border-radius: 24px !important;
    padding: 32px 28px 28px !important;
    font-family: 'Jost', sans-serif !important;
    box-shadow: 0 30px 60px -20px #0a3d6244 !important;
}

.sf-body.dark-mode .sf-swal-popup {
    background: #101a2c !important;
    color: #eef2f7 !important;
    box-shadow: 0 30px 60px -20px #00000080 !important;
}

.sf-swal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(155deg, #f4f8fc, #eaf1f9);
    border: 1px solid #0a3d6217;
}

.sf-swal-icon i {
    font-size: 24px;
    background: linear-gradient(90deg, var(--sf-primary), var(--sf-info));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sf-body.dark-mode .sf-swal-icon {
    background: linear-gradient(155deg, #16223a, #101a2e);
    border-color: #ffffff1f;
}

.sf-swal-title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
    color: var(--sf-navy);
}

.sf-swal-text {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--sf-muted);
}

.sf-body.dark-mode .sf-swal-title {
    color: #eef2f7;
}

.sf-body.dark-mode .sf-swal-text {
    color: #9aa7b8;
}

.sf-swal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.sf-swal-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--sf-bg);
    border: 1px solid #0a3d6214;
    text-align: left;
}

.sf-body.dark-mode .sf-swal-row {
    background: #ffffff0a;
    border-color: #ffffff1a;
}

.sf-swal-row__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sf-primary);
    white-space: nowrap;
}

.sf-swal-row__label i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(13, 110, 253, .1);
    font-size: 9.5px;
    color: var(--sf-primary);
}

.sf-swal-row__value {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--sf-navy);
    text-align: left;
}

.sf-body.dark-mode .sf-swal-row__value {
    color: #eef2f7;
}

.sf-swal-btn {
    border: 0 !important;
    border-radius: 14px !important;
    padding: 12px 26px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: 'Jost', sans-serif !important;
    background: linear-gradient(90deg, var(--sf-primary), var(--sf-info)) !important;
    box-shadow: 0 14px 30px -10px #0d6efd55 !important;
}