/* ============================================================================
   LOGIN — Gestión Gama
   Diseño original: Uiverse.io by santhosh_2608 (adaptado)
   ----------------------------------------------------------------------------
   Esta hoja NO declara colores literales: todos vienen de las variables
   definidas en temas.css, de modo que la pantalla cambia de tema
   automáticamente sin duplicar reglas.

   Los nombres de clase originales (.form-container, .title, .input-group…)
   fueron prefijados con "login-" para evitar colisiones cuando existan las
   pantallas de ventas, inventario y proveedores con sus propios formularios.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   CONTENEDOR CENTRADO

   min-height: 100vh en lugar de height: 100% — no depende de que html y body
   tengan altura declarada.

   background: transparent es intencional: deja ver el fondo global que se
   renderiza detrás desde base.html.
   --------------------------------------------------------------------------- */
.login-pantalla {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: transparent;
}

/* ---------------------------------------------------------------------------
   TARJETA
   --------------------------------------------------------------------------- */
.login-card {
    width: 100%;
    max-width: 340px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-sombra);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

/* Franja dorada de 3px en el borde superior de la tarjeta.
   Se desvanece hacia los extremos con un degradado horizontal. */
.login-card::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--acento-oscuro) 20%,
        var(--acento) 50%,
        var(--acento-oscuro) 80%,
        transparent 100%
    );
}

.login-contenido {
    padding: 22px;
}

/* ---------------------------------------------------------------------------
   ENCABEZADO
   --------------------------------------------------------------------------- */
.login-encabezado {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding-bottom: 10px;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--acento), transparent) 1;
}

.login-encabezado .icono-titulo {
    width: 26px;
    height: 26px;
    color: var(--acento);
    flex-shrink: 0;
}

/* El texto se pinta con un degradado recortado a la forma de las letras:
   el degradado va como fondo y -webkit-text-fill-color: transparent deja
   ver ese fondo a través del texto. */
.login-encabezado .titulo {
    font-family: Impact, "Arial Black", sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(180deg, var(--titulo-desde) 30%, var(--titulo-hasta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    line-height: 1.2;
}

/* ---------------------------------------------------------------------------
   FORMULARIO
   --------------------------------------------------------------------------- */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------------------------------------------------------------------------
   CAMPOS DE ENTRADA
   --------------------------------------------------------------------------- */
.login-campo {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    position: relative;
    box-sizing: border-box;
}

/* Barra vertical de 3px que crece desde arriba cuando el campo recibe foco.
   Empieza con height: 0 y se anima a 100% mediante la transición. */
.login-campo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, var(--acento), var(--icono-color));
    transition: height 0.3s ease;
}

/* :focus-within se activa cuando CUALQUIER elemento interno recibe el foco.
   Permite que el borde, el icono y el label reaccionen al hacer clic en el
   input, sin necesidad de JavaScript. */
.login-campo:focus-within::before {
    height: 100%;
}

.login-campo:focus-within {
    border-color: var(--acento);
    transform: translateX(3px);
}

.login-campo:hover {
    border-color: var(--input-border-hover);
}

/* ---- Cuadro del icono ---- */
.login-campo .icono-caja {
    width: 34px;
    height: 34px;
    background: var(--icono-bg);
    border: 1px solid var(--icono-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.login-campo:focus-within .icono-caja {
    background: var(--icono-bg-activo);
    border-color: var(--acento);
}

.login-campo .icono-caja svg {
    width: 16px;
    height: 16px;
    color: var(--icono-color);
    transition: all 0.3s ease;
}

.login-campo:focus-within .icono-caja svg {
    color: var(--acento);
}

/* ---- Contenido del campo (label + input) ---- */
.login-campo .campo-contenido {
    flex: 1;
    min-width: 0;
}

.login-campo label {
    display: block;
    color: var(--texto-secundario);
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 3px;
    transition: all 0.3s ease;
}

.login-campo:focus-within label {
    color: var(--acento);
}

.login-campo input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--input-texto);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0;
    box-sizing: border-box;
}

.login-campo input::placeholder {
    color: var(--input-placeholder);
}

/* ---------------------------------------------------------------------------
   BOTÓN PRINCIPAL
   --------------------------------------------------------------------------- */
.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--btn-bg);
    color: var(--btn-texto);
    padding: 10px;
    border: none;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 6px;
    box-sizing: border-box;
    font-family: inherit;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--btn-sombra-hover);
}

.login-btn .flecha {
    transition: transform 0.3s ease;
}

.login-btn:hover .flecha {
    transform: translateX(4px);
}

/* ---------------------------------------------------------------------------
   SEPARADOR "O CONTINUAR CON"
   --------------------------------------------------------------------------- */
.login-separador {
    display: flex;
    align-items: center;
    padding-top: 18px;
    margin-bottom: 12px;
}

.login-separador .linea {
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--linea), transparent);
}

.login-separador .texto {
    padding: 0 12px;
    font-size: 0.55rem;
    color: var(--texto-secundario);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   BOTÓN DE GOOGLE

   Ocupa todo el ancho, con el logo y el texto en horizontal.
   --------------------------------------------------------------------------- */
.login-proveedor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
    text-decoration: none;
    font-family: inherit;
}

.login-proveedor:hover {
    transform: translateY(-3px);
    border-color: var(--acento);
}

.login-proveedor svg {
    height: 18px;
    width: 18px;
    fill: var(--icono-social);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.login-proveedor:hover svg {
    fill: var(--acento);
}

.login-proveedor span {
    font-size: 0.6rem;
    color: var(--texto-secundario);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.login-proveedor:hover span {
    color: var(--acento);
}

/* ---------------------------------------------------------------------------
   PIE: ENLACE A REGISTRO
   --------------------------------------------------------------------------- */
.login-pie {
    text-align: center;
    font-size: 0.7rem;
    color: var(--texto-secundario);
    margin: 16px 0 0;
}

.login-pie a {
    color: var(--acento);
    text-decoration: none;
    font-weight: 500;
}

.login-pie a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   MENSAJE DE ERROR

   No existía en el diseño original. Se agrega porque el Paso 3 necesita
   mostrar credenciales inválidas (CU-24) y cuenta pendiente de aprobación
   (RF-18), y conviene que el estilo ya acompañe al tema.
   --------------------------------------------------------------------------- */
.login-error {
    padding: 9px 12px;
    font-size: 0.7rem;
    text-align: center;
    color: var(--error-texto);
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   BOTÓN DE CAMBIO DE TEMA

   position: absolute (no fixed) para que quede anclado a la pantalla de login
   y no flote sobre el resto del sistema. Cuando el toggle se mueva a la barra
   de navegación global, esta regla se elimina.
   --------------------------------------------------------------------------- */
.toggle-tema {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: 1px solid var(--acento);
    color: var(--acento);
    padding: 0.4rem 0.9rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s ease;
    z-index: 10;
    font-family: inherit;
}

.toggle-tema:hover {
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   ACCESIBILIDAD
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .login-campo:focus-within,
    .login-btn:hover,
    .login-proveedor:hover {
        transform: none;
    }
}


/* ---------------------------------------------------------------------------
   MENSAJE DE ÉXITO (por ejemplo, después de registrarse)
   --------------------------------------------------------------------------- */
.login-exito {
    padding: 8px 10px;
    background: var(--exito-bg);
    border: 1px solid var(--exito-border);
    color: var(--exito-texto);
    font-size: 0.7rem;
    line-height: 1.4;
}