/* ========================================
       RESET Y ESTILOS BASE
       Elimina estilos por defecto del navegador
       ======================================== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      height: 100vh;
      overflow: hidden;
    }

    /* ========================================
       FONDO Y OVERLAY (Desktop)
       Imagen de fondo con capa de color semitransparente
       Solo visible en pantallas grandes
       ======================================== */
    .background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('../../assets/visual resources/img/IMG_0949.JPG');
      background-size: cover;
      background-position: center;
      z-index: -2;
    }

    .overlay {
      position: fixed;  
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(32, 156, 176, 0.3);
      z-index: -1;
    }

    /* ========================================
       CONTENEDOR PRINCIPAL
       Centra la tarjeta de login en la pantalla
       ======================================== */
    .login-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      padding: 20px;
    }

    /* ========================================
       TARJETA DE LOGIN
       Contenedor principal sin bordes redondeados
       Dividido en dos secciones: izquierda (branding) y derecha (formulario)
       ======================================== */
    .login-card {
      display: flex;
      background: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(10px);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      max-width: 1100px;
      width: 100%;
      min-height: 600px;
    }

    /* ========================================
       SECCIÓN IZQUIERDA - BRANDING
       Logo, título y descripción de la aplicación
       Fondo con gradiente azul
       ======================================== */
    .login-left {
      flex: 1;
      background: linear-gradient(135deg, #209CB0 0%, #1a7d8f 100%);
      padding: 60px 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      text-align: center;
    }

    /* Logo - Mantiene proporciones sin recortar */
    .logo img {
      width: 90%;
      height: 90%;
      object-fit: contain;
      object-position: center;
      filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
    }

    /* Título principal */
    .login-left h1 {
      font-size: 42px;
      font-weight: 700;
      margin-bottom: 20px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Descripción del sistema */
    .login-left p {
      font-size: 18px;
      line-height: 1.6;
      opacity: 0.95;
      max-width: 400px;
    }

    /* ========================================
       SECCIÓN DERECHA - FORMULARIO
       Contiene el formulario de login
       ======================================== */
    .login-right {
      flex: 1;
      padding: 60px 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* Título de bienvenida */
    .login-right h2 {
      font-size: 32px;
      color: #333;
      margin-bottom: 10px;
    }

    /* Subtítulo */
    .login-right .subtitle {
      color: #666;
      margin-bottom: 40px;
      font-size: 16px;
    }

    /* ========================================
       CAMPOS DEL FORMULARIO
       Inputs con bordes redondeados y efectos de focus
       ======================================== */
    .form-group {
      margin-bottom: 25px;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      color: #333;
      font-weight: 500;
      font-size: 14px;
    }

    /* Wrapper para posicionar el botón de mostrar/ocultar contraseña */
    .input-wrapper {
      position: relative;
    }

    /* Inputs con bordes redondeados y transición suave */
    .form-group input {
      width: 100%;
      padding: 14px 16px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      font-size: 15px;
      transition: all 0.3s ease;
      outline: none;
    }

    /* Efecto al hacer focus en los inputs */
    .form-group input:focus {
      border-color: #209CB0;
      box-shadow: 0 0 0 3px rgba(32, 156, 176, 0.1);
    }

    /* ========================================
       BOTÓN MOSTRAR/OCULTAR CONTRASEÑA
       Ícono del ojo posicionado dentro del input
       ======================================== */
    .toggle-password {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: #666;
      padding: 0;
      display: flex;
      align-items: center;
    }

    .toggle-password:hover {
      color: #209CB0;
    }

    /* ========================================
       OPCIONES DEL FORMULARIO
       Checkbox "Recordarme" y enlace de ayuda
       ======================================== */
    .form-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      flex-wrap: wrap;
      gap: 10px;
    }

    /* Checkbox con su label */
    .remember-me {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .remember-me input[type="checkbox"] {
      width: 18px;
      height: 18px;
      cursor: pointer;
      accent-color: #209CB0;
    }

    .remember-me label {
      color: #666;
      font-size: 14px;
      cursor: pointer;
      margin: 0;
    }

    /* Enlace de ayuda con efecto hover */
    .help-link {
      color: #209CB0;
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    .help-link:hover {
      color: #1a7d8f;
      text-decoration: underline;
    }

    /* ========================================
       BOTÓN DE LOGIN
       Botón con gradiente, sombra y efectos de hover/active
       ======================================== */
    .login-button {
      width: 100%;
      padding: 16px;
      background: linear-gradient(135deg, #209CB0 0%, #1a7d8f 100%);
      color: white;
      border: none;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 15px rgba(32, 156, 176, 0.3);
    }

    .login-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(32, 156, 176, 0.4);
    }

    .login-button:active {
      transform: translateY(0);
    }

    /* ========================================
       LOGOS RESPONSIVE
       Sistema de dos logos: uno para desktop y otro para móvil
       ======================================== */
    .logo-mobile {
      display: none;
    }

    /* ========================================
       RESPONSIVE: TABLETS Y MÓVILES (< 968px)
       Cambia layout de horizontal a vertical
       Fondo azulado con imagen en la sección superior
       ======================================== */
    @media (max-width: 968px) {
      /* Fondo general azulado en lugar de imagen completa */
      body {
        background: linear-gradient(135deg, #209CB0 0%, #1a7d8f 100%);
      }

      /* Ocultar imagen de fondo y overlay en móvil */
      .background {
        display: none;
      }

      .overlay {
        display: none;
      }

      /* Tarjeta cambia a layout vertical */
      .login-card {
        flex-direction: column;
        max-width: 500px;
        min-height: auto;
        background: rgba(255, 255, 255, 0.85);
      }

      /* Sección izquierda ahora muestra la imagen de fondo con efectos decorativos */
      .login-left {
        padding: 50px 30px;
        flex-direction: column;
        text-align: center;
        align-items: center;
        background-image: url('../../assets/visual resources/img/fpzintal7.jpeg');
        background-size: cover;
        background-position: center;
        position: relative;
        min-height: 180px;
      }

      /* Overlay con gradiente más intenso y patrón decorativo */
      .login-left::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
          linear-gradient(135deg, rgba(32, 156, 176, 0.3) 0%, rgba(26, 125, 143, 0.3) 100%),
          repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.02) 10px,
            rgba(255, 255, 255, 0.02) 20px
          );
        z-index: 0;
      }

      /* Efecto de brillo sutil en la parte superior */
      .login-left::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 60%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
        z-index: 0;
      }

      /* Contenido sobre el overlay */
      .login-left > * {
        position: relative;
        z-index: 1;
      }

      /* Ocultar ambos logos en móvil */
      .logo-desktop,
      .logo-mobile {
        display: none;
      }

      .login-left-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      /* Título más grande y centrado verticalmente */
      .login-left h1 {
        font-size: 38px;
        margin-bottom: 0;
        font-weight: 800;
        letter-spacing: 1px;
        text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      }

      /* Ocultar descripción larga */
      .login-left p {
        display: none;
      }

      .login-right {
        padding: 40px 30px;
      }
    }

    /* ========================================
       RESPONSIVE: MÓVILES PEQUEÑOS (< 480px)
       Ajustes adicionales para pantallas muy pequeñas
       ======================================== */
    @media (max-width: 480px) {
      .login-container {
        padding: 10px;
      }

      .login-left {
        padding: 40px 20px;
        min-height: 160px;
      }

      .login-left h1 {
        font-size: 32px;
      }

      .login-right {
        padding: 30px 20px;
      }

      .login-right h2 {
        font-size: 26px;
      }

      .form-group input {
        font-size: 14px;
        padding: 12px 14px;
      }

      .login-button {
        padding: 14px;
        font-size: 15px;
      }
    }

    /* ========================================
       RESPONSIVE: MÓVILES MUY PEQUEÑOS (< 360px)
       Optimización para dispositivos con pantallas muy reducidas
       ======================================== */
    @media (max-width: 360px) {
      .login-left h1 {
        font-size: 28px;
      }

      .login-right h2 {
        font-size: 22px;
      }
    }