/* ============================================================
   styles/auth.css — Estilos compartidos: login, registro,
                     recuperar contraseña, panel afiliado
   ============================================================ */

html, body {
  height: 100%;
}

body {
  background: var(--fondo, #f4f6f9);   /* V5.4.0: --fondo no estaba definida en ningun lado */
  font-family: 'Open Sans', sans-serif;
  color: var(--texto);
  min-width: 320px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer-osas {
  margin-top: auto;
}

/* wrapper que empuja el footer al fondo cuando hay poco contenido */
.auth-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:root {
  --rojo:          #c8102e;
  --rojo-oscuro:   #9b0d22;
  --rojo-suave:    #fdf0f2;
  --rojo-borde:    #f5c0c8;
  --azul-osas:     #1a56db;
  --azul-suave:    #eff6ff;
  --azul-borde:    #bfdbfe;
  --verde:         #047857;
  --verde-suave:   #ecfdf5;
  --verde-borde:   #a7f3d0;
  --amarillo-suave:#fffbeb;
  --amarillo-borde:#fcd34d;
  --gris-claro:    #f4f6f9;
  --gris-medio:    #e8ecf0;
  --gris-borde:    #d1d5db;
  --gris-texto:    #6b7280;
  --texto:         #111827;
  --blanco:        #ffffff;
  --sombra:        0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --sombra-hover:  0 4px 12px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08);
}

/* ── NAVBAR ──
   V5.4.0: antes tenia height:62px FIJO. Bootstrap le pone flex-wrap:wrap a
   .navbar, asi que en un celular (iPhone 13 = 390px) los botones pasaban a
   una segunda linea que quedaba FUERA de la franja roja: texto blanco sobre
   fondo blanco. Era el boton "Volver/Inicio" que "a veces quedaba en blanco"
   y el header "cortado". Ahora la franja crece con su contenido y en pantallas
   angostas todo se achica para entrar en una sola linea. */
.navbar-osas {
  background: linear-gradient(135deg, #c8102e 0%, #9b0d22 100%) !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.28);
  min-height: 62px;
  height: auto;
  flex-wrap: nowrap !important;
  gap: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
}
/* El grupo de la derecha (volver · usuario · cerrar sesion) */
.navbar-osas > div {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 6px;
}
.navbar-osas > div > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.navbar-osas > a { flex-shrink: 0; }

@media (max-width: 576px) {
  .navbar-osas {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .navbar-osas img,
  .navbar-osas a > img { height: 32px; padding: 3px 6px; }
  /* El grupo de botones: mas apretado. Los !important pisan los
     estilos en linea de cada pantalla. */
  .navbar-osas > div { gap: 6px !important; }
  .navbar-osas .btn-nav {
    font-size: 11.5px !important;
    padding: 6px 10px !important;
  }
  /* "Nombre · Rol" no entra al lado de dos botones en 390px. Cada panel
     ya saluda al usuario por su nombre en el contenido. */
  .navbar-osas > div > span { display: none; }
}
@media (max-width: 360px) {
  .navbar-osas .btn-nav { padding: 5px 8px !important; letter-spacing: 0; }
}

/* Logo en navbar: redondeado con fondo blanco y sombra suave */
.navbar-osas img,
.navbar-osas a > img {
  height: 38px;
  width: auto;
  border-radius: 10px;
  background: #fff;
  padding: 4px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  object-fit: contain;
}

.btn-nav {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  font-weight: 700;
  font-size: 12px;
  border-radius: 8px;
  padding: 6px 16px;
  text-decoration: none;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
  letter-spacing: .3px;
}
.btn-nav:hover {
  background: rgba(255,255,255,.3);
  border-color: rgba(255,255,255,.7);
  color: #fff;
}
/* Que el texto del boton no cambie de color en ningun estado (visitado,
   foco, apretado). En iPhone el :hover queda "pegado" despues del toque. */
.btn-nav:visited,
.btn-nav:focus,
.btn-nav:active { color: #fff; }
.btn-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: none) {
  .btn-nav:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); }
}

.navbar-brand img {
  height: 38px;
  width: auto;
  border-radius: 10px;
  background: #fff;
  padding: 4px 8px;
}

/* ── CARD CENTRAL ── */
.auth-card {
  background: var(--blanco);
  border-radius: 12px;
  box-shadow: var(--sombra);
  border: 1px solid var(--gris-borde);
  padding: 36px 32px 32px;
  width: 100%;
  max-width: 440px;
  margin: 48px auto;
}

.auth-logo {
  display: block;
  margin: 0 auto 20px;
  height: 70px;
  width: auto;
  object-fit: contain;
}

.auth-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  color: var(--texto);
  margin-bottom: 24px;
}

/* ── FORMULARIOS ── */
.form-label-osas {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gris-texto);
  margin-bottom: 4px;
}

.form-control-osas {
  border: 1.5px solid var(--gris-borde);
  border-radius: 7px;
  padding: 10px 12px;
  font-size: 14px;
  width: 100%;
  background: #fff;
  color: var(--texto);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.form-control-osas:focus {
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px rgba(200,16,46,.12);
}
.form-control-osas.is-invalid {
  border-color: #dc2626;
}

.form-label  {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--gris-texto);
  margin-bottom: 5px;
  display: block;
}
.form-input  {
  border: 1.5px solid var(--gris-borde);
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 13px;
  width: 100%;
  background: #fff;
  color: var(--texto);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.form-input:focus {
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px rgba(200,16,46,.1);
}
.form-input:hover {
  border-color: #9ca3af;
}
.form-group  { display: flex; flex-direction: column; margin-bottom: 14px; }
.form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.btn-osas {
  background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-oscuro) 100%);
  color: var(--blanco);
  border: none;
  border-radius: 7px;
  padding: 11px 0;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .5px;
  cursor: pointer;
  text-transform: uppercase;
  transition: opacity .2s, transform .1s, box-shadow .2s;
  display: block;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(200,16,46,.3);
}
.btn-osas:hover {
  opacity: .92;
  color: var(--blanco);
  box-shadow: 0 4px 14px rgba(200,16,46,.4);
  transform: translateY(-1px);
}
.btn-osas:active { transform: translateY(0); opacity: 1; }

/* Links debajo del form */
.auth-link {
  font-size: 12px;
  color: var(--rojo);
  text-decoration: none;
  font-weight: 600;
}
.auth-link:hover { text-decoration: underline; }

/* Alertas */
.alerta-error {
  background: var(--rojo-suave);
  border: 1.5px solid var(--rojo-borde);
  color: #9b0d22;
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}
.alerta-ok, .alerta-exito {
  background: var(--verde-suave);
  border: 1.5px solid var(--verde-borde);
  color: var(--verde);
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* Fotos decorativas login */
.login-fotos {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  border-radius: 6px;
  overflow: hidden;
}
.login-fotos img {
  flex: 1;
  height: 90px;
  object-fit: cover;
  filter: brightness(0.88);
}

/* ── PANEL — layout 2 columnas ── */
.panel-main {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 16px;
  padding: 20px;
  align-items: start;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.panel-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── PANEL CARDS ── */
.panel-wrapper {
  max-width: 680px;
  margin: 32px auto;
  padding: 0 16px 40px;
}

.panel-card {
  background: var(--blanco);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  border: 1px solid var(--gris-medio);
  border-top: 4px solid var(--rojo);
  padding: 22px 26px 22px;
  margin-bottom: 20px;
}

.panel-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--texto);
  margin-bottom: 4px;
}

.panel-subtitle {
  font-size: 13px;
  color: var(--gris-texto);
  margin-bottom: 20px;
}

.panel-section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.panel-section-title .icon {
  background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-oscuro) 100%);
  color: var(--blanco);
  border-radius: 8px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(200,16,46,.3);
}

/* Credencial */
.credencial-box {
  background: var(--gris-claro);
  border-radius: 8px;
  border: 1px solid var(--gris-medio);
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.9;
}
.credencial-box strong { color: var(--rojo); }

/* Badge estado */
.badge-estado {
  display: inline-block;
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
}
/* V5.4.0: Reservado en azul en TODAS las pantallas (era rojo aca y azul en recepcion) */
.badge-reservado  { background: #e8f0fe; color: #1a56db; border: 1px solid #c3d4fb; }
.badge-disponible { background: var(--verde-suave); color: #065f46; border: 1px solid var(--verde-borde); }
.badge-cancelado  { background: #f3f4f6; color: #4b5563; border: 1px solid #d1d5db; }

/* Tabla turnos */
.tabla-turnos {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tabla-turnos th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--gris-texto);
  background: var(--gris-claro);
  border-bottom: 2px solid var(--gris-medio);
  padding: 9px 10px;
  text-align: left;
}
.tabla-turnos td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--gris-medio);
  vertical-align: middle;
  color: var(--texto);
}
.tabla-turnos tbody tr:hover {
  background: #fafbfc;
}
.tabla-turnos tr:last-child td { border-bottom: none; }

/* Beneficios */
.beneficio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--gris-medio);
  font-size: 13px;
  gap: 10px;
}
.beneficio-row:last-child { border-bottom: none; }
.beneficio-nombre { font-weight: 600; }
.beneficio-detalle { color: var(--gris-texto); font-size: 12px; }

/* Botones de acción en tablas */
.btn-modificar {
  background: var(--azul-suave);
  color: var(--azul-osas);
  border: 1.5px solid var(--azul-borde);
  border-radius: 6px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-modificar:hover {
  background: var(--azul-osas);
  color: #fff;
  border-color: var(--azul-osas);
}
.btn-cancelar {
  background: var(--rojo-suave);
  color: #9b1c1c;
  border: 1.5px solid var(--rojo-borde);
  border-radius: 6px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.btn-cancelar:hover {
  background: var(--rojo);
  color: #fff;
  border-color: var(--rojo);
}

/* Próximo turno */
.proximo-turno {
  background: var(--rojo-suave);
  border: 1px solid var(--rojo-borde);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.proximo-turno strong { color: var(--rojo); }

/* ── FOOTER ── */
.footer-osas {
  background: linear-gradient(135deg, #c8102e 0%, #9b0d22 100%);
  color: var(--blanco);
  text-align: center;
  padding: 13px 16px;
  font-size: 12px;
  line-height: 1.7;
  box-shadow: 0 -2px 8px rgba(0,0,0,.12);
}

/* ── ADMIN FUNCIONES ── */
.admin-funciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}

.admin-funcion-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--gris-claro);
  border: 1.5px solid var(--gris-medio);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--texto);
  transition: border-color .2s, box-shadow .2s, background .2s, transform .15s;
}
.admin-funcion-card:hover {
  border-color: var(--rojo);
  background: var(--rojo-suave);
  box-shadow: 0 4px 16px rgba(200,16,46,.14);
  transform: translateY(-2px);
  color: var(--texto);
}

.admin-funcion-icon {
  font-size: 26px;
  flex-shrink: 0;
}
.admin-funcion-nombre {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--texto);
}
.admin-funcion-desc {
  font-size: 11px;
  color: var(--gris-texto);
  margin-top: 2px;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .panel-main {
    grid-template-columns: 1fr;
    padding: 12px;
  }
}
@media (max-width: 480px) {
  .auth-card { padding: 24px 16px 20px; margin: 24px 12px; }
  .auth-logo { height: 54px; }
  .panel-card { padding: 18px 14px; }
  .tabla-turnos th,
  .tabla-turnos td { font-size: 11px; padding: 8px 5px; }
}

/* ── V5.4.0 · Celulares: que nada empuje la pagina de costado ──
   Los hijos de una grilla o de un flex tienen min-width:auto, asi que una
   tabla ancha estiraba la columna entera y los contenedores con
   overflow-x:auto nunca llegaban a mostrar su scroll. Con min-width:0 la
   columna respeta el ancho de la pantalla y la tabla se desplaza adentro. */
.panel-main > *,
.panel-col,
.panel-card,
.panel-wrapper,
.panel-card > * { min-width: 0; }
.panel-card { max-width: 100%; }

@media (max-width: 480px) {
  .auth-card { width: calc(100% - 24px); margin: 24px auto; }
}
/* Las tarjetas sueltas dentro de <main class="auth-main"> (ABM) tienen
   margin:auto, y en un flex en columna eso las hacia medir lo que mide su
   tabla. Con width:100% respetan el max-width que trae cada pantalla. */
.auth-main > .panel-card { width: 100%; }
/* V5.4.0: contenedores centrados con margin:auto dentro de un body flex en
   columna se ensanchaban hasta el ancho minimo de su tabla (Gestion de
   Turnos con la tabla abierta: 577px; Reportes: 727px). */
.panel-wrapper,
.rep-wrap { width: 100%; min-width: 0; }
.rep-wrap > *, .panel-wrapper > * { min-width: 0; max-width: 100%; }
/* V5.4.0: los dos botones grandes del area medica (Mi agenda / Historias)
   quedaban justos en 390px: en celular van uno debajo del otro. */
@media (max-width: 480px) {
  .area-medica-botones { flex-direction: column; }
  .area-medica-botones > a { width: 100%; text-align: center; }
}