/* Reconstrucción completa de estilos para el flujo de introducción/inicio con animación de destello */
/* Variables de CSS */
:root {
    --naranja: #ff8c00;
    --naranja-hover: #ff9900;
    --negro: #0f1216;
    --blanco: #ffffff;
    --gris-claro: #f5f5f5;
    --gris-medio: #cccccc;
    --gris-oscuro: #666666;
    --error: #d93025;
    --exito: #27ae60;
    --sombra: 0 8px 32px rgba(15, 18, 22, 0.1);
    --sombra-hover: 0 12px 48px rgba(15, 18, 22, 0.15);
    --radio-borde: 12px;
    --transicion: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --naranja-principal: #ff8c00;
    --naranja-principal-oscuro: #e67e00;
    --naranja-principal-claro: #ffb347;
    --gris-900: #1a1a1a;
    --gris-800: #2d2d2d;
    --gris-700: #404040;
    --gris-600: #666666;
    --gris-500: #808080;
    --gris-400: #999999;
    --gris-300: #cccccc;
    --gris-200: #e6e6e6;
    --gris-100: #f5f5f5;
    --gris-50: #fafafa;
    --informacion: #17a2b8;
    --sombra-extra: 0 20px 45px rgba(15, 18, 22, 0.18);
    --radio-borde-extra: 16px;
}

/* Reinicio y estilos base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
    background: var(--blanco);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--negro);
}

body.cuerpo-bloqueo-inactividad {
    overflow: hidden;
}

/* Solo para lectores de pantalla */
.solo-lectura {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Contenedor centrado con flexbox para ocupar toda la pantalla */
.principal-centrado {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Estilos base de tarjetas */
.tarjeta {
    background: var(--negro);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(15, 18, 22, 0.15);
    padding: 40px;
    transition: var(--transicion);
}

/* Tarjeta de introducción (Paso A) - contenido centrado */
.introduccion {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    width: 400px;
    min-height: 300px;
    cursor: pointer;
    opacity: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* centro exacto */
    z-index: 2;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.introduccion[hidden] {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
    pointer-events: none;
}

/* Tarjeta de inicio de sesión (Paso B) - diseño con CSS Grid */
.tarjeta-inicio {
    max-width: 960px;
    min-height: 520px;
    width: min(92vw, 960px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.tarjeta-inicio:not([hidden]) {
    opacity: 1;
    transform: scale(1);
}

/* Sección de marca */
.marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
}

.logo {
    width: 120px;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(255, 140, 0, 0.3));
}

.titulo-marca {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--blanco);
    letter-spacing: -0.02em;
    margin: 0;
}

/* Animación de destello para introducción */
.destello {
    background: linear-gradient(
    90deg,
    var(--blanco) 0%,
    var(--naranja) 25%,
    var(--blanco) 50%,
    var(--naranja) 75%,
    var(--blanco) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animacion-destello 2s ease-in-out infinite;
}

@keyframes animacion-destello {
    0% {
    background-position: -200% 0;
    }
    100% {
    background-position: 200% 0;
    }
}

.subtitulo-marca {
    font-size: 1.1rem;
    font-weight: 400;
    margin: 0;
}

.subtitulo-marca--naranja {
    color: var(--naranja);
}

/* Estilos del formulario de inicio */
.formulario {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.titulo-formulario {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--blanco);
    margin-bottom: 8px;
    text-align: left;
}

/* Estilos del formulario */
.grupo-campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campo-formulario {
    width: 100%;
    padding: 16px;
    border: 2px solid rgba(15, 18, 22, 0.25);
    border-radius: var(--radio-borde);
    font-size: 1rem;
    transition: var(--transicion);
    background: var(--blanco);
    color: var(--negro);
}

.campo-formulario::placeholder {
    color: var(--gris-oscuro);
}

.campo-formulario:focus {
    outline: none;
    border-color: var(--naranja);
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.25);
    background: var(--blanco);
}

.campo-formulario.error {
    border-color: var(--error);
}

/* Contenedor de contraseña con icono */
.contenedor-contrasena {
    position: relative;
}

.boton-contrasena {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--negro);
    padding: 4px;
    border-radius: 4px;
    transition: var(--transicion);
}

.boton-contrasena:hover {
    color: var(--naranja);
    background: rgba(255, 140, 0, 0.1);
}

.boton-contrasena svg {
    width: 20px;
    height: 20px;
}

.icono-ojo-cerrado.oculto,
.icono-ojo.oculto {
    display: none;
}

/* Estilo para la ayuda de mayúsculas */
.ayuda {
    font-size: 0.875rem;
    margin-top: 4px;
}

.ayuda.error {
    color: var(--error);
}

.ayuda[hidden] {
    display: none;
}

.mensaje-error {
    color: var(--error);
    font-size: 0.875rem;
    min-height: 1.25rem;
}

/* Estilos de botones */
.boton {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: var(--radio-borde);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transicion);
}

.boton-primario {
    background: var(--naranja);
    color: var(--blanco);
}

.boton-primario:hover {
    background: var(--naranja-hover);
    transform: translateY(-2px);
    box-shadow: var(--sombra-hover);
}

.boton-primario:active {
    transform: translateY(0);
}

.boton-secundario {
    background: var(--gris-claro);
    color: var(--negro);
    border: 2px solid rgba(15, 18, 22, 0.1);
}

.boton-secundario:hover {
    background: #e8e8e8;
    transform: translateY(-2px);
}

.boton-secundario:active {
    transform: translateY(0);
}

.boton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Diálogo de confirmación de sesión */
.dialogo-sesion-activa[hidden] {
    display: none;
}

.dialogo-sesion-activa {
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 22, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dialogo-sesion-activa.dialogo-sesion-activa--visible {
    opacity: 1;
    visibility: visible;
}

.dialogo-sesion-activa__contenido {
    background: var(--blanco);
    color: var(--negro);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(15, 18, 22, 0.25);
    max-width: 420px;
    width: 100%;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dialogo-sesion-activa__titulo {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.dialogo-sesion-activa__mensaje {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

.dialogo-sesion-activa__acciones {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.dialogo-sesion-activa__acciones .boton {
    flex: 1 1 auto;
}

/* Notificaciones */
.notificacion {
    position: fixed;
    top: 2rem;
    right: 2rem;
    color: var(--blanco);
    padding: 1rem 1.5rem;
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra);
    z-index: 1000;
    transition: var(--transicion);
}

.notificacion--exito {
    background: var(--exito);
}

.notificacion--error {
    background: var(--error);
}

.capa-inactividad {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 18, 22, 0.65);
    backdrop-filter: blur(4px);
    z-index: 2500;
    padding: 24px;
}

.capa-inactividad.mostrar {
    display: flex;
}

.tarjeta-modal {
    background: var(--blanco);
    border-radius: var(--radio-borde-extra);
    box-shadow: var(--sombra-extra);
    max-width: 520px;
    width: min(90vw, 520px);
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.tarjeta-modal.mostrar {
    display: flex;
    animation: aparicion-modal 0.28s ease-out;
}

@keyframes aparicion-modal {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.encabezado-tarjeta {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--gris-200);
}

.encabezado-tarjeta.informacion {
    background: rgba(23, 162, 184, 0.1);
    border-bottom-color: var(--informacion);
}

.icono-tarjeta {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--naranja-principal);
    color: var(--blanco);
    flex-shrink: 0;
}

.titulo-tarjeta {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--gris-900);
    margin: 0;
}

.contenido-tarjeta {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mensaje-tarjeta {
    color: var(--gris-700);
    line-height: 1.6;
    margin: 0;
}

.seleccion-inactividad {
    background: var(--gris-50);
    padding: 1rem;
    border-radius: var(--radio-borde);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.etiqueta-inactividad {
    font-weight: 600;
    color: var(--gris-700);
}

.contenedor-desplegable-inactividad {
    position: relative;
}

.entrada-desplegable-inactividad {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gris-300);
    border-radius: var(--radio-borde);
    background-color: var(--blanco);
    color: var(--gris-800);
    font-size: 1rem;
    appearance: none;
}

.entrada-desplegable-inactividad:focus {
    outline: none;
    border-color: var(--naranja-principal);
    box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.18);
}

.contenedor-desplegable-inactividad::after {
    content: '\25BC';
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: var(--gris-500);
    pointer-events: none;
}

.contenedor-desplegable-inactividad--combobox::after {
    content: none;
}

.combobox-concepto {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.envoltura-combobox {
    position: relative;
    display: flex;
    flex-direction: column;
}

.contenedor-entrada-combobox {
    position: relative;
    display: flex;
    align-items: center;
}

.icono-busqueda {
    position: absolute;
    left: 1rem;
    color: var(--gris-400);
    pointer-events: none;
    z-index: 1;
}

.entrada-combobox {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 3rem;
    border: 1px solid var(--gris-300);
    border-radius: var(--radio-borde);
    font-size: 1rem;
    transition: var(--transicion);
    background: var(--blanco);
}

.entrada-combobox:focus {
    border-color: var(--naranja-principal);
    box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.18);
    outline: none;
}

.entrada-combobox[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: var(--naranja-principal);
}

.boton-combobox {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--gris-500);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radio-borde);
    transition: var(--transicion);
    display: flex;
    align-items: center;
    justify-content: center;
}

.boton-combobox:hover {
    background: var(--gris-100);
    color: var(--gris-700);
}

.boton-combobox:focus {
    outline: 2px solid var(--naranja-principal);
    outline-offset: 2px;
}

.entrada-combobox[aria-expanded="true"] + .boton-combobox svg {
    transform: rotate(180deg);
}

.opciones-combobox {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--blanco);
    border: 1px solid var(--naranja-principal);
    border-top: none;
    border-radius: 0 0 var(--radio-borde) var(--radio-borde);
    box-shadow: var(--sombra-media);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.opciones-combobox.mostrar {
    display: block;
}

.opcion-combobox {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: var(--transicion);
    border-bottom: 1px solid var(--gris-100);
    font-size: 0.95rem;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.opcion-combobox:last-child {
    border-bottom: none;
}

.opcion-combobox:hover,
.opcion-combobox.highlighted {
    background: var(--naranja-principal-suave);
    color: var(--naranja-principal-oscuro);
}

.opcion-combobox.selected {
    background: rgba(26, 26, 26, 0.08);
    color: var(--gris-900);
}

.opcion-combobox.selected:hover {
    background: rgba(26, 26, 26, 0.12);
}

.mensaje-sin-opciones {
    padding: 0.75rem 1rem;
    color: var(--gris-500);
    font-size: 0.95rem;
}

.acciones-tarjeta {
    padding: 1.5rem;
    border-top: 1px solid var(--gris-200);
    display: flex;
    justify-content: flex-end;
}

.acciones-tarjeta .boton {
    width: auto;
    min-width: 180px;
}

.notificacion.oculta {
    opacity: 0;
    transform: translateX(100%);
}

.notificacion.mostrar {
    opacity: 1;
    transform: translateX(0);
}

/* Soporte para movimiento reducido */
@media (prefers-reduced-motion: reduce) {
* {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

.destello {
    animation: none;
    background: var(--naranja);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
}

/* Adaptación móvil: diseño de una columna por debajo de 900px */
@media (max-width: 899px) {
.tarjeta-inicio {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px;
    min-height: auto;
}

.marca {
    order: 1;
}

.formulario {
    order: 2;
}
}

@media (max-width: 480px) {
.principal-centrado {
    padding: 16px;
}

.introduccion {
    width: min(90vw, 350px);
    padding: 32px;
}

.tarjeta-inicio {
    padding: 24px;
    gap: 24px;
}

.titulo-marca {
    font-size: 2rem;
}

.logo {
    width: 100px;
}

.titulo-formulario {
    font-size: 1.3rem;
}

.notificacion {
    right: 1rem;
    left: 1rem;
    top: 1rem;
}
}

/* Spinner de carga reutilizado */
.capa {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
}

.capa.mostrar {
    display: flex;
}

.capa-carga {
    background: rgba(0, 0, 0, 0.7);
}

.contenido-carga {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--blanco);
}

.indicador-carga {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 140, 0, 0.2);
    border-top: 4px solid var(--naranja-principal);
    border-radius: 50%;
    animation: giro 1s linear infinite;
}

@keyframes giro {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.texto-carga {
    font-size: 1.1rem;
    font-weight: 500;
}