/* ==========================================================================
   login.css — Pantalla de acceso LogisFood
   ==========================================================================
   Este archivo HOMOLOGADO utiliza las variables CSS definidas en index2.css
   para mantener la coherencia visual con el sitio principal.
   ========================================================================== */

/* IMPORTAMOS (o aseguramos) las variables globales de la web */
:root {
  /* ======================================================================
     PALETA CORPORATIVA (sincronizada con index2.css)
     ====================================================================== */
  --color-bg:            #f4f7fb;   /* fondo general */
  --color-bg-alt:        #ffffff;   /* fondo secciones */
  --color-bg-card:       #ffffff;   /* tarjetas */
  --color-border:        #e2e8f0;   /* bordes suaves */
  --color-border-accent: #f97316;   /* naranja corporativo */

  /* Colores de acento (PRINCIPAL = NARANJA) */
  --color-accent:        #f97316;   /* naranja corporativo moderno */
  --color-accent-dark:   #a84f10;   /* hover */
  --color-accent-glow:   rgba(249, 115, 22, 0.18);
  --color-accent-subtle: rgba(249, 115, 22, 0.08);

  /* Colores de texto */
  --color-text-primary:  #1e293b;   /* gris oscuro elegante */
  --color-text-secondary:#475569;
  --color-text-muted:    #94a3b8;
  --color-text-on-accent:#ffffff;

  /* Tipografía */
  --font-display:   'Barlow Condensed', sans-serif;
  --font-body:      'DM Sans', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* Espaciado y bordes */
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-full: 9999px;

  /* Transiciones */
  --transition-normal: 0.3s ease;

  /* Variables específicas del Login */
  --login-card-bg:        var(--color-bg-card);
  --login-card-border:    var(--color-border);
  --login-card-radius:    var(--radius-lg);
  --login-card-shadow:    0 10px 30px -10px rgba(0,0,0,0.1);
  --login-input-bg:       #ffffff;
  --login-input-border:   var(--color-border);
  --login-input-focus:    var(--color-accent);
  --login-input-text:     var(--color-text-primary);
  --login-input-placeholder: var(--color-text-muted);
  --login-btn-bg:         var(--color-accent);
  --login-btn-hover:      var(--color-accent-dark);
  --login-btn-text:       var(--color-text-on-accent);
  --login-btn-shadow:     0 6px 20px var(--color-accent-glow);
  --login-title-color:    var(--color-text-primary);
  --login-label-color:    var(--color-text-secondary);
  --login-link-color:     var(--color-accent);
}

/* ==========================================================================
   RESET SOBRE JQUERY MOBILE
   ========================================================================== */
body .ui-page-active [data-role="header"]:not(.login-keep-header) {
    display: none !important;
}

/* ==========================================================================
   HERO BACKGROUND (simplificado y limpio)
   ========================================================================== */
body.login-page,
.login-page .ui-page,
.login-page [data-role="page"] {
    min-height: 100vh !important;
    background: none !important;
    position: relative;
    overflow: hidden;
}

/* Fondo tipo HERO */
.login-page [data-role="page"]::before {
    content: '';
    position: fixed;
    inset: 0;

    background-image: url('../images/demo-screenshot.png'); /* misma que index */
    background-size: cover;
    background-position: center;

    filter: brightness(0.7);
    opacity: 0.25;
    z-index: 0;
}




/* ==========================================================================
   CONTENEDOR PRINCIPAL
   ========================================================================== */
.login-page [data-role="main"].ui-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 20px 16px !important;
    position: relative;
    z-index: 1;
    background: transparent !important;
}

/* ==========================================================================
   LOGO Y TÍTULO
   ========================================================================== */
.login-hero-header {
    text-align: center;
    margin-bottom: 28px;
    animation: loginFadeDown 0.6s ease both;
}

.login-app-name {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--login-title-color);
    letter-spacing: -0.5px;
    margin: 0 0 4px;
    line-height: 1;
}

.login-app-name span {
    color: var(--color-accent);
}

.login-app-subtitle {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--login-label-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

/* ==========================================================================
   CARD DEL FORMULARIO (estilo "carta" del index2)
   ========================================================================== */
.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--login-card-bg);
    border: 1px solid var(--login-card-border);
    border-radius: var(--login-card-radius);
    box-shadow: var(--login-card-shadow);
    padding: 32px 32px 28px;
    animation: loginFadeUp 0.6s ease 0.1s both;
}

/* ==========================================================================
   FORMULARIOS (estilo index2)
   ========================================================================== */
.login-card label {
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--login-label-color) !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    display: block !important;
}


.login-card input::placeholder {
    color: var(--login-input-placeholder) !important;
    font-weight: 400;
    opacity: 1;
}

/* Grupo de contraseña con toggle */
.login-pwd-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-pwd-group input[type="password"],
.login-pwd-group input[type="text"] {
    flex: 1;
}

/* Toggle contraseña (checkbox con estilo de botón) */
.login-pwd-toggle {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    background: var(--color-bg);
    border: 1.5px solid var(--login-input-border);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--login-label-color);
    font-size: 1.2rem;
    transition: all var(--transition-normal);
    -webkit-appearance: none;
    appearance: none;
    margin: 0 !important;
}

/* Simulamos el icono de un "ojo" con un emoji o texto */
.login-pwd-toggle::after {
    content: "";
    font-size: 1.2rem;
    line-height: 1;
    left: 10px;
}

.login-pwd-toggle:checked::after {
    content: "👁️‍🗨️";
}

.login-pwd-toggle:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.login-field {
    margin-bottom: 20px;
}

/* ==========================================================================
   BOTÓN ACCEDER (btn--primary del index2)
   ========================================================================== */

/* ==========================================================================
   BOTÓN SECUNDARIO (btn--outline del index2)
   ========================================================================== */
.login-card .login-btn-secondary {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: transparent !important;
    color: var(--color-accent) !important;
    border: 2px solid var(--color-border-accent) !important;
    border-radius: var(--radius-full) !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
}

.login-card .login-btn-secondary:hover {
    background: var(--color-accent-subtle) !important;
    border-color: var(--color-accent) !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   MENSAJES DE ESTADO (error)
   ========================================================================== */
.login-card #status:not(:empty) {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.9rem;
    margin-bottom: 20px;
    background: #fee2e2; /* Rojo muy claro para error */
    border: 1px solid #fecaca;
    color: #b91c1c;
}

/* ==========================================================================
   BOTÓN VOLVER (estilo ghost)
   ========================================================================== */
.login-back {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10;
}

.login-back a {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 8px 16px;
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.login-back a:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-on-accent);
    transform: translateY(-2px);
}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */
@keyframes loginFadeDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes loginFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 420px) {
    .login-card {
        padding: 24px 20px;
    }
    .login-app-name {
        font-size: 2.2rem;
    }
}

/* ==========================================================================
   BOTON GESTOR
   ========================================================================== */

.login-gestor-top{
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10;
}

.login-gestor-top a{
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.login-gestor-top a:hover{
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent);
  transform: translateY(-2px);
}