/* "Mis citas" -- portal de gestion de citas del cliente.
   Reutiliza tokens y clases base de booking.css (--brand, --good, --crit,
   .screen-title, .field, .btn, .segmented, .days/.day, .slots/.slot,
   .error-banner, .spinner). Este archivo solo agrega lo propio del portal:
   acceso (codigo), hero + resumen, tarjetas de cita con acciones, la hoja
   modal de reprogramar/cancelar y el aviso flotante. */

.mc-screen{padding-bottom:56px;}
.mc-wrap{max-width:520px; margin:0 auto;}
.mc-portal{max-width:760px; margin:0 auto; width:100%;}
.mc-loading{display:flex; justify-content:center; padding:60px 0; color:var(--brand);}
.mc-spinner{width:28px; height:28px; border-width:3px;}
.mc-logout{margin-left:auto;}

/* ---------- acceso ---------- */
.field-code{max-width:260px; margin:0 auto 15px;}
.field-code label{display:block; text-align:center;}
.mc-code-input{width:100%; height:56px; font-family:var(--font-mono, ui-monospace, monospace);
  font-size:28px; font-weight:700; letter-spacing:10px; text-align:center;}

/* Campo de contraseña con el ojo para revisar lo digitado (2026-09-16). */
.field-pass{position:relative;}
.field-pass input{padding-right:48px;}
.pass-eye{position:absolute; top:0; right:0; width:46px; height:48px; display:grid; place-items:center;
  color:var(--ink-muted); background:none; border:none; cursor:pointer;}
.pass-eye:hover{color:var(--ink-2);}
.pass-eye[aria-pressed="true"]{color:var(--brand);}

.mc-links{display:flex; justify-content:space-between; gap:14px; margin-top:16px; flex-wrap:wrap;}
.mc-links-center{justify-content:center; margin-top:14px;}
.mc-link{background:none; border:none; padding:0; color:var(--brand); font-size:13.5px; font-weight:700; cursor:pointer;}
.mc-link:hover{text-decoration:underline;}
.mc-link:disabled{color:var(--ink-muted); cursor:default; text-decoration:none;}
.mc-note{background:var(--warn-soft); color:var(--ink-2); border-radius:var(--r-sm); padding:11px 14px; font-size:13.5px; margin-bottom:14px; font-weight:600;}

/* ---------- hero + resumen ---------- */
.mc-hero{display:flex; flex-direction:column; gap:14px; margin-bottom:18px;}
.mc-hero .screen-sub{margin-bottom:0;}
.mc-new{text-decoration:none; font-weight:800;}
/* .btn de booking.css trae width:100% -- en fila hay que soltarlo o el
   boton se come el saludo y se sale del contenedor. */
@media(min-width:640px){
  .mc-hero{flex-direction:row; align-items:flex-end; justify-content:space-between; gap:24px;}
  .mc-hero-text{flex:1; min-width:0;}
  .mc-new{flex:none; width:auto; padding:0 22px;}
}

.mc-stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-bottom:18px;}
.mc-stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 12px 10px; box-shadow:var(--sh-1); min-width:0;}
.mc-stat .v{font-size:22px; font-weight:800; line-height:1.1; letter-spacing:-.02em; color:var(--ink);}
.mc-stat .l{font-size:12px; font-weight:700; color:var(--ink-muted); margin-top:2px;}
.mc-stat.today .v{color:var(--brand);}

.mc-tabs{margin-bottom:6px;}
#mcTabHistorial{padding-top:12px;}
.slot.mc-slot-current{border-style:dashed; border-color:var(--brand-border); color:var(--brand-dark); position:relative;}
.slot.mc-slot-current::after{content:'tu hora'; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:var(--brand-soft); color:var(--brand-dark); font-size:10px; font-weight:800; padding:1px 7px; border-radius:999px; white-space:nowrap;}
.slot.mc-slot-current[aria-pressed="true"]{border-style:solid; background:var(--brand); border-color:var(--brand); color:var(--on-brand);}

/* ---------- grupos + tarjetas ---------- */
.mc-group-title{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); margin:22px 0 10px;}
.mc-group-title .cnt{background:var(--surface-3); color:var(--ink-2); border-radius:999px; padding:1px 8px; font-size:11px; letter-spacing:0;}
.mc-group-title.today{color:var(--brand);}
.mc-group-title.today .cnt{background:var(--brand-soft); color:var(--brand-dark);}

.mc-cita{display:flex; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-1); margin-bottom:12px;}
.mc-cita.is-today{border:1.5px solid var(--brand-border); box-shadow:var(--sh-2);}
.mc-cita.is-muted{background:var(--surface-2); box-shadow:none;}
.mc-cita-date{flex:none; width:58px; height:72px; border-radius:var(--r-md); background:var(--surface-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; text-align:center;}
.mc-cita.is-today .mc-cita-date{background:var(--brand); color:var(--on-brand);}
.mc-cita-date .d{font-size:22px; font-weight:800; line-height:1; letter-spacing:-.02em;}
.mc-cita-date .m, .mc-cita-date .w{font-size:10.5px; text-transform:uppercase; font-weight:800; letter-spacing:.04em; line-height:1.2; opacity:.75;}
.mc-cita-body{flex:1; min-width:0;}
.mc-cita-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.mc-cita-service{font-weight:800; font-size:15px; color:var(--ink); line-height:1.3; overflow-wrap:anywhere;}
.mc-cita-hour{font-size:13.5px; color:var(--ink); font-weight:700; margin-top:3px;}
.mc-cita-hour .dur{color:var(--ink-muted); font-weight:600;}
.mc-cita-meta{font-size:13px; color:var(--ink-2); line-height:1.5; margin-top:2px; overflow-wrap:anywhere;}
.mc-cita-hint{font-size:12.5px; color:var(--ink-muted); margin-top:8px; line-height:1.45;}
.mc-cita-hint a{color:var(--brand); font-weight:700; text-decoration:none;}
.mc-cita-warn{display:flex; gap:9px; align-items:flex-start; background:var(--warn-soft); color:var(--ink-2); border-radius:var(--r-sm); padding:10px 12px; font-size:13px; line-height:1.45; margin-top:10px;}
.mc-cita-warn b{color:var(--ink);}
.mc-cita-warn a{color:var(--brand-dark); font-weight:800; text-decoration:none; white-space:nowrap;}
.mc-cita-warn .ico{flex:none;}
.mc-cita-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.mc-cita-actions .btn{height:40px; font-size:13.5px; padding:0 14px; flex:1 1 auto;}
@media(min-width:640px){ .mc-cita-actions .btn{flex:0 0 auto; width:auto;} }
@media(max-width:639px){ .mc-cita-actions{flex-direction:column;} }
.btn-danger-ghost{border:1.5px solid var(--crit-soft); color:var(--crit); background:var(--surface);}
.btn-danger-ghost:hover{background:var(--crit-soft);}
.btn-danger{background:var(--crit); color:#fff;}
.btn-danger:hover{filter:brightness(.93);}
.btn-danger:disabled{background:var(--surface-3); color:var(--ink-muted); cursor:not-allowed; filter:none;}

.mc-status{flex:none; display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:100px; font-size:11px; font-weight:800; white-space:nowrap;}
.mc-status::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;}
.mc-status.registrada{background:#e0f4f3; color:#138c86;}
.mc-status.confirmada{background:var(--brand-soft); color:var(--brand-dark);}
.mc-status.asistio,.mc-status.facturada{background:var(--good-soft); color:var(--good);}
.mc-status.noasistio{background:var(--warn-soft); color:#9a6718;}
.mc-status.cancelada{background:var(--crit-soft); color:var(--crit);}

.mc-empty{text-align:center; background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--r-lg); padding:28px 18px; margin-top:16px;}
.mc-empty .ico{font-size:30px;}
.mc-empty p{color:var(--ink-2); font-size:14px; margin:8px 0 14px;}
.mc-empty .btn{display:inline-flex; padding:0 22px; text-decoration:none;}
.mc-more{margin:4px auto 0; display:flex;}

/* ---------- hoja modal ---------- */
.mc-sheet-backdrop{position:fixed; inset:0; background:rgba(20,27,40,.45); z-index:50; display:flex; align-items:flex-end; justify-content:center;}
/* Alto fijo (no segun contenido): la disponibilidad carga en 2 tiempos
   (dias y luego horas) y una hoja que crece a medida que llega el contenido
   salta y mueve el boton de confirmar bajo el dedo. */
.mc-sheet{background:var(--surface); width:100%; height:92vh; height:92dvh; border-radius:var(--r-lg) var(--r-lg) 0 0; display:flex; flex-direction:column; box-shadow:var(--sh-2); animation:mcUp .22s ease-out;}
.mc-sheet.is-compact{height:auto; max-height:92vh; max-height:92dvh;}
@keyframes mcUp{from{transform:translateY(24px); opacity:.4;} to{transform:none; opacity:1;}}
@media(min-width:640px){
  .mc-sheet-backdrop{align-items:center; padding:24px;}
  .mc-sheet{max-width:600px; border-radius:var(--r-lg); height:min(760px, 88vh);}
  .mc-sheet.is-compact{height:auto; max-height:88vh;}
}
.mc-sheet-head{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--border);}
.mc-sheet-head h2{margin:0; font-size:17px; font-weight:800; flex:1; min-width:0;}
.mc-sheet-close{width:40px; height:40px; border-radius:50%; font-size:16px; color:var(--ink-2); flex:none;}
.mc-sheet-close:hover{background:var(--surface-2);}
.mc-sheet-body{padding:16px 18px; overflow-y:auto; flex:1; min-height:0; -webkit-overflow-scrolling:touch;}
.mc-sheet-foot{padding:12px 18px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; background:var(--surface); border-radius:0 0 var(--r-lg) var(--r-lg);}
.mc-sheet-foot .sel{font-size:13px; color:var(--ink-2); text-align:center; min-height:19px;}
.mc-sheet-foot .sel b{color:var(--ink);}
body.mc-no-scroll{overflow:hidden;}

.mc-current{display:flex; gap:12px; align-items:center; background:var(--surface-2); border-radius:var(--r-md); padding:12px 14px; margin-bottom:16px;}
.mc-current .lbl{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted);}
.mc-current .mc-current-svc{font-weight:800; font-size:14.5px;}
.mc-current .when{font-size:13px; color:var(--ink-2);}
.mc-section-label{font-size:13px; font-weight:700; color:var(--ink-2); margin:4px 0 8px;}

.mc-options{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;}
.mc-option{display:flex; align-items:center; gap:11px; text-align:left; border:1.5px solid var(--border); border-radius:var(--r-md); padding:12px 14px; font-size:14px; font-weight:600; color:var(--ink); background:var(--surface); min-height:48px;}
.mc-option .rd{width:18px; height:18px; border-radius:50%; border:2px solid var(--border-strong); flex:none;}
.mc-option[aria-pressed="true"]{border-color:var(--crit); background:var(--crit-soft);}
.mc-option[aria-pressed="true"] .rd{border-color:var(--crit); box-shadow:inset 0 0 0 3px var(--surface); background:var(--crit);}
.mc-textarea{width:100%; min-height:84px; border:1.5px solid var(--border); border-radius:var(--r-md); padding:10px 12px; font-family:inherit; font-size:14px; resize:vertical;}
.mc-suggest{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--brand-soft); border-radius:var(--r-md); padding:11px 14px; font-size:13.5px; color:var(--ink-2); margin-bottom:12px;}

/* ---------- aviso flotante ---------- */
.mc-toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60; background:var(--ink); color:#fff; font-size:14px; font-weight:700; padding:12px 18px; border-radius:var(--r-md); box-shadow:var(--sh-2); width:max-content; max-width:calc(100% - 32px); text-align:center;}
.mc-toast.good{background:var(--good);}