:root {
  /* === PALETA PRINCIPAL (COLORES INSTITUCIONALES HPM) === */
  --c-primary:#232B60;  /* Azul institucional HPM: títulos, fondo del footer, textos importantes */
  --c-yellow:#FED304;   /* Amarillo HPM: iconos de menú, acentos */
  --c-teal:#49B8B1;     /* Verde agua/acento secundario (no obligatorio usar en todos lados) */
  --c-orange:#F9A51B;   /* Naranja: botones de acción (INGRESAR, REGISTRARME) */
  --c-lime:#D5DF2E;     /* Verde lima: badge del hero "Portal de turnos y estudios" */
  --c-purple:#9183BD;   /* Violeta de apoyo (para futuros detalles) */
}

/* ========= RESET / BASE ========= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 
   BODY
   - Fuente general
   - Fondo con imagen médica (imag_body.jpg)
   - padding-bottom para que el footer fijo no tape el contenido
*/
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: url("../imagenes/imag_body.jpg") no-repeat center center fixed; /* imagen médica de fondo */
  background-size: cover;
  margin: 0;
  padding: 0;
  padding-bottom: 70px; /* altura aproximada del footer fijo */
  color: #2c3e50;
  transition: background-color 0.6s ease, color 0.6s ease;
}

/* 
   Velo blanco suave sobre la imagen de fondo 
   - Hace que el texto se lea mejor sobre la imagen
*/
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.6);
  z-index: -1;
  opacity: 1;
  transition: background 0.6s ease, opacity 0.6s ease;
}

/* ========= NAVBAR tipo Río Gallegos (TRANSPARENTE) ========= */

/* 
   .navbar-hpm
   - Barra fija arriba
   - Fondo transparente (deja ver el video)
*/
.navbar-hpm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background-color: transparent;   /* Transparente: se ve el video detrás */
  box-shadow: none;
  min-height: 56px;
}

/* 
   Contenedor de la navbar
   - Menú + título alineados a la izquierda
   ► Para mover TODO el grupo (icono + título) más a la derecha,
     podés agregar padding-left aquí (ej: padding-left: 0.5rem;)
*/
.navbar-hpm .container {
  justify-content: flex-start;   /* empuja el contenido hacia la izquierda */
  align-items: center;           /* centra verticalmente icono + título */
  gap: 0.75rem;                  /* espacio horizontal entre icono menú y título */
  padding-left: 0.5rem;
}

/* 
   TÍTULO PRINCIPAL: "HOSPITAL PERITO MORENO"
   - Tamaño grande
   - Color blanco con brillo para resaltar sobre el video
   ► Para agrandarlo: subir font-size (ej: 2rem)
   ► Para separarlo más del icono: aumentar gap arriba
*/
.brand-title {
  font-size: 1.7rem;                             /* tamaño del título */
  letter-spacing: 0.12em;                        /* espaciado entre letras */
  text-transform: uppercase;                     /* todo en mayúsculas */
  color: #ffffff;                                /* texto blanco */
  font-weight: 800;                              /* bien grueso */
  text-shadow: 0 0 6px rgba(255,255,255,0.9);    /* brillo/iluminación blanca */
  margin: 0;
}

/* 
   SUBTÍTULO: "Portal de Pacientes"
   - Solo si lo usás en el HTML
*/
.brand-subtitle {
  font-size: 0.85rem;
  color: #f3f4f6;                                /* blanco suave */
  text-shadow: 0 0 4px rgba(255,255,255,0.75);   /* leve brillo */
  margin: 0;
}

/* 
   Botón del menú hamburguesa (solamente el botón)
   - Fondo transparente
   - Sin bordes
*/
.btn-menu {
  background: transparent;
  border: none;
}

/* 
   ICONO MENÚ (hamburguesa)
   - Tamaño grande
   - Blanco con brillo
   ► Para hacerlo más chico/grande: modificar font-size
*/
.icon-menu {
  font-size: 4rem;                                /* tamaño del icono de menú */
  color: #ffffff;                                 /* blanco */
  line-height: 1;
  text-shadow: 0 0 6px rgba(255,255,255,0.9);     /* brillo blanco */
}

/* 
   Menú desplegable del hamburguesa
   - Fondo transparente (no aparece caja blanca)
   - Solo se ven textos e iconos sobre el video
*/
.menu-transparente {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

/* 
   Ítems del menú:
   - Texto blanco
   - Iconos en amarillo HPM
*/
.menu-transparente .dropdown-item {
  color: #ffffff;            /* Texto blanco sobre el video */
  font-weight: 500;
}

.menu-transparente .dropdown-item i {
  color: var(--c-yellow);    /* Íconos en amarillo HPM */
}

/* 
   Hover de ítems del menú:
   - Fondo negro semi-transparente
*/
.menu-transparente .dropdown-item:hover {
  background-color: rgba(0,0,0,0.35);
}

/* ========= HERO con video DEBAJO DEL NAVBAR ========= */

/* 
   Sección del video:
   - Mínimo 60% de alto de pantalla
   - Video de fondo
*/
.hero-video {
  min-height: 60vh;
  position: relative;
  overflow: hidden;
  margin-top: -72px;   /* sube el hero detrás del navbar */
  padding-top: 72px;   /* deja el contenido por debajo del navbar */
}

/* Video de fondo ocupando todo el ancho/alto 
   ACA RECORTÁS QUÉ PARTE DEL VIDEO SE VE
   - object-position Y NEGATIVO: sube el video y recorta la parte de abajo (subtítulos)
*/
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% -10%;   /* 50% horizontal (centrado) | -10% vertical (muestra más la parte de arriba) */
  filter: brightness(0.45);    /* oscurece un poco el video para que el menú se lea */
}

/* Degradé de color sobre el video (toques amarillo y teal) */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(254,211,4,0.15), transparent 60%),
              radial-gradient(circle at bottom right, rgba(73,184,177,0.2), transparent 60%);
}

/* Contenedor del contenido del hero (por si agregás textos luego) */
.hero-video .container {
  position: relative;
  z-index: 2;
}

/* Badge verde lima: "Portal de turnos y estudios" si la usas */
.badge.bg-lime {
  background-color: var(--c-lime) !important; /* Verde lima del hero */
}

/* 
   Logo redondo entre VIDEO y "ACCESOS RÁPIDOS"
   - Centrado
   - Se solapa un poco con el video gracias al margin-top negativo
   ► Para mover el bloque del logo:
       - Más arriba: más negativo margin-top (ej: -70px)
       - Más abajo: margin-top menos negativo o 0
       - Más espacio antes de ACCESOS: aumentar margin-bottom
*/
.hero-logo-wrapper {
  position: relative;
  margin-top: -55px;       /* valor negativo: sube el logo, pisa el video */
  margin-bottom: 25px;     /* separación hacia la sección ACCESOS RÁPIDOS */
  display: flex;
  justify-content: center; /* centra el logo horizontalmente */
  z-index: 5;
}

/* 
   Ajustes visuales del logo
   - width: tamaño del logo
   - background-color: fondo del círculo detrás del logo
     (si lo querés transparente, poner 'transparent')
*/
.hero-logo {
  width: 110px;            /* tamaño del logo (más grande = número mayor) */
  height: auto;
  border-radius: 50%;      /* lo hace redondo */
  background-color: #232B60; /* círculo azul detrás del logo; usar 'transparent' si no querés fondo */
  padding: 4px;            /* pequeño espacio interno (borde) */
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* sombra para que 'flote' */
}

/* 
   Botón CTA principal del hero (si lo usás)
   - Fondo: degradado verde tipo WhatsApp
   - Texto blanco
*/
.btn-cta {
  background: linear-gradient(135deg, #25d366, #1ebe57); /* degradado verde */
  border: none;
  color: #fff;
  font-weight: 600;
  padding-inline: 1.8rem;
}

.btn-cta:hover {
  filter: brightness(1.05);
  color: #fff;
}

/* ========= ACCESOS RÁPIDOS (tarjetas con iconos) ========= */

/* 
   Sección Accesos:
   - SIN fondo gris, se ve la imagen del body
*/
.bg-accesos {
  background-color: transparent;   /* antes: #e5e7eb */
}

/* Textos azules usando el color institucional */
.text-primary-custom {
  color: var(--c-primary);
}

/* 
   Tarjeta de acceso rápido (cada recuadro): CUADROS DE ACCESO RAPIDOS
   - Fondo azul institucional
   - Bordes redondeados (0.5rem)
   - Sombra suave
*/
.acceso-card {
  display: block;
  text-align: center;
  background-color: #232B60;  /* azul HPM */
  border-radius: 0.5rem;
  padding: 1.25rem 0.75rem;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(15,23,42,0.06);
  color: #ffffff;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Texto del nombre de cada acción: “Mis estudios”, “Turnos online”, etc. */
.acceso-card h3 {
  font-size: 0.95rem;
  margin-top: 0.6rem;
  margin-bottom: 0;
  text-transform: uppercase;
}

/* 
   Icono de cada acceso rápido:
   - width/height = tamaño del área del icono
   - background = fondo del círculo (ahora transparente)
   ► Si querés volver al círculo amarillo/naranja:
       background: radial-gradient(circle at 20% 20%, var(--c-yellow), var(--c-orange));
*/
.acceso-icon {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;      /* fondo del icono (círculo); ahora transparente */
  font-size: 2rem;              /* tamaño del ícono (bi-*) */
}

/* 
   Hover de tarjeta:
   - La tarjeta sube un poquito y aumenta la sombra
   - El texto/ícono cambia a color amarillo HPM
*/
.acceso-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(15,23,42,0.12);
  color: #FED304; /* cambia el color del texto/ícono al pasar el cursor */
}

/* ========= LOGIN CARD (ACCESO PACIENTE) ========= */

/* Tarjeta de login (no se muestra en index, pero sí en acceso_paciente.html) */
.login-card {
  border-radius: 0.75rem;
  padding: 1.5rem 1.75rem;
}

/* Logo dentro de formularios (login / registro) */
.logo-form {
  max-height: 70px;
}

/* Inputs redondeados tipo píldora */
.input-rounded {
  border-radius: 999px;
}

.form-control.input-rounded {
  padding: 0.7rem 1rem;
}

/* Links de ayuda del login */
.link-small {
  color: #006699;
  text-decoration: none;
}

.link-small:hover {
  text-decoration: underline;
}

/* 
   BOTÓN INGRESAR (login)
   - Color: var(--c-orange) NARANJA HPM
   - Texto blanco
*/
.btn-login {
  background-color: var(--c-orange);  /* naranja institucional */
  border: none;
  color: #ffffff;
  font-weight: 600;
  border-radius: 0.2rem;
}

.btn-login:hover {
  background-color: #e58310;          /* naranja más oscuro al pasar el mouse */
  color: #ffffff;
}

/* Línea divisoria punteada en las tarjetas */
.border-dashed {
  border-style: dashed;
  opacity: 0.7;
}

/* 
   BOTÓN REGISTRARSE (debajo del login)
   - Fondo gris oscuro
   - Texto blanco
*/
.btn-registrarse {
  background-color: #3f3f46;  /* Gris oscuro neutro */
  color: #ffffff;
  font-weight: 500;
  border-radius: 0.2rem;
}

.btn-registrarse:hover {
  background-color: #27272a;
  color: #ffffff;
}

/* ========= REGISTRO CARD (página de registro) ========= */

.registro-card {
  border-radius: 0.5rem;
  background-color: #f3f4f6;  /* Gris muy claro de fondo del formulario */
}

.registro-card .card-body {
  padding: 2rem 2.25rem;
}

/* Caja del CAPTCHA */
.captcha-placeholder {
  border: 1px solid #d1d5db;
  background-color: #e5e7eb;
  font-size: 0.85rem;
  letter-spacing: 0.25em;
}

/* BOTÓN CANCELAR en formulario de registro */
.btn-cancelar {
  background-color: #9ca3af;  /* Gris medio */
  color: #ffffff;
  border: none;
  padding-inline: 2rem;
}

.btn-cancelar:hover {
  background-color: #6b7280;
  color: #ffffff;
}

/* BOTÓN REGISTRARME (en formulario de registro) */
.btn-registrarme {
  background-color: var(--c-orange);  /* Naranja HPM */
  border: none;
  color: #ffffff;
  padding-inline: 2rem;
  font-weight: 600;
}

.btn-registrarme:hover {
  background-color: #e58310;
  color: #ffffff;
}

/* ========= FOOTER (FIJO, COLOR PRINCIPAL) ========= */

/* 
   Pie de página:
   - Fijo al fondo de la pantalla
   - Fondo azul institucional (--c-primary)
   - Texto casi blanco
*/
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--c-primary);  /* Azul institucional HPM */
  color: #F9FAFB;                      /* Texto casi blanco */
  z-index: 10;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.3);
}

/* Texto secundario dentro del footer (Desarrollo • Sistemas HPM) */
.footer .text-muted {
  color: #E5E7EB !important;  /* Gris muy claro, legible sobre el azul */
}

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

@media (max-width: 767.98px) {
  .registro-card .card-body {
    padding: 1.5rem 1.25rem;
  }
}

@media (max-width: 575.98px) {
  /* Título se achica un poco en pantallas muy chicas */
  .brand-title {
    font-size: 1.1rem;
    letter-spacing: 0.08em;
  }
  .brand-subtitle {
    font-size: 0.7rem;
  }
}

/* ========= AJUSTES PARA CELULARES / MÓVILES ========= */

/* 
   1) HERO CON VIDEO A PANTALLA COMPLETA EN CELULAR
   - En pantallas chicas (ancho menor a 576px)
   - El video ocupa el alto completo de la pantalla (100vh)
*/
@media (max-width: 575.98px) {
  .hero-video {
    min-height: 100vh;   /* antes 60vh, ahora llena la pantalla en el celu */
  }
}

/* 
   2) ACCESOS RÁPIDOS: CUADROS DEL MISMO TAMAÑO EN CELULAR
   - Hacemos que cada tarjeta tenga la misma altura.
   - Centramos el icono y el texto verticalmente.
*/
@media (max-width: 575.98px) {
  .acceso-card {
    height: 130px;                   /* alto fijo para todos los cuadros en celu */
    display: flex;
    flex-direction: column;          /* icono arriba, texto abajo */
    justify-content: center;         /* centrado vertical */
    align-items: center;             /* centrado horizontal */
  }

  .acceso-card h3 {
    margin-top: 0.4rem;
  }
}

/* Imagen de "Página en construcción" con sombra suave */
.construccion-img {
  max-width: 520px;                      /* tamaño máximo de la imagen */
  border-radius: 0.5rem;                 /* esquinas suavemente redondeadas */
  box-shadow: 0 10px 24px rgba(0,0,0,0.35); /* sombra para que flote sobre el fondo */
}