:root {
  --color-clinica: #2f7d8c;
  --color-clinica-oscuro: #245f6b;
}

body { background: #f5f7f8; }
.barra { background: var(--color-clinica); }
.btn-primary { --bs-btn-bg: var(--color-clinica); --bs-btn-border-color: var(--color-clinica);
  --bs-btn-hover-bg: var(--color-clinica-oscuro); --bs-btn-hover-border-color: var(--color-clinica-oscuro); }
.aviso-piloto { background: #fff4d6; color: #6b5200; font-size: .875rem; padding: .4rem 1rem; text-align: center; }

/* Formularios de django-allauth (login, 2FA...): les damos el aspecto de Bootstrap */
.tarjeta-cuenta h1 { font-size: 1.5rem; margin-bottom: 1rem; }
.tarjeta-cuenta input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
  display: block; width: 100%; padding: .5rem .75rem; margin: .25rem 0 .75rem;
  border: 1px solid #ced4da; border-radius: .375rem;
}
.tarjeta-cuenta button, .tarjeta-cuenta [type=submit] {
  background: var(--color-clinica); color: #fff; border: 0; border-radius: .375rem; padding: .5rem 1rem; margin: .25rem .25rem .25rem 0;
}
.tarjeta-cuenta button:hover { background: var(--color-clinica-oscuro); }
.tarjeta-cuenta svg { max-width: 220px; height: auto; display: block; margin: .5rem auto; }

/* Calendario */
#calendario { min-height: 70vh; padding: .5rem; }
#calendario .ec-event { cursor: pointer; }
.leyenda .punto { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin: 0 .25rem 0 .75rem; vertical-align: middle; }
.leyenda .confirmada { background: #2f7d8c; }
.leyenda .completada { background: #3f8f4f; }
.leyenda .no-asistio { background: #b5543c; }
.leyenda .ausencia { background: rgba(120, 120, 120, .45); }
#calendario .ec-event-title { font-size: .85rem; line-height: 1.2; }
#calendario .ec-event-time { font-size: .75rem; }
#calendario .ec-today { background-color: transparent; }

/* Portal público */
.portada { background: linear-gradient(135deg, #e8f3f5, #fff); }
.portada .logo { max-height: 90px; max-width: 260px; }
.texto-portada { max-width: 680px; }
.foto-servicio { height: 170px; object-fit: cover; }
.miniatura { width: 84px; height: 84px; object-fit: cover; flex-shrink: 0; }
.mapa { height: 380px; width: 100%; }
.btn-outline-primary { --bs-btn-color: var(--color-clinica); --bs-btn-border-color: var(--color-clinica);
  --bs-btn-hover-bg: var(--color-clinica); --bs-btn-hover-border-color: var(--color-clinica);
  --bs-btn-active-bg: var(--color-clinica); --bs-btn-active-border-color: var(--color-clinica); }
a { color: var(--color-clinica-oscuro); }

/* Caja */
.cantidad { max-width: 5rem; }
.recibo { font-variant-numeric: tabular-nums; }
.portada[data-fondo] { position: relative; overflow: hidden; color: #fff; background: #1d3b40; }
.portada[data-fondo] .foto-portada { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.portada[data-fondo] .contenido-portada { position: relative; }
.portada[data-fondo] .texto-portada, .portada[data-fondo] .lead { color: #fff; }
.foto-galeria { width: 100%; height: 220px; object-fit: cover; }
.foto-equipo { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; }
.aviso-demo { background: #e8f0ff; color: #23407a; font-size: .875rem; padding: .4rem 1rem; text-align: center; }
.credenciales-demo { max-width: 34rem; }

/* Aviso para instalar la app en iPhone/iPad (abajo, sin tapar el contenido al cerrarlo) */
.aviso-ios { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1080; display: flex; gap: 10px;
  align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; font-size: .95rem;
  background: #fff; color: #1f2d33; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); border: 1px solid #dde3e6; }
.aviso-ios.d-none { display: none !important; }

/* Dentro de la web oficial (iframe): fondo transparente para que se funda con la página que lo muestra */
body.incrustado { background: transparent; }