/* Bloquea la fila al alto de la pantalla (mejor en móviles) */
.vh-lock { height: 100svh; }

/* Izquierda y derecha heredan altura */
.left-col, .right-col { height: 100%; }

/* Carrusel izquierdo */
.left-col .carousel,
.left-col .carousel-inner,
.left-col .carousel-item { height: 100%; }

.left-col .carousel-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Scroll interno de la derecha si crece */
.right-col { overflow: auto; min-height: 90svh; }

/* Card: que mida su contenido (no se estire a toda la columna) */
.card-grow {
  flex: 0 1 auto;
  width: 100%;
  max-width: 520px;
  border-radius: 4rem;
}
.card-grow .card-body {
  display: flex; flex-direction: column; min-height: 0;
}

/* Efecto fade */
.fade-in { animation: fadeIn ease 1s; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Máscara de la columna izquierda (md+) */
.mask-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-color: hsla(0, 0%, 0%, 0.2);
}

/* Fondo carrusel + máscara SOLO en pantallas pequeñas (derecha) */
@media (max-width: 767.98px) {
  .right-col { position: relative; }     /* ancla del fondo */
  .right-bg { z-index: 1; }              /* carrusel debajo */
  .right-bg .carousel,
  .right-bg .carousel-inner,
  .right-bg .carousel-item { height: 100%; }
  .right-bg .carousel-item img {
    width: 100%; height: 100%; display: block; object-fit: cover;
  }
  .right-mask {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
  }
  .right-foreground { z-index: 3; }      
}

/* En md+ ocultamos el fondo de la derecha (ya se muestra el carrusel izquierdo) */
@media (min-width: 768px) {
  .right-bg, .right-mask { display: none !important; }
}

/* Tipografías/espaciados y logos por breakpoints (tus ajustes) */
.pptc { font-style: italic; font-size: 10.5pt; text-align: center; margin-bottom: 1rem; }

@media (max-width: 549px) {
  .logo_awari { width: 80%; margin-top: .5rem; }
  .logo_colegio { margin-top: 1.5rem; width: 180px; height: auto; }
  .indication { font-size: 12.5pt; margin-bottom: 1rem; }
  .user { margin-bottom: 1.7rem; margin-top: 2rem; }
  .password { margin-bottom: 0.5rem; }
  .btn-ingreso { margin-top: 2rem; margin-bottom: 1.6rem; }
  .db { font-size: 10pt; }
  .logo_zeus { width: 160px; }
  .right-col { justify-content: flex-start; }
}

@media (min-width: 550px) and (max-width: 767px) {
  .logo_awari { width: 65%; }
  .logo_colegio { margin-top: 1.5rem; width: 50%; height: auto; }
  .indication { font-size: 13pt; margin-bottom: 1.5rem; }
  .user { margin-bottom: 2rem; margin-top: 2rem; }
  .password { margin-bottom: 0.5rem; }
  .btn-ingreso { margin-top: 2rem; margin-bottom: 1.6rem; }
  .db { font-size: 10.5pt; }
  .logo_zeus { width: 200px; }
  .pptc { font-size: 11pt; }
  .right-col { justify-content: flex-start; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .logo_awari { width: 65%; }
  .logo_colegio { margin-top: 1.5rem; width: 50%; height: auto; }
  .indication { font-size: 13pt; margin-bottom: 1.5rem; }
  .user { margin-bottom: 2rem; margin-top: 2rem; }
  .password { margin-bottom: 0.5rem; }
  .btn-ingreso { margin-top: 2rem; margin-bottom: 1.6rem; }
  .db { font-size: 10.5pt; }
  .logo_zeus { width: 150px; }
  .pptc { font-size: 10.5pt; }
  .right-col { justify-content: flex-start; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .logo_awari { width: 65%; }
  .logo_colegio { margin-top: 1.5rem; width: 50%; height: auto; }
  .indication { font-size: 12.5pt; margin-bottom: 1.5rem; }
  .user { margin-bottom: 2rem; margin-top: 2rem; }
  .password { margin-bottom: 0.5rem; }
  .btn-ingreso { margin-top: 2rem; margin-bottom: 1.6rem; }
  .db { font-size: 10pt; }
  .logo_zeus { width: 150px; }
  .pptc { font-size: 10.5pt; }
  .right-col { justify-content: flex-start; }
}

@media (min-width: 1200px) {
  .logo_awari { width: 60%; }
  .logo_colegio { margin-top: 2rem; width: 50%; height: auto; margin-bottom: 0rem; }
  .indication { font-size: 12pt; margin-bottom: .5rem; }
  .user { margin-bottom: 2rem; margin-top: 2rem; }
  .password { margin-bottom: 1.5rem; }
  .btn-ingreso { margin-top: 2rem; margin-bottom: 1.5rem; }
  .db { font-size: 10pt; margin-top: .5rem; }
  .logo_zeus { width: 180px; }
  .pptc { font-size: 10.5pt; }
  .right-col { justify-content: center; }
}

/* Reset básicos */
body, html { margin: 0; height: 100%; }