.agenda-intro{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}.agenda-sello{text-align:center;color:var(--muted)}.agenda-sello p{margin-top:16px}.agenda-publica{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;padding-top:0!important}.agenda-publica .card,.agenda-horarios>.card{padding:32px;border:1px solid var(--separator);border-radius:28px;background:var(--surface)}.agenda-publica input,.agenda-publica select,.agenda-horarios input,.agenda-horarios select,.agenda-gestion input,.agenda-gestion select{width:100%;min-width:0;padding:12px 14px;border:1px solid var(--separator);border-radius:12px;background:var(--surface);color:var(--label);font:inherit}.agenda-publica label,.agenda-horarios label{display:block}.agenda-servicio{display:grid;gap:12px;margin-bottom:28px}.agenda-mes{display:flex;justify-content:space-between;align-items:center;gap:8px}.agenda-mes h2{font:26px var(--font-display);text-transform:none}.agenda-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:20px 0}.agenda-semana{text-align:center;font-size:12px;color:var(--muted);padding:8px}.agenda-dia{display:grid;place-items:center;aspect-ratio:1;border-radius:14px;background:var(--surface);color:var(--label);text-decoration:none;border:1px solid var(--separator)}.agenda-dia:hover{background:var(--fill)}.agenda-dia.seleccionado{background:#183a35;color:#fff;border-color:#183a35}.agenda-dia.deshabilitado{opacity:.3}.agenda-formulario h2{font:28px var(--font-display);text-transform:none}.agenda-horas{border:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}.agenda-horas legend{margin-bottom:14px;font-weight:600}.agenda-horas label{position:relative}.agenda-horas input{position:absolute;width:1px;opacity:0}.agenda-horas span{display:block;border:1px solid var(--separator);border-radius:12px;padding:10px 15px;cursor:pointer}.agenda-horas input:checked+span{background:#183a35;color:white;border-color:#183a35}.agenda-horas input:focus-visible+span{outline:3px solid #789b86;outline-offset:3px}.agenda-formulario .form-field{margin:20px 0;display:grid;gap:8px}.agenda-consentimiento{display:flex!important;gap:12px;align-items:flex-start;margin:20px 0;font-size:14px}.agenda-consentimiento input{width:20px!important;height:20px;flex:0 0 20px;accent-color:#183a35}.agenda-trampa{position:absolute;left:-10000px}.agenda-sin-huecos{padding:24px;background:var(--surface);border-radius:16px}.agenda-recibida{text-align:center;max-width:1000px;margin:auto;min-height:65vh}.agenda-avisos{padding:20px 24px;border-radius:18px;background:var(--fill);margin-bottom:24px}.agenda-avisos p{margin:8px 0 0}.agenda-filtro{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:24px 0}.agenda-lista{display:grid;gap:28px}.agenda-jornada h2{font:26px var(--font-display)}.agenda-cita{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:24px;margin-bottom:16px}.agenda-cita-hora{display:flex;flex-direction:column;gap:8px}.agenda-cita-hora>strong{font-size:26px}.agenda-cita-datos h3{margin-top:0}.agenda-telefono{font-size:20px;font-weight:600}.agenda-gestion{display:grid;grid-template-columns:160px 1fr;gap:16px;margin:20px 0}.agenda-gestion label{display:grid;gap:8px}.agenda-botones{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.agenda-comunicaciones{margin-top:48px}.agenda-comunicaciones .card{padding:24px;margin:16px 0}.agenda-horarios{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1200px;margin:32px auto}.agenda-horarios form{display:grid;gap:16px}.agenda-tramo{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:16px 0;border-bottom:1px solid var(--separator);padding-bottom:16px}.agenda-notificacion{position:fixed;right:24px;bottom:30px;max-width:340px;border-radius:18px;padding:20px;background:#183a35;color:white;box-shadow:0 12px 40px #0003;z-index:80}.agenda-notificacion a{color:#fff;display:block;margin-top:8px}.agenda-notificacion button{float:right;background:transparent;border:0;color:white;cursor:pointer}.agenda-contador{padding:2px 7px;border-radius:20px;background:var(--fill);font-size:12px}
@media(max-width:800px){.agenda-publica,.agenda-horarios{grid-template-columns:1fr;gap:24px}.agenda-intro{grid-template-columns:1fr}.agenda-sello{display:grid;justify-items:center;gap:8px}.agenda-publica .card{padding:20px}.agenda-cita{grid-template-columns:1fr;gap:16px;padding:20px}.agenda-cita-hora{flex-direction:row;align-items:center;flex-wrap:wrap}.agenda-gestion{grid-template-columns:1fr}.agenda-dias{gap:4px}.agenda-dia{border-radius:10px}.agenda-notificacion{bottom:90px;left:16px;right:16px;max-width:none}}

.agenda-mes h2::first-letter,.agenda-formulario h2::first-letter,.agenda-jornada h2::first-letter{text-transform:uppercase}.cabecera-publica nav a{white-space:nowrap}@media(min-width:651px) and (max-width:1080px){.cabecera-publica{flex-wrap:wrap}.cabecera-publica nav{order:3;width:100%;justify-content:space-between;gap:12px}}@media(max-width:650px){.cabecera-publica nav{flex-wrap:wrap;justify-content:flex-start;column-gap:20px;row-gap:0}}
/* Ritmo común entre contenido, campos y acciones. */
.agenda-servicio { gap: 14px; }
.agenda-servicio > label:not(:first-child) { margin-top: 8px; }
.agenda-servicio > .btn { margin-top: 8px; }
.agenda-mes { gap: 16px; }
.agenda-mes > .btn { min-width: 48px; padding: 12px; }
.agenda-mes h2 { text-align: center; }
.agenda-recibida > p { margin-top: 20px; }
.agenda-recibida > .btn { margin-top: 28px; }
.agenda-recibida > form { margin: 28px auto; }
.agenda-comunicaciones .card > p { overflow-wrap: anywhere; white-space: pre-line; }
.agenda-jornada > h2 { margin-bottom: 20px; }
.agenda-cita-datos > p { margin: 8px 0 12px; }
.agenda-botones { gap: 12px 16px; }
.agenda-botones > form { margin: 0; }
.agenda-comunicaciones .card > p { margin: 16px 0 20px; }
.agenda-comunicaciones > p { margin: 12px 0 24px; }
.agenda-horarios .card > p { margin: 12px 0 24px; }
.agenda-horarios .card > form { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--separator); }
.agenda-horarios .agenda-gestion { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; }
.agenda-horarios form > .btn { justify-self: start; margin-top: 8px; }
.agenda-filtro { gap: 16px; padding: 20px; border: 1px solid var(--separator); border-radius: var(--r-card); background: var(--surface); }
@media(max-width:800px) {
  .agenda-sello img { width: 112px; height: 112px; }
  .agenda-mes h2 { font-size: 22px; }
  .agenda-botones > :is(.btn,form), .agenda-botones > form > .btn { width: 100%; }
  .agenda-filtro > :is(.fecha-control,.btn) { flex: 1 1 100%; }
  .agenda-horarios .agenda-gestion { grid-template-columns: minmax(0,1fr); }
}
@media(min-width:901px) and (max-width:1180px){.sidebar-foot{width:60px;overflow-wrap:anywhere}.sidebar-foot>a{font-size:10px;line-height:1.4;display:block;text-align:center;margin:10px 0}.sidebar-foot .btn{font-size:10px;white-space:normal;padding:8px;min-width:0}.sidebar{overflow-x:hidden}.agenda-contador{position:absolute;right:0;top:0}.nav-item{position:relative}}

.cliente-faltas > p { margin: 12px 0 24px; }
.cliente-faltas .card { padding: 24px; margin: 16px 0; }
.cliente-faltas .card > p { margin: 12px 0; overflow-wrap: anywhere; }
.cliente-faltas .agenda-gestion { grid-template-columns: minmax(0,1fr); margin: 24px 0 20px; }
.agenda-avisos .agenda-botones { margin-top: 20px; }
.agenda-avisos > .card { padding: 24px; margin-top: 20px; }
@media(max-width:800px){.cliente-faltas .card{padding:20px}.cliente-faltas .agenda-botones>.btn{width:100%}}

.agenda-hora-ocupada span { opacity: .55; cursor: not-allowed; background: var(--fill); }
.agenda-tramo-editable { display: grid; gap: 16px; padding: 24px 0; }
.agenda-tramo-editable > form { width: 100%; }
.cliente-reconocido:not([hidden]) { padding: 18px 20px; border-radius: 16px; background: var(--fill); line-height: 1.5; }

/* Citas del salón y bloqueos de tiempo. */
.agenda-bloqueo { background: var(--fill); border-style: dashed; }
.agenda-cita-hora .badge + .badge { margin-top: -2px; }
.page-head .agenda-botones { justify-content: flex-end; }
.cita-cliente { margin: 24px 0; }
.cita-buscar { display: flex; gap: 12px; }
.cita-buscar > .input { flex: 1; min-width: 0; }
.cita-encontrados { margin-top: 12px; }
.cita-encontrados .row { text-decoration: none; color: inherit; }
.cita-huecos { padding: 16px 20px; border-radius: 16px; background: var(--fill); }
.cita-huecos-lista { margin-top: 8px; font-variant-numeric: tabular-nums; line-height: 1.8; }
@media(min-width:1200px) {
  .agenda-publica { max-width:1280px; margin-inline:auto; grid-template-columns:minmax(0,460px) minmax(0,1fr); gap:32px; }
  .agenda-publica .card { padding:24px; }
  .agenda-dias { gap:6px; margin:16px 0; }
  .agenda-semana { padding:6px; }
}
@media(max-width:800px){ .page-head .agenda-botones { justify-content: stretch; } }

/* ── Calendario mensual del panel ───────────────────────────────────────────
   Tarjeta con relleno propio (.card no lo lleva), cabecera con el mes centrado, cuadrícula de días con aire y
   contadores por estado; a la derecha, el detalle del día elegido. */
.calendario-panel { display: grid; grid-template-columns: minmax(0, 760px) minmax(340px, 1fr); gap: 28px; align-items: start; }
.calendario-tarjeta { padding: 24px 28px 22px; }
.calendario-mes { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 20px; }
.calendario-mes h2 { grid-column: 2; margin: 0; font-size: 24px; text-transform: capitalize; text-align: center; letter-spacing: .01em; }
.calendario-mes > .btn:first-child { justify-self: start; }
.calendario-mes .agenda-botones { grid-column: 3; justify-self: end; flex-wrap: nowrap; gap: 8px; }
.calendario-mes .btn { min-width: 44px; padding: 10px 14px; }
.calendario-mes .agenda-botones > .btn { width: auto; }
.calendario-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.calendario-semana { padding: 4px 0 10px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--label-2); }
.calendario-dia { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; aspect-ratio: 1.25; min-height: 78px; padding: 10px; border-radius: 16px; border: 1px solid var(--separator); background: var(--surface); color: inherit; text-decoration: none; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.calendario-dia:hover { border-color: var(--olive); background: var(--fill); transform: translateY(-1px); }
.calendario-dia:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.calendario-dia.vacio { border: 0; background: transparent; pointer-events: none; }
.calendario-dia.pasado { color: var(--label-2); background: color-mix(in oklab, var(--surface) 70%, var(--fill)); }
.calendario-dia.pasado .calendario-numero { opacity: .75; }
.calendario-dia.hoy .calendario-numero { background: var(--forest); color: var(--cream); opacity: 1; }
.calendario-dia.elegido { border-color: var(--olive); background: var(--fill); box-shadow: 0 0 0 3px color-mix(in oklab, var(--olive) 28%, var(--surface)); }
.calendario-dia.cerrado { background: repeating-linear-gradient(135deg, var(--fill) 0 6px, var(--surface) 6px 12px); }
.calendario-numero { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.calendario-puntos { display: flex; flex-wrap: wrap; gap: 5px; align-items: end; min-height: 20px; }
.calendario-punto { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11px; font-weight: 700; line-height: 1; color: #fff; }
.calendario-punto.abiertas { background: var(--olive); }
.calendario-punto.canceladas { background: var(--red); }
.calendario-punto.completadas { background: var(--forest); }
.calendario-punto.bloqueos { background: var(--label-2); }
.calendario-cierre { font-size: 10px; line-height: 1.2; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.calendario-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--separator); }
.calendario-leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: var(--label-2); }
.calendario-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.calendario-leyenda i { width: 10px; height: 10px; min-width: 0; padding: 0; border-radius: 50%; display: inline-block; }
.calendario-pie .nota { margin: 0; }
.calendario-dia-panel > h2 { margin: 4px 0 4px; text-transform: capitalize; }
.calendario-dia-panel > .subtitle { margin-bottom: 14px; }
.calendario-dia-panel .agenda-cita { margin-bottom: 14px; }
.segmentos { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: var(--r-pill); background: var(--fill); width: fit-content; max-width: 100%; }
.segmento { padding: 8px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--label-2); text-decoration: none; white-space: nowrap; }
.segmento.activo { background: var(--surface); color: var(--label); box-shadow: 0 1px 3px #0002; }
.segmento:hover { color: var(--label); }
.cita-eliminar { margin-top: 12px; }
.comunicaciones-estado p { margin-top: 8px; }
.comunicacion-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.comunicacion-fecha { margin-left: 10px; font-size: 13px; color: var(--label-2); }
.comunicacion-form { display: grid; gap: 10px; }
.comunicacion-form textarea { min-height: 120px; white-space: pre-line; }
.comunicacion-form code { font-size: 12px; overflow-wrap: anywhere; }
.comunicacion-marcar { margin-top: 12px; }
.comunicacion-texto { white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 1180px) { .calendario-panel { grid-template-columns: 1fr; } .calendario-tarjeta { max-width: 820px; } }
@media (max-width: 800px) {
  .calendario-tarjeta { padding: 18px 16px 16px; }
  .calendario-mes { gap: 8px; margin-bottom: 14px; }
  .calendario-mes h2 { font-size: 20px; }
  .calendario-mes .btn, .calendario-mes .agenda-botones > .btn { min-width: 40px; padding: 8px 10px; }
  .calendario-grid { gap: 5px; }
  .calendario-dia { aspect-ratio: auto; min-height: 60px; padding: 6px; gap: 4px; border-radius: 10px; }
  .calendario-numero { width: 24px; height: 24px; font-size: 13px; }
  .calendario-punto { min-width: 18px; height: 17px; padding: 0 5px; font-size: 10px; }
  .calendario-cierre { display: none; }
  .calendario-pie { flex-direction: column; align-items: flex-start; }
}