/**
 * Estilos específicos para la página de login
 * 
 * Este archivo contiene todos los estilos CSS necesarios para la página de inicio de sesión.
 * Se carga automáticamente cuando se accede a la vista de login.
 * 
 * @package Views/Auth/Assets
 */

/* ========================================
   OVERRIDE DE ESTILOS BASE
   ======================================== */
/*
 * Tipografía: convención del proyecto (views/assets/css/base.css).
 * Fuente: Inter. Tamaños: h1 22px, subtítulo/p 14px, labels 13px, pie 12px.
 */

/* Sobrescribir estilos globales del body para el login */
body {
   background-color: #f5f7fa !important;
}

/* Sobrescribir estilos globales del main para el login */
main.login-main {
   padding: 0 !important;
   background: #e8eaed !important;
   min-height: 100vh !important;
}

/* ========================================
  LAYOUT DOS COLUMNAS (FORMULARIO + TIPS)
  ======================================== */

.login-wrapper {
   display: flex;
   min-height: 100vh;
   width: 100%;
}

/* Columna: formulario (izquierda) */
.login-column-form {
   flex: 0 0 auto;
   width: 50%;
   min-width: 380px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   padding: 2.5rem 3rem;
   background: #ffffff;
   border-left: 4px solid #169cea;
}

/* Columna: tips (derecha) - ocupa todo el espacio disponible */
.login-column-tips {
   flex: 1;
   display: flex;
   align-items: stretch;
   justify-content: stretch;
   padding: 0;
   min-width: 0;
}

/* Logo (zona superior) */
.login-top {
   width: 100%;
}

.login-icon {
   width: 130px;
   height: auto;
   display: block;
}

/* Contenedor del formulario: centrado vertical y horizontalmente */
.login-column-form .login-card {
   width: 100%;
   max-width: 480px;
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

/* Tarjeta del login - sin efecto de tarjeta */
.login-card {
   background: transparent;
   border-radius: 0;
   box-shadow: none;
   padding: 0;
}

/* Pie de la sección izquierda */
.login-bottom {
   width: 100%;
   text-align: center;
   padding-top: 1rem;
   border-top: 1px solid #f0f0f0;
}

.login-bottom p {
   font-size: 12px;
   color: #999999;
   margin: 0;
}

/* ========================================
  PANEL DE TIPS (COLUMNA DERECHA)
  ======================================== */

.tips-panel {
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 100%;
   border-radius: 0;
   overflow: hidden;
   background: linear-gradient(145deg, #1e3a5f 0%, #2d5a87 40%, #3d7ab5 100%);
}

/* Fondo geométrico decorativo */
.tips-bg {
   position: absolute;
   inset: 0;
   pointer-events: none;
}

.tips-shape {
   position: absolute;
   border-radius: 50%;
   opacity: 0.15;
}

.tips-shape-1 {
   width: 280px;
   height: 280px;
   background: #ff6b6b;
   top: -80px;
   right: -60px;
}

.tips-shape-2 {
   width: 160px;
   height: 160px;
   background: #ffffff;
   bottom: 20%;
   left: -40px;
   opacity: 0.2;
}

.tips-shape-3 {
   width: 100px;
   height: 100px;
   background: #ffb347;
   top: 35%;
   right: 15%;
   opacity: 0.25;
}

.tips-shape-4 {
   width: 60px;
   height: 60px;
   background: #ffffff;
   bottom: 25%;
   right: 25%;
   opacity: 0.15;
}

.tips-shape-5 {
   width: 200px;
   height: 200px;
   background: rgba(255, 255, 255, 0.08);
   bottom: -50px;
   left: 30%;
   border-radius: 50%;
}

/* Puntos decorativos */
.tips-dots {
   position: absolute;
   inset: 0;
   background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
   background-size: 24px 24px;
   opacity: 0.4;
}

/* Contenido del carrusel de tips: centrado vertical y horizontal en el panel */
.tips-content {
   position: relative;
   z-index: 2;
   padding: 3rem 2.5rem 4rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   min-height: 0;
}

.tips-carousel {
   position: relative;
   flex: 0 1 auto;
   width: 100%;
   min-height: 200px;
}

.tips-slide {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   opacity: 0;
   visibility: hidden;
   transform: translateX(20px);
   transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.tips-slide.tips-slide-active {
   position: relative;
   opacity: 1;
   visibility: visible;
   transform: translateX(0);
}

.tips-slide {
   text-align: center;
}

/* Título del tip: mismo nivel que h1 en el proyecto (22px) */
.tips-title {
   font-size: 22px;
   font-weight: 700;
   color: #ffffff;
   margin: 0 0 1.25rem 0;
   line-height: 1.3;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tips-desc {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.92);
   line-height: 1.65;
   margin: 0;
   max-width: 28em;
   margin-left: auto;
   margin-right: auto;
}

/* Indicadores del carrusel (puntos) */
.tips-dots-nav {
   display: flex;
   justify-content: center;
   gap: 0.5rem;
   margin-top: 2rem;
   flex-shrink: 0;
}

.tips-dots-nav .tip-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.4);
   border: none;
   padding: 0;
   cursor: pointer;
   transition: background 0.3s ease, transform 0.3s ease;
}

.tips-dots-nav .tip-dot:hover {
   background: rgba(255, 255, 255, 0.7);
}

.tips-dots-nav .tip-dot.tip-dot-active {
   background: #ffffff;
   transform: scale(1.2);
}

/* Header del login */
.login-header {
   text-align: left;
   margin-bottom: 2rem;
   padding-bottom: 1.5rem;
   border-bottom: 1px solid #f0f0f0;
}

/* Título: convención del proyecto h1 = 22px (marcaciones, reportes, auditoría) */
.login-header h1 {
   font-size: 22px !important;
   font-weight: 700 !important;
   color: var(--text-color) !important;
   margin: 0 0 0.4rem 0 !important;
}

/* Subtítulo: 14px (texto secundario bajo h1) */
.login-header p {
   font-size: 14px !important;
   color: #666666 !important;
   margin: 0 !important;
   font-weight: 400 !important;
   line-height: 1.5 !important;
}

/* ========================================
  FORMULARIO
  ======================================== */

.login-form {
   width: 100%;
}

/* Grupo de campos del formulario */
.form-group {
   margin-bottom: 1.5rem;
}

.form-group label {
   display: block;
   font-size: 13px !important;
   font-weight: 500 !important;
   color: var(--text-color) !important;
   margin-bottom: 0.5rem;
}

/* Contenedor para label con link */
.label-with-link {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.5rem;
}

.label-with-link label {
   margin-bottom: 0;
   flex: 1;
}

/* Contenedor para input con icono */
.input-with-icon {
   position: relative;
   display: flex;
   align-items: center;
}

.input-icon {
   position: absolute;
   left: 1rem;
   width: 20px;
   height: 20px;
   pointer-events: none;
   opacity: 0.6;
}

.toggle-password {
   position: absolute;
   right: 1rem;
   width: 20px;
   height: 20px;
   cursor: pointer;
   opacity: 0.6;
   transition: opacity 0.3s ease;
   z-index: 10;
}

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

/* Campos de entrada */
.form-control {
   width: 100% !important;
   padding: 0.875rem 3rem 0.875rem 3rem !important;
   border: 1px solid #d0d4d9 !important;
   border-radius: 8px !important;
   font-size: 0.95rem !important;
   color: #1c1c1c !important;
   background-color: #ffffff !important;
   transition: all 0.3s ease !important;
   box-shadow: none !important;
}

.form-control:focus {
   outline: none !important;
   border-color: #169cea !important;
   box-shadow: 0 0 0 3px rgba(22, 156, 234, 0.1) !important;
   background-color: #ffffff !important;
}

.input-with-icon:focus-within .input-icon {
   opacity: 1;
}

.form-control::placeholder {
   color: #aaaaaa !important;
}

/* Input deshabilitado */
.form-control:disabled {
   background-color: #f5f5f5 !important;
   color: #999999 !important;
   cursor: not-allowed !important;
   opacity: 0.7 !important;
}

/* Ocultar spinners (controles de incremento/decremento) en inputs de tipo number */
.form-control[type="number"]::-webkit-inner-spin-button,
.form-control[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.form-control[type="number"] {
   -moz-appearance: textfield;
}

/* Mensaje de error */
.error-message {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   color: #d32f2f;
   font-size: 0.875rem;
   font-weight: 400;
   margin-top: 0.5rem;
   padding: 0;
   background-color: transparent;
   border-left: none;
   border-radius: 0;
   min-height: 0;
   max-height: 0;
   opacity: 0;
   transform: translateY(-5px);
   transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, padding 0.3s ease, margin-top 0.3s ease;
   line-height: 1.4;
   overflow: hidden;
}

.error-message.error {
   opacity: 1;
   transform: translateY(0);
   padding: 0.5rem 0.75rem;
   background-color: #ffebee;
   border-left: 3px solid #d32f2f;
   border-radius: 4px;
   min-height: 1.5rem;
   max-height: 5rem;
   margin-top: 0.5rem;
}

.error-message::before {
   content: '';
   display: inline-block;
   width: 16px;
   height: 16px;
   min-width: 16px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d32f2f'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   flex-shrink: 0;
}

/* Input con error - cambiar borde */
.form-control.has-error {
   border-color: #d32f2f !important;
}

.form-control.has-error:focus {
   border-color: #d32f2f !important;
   box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1) !important;
}

/* ========================================
  BOTÓN DE SUBMIT
  ======================================== */

.btn-primary {
   width: 100% !important;
   padding: 10px 1.5rem !important;
   background-color: #169cea !important;
   color: #fff !important;
   border: none !important;
   border-radius: 20px !important;
   font-size: 1rem !important;
   font-weight: 600 !important;
   cursor: pointer;
   transition: all 0.3s ease !important;
   display: flex !important;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
}

.btn-icon {
   width: 20px;
   height: 20px;
}

.btn-primary:hover:not(:disabled) {
   background-color: #20abfc !important;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.26);
}

.btn-primary:active:not(:disabled) {
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
}

/* Botón deshabilitado */
.btn-primary:disabled,
.btn-primary.btn-disabled {
   background-color: #cccccc !important;
   color: #999999 !important;
   cursor: not-allowed !important;
   opacity: 0.6 !important;
   box-shadow: none !important;
}

.btn-primary:disabled:hover,
.btn-primary.btn-disabled:hover {
   background-color: #cccccc !important;
   box-shadow: none !important;
}

/* Icono del botón cuando está deshabilitado - mismo color que el texto */
.btn-primary:disabled .btn-icon,
.btn-primary.btn-disabled .btn-icon {
   filter: grayscale(100%) brightness(0.6) opacity(1);
   opacity: 1 !important;
}

/* ========================================
  FOOTER DEL FORMULARIO
  ======================================== */

.form-footer {
   text-align: center;
   margin-top: 1.5rem;
   margin-left: -2.5rem;
   margin-right: -2.5rem;
   padding: 1.5rem 2.5rem 0 2.5rem;
   border-top: 1px solid #e0e0e0;
}

.form-footer p {
   font-size: 0.9rem;
   color: #757575;
   margin: 0;
}

.register-link {
   color: #169cea;
   text-decoration: none;
   font-size: 0.9rem;
   font-weight: 500;
   transition: color 0.3s ease;
}

.register-link:hover {
   color: #0f7bbf;
   text-decoration: underline;
}

.forgot-link {
   color: #169cea;
   text-decoration: none;
   font-size: 0.9rem;
   font-weight: 500;
   transition: color 0.3s ease;
}

.forgot-link:hover {
   color: #0f7bbf;
   text-decoration: underline;
}

/* ========================================
  ANIMACIONES
  ======================================== */

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

/* ========================================
  RESPONSIVE
  ======================================== */

/* Tablet: columna de tips más estrecha */
@media (max-width: 1024px) {
   .login-column-form {
       width: 48%;
       min-width: 340px;
       padding: 2rem 2.5rem;
   }
   
   .tips-content {
       padding: 2.5rem 2rem 3.5rem;
   }
   
   .tips-title {
       font-size: 1.85rem;
   }
   
   .tips-desc {
       font-size: 1.1rem;
   }
}

/* Móvil: una columna, formulario arriba y tips abajo (compacto) */
@media (max-width: 768px) {
   .login-wrapper {
       flex-direction: column;
       align-items: stretch;
   }
   
   .login-column-form {
       width: 100%;
       min-width: 0;
       padding: 1.5rem 1.5rem;
       border-left: none;
       border-top: 4px solid #169cea;
   }
   
   .login-column-tips {
       padding: 0;
       min-height: 320px;
   }
   
   .tips-content {
       padding: 2rem 1.5rem 3rem;
   }
   
   .tips-title {
       font-size: 1.5rem;
   }
   
   .tips-desc {
       font-size: 1.05rem;
   }
}

@media (max-width: 480px) {
   .login-column-form {
       padding: 1.25rem 1rem;
   }
   
   .login-column-tips {
       padding: 0;
   }
   
   .login-header h1 {
       font-size: 18px;
   }
   
   .tips-content {
       padding: 1.5rem 1.25rem 2.5rem;
   }
   
   .tips-title {
       font-size: 18px;
   }
   
   .tips-desc {
       font-size: 13px;
   }
}

/* ========================================
  MENSAJE DE EMAIL NO CONFIRMADO
  ======================================== */

.alert-message {
   margin-bottom: 1.5rem;
   border-radius: 12px;
   padding: 1rem;
   animation: slideDown 0.3s ease-out;
}

.alert-warning {
   background-color: #fff3cd;
   border: 1px solid #ffc107;
}

.alert-content {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   margin-bottom: 1rem;
}

.alert-icon {
   flex-shrink: 0;
   width: 24px;
   height: 24px;
}

.alert-icon img {
   width: 100%;
   height: 100%;
}

.alert-text {
   flex: 1;
}

.alert-title {
   font-size: 14px;
   font-weight: 600;
   color: #856404;
   margin: 0 0 0.25rem 0;
}

.alert-message-text {
   font-size: 13px;
   color: #856404;
   margin: 0;
   line-height: 1.5;
}

.btn-alert {
   width: 100%;
   padding: 0.75rem 1rem;
   background-color: #ffc107;
   color: #856404;
   border: none;
   border-radius: 8px;
   font-size: 0.9rem;
   font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   transition: all 0.3s ease;
}

.btn-alert:hover {
   background-color: #ffb300;
   transform: translateY(-1px);
   box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

.btn-alert:active {
   transform: translateY(0);
}

.btn-alert .btn-icon {
   width: 16px;
   height: 16px;
   filter: brightness(0) saturate(100%) invert(27%) sepia(95%) saturate(1352%) hue-rotate(358deg) brightness(96%) contrast(88%);
}

@keyframes slideDown {
   from {
       opacity: 0;
       transform: translateY(-10px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

/* ========================================
  MENSAJE INFORMATIVO (ALERT-INFO)
  ======================================== */

.alert-info {
   background-color: #d1ecf1;
   border: 1px solid #bee5eb;
}

.alert-info .alert-title {
   color: #0c5460;
}

.alert-info .alert-message-text {
   color: #0c5460;
}

/* ========================================
  FOOTER DEL FORMULARIO Y BOTÓN LINK
  ======================================== */

.form-footer {
   margin-top: 1.5rem;
   text-align: center;
}

.btn-link {
   width: 100%;
   padding: 0.875rem 1rem;
   background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
   color: #495057;
   border: 2px solid #dee2e6;
   border-radius: 10px;
   font-size: 0.9rem;
   font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.625rem;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   text-decoration: none;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
   position: relative;
   overflow: hidden;
}

.btn-link::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
   transition: left 0.5s;
}

.btn-link:hover::before {
   left: 100%;
}

.btn-link:hover {
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   border-color: #adb5bd;
   color: #212529;
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-link:active {
   transform: translateY(0);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-link .btn-icon {
   width: 18px;
   height: 18px;
   opacity: 0.8;
   transition: all 0.3s ease;
   filter: brightness(0) saturate(100%) invert(30%) sepia(8%) saturate(750%) hue-rotate(169deg) brightness(94%) contrast(88%);
}

.btn-link:hover .btn-icon {
   opacity: 1;
   transform: translateX(2px);
   filter: brightness(0) saturate(100%) invert(13%) sepia(9%) saturate(750%) hue-rotate(169deg) brightness(94%) contrast(88%);
}

/* Clase para ocultar el botón cuando la cookie expira */
.btn-link.hidden,
.form-footer.hidden {
   display: none !important;
   visibility: hidden !important;
   opacity: 0 !important;
   height: 0 !important;
   overflow: hidden !important;
   margin: 0 !important;
   padding: 0 !important;
}