:root {
  --primero: #40E0D0;
  --segundo: #98D4AA;
  --tercero: #20B2AA;
  --cuarto: #4FD9D3;
  --quinto: #2E9A91;
  --sexto: #1B6B7A;
  --septimo: #0D5060;
  --blanco: #ffffff;
  --grisclaro: #F2F2F2;
  --negro: #000000;
}

/* =========================
   Estructura general
========================= */
/* Marco */
.row-marco {
  border: 2px solid var(--grisclaro);
  border-radius: .25rem;
}

/* Layout base (ajustado para móvil/desktop) */
.container-fluid > .row { min-height: 100vh; }
@media (max-width: 991.98px) { .container-fluid > .row { min-height: auto; } }

/* Evita scroll horizontal accidental */
.row-marco, .container-fluid { overflow-x: hidden; }

/* =========================
   Columna izquierda (imagen)
========================= */
.imagen-logo {
  background-image: url("/image/login/login-img.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 40vh; /* más sólida en móvil */
  flex: 1;
}
@media (min-width: 576px) { .imagen-logo { min-height: 50vh; } }
@media (min-width: 992px) { .imagen-logo { min-height: 100%; } }

/* =========================
   Columna derecha / encabezado
========================= */
/* Logo */
.logo-ourT {
  width: clamp(120px, 18vw, 180px);
  height: auto;
  margin-top: 1rem;
  filter: drop-shadow(0 4px 10px rgba(32, 178, 170, 0.2));
  transition: transform 0.3s ease;
}

.logo-ourT:hover {
  transform: scale(1.03);
}

/* Título */
.h1-inicio-sesion {
  color: var(--septimo);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 6vw, 60px);
  margin: 0;
}

/* Párrafo */
.p-inicio-sesion {
  color: var(--septimo);
  font-size: clamp(14px, 2.2vw, 18px);
  max-width: 520px;   /* mantiene el look en desktop */
  width: 100%;        /* fluido en móvil */
  margin-inline: auto;
}

/* (opcional) Clase para justificar texto si la usas en HTML */
.text-justify { text-align: justify; }

/* =========================
   Formulario
========================= */
.form-inicio-sesion {
  width: 100%;
  max-width: 560px;        /* evita que se ensanche demasiado en desktop */
  margin-inline: auto;
}
@media (max-width: 575.98px) {
  .p-inicio-sesion { padding-inline: 16px; }
  .form-inicio-sesion { padding-inline: 16px; }
}

/* Labels */
.form-label {
  font-weight: 600;
  color: #1B6B7A;
}

/* =========================
   Inputs estilo maqueta
========================= */
/* tamaño/espaciado del input + padding extra por el ojo a la derecha */
.input-our {
  font-size: 15px;
  padding: 10px 40px 10px 38px;
  padding-right: 44px;      /* para que no tape el ojo */
  min-height: 44px;         /* touch-friendly */
  background-color: #fff;
}
/* Placeholder */
.input-our::placeholder { color: #8aa7a7; }

/* Grupo + borde del input (une con addon izquierdo) */
.input-group .form-control.input-our {
  border: 2px solid #1B6B7A !important;
  border-left: none !important;
  border-radius: 0 6px 6px 0 !important;
  background-color: #fff;
}
/* Addon izquierdo */
.input-group .input-group-text.our-addon {
  border: 2px solid #1B6B7A !important;
  border-right: none !important;
  border-radius: 6px 0 0 6px !important;
  background: #fff !important;
  color: #1B6B7A;
  padding: 0 12px;
  font-size: 1.1rem;
}

/* Icono derecho (info / ojo) dentro del input */
.input-icon-right {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #1B6B7A;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 2; /* por encima del input */
}
.input-icon-right:hover { color: #20B2AA; }

/* Focus limpio (sin glow) */
.form-control.input-our:focus,
.form-control.input-our:focus-visible,
.input-group .form-control.input-our:focus,
.input-group.input-group-flat .form-control.input-our:focus,
.was-validated .form-control.input-our:valid:focus,
.was-validated .form-control.input-our:invalid:focus {
  box-shadow: none !important;
  outline: none !important;
  border-color: #1B6B7A !important;
}

/* Autocompletado Chrome (quita brillo de fondo) */
.input-our:-webkit-autofill,
.input-our:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: inherit;
}

/* Tabler .input-group-flat quita bordes: los reponemos */
.input-group.input-group-flat .form-control.input-our {
  border: 2px solid #1B6B7A !important;
  border-left: none !important;
  border-radius: 0 6px 6px 0 !important;
  background-color: #fff !important;
  box-shadow: none !important;
}
.input-group.input-group-flat .input-group-text.our-addon {
  border: 2px solid #1B6B7A !important;
  border-right: none !important;
  border-radius: 6px 0 0 6px !important;
  background: #fff !important;
}

/* En pantallas muy angostas, deja más espacio al ojo */
@media (max-width: 575.98px) {
  .input-our { padding-right: 52px; }
}

/* =========================
   Divider “O”
========================= */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 12px auto;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}
.divider span { color: var(--septimo); font-weight: 600; }

/* (Si sigues usando <hr>, lo mantenemos básico) */
hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  width: 90%;
}

/* =========================
   Botón "Ingresar" (outline pill)
========================= */
.btn-ingresar {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  color: #1B6B7A;
  border: 2px solid #1B6B7A;
  border-radius: 999px;
  background-color: transparent;
  text-align: center;
  transition: all 0.2s ease-in-out;
  width: 180px;
  padding-top: 2.5px;
  padding-bottom: 2.5px;
}
.btn-ingresar:hover {
  background-color: #1B6B7A;
  color: #fff;
}
.btn-ingresar:active,
.btn-ingresar:focus {
  background-color: #20B2AA;
  color: #fff;
  outline: none;
  box-shadow: none;
}

/* Evitar que el botón Verificar se corte en 2FA */
.form-inicio-sesion .form-footer {
  min-width: 100%;
  flex-wrap: nowrap;
}
.form-inicio-sesion .form-footer .btn-ingresar {
  flex-shrink: 0;
}

/* =========================
   Enlace "Olvidé mi contraseña" / "Volver al Inicio de Sesión"
========================= */
.olvide-pw {
  text-decoration: none;
  color: var(--septimo);
  font-weight: 600;
  transition: color 0.2s ease;
}
.olvide-pw:hover {
  text-decoration: underline;
  color: var(--quinto);
}
.form-label-description .olvide-pw {
  font-size: 0.95rem;
}

/* =========================
   Alertas de éxito (recuperar / restablecer contraseña)
========================= */
.auth-alert-success {
  background-color: rgba(27, 107, 122, 0.12);
  border: 2px solid var(--sexto);
  color: var(--septimo);
  border-radius: 12px;
}
.auth-alert-success .bi-check-circle-fill {
  color: var(--quinto);
}

/* =========================
   Botones sociales (Google / Outlook)
========================= */
.google-btn, .outlook-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease;
  width: 100%;               /* full en móvil */
  max-width: 260px;          /* mantiene look en desktop */
  justify-content: center;
  text-decoration: none;
}

/* Google */
.google-btn {
  background: #4285F4;
  color: #fff;
  font: 500 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.google-btn:hover { background: #357ae8; }
.google-btn:active { transform: translateY(0.5px); }

/* Outlook */
.outlook-btn {
  background: #0072C6;
  color: #fff;
  font: 500 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.outlook-btn:hover { background: #005a9e; }
.outlook-btn:active { transform: translateY(0.5px); }

/* Iconos circulares blancos */
.google-icon, .outlook-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 22px;
}

/* SVGs internos pintados con currentColor del botón */
.google-svg, .outlook-svg {
  width: 14px;
  height: 14px;
  display: block;
}
.google-svg { color: #4285F4; }
.outlook-svg { color: #0072C6; }

/* =========================
   Footer
========================= */
.col-footer { background-color: var(--sexto); padding-inline: 8px; }
.p-footer { font-size: 12px; color: var(--blanco); }