html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

/* ===== Paleta Consultorios Esperanza — azules reales del sitio ===== */
:root {
  --azul-oscuro: #0b4576;
  --azul: #154b81;
  --azul-medio: #1e73be;
  --azul-claro: #6da4d5;
  --azul-suave: #e9f1f9;
  --azul-suave-2: #d7e6f3;
  --gris-texto: #33475b;
  --gris-muted: #64748b;
  --gold: #b9a16b;

  --estado-confirmada-bg: var(--azul-suave);
  --estado-confirmada-fg: var(--azul-medio);
  --estado-pendiente-bg: #eef1f4;
  --estado-pendiente-fg: #64748b;
  --estado-atendida-bg: #e3f5ea;
  --estado-atendida-fg: #15803d;
  --estado-cancelada-bg: #fbe4e4;
  --estado-cancelada-fg: #b91c1c;
  --estado-noasistio-bg: #fbedd8;
  --estado-noasistio-fg: #b45309;
}

h1, h2, h3, h4, .navbar-brand, .display-6 {
  font-family: 'Jost', sans-serif;
}

body {
  margin-bottom: 60px;
  background-color: #f4f8fb;
  color: var(--gris-texto);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--azul-claro);
}

.form-control:focus, .form-select:focus {
  border-color: var(--azul-medio);
}

/* ===== Barra de contacto ===== */
.topbar {
  background: var(--azul-medio);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8rem;
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.4rem 0;
}

.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.topbar-item svg {
  width: 13px;
  height: 13px;
  opacity: 0.85;
}

.topbar-spacer {
  flex: 1;
}

.btn-topbar-salir {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 0.35rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.74rem;
}

.btn-topbar-salir:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* ===== Encabezado / navbar ===== */
.navbar-clinica {
  background: #fff;
  box-shadow: 0 2px 10px rgba(11, 69, 118, 0.08);
  border-bottom: 3px solid var(--gold);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.navbar-clinica .navbar-brand {
  display: flex;
  align-items: flex-start;
}

.navbar-clinica .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: "Jost", sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--azul-oscuro);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.navbar-clinica .brand-subtitulo {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.navbar-clinica .nav-link {
  color: var(--azul);
  font-weight: 600;
  border-radius: 0.55rem;
  padding: 0.5rem 0.9rem !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar-clinica .nav-link:hover {
  background-color: var(--azul-suave);
}

.navbar-clinica .nav-link.active,
.navbar-clinica .nav-link[aria-current="page"] {
  background-color: var(--azul-medio);
  color: #fff;
}

/* ===== Pie de página ===== */
.footer-clinica {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 48px;
  line-height: 48px;
  background: var(--azul-oscuro);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

/* ===== Tarjetas ===== */
.card {
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 2px 10px rgba(20, 56, 92, 0.08);
}

.card .display-6 {
  color: var(--azul-oscuro);
  font-weight: 700;
}

/* ===== Tarjetas de estadística (panel de inicio) ===== */
.stat-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -10px rgba(11, 69, 118, 0.28);
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
}

.stat-card.acento-azul { --accent-a: var(--azul-medio); --accent-b: var(--azul-claro); }
.stat-card.acento-oro { --accent-a: var(--gold); --accent-b: #d8c496; }
.stat-card.acento-ambar { --accent-a: #b45309; --accent-b: #e3a955; }
.stat-card.acento-rojo { --accent-a: #b91c1c; --accent-b: #e08585; }

.stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--azul-suave);
  color: var(--azul-medio);
  margin-bottom: 0.6rem;
}

.stat-icon svg {
  width: 20px;
  height: 20px;
}

.acento-oro .stat-icon { background: #f5f0e4; color: var(--gold); }
.acento-ambar .stat-icon { background: #fbedd8; color: #b45309; }
.acento-rojo .stat-icon { background: #fbe4e4; color: #b91c1c; }

/* ===== Avatares de paciente ===== */
.avatar-paciente {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* ===== Insignia de estado con punto ===== */
.estado-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.estado-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.estado-pill.estado-pendiente { background: var(--estado-pendiente-bg); color: var(--estado-pendiente-fg); }
.estado-pill.estado-confirmada { background: var(--estado-confirmada-bg); color: var(--estado-confirmada-fg); }
.estado-pill.estado-atendida { background: var(--estado-atendida-bg); color: var(--estado-atendida-fg); }
.estado-pill.estado-cancelada { background: var(--estado-cancelada-bg); color: var(--estado-cancelada-fg); }
.estado-pill.estado-noasistio { background: var(--estado-noasistio-bg); color: var(--estado-noasistio-fg); }

/* ===== Chips de mes/semana en Agenda: el color de fondo es por paciente (inline style);
   estas clases solo marcan Cancelada/No asistió, que se atenúan y tachan. ===== */
.calendario-cita.cita-cancelada, .semana-cita.cita-cancelada,
.calendario-cita.cita-noasistio, .semana-cita.cita-noasistio {
  opacity: 0.55;
  text-decoration: line-through;
}

/* ===== Selector de vista (Día / Semana / Mes) ===== */
.toggle-vista {
  display: inline-flex;
  background: var(--azul-suave);
  border-radius: 0.6rem;
  padding: 0.2rem;
  gap: 0.15rem;
}

.toggle-vista a {
  padding: 0.35rem 0.95rem;
  border-radius: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--azul);
  text-decoration: none;
}

.toggle-vista a:hover {
  color: var(--azul-oscuro);
}

.toggle-vista a.active {
  background: #fff;
  color: var(--azul-medio);
  box-shadow: 0 1px 4px rgba(11, 69, 118, 0.18);
}

/* ===== Barra de herramientas de Agenda (vista/fecha/navegación) ===== */
.agenda-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.agenda-fecha-form input {
  width: auto;
}

.agenda-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.agenda-nav-icono {
  display: none;
}

@media (max-width: 576px) {
  .agenda-toolbar {
    flex-direction: column;
    align-items: center;
  }

  .agenda-vista-fecha {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: fit-content;
  }

  .agenda-fecha-form {
    width: 100%;
  }

  .agenda-fecha-form input {
    width: 100%;
  }

  .agenda-nav {
    justify-content: center;
    gap: 0.9rem;
  }

  .agenda-nav-titulo {
    text-align: center;
    white-space: nowrap;
  }

  .agenda-nav-texto {
    display: none;
  }

  .agenda-nav-icono {
    display: inline;
    font-size: 1.4rem;
    line-height: 1;
  }

  .agenda-nav-btn {
    padding: 0.25rem 0.7rem;
  }
}

/* ===== Lista de citas (panel de inicio) ===== */
.fila-cita {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #eef1f5;
}

.fila-cita:last-child {
  border-bottom: none;
}

.fila-cita-info {
  flex: 1;
  min-width: 0;
}

.fila-cita-nombre {
  font-size: 0.9rem;
  color: var(--gris-texto);
  font-weight: 600;
}

.fila-cita-hora {
  font-size: 0.78rem;
  color: var(--gris-muted);
}

/* ===== Lista de pacientes ===== */
.fila-paciente {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid #eef1f5;
}

.fila-paciente:last-child {
  border-bottom: none;
}

.fila-paciente-info {
  flex: 1;
  min-width: 0;
}

.fila-paciente-nombre {
  font-size: 0.92rem;
  color: var(--gris-texto);
  font-weight: 600;
}

.fila-paciente-detalle {
  font-size: 0.78rem;
  color: var(--gris-muted);
}

.buscador-pacientes .form-control {
  border-radius: 0.6rem 0 0 0.6rem;
}

.buscador-pacientes .btn {
  border-radius: 0 0.6rem 0.6rem 0;
}

/* ===== Barras horizontales (Reportes) ===== */
.barra-fila {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0;
}

.barra-etiqueta {
  width: 92px;
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--gris-texto);
  text-transform: capitalize;
}

.barra-pista {
  flex: 1;
  background: var(--azul-suave);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.barra-relleno {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--azul-medio), var(--azul-claro));
}

.barra-valor {
  width: 24px;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--azul-oscuro);
  flex-shrink: 0;
}

/* ===== Estado vacío ilustrado ===== */
.estado-vacio {
  text-align: center;
  padding: 1.75rem 1rem;
}

.estado-vacio-icono {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.7rem;
  border-radius: 50%;
  background: var(--azul-suave);
  color: var(--azul-claro);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.estado-vacio-icono svg {
  width: 24px;
  height: 24px;
}

.estado-vacio-titulo {
  color: var(--azul-oscuro);
  font-weight: 600;
  font-size: 0.9rem;
}

.estado-vacio-sub {
  color: var(--gris-muted);
  font-size: 0.8rem;
}

/* ===== Botones ===== */
.btn-primary {
  background-color: var(--azul-medio);
  border-color: var(--azul-medio);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--azul-oscuro) !important;
  border-color: var(--azul-oscuro) !important;
}

.btn-outline-primary {
  color: var(--azul-medio);
  border-color: var(--azul-medio);
}

.btn-outline-primary:hover {
  background-color: var(--azul-medio);
  border-color: var(--azul-medio);
}

/* ===== Tablas ===== */
.table thead th {
  background-color: var(--azul-suave);
  color: var(--azul-oscuro);
  border-bottom: 2px solid var(--azul-suave-2);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--azul-suave);
}

/* ===== Insignias de estado ===== */
.badge.bg-primary {
  background-color: var(--azul-medio) !important;
}

/* ===== Encabezados de página ===== */
h2 {
  color: var(--azul-oscuro);
  font-weight: 700;
}

h4 {
  color: var(--azul-oscuro);
  font-weight: 600;
}

.saludo-inicio {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
}

/* ===== Enlaces ===== */
a {
  color: var(--azul-medio);
}

a:hover {
  color: var(--azul-oscuro);
}

/* ===== Calendario mensual (Agenda) ===== */
.calendario-mes {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 2px 10px rgba(20, 56, 92, 0.08);
  overflow: hidden;
}

.calendario-encabezado {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: var(--azul-suave);
  border-bottom: 2px solid var(--azul-suave-2);
}

.calendario-encabezado-dia {
  min-width: 0;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--azul-oscuro);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.calendario-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendario-celda {
  min-height: 112px;
  min-width: 0;
  padding: 0.4rem;
  border: 1px solid #eef1f5;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: background-color .15s ease;
}

.calendario-celda-clicable {
  cursor: pointer;
}

.calendario-celda:hover {
  background-color: var(--azul-suave);
}

.calendario-celda-fuera {
  background-color: #fafbfc;
}

.calendario-celda-fuera .calendario-dia-num {
  color: #b8c2cc;
}

.calendario-celda-hoy {
  background-color: var(--azul-suave);
  box-shadow: inset 0 0 0 2px var(--azul-medio);
}

.calendario-dia-num {
  font-weight: 700;
  color: var(--gris-texto);
  text-decoration: none;
  font-size: 0.9rem;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.calendario-dia-num:hover {
  background-color: var(--azul-suave-2);
}

.calendario-dia-num-hoy {
  background-color: var(--azul-medio);
  color: #fff;
}

.calendario-citas {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.calendario-cita {
  display: block;
  font-size: 0.72rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.35rem;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendario-cita:hover {
  filter: brightness(1.08);
  color: #fff;
}

.calendario-cita-hora {
  font-weight: 700;
}

.calendario-cita-iniciales {
  display: none;
}

.calendario-mas {
  font-size: 0.7rem;
  color: var(--azul-medio);
  text-decoration: none;
  font-weight: 600;
  padding-left: 0.4rem;
}

.calendario-mas:hover {
  text-decoration: underline;
}

/* En pantallas angostas no cabe "HH:mm Nombre completo" sin romper la cuadrícula:
   las citas se muestran como iniciales en un círculo del color del paciente. */
@media (max-width: 768px) {
  .calendario-encabezado-dia { font-size: 0.65rem; padding: 0.4rem 0.2rem; }
  .calendario-celda { min-height: 70px; padding: 0.3rem; }

  .calendario-citas {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.15rem;
  }

  .calendario-cita {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    /* El círculo es tan pequeño que es fácil tocarlo sin querer: se vuelve
       decorativo y el toque pasa al recuadro del día completo. */
    pointer-events: none;
  }

  .calendario-cita-texto {
    display: none;
  }

  .calendario-cita-iniciales {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
  }

  .calendario-mas {
    font-size: 0.62rem;
    padding-left: 0.1rem;
  }
}

/* ===== Vista semana (agenda por horas) ===== */
.semana-grid-wrap {
  --px-min: 1.6px;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 2px 10px rgba(20, 56, 92, 0.08);
  overflow: hidden;
}

.semana-header {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  background-color: var(--azul-suave);
  border-bottom: 2px solid var(--azul-suave-2);
}

.semana-header-dia {
  text-align: center;
  padding: 0.5rem 0.25rem;
  border-left: 1px solid var(--azul-suave-2);
}

.semana-header-dia a {
  text-decoration: none;
  display: block;
}

.semana-header-nombre {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--azul-oscuro);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.semana-header-num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gris-texto);
  width: 1.8rem;
  height: 1.8rem;
  line-height: 1.8rem;
  border-radius: 50%;
  margin: 0.15rem auto 0;
}

.semana-header-num-hoy {
  background-color: var(--azul-medio);
  color: #fff;
}

.semana-cuerpo {
  position: relative;
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
}

.semana-horas {
  position: relative;
  border-right: 1px solid #eef1f5;
}

.semana-hora-linea {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-0.55rem);
  font-size: 0.68rem;
  color: var(--gris-muted);
  text-align: right;
  padding-right: 0.4rem;
}

.semana-dia-col {
  position: relative;
  border-left: 1px solid #eef1f5;
}

.semana-linea-hora-fondo {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid #f1f3f6;
}

.semana-linea-ahora {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px solid #e0405a;
  z-index: 3;
}

.semana-linea-ahora::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0405a;
}

.semana-cita {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: 0.35rem;
  padding: 0.15rem 0.35rem;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  z-index: 2;
}

.semana-cita:hover {
  filter: brightness(1.08);
  color: #fff;
}

.semana-cita-hora {
  font-size: 0.68rem;
  font-weight: 700;
}

.semana-cita-nombre {
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .semana-header-nombre, .semana-hora-linea, .semana-cita-hora, .semana-cita-nombre { font-size: 0.6rem; }
  .semana-header-num { width: 1.5rem; height: 1.5rem; line-height: 1.5rem; font-size: 0.85rem; }
  .semana-grid-wrap { --px-min: 1px; }
}