/* ==========================================================================
   AGENDADOR — estilos
   Toma los colores de la página donde se muestra (pestaña Médico o /gastosmedicos).
   ========================================================================== */
.ag {
  --ag-principal: var(--secondary, var(--azul-700, #13407A));
  --ag-accion: var(--accent, var(--azul-700, #13407A));
  --ag-accion-oscuro: var(--accent-dark, var(--azul-900, #0B2545));
  --ag-linea: var(--line, var(--linea, #DCE3EB));
  --ag-suave: var(--primary-tint, var(--azul-50, #F3F7FC));
  --ag-texto: var(--neutral-dark, var(--texto, #1D2733));
  --ag-texto-2: var(--neutral-gray, var(--texto-2, #52606D));
  display: grid;
  gap: 10px;
  color: var(--ag-texto);
}
.ag p { margin: 0; }
.ag-etiqueta { margin-top: 6px !important; font-size: 14px; font-weight: 700; color: var(--ag-principal); }
.ag-nota { font-size: 13px; color: var(--ag-texto-2); }
.ag-local { font-size: 14px; font-weight: 600; color: var(--ag-principal); }

/* Tira de días */
.ag-dias {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 2px 2px 6px;
  scrollbar-width: none;
}
.ag-dias::-webkit-scrollbar { display: none; }
.ag-dia {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: grid;
  justify-items: center;
  gap: 0;
  min-width: 64px;
  padding: 8px 10px;
  border: 1.5px solid var(--ag-linea);
  border-radius: 14px;
  background: #FFFFFF;
  color: var(--ag-texto);
  line-height: 1.15;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.ag-dia-sem, .ag-dia-mes { font-size: 12px; font-weight: 600; text-transform: capitalize; color: var(--ag-texto-2); }
.ag-dia-num { font-size: 22px; font-weight: 800; }
.ag-dia[aria-checked="true"] { background: var(--ag-principal); border-color: var(--ag-principal); color: #FFFFFF; }
.ag-dia[aria-checked="true"] .ag-dia-sem,
.ag-dia[aria-checked="true"] .ag-dia-mes { color: #DCE6F2; }

/* Horarios */
.ag-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ag-hora {
  min-height: 46px;
  padding: 8px 10px;
  border: 1.5px solid var(--ag-linea);
  border-radius: 12px;
  background: #FFFFFF;
  font-weight: 700;
  color: var(--ag-principal);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.ag-hora:hover, .ag-dia:hover { border-color: var(--ag-principal); }
.ag-hora[aria-checked="true"] { background: var(--ag-principal); border-color: var(--ag-principal); color: #FFFFFF; }
.ag-alt { font-size: 14px; }

/* Botones */
.ag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 12px 20px;
  border: 0;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.ag-btn-principal { background: var(--ag-accion); color: #FFFFFF; }
.ag-btn-principal:hover { background: var(--ag-accion-oscuro); }
.ag-btn-principal:disabled { opacity: 0.5; cursor: not-allowed; }
.ag-btn-secundario { background: var(--ag-suave); color: var(--ag-principal); border: 1.5px solid var(--ag-linea); }
.ag-confirmar { margin-top: 6px; }
.ag-acciones { display: grid; gap: 8px; }

/* Modo demo */
.ag-demo {
  padding: 10px 12px;
  border-radius: 12px;
  background: #FFF4C2;
  border: 1px solid #E8C547;
  font-size: 14px;
  font-weight: 700;
  color: #5C4700;
}
.ag-nota-demo { font-weight: 700; color: #5C4700 !important; }

/* Mensajes */
.ag-estado { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: var(--ag-suave); }
.ag-error { color: #B42318; background: #FEF3F2; }
.ag-aviso { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: #FFF4E5; border: 1px solid #F5C77E; }
.ag-aviso p { font-weight: 600; color: #6B4600; }
.ag-spinner {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 3px solid var(--ag-linea);
  border-top-color: var(--ag-principal);
  animation: ag-giro 0.9s linear infinite;
}
@keyframes ag-giro { to { transform: rotate(360deg); } }

/* Confirmación */
.ag-confirmada { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 8px 0; }
/* recibe el foco por accesibilidad al confirmar; no necesita contorno */
.ag-confirmada:focus, .ag-confirmada:focus-visible { outline: none !important; }
.ag-check {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ag-principal);
  color: #FFFFFF;
  font-size: 28px;
  font-weight: 800;
}
.ag-titulo { margin: 0; font-size: 22px; color: var(--ag-principal); }
.ag-cuando { font-size: 17px; }
.ag-cuando strong { display: inline-block; }
.ag-cuando strong::first-letter { text-transform: uppercase; }   /* "Jueves 1 de octubre de 2026" */

@media (prefers-reduced-motion: reduce) {
  .ag-spinner { animation-duration: 3s; }
}