:root {
     --primary-red: #d30000;
     /* Rojo inspirado en tu logo PCTEC */
     --primary-red-hover: #a30000;
     --text-dark: #2d3748;
     --text-muted: #718096;
     --bg-page: #f4f7f6;
     /* Fondo claro, sin usar negro */
     --bg-card: #ffffff;
     --border-color: #e2e8f0;
 }


 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }


 /* Contenedor principal centrado */
 .auth-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     height: auto;
     background-color: var(--bg-page);
     padding: 20px;
     width: 100%;
     height: 100vh;
     overflow: hidden;
     font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }

 /* Tarjeta principal dividida */
 .tarjeta-principal {
     display: flex;
     background-color: var(--bg-card);
     border-radius: 20px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     width: 50%;
     height: auto;

 }

 /* Lado Izquierdo: Logo (Oculto en celular) */
 .panel-imagen {
     flex: 0 0 45%;
     border-radius: 28px;
     padding: 15px 0px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     opacity: 0;
     animation: fadeInLeft 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
 }

 @keyframes fadeInLeft {
     from {
         opacity: 0;
         transform: translateX(-40px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 .contra_mal {
     color: #cc0000;
     background-color: #fdf5f5;
     border: 1px solid #f6caca;
     padding: 10px 15px;
     border-radius: 8px;
     font-size: 0.9rem;
     font-weight: 600;
     text-align: center;
     margin-bottom: 20px;
     display: none;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 .contra_mal.mostrar-error {
     display: block;
     animation: shakeError 0.4s ease-in-out forwards;
 }

 @keyframes shakeError {

     0%,
     100% {
         transform: translateX(0);
     }

     20%,
     60% {
         transform: translateX(-6px);
     }

     40%,
     80% {
         transform: translateX(6px);
     }
 }

 .brand-logo {
     width: 100%;
     height: 100%;
     border-radius: 40px;
 }

 /* Lado Derecho: Formulario */
 .login-container {
     flex: 1;
     padding: 30px 40px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .login-container {
     padding: 30px 60px;
     color: var(--text-dark);
     font-weight: 800;
 }

 /* seccion formulario */
 .logo_principal {
     width: 50%;
 }

 .login-card {
     background: #ffffff;
     width: 100%;
     max-width: 450px;
     padding: 50px 40px;
     border-radius: 12px;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
     /* La franja roja oscura en el borde izquierdo de tu imagen */
     border-left: 6px solid #4a0000;
 }

 /* Logo y Títulos */
 .logo-section {
     text-align: center;
 }

 .logo-section img {
     max-width: 180px;
 }

 .logo-section h1 {
     font-size: 2.2rem;
     color: #1a1a1a;
     font-weight: 700;
     margin-bottom: 8px;
 }

 .logo-section p {
     color: #666666;
     font-size: 1rem;
     font-weight: 400;
 }

 /* Estilos del Formulario */
 .form-group {
     display: flex;
     align-items: flex-end;
     /* Alinea el icono con la línea del input */
     margin-bottom: 35px;
     position: relative;
 }

 .icon-left {
     color: #555555;
     font-size: 1.3rem;
     width: 40px;
     padding-bottom: 8px;
     text-align: center;
 }

 .input-wrapper {
     flex: 1;
     position: relative;
     display: flex;
     flex-direction: column;
 }

 .input-wrapper label {
     color: #a32a2a;
     /* Rojo oscuro para las etiquetas */
     font-size: 0.95rem;
     font-weight: 500;
     margin-bottom: 5px;
 }

 /* Input con solo línea inferior */
 .input-wrapper input {
     border: none;
     border-bottom: 1.5px solid #d99a9a;
     /* Línea roja clara por defecto */
     padding: 5px 0 8px 0;
     font-size: 1rem;
     color: #333;
     background: transparent;
     transition: border-color 0.3s;
 }

 .input-wrapper input:focus {
     outline: none;
     border-bottom: 2px solid #cc0000;
     /* Línea roja fuerte al escribir */
 }

 /* Botón de Mostrar Contraseña */
 .toggle-pwd {
     position: absolute;
     right: 0;
     bottom: 8px;
     background: none;
     border: none;
     color: #555555;
     font-size: 0.9rem;
     font-weight: 500;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .toggle-pwd:hover {
     color: #333;
 }

 /* Botón Ingresar */
 .btn-submit {
     width: 100%;
     background: linear-gradient(180deg, #d81b1b, #b31212);
     color: white;
     border: none;
     padding: 15px;
     border-radius: 30px;
     /* Forma de píldora */
     font-size: 1.1rem;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 10px;
     box-shadow: 0 4px 15px rgba(204, 0, 0, 0.2);
     transition: transform 0.2s, box-shadow 0.2s;
     margin-bottom: 30px;
 }

 .btn-submit:disabled {
     opacity: 0.7;
     cursor: not-allowed;
     background: #b31212;
     transform: none !important;
     box-shadow: none !important;
 }

 .btn-submit:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(204, 0, 0, 0.3);
 }

 /* Enlace y Footer */
 .forgot-link {
     display: block;
     text-align: center;
     color: #666666;
     text-decoration: none;
     font-size: 0.95rem;
     font-weight: 500;
 }

 .forgot-link:hover {
     color: #333;
 }

 .copyright {
     text-align: center;
     color: #888888;
     font-size: 0.75rem;
     font-weight: 500;
 }

 /* =========================================
           DISEÑO RESPONSIVO (MÓVILES)
           ========================================= */
 @media (max-width: 767px) {
     .logo_principal {
         width: 30%;
     }

     .auth-wrapper {
         padding: 10px;
     }

     .tarjeta-principal {
         flex-direction: column;
         width: 100%;
     }

     /* Ocultamos la imagen en celular para no saturar la pantalla */
     .panel-imagen {
         display: none;
     }

     .login-container {
         padding: 20px 15px;
     }

     .logo-section p {
         font-size: 13px;
     }

     .login-container h1 {
         font-size: 18px;
         text-align: center;
     }

     .input-wrapper label {
         font-size: 11px;
     }

     .icon-left,
     .toggle-pwd {
         font-size: 13px;
     }

     .btn-submit,
     .forgot-link,
     .copyright {
         font-size: 13px;
     }
 }

 /* =========================================
           ANIMACIONES (SOLO PC)
           ========================================= */


 @media (max-width: 1200px) {

     /* Tarjeta principal dividida */
     .tarjeta-principal {
         display: flex;
         background-color: var(--bg-card);
         border-radius: 20px;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
         overflow: hidden;
         width: 95%;
         height: auto;
     }
 }


 @media (min-width: 768px) {
     @keyframes fadeInRight {
         from {
             opacity: 0;
             transform: translateX(30px);
         }

         to {
             opacity: 1;
             transform: translateX(0);
         }
     }

     @keyframes floatEffect {
         0% {
             transform: translateY(0px);
         }

         50% {
             transform: translateY(-8px);
         }

         100% {
             transform: translateY(0px);
         }
     }

     .login-container {
         animation: fadeInRight 0.7s ease-out forwards;
     }

     .brand-logo {
         animation: floatEffect 4s ease-in-out infinite;
     }

     .btn-submit {
         transition: all 0.3s ease;
     }

     .btn-submit:hover {
         background-color: var(--primary-red-hover);
         transform: translateY(-2px);
         box-shadow: 0 5px 15px rgba(211, 0, 0, 0.25);
     }
 }