/* =========================================================================
   Agenda de Citas Psicológicas — estilos frontend
   Estética "Vidrio y noche" (a juego con el landing de jaimetoro.com)
   Todo va aislado bajo .apc-agenda para no tocar el resto del tema.
   ========================================================================= */

/* ------------------------- TOKENS ------------------------- */
.apc-agenda{
  --apc-bg:#08070C;
  --apc-bg2:#0E0C16;
  --apc-line:rgba(255,255,255,.09);
  --apc-line2:rgba(255,255,255,.16);
  --apc-glass:rgba(255,255,255,.05);
  --apc-glass2:rgba(255,255,255,.085);
  --apc-azul:#3D8BFF;
  --apc-azul-lt:#9BC4FF;
  --apc-azul-dp:#1E52C9;
  --apc-aqua:#5EE7DA;
  --apc-txt:#EFECF7;
  --apc-txt2:#9B93B0;
  --apc-ui:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --apc-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --apc-ease:cubic-bezier(.2,.75,.25,1);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  border-radius:32px;
  padding:clamp(28px,4vw,56px);
  background:var(--apc-bg);
  border:1px solid var(--apc-line);
  color:var(--apc-txt);
  font-family:var(--apc-ui);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* variante clara, por si el calendario va en una página de fondo blanco */
.apc-agenda--claro{
  --apc-bg:#F7F8FC;
  --apc-bg2:#FFFFFF;
  --apc-line:rgba(12,10,26,.10);
  --apc-line2:rgba(12,10,26,.18);
  --apc-glass:rgba(255,255,255,.72);
  --apc-glass2:rgba(255,255,255,.92);
  --apc-txt:#15121F;
  --apc-txt2:#5C5670;
  --apc-azul-lt:#1E52C9;
}

.apc-agenda *,
.apc-agenda *::before,
.apc-agenda *::after{ box-sizing:border-box; }

.apc-agenda h2,
.apc-agenda h3,
.apc-agenda h4,
.apc-agenda p,
.apc-agenda ul,
.apc-agenda li{ margin:0; padding:0; }

.apc-agenda ul{ list-style:none; }
.apc-agenda button{ font-family:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.apc-agenda :focus-visible{ outline:2px solid var(--apc-azul-lt); outline-offset:3px; border-radius:6px; }

/* grano sutil, como en el landing */
/* Variante plana: [agenda_citas marco="no"] — solo si la página ya es oscura */
.apc-agenda--plano{
  overflow:visible; max-width:none;
  border-radius:0; padding:0;
  background:transparent; border:0;
}
.apc-agenda--plano .apc-aurora{ display:none; }
.apc-agenda--plano::after{ content:none; }

.apc-agenda::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.apc-agenda--claro::after{ opacity:0; }

.apc-inner{ position:relative; z-index:3; }

/* ------------------------- AURORA ------------------------- */
.apc-aurora{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.apc-aurora i{ position:absolute; display:block; border-radius:50%; filter:blur(90px); opacity:.4; }
.apc-aurora i:nth-child(1){ width:36vw; height:36vw; left:-10vw; top:-14vw; background:#2447C9; animation:apcDrift1 34s ease-in-out infinite; }
.apc-aurora i:nth-child(2){ width:30vw; height:30vw; right:-8vw; top:8vw; background:#1F6E8C; opacity:.26; animation:apcDrift2 44s ease-in-out infinite; }
.apc-aurora i:nth-child(3){ width:28vw; height:28vw; left:34vw; bottom:-16vw; background:#3D8BFF; opacity:.2; animation:apcDrift1 52s ease-in-out infinite reverse; }
.apc-agenda--claro .apc-aurora i{ opacity:.14; }

@keyframes apcDrift1{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(5vw,4vw,0) scale(1.12); } }
@keyframes apcDrift2{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(-4vw,5vw,0) scale(1.08); } }

/* ------------------------- TIPOGRAFÍA ------------------------- */
.apc-head{ max-width:760px; margin-bottom:clamp(28px,3.6vw,46px); }
.apc-head > * + *{ margin-top:18px; }

.apc-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--apc-azul-lt);
  padding:7px 15px 7px 11px; border-radius:999px;
  background:var(--apc-glass); border:1px solid var(--apc-line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.apc-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--apc-azul); box-shadow:0 0 12px var(--apc-azul);
}

.apc-h2{
  font-family:var(--apc-ui); font-weight:800;
  font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.08; letter-spacing:-.038em;
  color:var(--apc-txt);
}
.apc-h2 em{
  font-family:var(--apc-serif); font-style:italic; font-weight:400; letter-spacing:-.01em;
  background:linear-gradient(100deg,var(--apc-azul-lt),var(--apc-azul) 45%,var(--apc-aqua));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right:.06em;
}

.apc-lead{ font-size:clamp(1rem,1.15vw,1.12rem); line-height:1.72; color:var(--apc-txt2); }

/* píldoras informativas */
.apc-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.apc-pill{
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px;
  background:var(--apc-glass); border:1px solid var(--apc-line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  font-size:.82rem; font-weight:600; color:var(--apc-txt2);
  transition:border-color .4s var(--apc-ease), color .4s var(--apc-ease), transform .4s var(--apc-ease);
}
.apc-pill:hover{ border-color:var(--apc-line2); color:var(--apc-txt); transform:translateY(-2px); }
.apc-pill b{ color:var(--apc-txt); font-weight:800; }
.apc-pill svg{ color:var(--apc-azul); flex:none; }
.apc-pill .woocommerce-Price-amount,
.apc-pill bdi{ color:var(--apc-txt); font-weight:800; }

/* ------------------------- VIDRIO ------------------------- */
.apc-glass{
  position:relative; overflow:hidden; border-radius:24px;
  padding:clamp(22px,2.6vw,30px);
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 58%);
  border:1px solid var(--apc-line);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  transition:border-color .45s var(--apc-ease), box-shadow .55s var(--apc-ease);
}

/* Variante totalmente plana: [agenda_citas marco="no"] */
.apc-agenda--plano .apc-glass{
  overflow:visible; padding:0; background:transparent; border:0;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.apc-agenda--plano .apc-glass::before,
.apc-agenda--plano .apc-glass::after{ content:none; }
.apc-agenda--claro .apc-glass{
  background:linear-gradient(158deg,rgba(255,255,255,.9),rgba(255,255,255,.6) 60%);
  box-shadow:0 18px 44px rgba(20,18,40,.07);
}
.apc-glass::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(61,139,255,.18), transparent 62%);
  transition:opacity .45s var(--apc-ease);
}
.apc-glass::after{
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; padding:1px;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(155,196,255,.8), transparent 58%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; pointer-events:none; transition:opacity .45s var(--apc-ease);
}
.apc-glass:hover::before,
.apc-glass:hover::after{ opacity:1; }
.apc-glass > *{ position:relative; z-index:2; }

/* ------------------------- LAYOUT ------------------------- */
.apc-grid{
  display:grid;
  grid-template-columns:minmax(300px,1.15fr) minmax(280px,.9fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}

@media (max-width:900px){
  .apc-grid{ grid-template-columns:1fr; }
}

/* ------------------------- CALENDARIO ------------------------- */
.apc-cal-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:18px;
}
.apc-mes-label{
  font-weight:800; font-size:1.05rem; letter-spacing:-.02em;
  color:var(--apc-txt);
}
.apc-nav{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:12px; color:var(--apc-txt2);
  background:var(--apc-glass); border:1px solid var(--apc-line);
  transition:transform .4s var(--apc-ease), color .4s var(--apc-ease), border-color .4s var(--apc-ease), box-shadow .4s var(--apc-ease);
}
.apc-nav:hover{
  color:#fff; border-color:var(--apc-azul); transform:translateY(-2px);
  box-shadow:0 0 22px rgba(61,139,255,.32);
}
.apc-agenda--claro .apc-nav:hover{ color:var(--apc-azul-dp); }

.apc-dias-semana,
.apc-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }

.apc-dias-semana{
  margin-bottom:8px; text-align:center;
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--apc-txt2); opacity:.75;
}

.apc-cal-grid .apc-loading{
  grid-column:1 / -1; padding:44px 0; text-align:center;
  color:var(--apc-txt2); font-size:.92rem;
}

.apc-dia{
  position:relative; aspect-ratio:1/1; min-height:44px; max-height:78px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:0; border-radius:13px;
  background:rgba(255,255,255,.028); border:1px solid var(--apc-line);
  color:var(--apc-txt); font:inherit;
  transition:transform .35s var(--apc-ease), background .35s var(--apc-ease), border-color .35s var(--apc-ease), box-shadow .35s var(--apc-ease), color .35s var(--apc-ease);
}
.apc-agenda--claro .apc-dia{ background:rgba(255,255,255,.7); }

.apc-dia--vacio{ border:0; background:transparent; cursor:default; }

.apc-dia-num{ font-weight:700; line-height:1; font-size:.95rem; }
.apc-dia-libres{
  font-size:.6rem; font-weight:700; letter-spacing:.04em; line-height:1;
  color:var(--apc-azul-lt); opacity:.9;
}

.apc-dia--disponible:hover{
  border-color:var(--apc-azul); transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(61,139,255,.22);
}
.apc-dia.is-activo{
  background:linear-gradient(140deg,var(--apc-azul-lt),var(--apc-azul) 46%,var(--apc-azul-dp));
  border-color:transparent; color:#0B0812;
  box-shadow:0 10px 28px rgba(61,139,255,.4);
}
.apc-dia.is-activo .apc-dia-num{ color:#0B0812; }
.apc-dia.is-activo .apc-dia-libres{ color:rgba(11,8,18,.7); }

.apc-dia[disabled]{
  background:rgba(255,255,255,.014); border-color:rgba(255,255,255,.05);
  color:rgba(155,147,176,.45); cursor:not-allowed;
}
.apc-agenda--claro .apc-dia[disabled]{ background:rgba(12,10,26,.03); color:rgba(92,86,112,.45); }

.apc-dia--lleno{ position:relative; }
.apc-dia--lleno::after{
  content:""; position:absolute; bottom:7px; width:14px; height:2px; border-radius:2px;
  background:#E0A3A3; opacity:.7;
}

.apc-leyenda{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--apc-line);
  font-size:.78rem; color:var(--apc-txt2);
}
.apc-leyenda li{ display:flex; align-items:center; gap:7px; }
.apc-punto{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; }
.apc-punto--libre{ background:var(--apc-azul); box-shadow:0 0 10px rgba(61,139,255,.6); }
.apc-punto--lleno{ background:#E0A3A3; }
.apc-punto--off{ background:rgba(255,255,255,.18); }
.apc-agenda--claro .apc-punto--off{ background:rgba(12,10,26,.18); }

/* ------------------------- HORARIOS ------------------------- */
.apc-fecha-elegida{
  margin-bottom:16px; font-size:1.05rem; font-weight:700; letter-spacing:-.02em;
  color:var(--apc-txt);
}

.apc-slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(94px,1fr)); gap:8px; }
.apc-slots .apc-loading{
  grid-column:1 / -1; padding:20px 0; font-size:.9rem; color:var(--apc-txt2);
}

.apc-slot{
  padding:12px 6px; border-radius:12px; font-size:.88rem; font-weight:600;
  background:rgba(255,255,255,.032); border:1px solid var(--apc-line); color:var(--apc-txt);
  transition:transform .35s var(--apc-ease), background .35s var(--apc-ease), border-color .35s var(--apc-ease), box-shadow .35s var(--apc-ease), color .35s var(--apc-ease);
}
.apc-agenda--claro .apc-slot{ background:rgba(255,255,255,.75); }
.apc-slot:hover{ border-color:var(--apc-azul); transform:translateY(-2px); }
.apc-slot.is-activo{
  background:linear-gradient(140deg,var(--apc-azul-lt),var(--apc-azul) 46%,var(--apc-azul-dp));
  border-color:transparent; color:#0B0812;
  box-shadow:0 10px 26px rgba(61,139,255,.38);
}
/* horas que quedan incluidas por la duración elegida */
.apc-slot.is-rango{
  background:rgba(61,139,255,.16);
  border-color:rgba(155,196,255,.5);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(155,196,255,.18);
}
.apc-agenda--claro .apc-slot.is-rango{ background:rgba(61,139,255,.12); color:var(--apc-txt); }

.apc-slot--ocupado,
.apc-slot[disabled]{
  background:rgba(255,255,255,.014); border-color:rgba(255,255,255,.05);
  color:rgba(155,147,176,.42); text-decoration:line-through; cursor:not-allowed; transform:none;
}
.apc-agenda--claro .apc-slot[disabled]{ background:rgba(12,10,26,.03); color:rgba(92,86,112,.42); }

.apc-vacio{
  grid-column:1 / -1;
  padding:18px 20px; border-radius:14px; font-size:.92rem; color:var(--apc-txt2);
  background:rgba(255,255,255,.03); border:1px solid var(--apc-line);
}
.apc-agenda--claro .apc-vacio{ background:rgba(12,10,26,.03); }

/* ------------------------- RESUMEN Y CTA ------------------------- */
.apc-resumen{
  margin-top:26px; padding-top:24px; border-top:1px solid var(--apc-line);
}
.apc-resumen[hidden]{ display:none; }

.apc-campo{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.apc-campo label{ font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--apc-txt2); }

.apc-horas{
  flex:1; padding:11px 14px; border-radius:12px; font:inherit; font-size:.92rem; font-weight:600;
  color:var(--apc-txt); background:var(--apc-glass); border:1px solid var(--apc-line);
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239B93B0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:38px;
  transition:border-color .35s var(--apc-ease), background-color .35s var(--apc-ease);
}
.apc-horas:hover{ border-color:var(--apc-line2); }
.apc-horas option{ background:var(--apc-bg2); color:var(--apc-txt); }
.apc-agenda--claro .apc-horas option{ background:#fff; color:#15121F; }

.apc-detalle{
  font-size:.92rem; color:var(--apc-txt2); margin-bottom:4px;
}
.apc-total{
  font-size:1.28rem; font-weight:800; letter-spacing:-.03em; color:var(--apc-txt); margin-bottom:16px;
}
.apc-total strong{ font-weight:800; }

.apc-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:15px 26px; border-radius:999px; overflow:hidden; isolation:isolate;
  font-weight:700; font-size:.93rem; letter-spacing:-.01em; white-space:nowrap;
  background:linear-gradient(120deg,var(--apc-azul-lt),var(--apc-azul) 42%,var(--apc-azul-dp));
  color:#0B0812;
  box-shadow:0 10px 30px rgba(61,139,255,.34);
  transition:transform .4s var(--apc-ease), box-shadow .4s var(--apc-ease), filter .4s var(--apc-ease);
}
.apc-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(61,139,255,.48); }
.apc-btn svg{ flex:none; transition:transform .45s var(--apc-ease); }
.apc-btn:hover .apc-arrow{ transform:translateX(4px); }
.apc-btn::after{
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  transform:skewX(-18deg); transition:left .8s var(--apc-ease);
}
.apc-btn:hover::after{ left:140%; }
.apc-btn[disabled]{ opacity:.65; cursor:wait; transform:none; box-shadow:none; }

.apc-mensaje{ margin-top:12px; font-size:.88rem; line-height:1.55; }
.apc-mensaje--error{ color:#FF9B9B; }
.apc-mensaje--ok{ color:var(--apc-aqua); }
.apc-agenda--claro .apc-mensaje--error{ color:#B32D2E; }
.apc-agenda--claro .apc-mensaje--ok{ color:#127A6C; }

.apc-nota{
  display:flex; align-items:center; gap:8px; margin-top:14px;
  font-size:.78rem; line-height:1.5; color:var(--apc-txt2);
}
.apc-nota svg{ flex:none; color:var(--apc-aqua); }

/* ------------------------- AVISOS ------------------------- */
.apc-aviso{
  padding:18px 22px; border-radius:16px; font-family:var(--apc-ui,'Plus Jakarta Sans',sans-serif);
  color:#EFECF7; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-left:3px solid #3D8BFF;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.apc-aviso--error{ border-left-color:#FF9B9B; }

/* ------------------------- REVEAL ------------------------- */
.apc-agenda [data-apc-rv]{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--apc-ease), transform .8s var(--apc-ease);
  transition-delay:var(--d,0s);
}
.apc-agenda [data-apc-rv].is-in{ opacity:1; transform:none; }

/* ------------------------- RESPONSIVE ------------------------- */
@media (max-width:640px){
  .apc-agenda{ padding:24px 18px; border-radius:24px; }
  .apc-glass{ padding:20px 16px; border-radius:20px; }
  .apc-slots{ grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); }
  .apc-dia{ min-height:40px; border-radius:11px; }
  .apc-dia-num{ font-size:.88rem; }
  .apc-aurora i{ filter:blur(64px); }
  .apc-pill{ font-size:.78rem; padding:9px 14px; }
}

@media (prefers-reduced-motion:reduce){
  .apc-agenda *{ animation:none !important; transition-duration:.01ms !important; }
  .apc-agenda [data-apc-rv]{ opacity:1 !important; transform:none !important; }
}

/* respaldo si el navegador no soporta backdrop-filter */
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .apc-agenda .apc-glass{ background:rgba(16,14,26,.92); }
  .apc-agenda--claro .apc-glass{ background:#fff; }
}

/* ---------- Detalle de la cita en "pedido recibido" y Mi cuenta ---------- */
.apc-detalle-pedido{ margin-top:28px; }
.apc-detalle-pedido ul{ margin:12px 0 12px 18px; }
.apc-detalle-pedido li{ margin-bottom:6px; }