/* Reservas v2 - Fase 1. CSS propio, sin Bootstrap/AdminLTE/jQuery UI. Paleta y componentes adaptados del prototipo aprobado ("Prototipo de Reservas"). Mobile-first, zoom habilitado, objetivos tactiles >=44px. */ :root{ --bg:#f4f6fa; --surface:#ffffff; --surface-2:#eef2f8; --surface-3:#e3e9f3; --border:#dee5f0; --border-strong:#c6d2e4; --ink:#141b28; --ink-2:#4d5b70; --ink-muted:#8494a9; /* "Aurora Blue" -- la misma identidad azul claro ya usada en toda la app (sidebar activo, burbuja de ayuda IA, plantillas de correo: ver css/index.php linea ~1003/5488, util/emailShell.php). Antes esta hoja usaba un azul propio mas oscuro (#2563b0) que no correspondia con el resto del producto -- hallazgo real reportado 2026-09-12 ("los colores ... no van en linea con los colores corporativos"). */ --brand:#3a7bd5; --brand-dark:#1e5ba8; --brand-soft:#eaf2fc; --brand-border:#bcd7f5; --teal:#0d7d86; --teal-soft:#dff2f3; --good:#1e9a6c; --good-soft:#e2f4ec; --warn:#c98a2e; --warn-soft:#faeeda; --crit:#c14a3e; --crit-soft:#fbe7e4; --on-brand:#ffffff; --r-sm:9px; --r-md:13px; --r-lg:18px; --sh-1:0 1px 2px rgba(20,27,40,.05), 0 1px 1px rgba(20,27,40,.04); --sh-2:0 8px 26px rgba(20,27,40,.09), 0 2px 6px rgba(20,27,40,.05); --sh-up:0 -6px 20px rgba(20,27,40,.07); --font:'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif; } /* Sin modo oscuro a proposito: ninguna otra pantalla de la app (panel admin AdminLTE, sitio de marketing, correos) cambia de paleta segun el sistema operativo del visitante -- todas son siempre claras. Que reservas/v2 fuera la unica pantalla "theme-aware" (patron normal para un Artifact, no para una pagina real del producto) hacia que a cualquier visitante con su celular en modo oscuro le apareciera con fondo casi negro, muy distinto del resto de la marca -- exactamente el reporte real del 2026-09-12. */ *{box-sizing:border-box;} @media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important;} } html,body{margin:0; padding:0; background:var(--bg);} body{color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;} button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;} select,input{font-family:inherit;} :focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px;} [hidden]{display:none!important;} .app-header{background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20;} .ah-in{max-width:1120px; margin:0 auto; padding:12px 18px; display:flex; align-items:center; gap:14px;} .brand{display:flex; align-items:center; gap:10px; min-width:0;} .brand-mark{width:36px; height:36px; border-radius:10px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex:none;} /* Con logo: los logos suelen ser apaisados (el de correos es 260x59), asi que el recuadro crece a lo ancho con tope, sobre fondo blanco, sin recortar. */ .brand-mark.has-logo{width:auto; min-width:48px; max-width:170px; height:52px; padding:3px; background:#fff; border:1px solid var(--border);} .brand-mark.has-logo img{display:block; height:100%; width:auto; max-width:162px; object-fit:contain;} @media (max-width:420px){ .brand-mark.has-logo{max-width:120px; height:48px;} .brand-mark.has-logo img{max-width:112px;} } .brand-name{font-weight:800; font-size:15px; letter-spacing:-.01em; line-height:1.2;} .brand-sede{font-size:12.5px; color:var(--ink-2); margin-top:1px;} /* Link del header compartido entre index.php ("Mis citas") y mis-citas.php ("Volver a reservar") -- una sola regla para las 2 pantallas. */ .hdr-link{margin-left:auto; font-size:13.5px; font-weight:700; color:var(--ink-2); text-decoration:none; white-space:nowrap; flex:none;} .hdr-link:hover{color:var(--brand);} /* "Mis citas" / "Reservar" como boton (2026-09-17): como texto gris igual al resto pasaba desapercibido. Pildora con el color de marca, borde e icono. */ .hdr-cta{display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 15px; border-radius:999px; background:var(--brand-soft); border:1.5px solid var(--brand-border); color:var(--brand-dark); font-weight:800; transition:background .15s, color .15s, border-color .15s;} .hdr-cta svg{flex:none;} .hdr-cta:hover, .hdr-cta:focus-visible{background:var(--brand); border-color:var(--brand); color:var(--on-brand);} @media (max-width:420px){ .hdr-cta{height:36px; padding:0 11px; gap:5px; font-size:13px;} } /* Indicador de pasos (2026-09-16): circulo con el icono del paso + descripcion debajo, unidos por la linea de progreso. Un solo componente para movil y escritorio (antes: pestañas .step-tab en >=900px y 4 rayitas .mob-progress en movil). El icono NO se reemplaza por un check al completar el paso: los 3 estados se distinguen por el relleno del circulo. pendiente -> circulo claro, icono gris completado -> relleno en --brand-dark (tono profundo del color del logo) actual -> relleno en --brand, mas grande y con halo --brand-soft */ .stepper{border-top:1px solid var(--border); background:var(--surface);} /* --stp-gap separa las columnas; la linea de union tiene que compensarlo (va de centro a centro de dos circulos = ancho de columna + gap). */ .stepper-in{--stp-gap:16px; list-style:none; max-width:620px; margin:0 auto; padding:15px 12px 12px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; column-gap:var(--stp-gap);} .st{position:relative; min-width:0;} /* Linea de union: va detras de los circulos (z-index) y se pinta hasta el paso actual. */ .st::before{content:""; position:absolute; top:19px; height:2px; z-index:0; left:calc(-50% - var(--stp-gap) / 2); width:calc(100% + var(--stp-gap)); background:var(--border-strong);} .st:first-child::before{display:none;} .st.done::before, .st.now::before{background:var(--brand);} .st-btn{display:grid; justify-items:center; gap:7px; width:100%; padding:0; text-align:center;} .st-btn[disabled]{cursor:default;} .st-bub{width:38px; height:38px; border-radius:50%; background:var(--surface); border:2px solid var(--border-strong); color:var(--ink-muted); display:grid; place-items:center; position:relative; z-index:1; transition:transform .18s ease, background .18s ease, border-color .18s ease;} .st-lbl{font-size:11.5px; font-weight:700; color:var(--ink-muted); line-height:1.25; max-width:10ch;} .st-n{display:none;} .st.done .st-bub{background:var(--brand-dark); border-color:var(--brand-dark); color:var(--on-brand);} .st.done .st-lbl{color:var(--ink-2);} .st.now .st-bub{background:var(--brand); border-color:var(--brand); color:var(--on-brand); transform:scale(1.1); box-shadow:0 0 0 5px var(--brand-soft);} .st.now .st-lbl{color:var(--brand);} .st-btn:not([disabled]):hover .st-bub{transform:scale(1.06);} /* Pantallas angostas (iPhone SE y similares): el circulo y la etiqueta se encogen en vez de amontonar el texto en 3 renglones. */ @media(max-width:380px){ .stepper-in{--stp-gap:10px; padding:13px 8px 10px;} .st::before{top:17px;} .st-bub{width:34px; height:34px;} .st-bub svg{width:17px; height:17px;} .st-lbl{font-size:10.5px; max-width:8ch;} } .layout{max-width:1120px; margin:0 auto; padding:22px 18px 122px; display:grid; grid-template-columns:1fr; gap:22px;} .layout > *{min-width:0;} @media(min-width:900px){ .layout{grid-template-columns:1fr 336px; padding-bottom:44px; gap:28px; align-items:start;} } h1.screen-title{font-size:23px; font-weight:800; letter-spacing:-.02em; margin:0 0 4px; text-wrap:balance;} .screen-sub{color:var(--ink-2); font-size:14px; margin:0 0 18px;} .search{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:0 14px; height:46px; margin-bottom:12px; box-shadow:var(--sh-1);} .search input{border:none; outline:none; background:transparent; font-size:14.5px; color:var(--ink); width:100%; height:100%;} .search .ico{color:var(--ink-muted);} .chip-row{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:16px; scrollbar-width:none;} .chip-row::-webkit-scrollbar{display:none;} .chip{flex:none; border:1px solid var(--border); background:var(--surface); color:var(--ink-2); border-radius:999px; padding:8px 15px; font-size:13.5px; font-weight:600; white-space:nowrap; min-height:38px;} .chip[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:var(--on-brand);} .svc-list{display:flex; flex-direction:column; gap:10px;} .svc{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:14px 15px; text-align:left; width:100%; box-shadow:var(--sh-1);} .svc[aria-pressed="true"]{border-color:var(--brand); background:var(--brand-soft); box-shadow:none;} .svc-main{flex:1; min-width:0;} .svc-name{font-weight:700; font-size:14.5px; letter-spacing:-.01em;} .svc-meta{font-size:13px; color:var(--ink-2); margin-top:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .svc-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-muted); flex:none;} .svc-meta .price{font-weight:700; color:var(--ink);} .svc-desc{font-size:12.5px; color:var(--ink-muted); margin-top:5px; line-height:1.45;} .svc-toggle{width:38px; height:38px; border-radius:12px; border:1.5px solid var(--border-strong); color:var(--ink-2); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:600; flex:none; background:var(--surface);} .svc[aria-pressed="true"] .svc-toggle{background:var(--brand); border-color:var(--brand); color:var(--on-brand);} .cat-title{font-size:12px; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.07em; margin:20px 0 9px;} .cat-title:first-child{margin-top:0;} .item{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-1); margin-bottom:12px; overflow:hidden;} .item-head{display:flex; align-items:center; gap:12px; padding:13px 15px;} .item-badge{width:26px; height:26px; border-radius:8px; background:var(--surface-2); color:var(--ink-2); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none;} .item-name{font-weight:700; font-size:14.5px;} .item-meta{font-size:12.5px; color:var(--ink-muted); margin-top:2px;} .item-body{border-top:1px solid var(--border); padding:12px 15px; background:var(--surface-2);} .pick-row{display:flex; align-items:center; gap:11px;} .pick-row .who{flex:1; min-width:0;} .pick-row .who-name{display:block; font-weight:700; font-size:14px;} .pick-row .who-meta{display:block; font-size:12.5px; color:var(--ink-2); margin-top:1px;} .btn-change{border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink-2); border-radius:var(--r-sm); padding:0 14px; height:38px; font-size:13px; font-weight:700; flex:none;} .avatar{width:38px; height:38px; border-radius:50%; background:var(--surface-3); color:var(--ink-2); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex:none;} .avatar.auto{background:var(--brand); color:var(--on-brand); font-size:17px;} .avatar.sm{width:30px; height:30px; font-size:11.5px;} .pro-list{display:flex; flex-direction:column; gap:9px; margin-top:11px;} .pro{display:flex; align-items:center; gap:12px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-sm); padding:11px 13px; width:100%; text-align:left;} .pro[aria-pressed="true"]{border-color:var(--brand); background:var(--brand-soft);} .pro-name{display:block; font-weight:700; font-size:14px;} .pro-meta{display:block; font-size:12.5px; color:var(--ink-2); margin-top:1px;} .pro-check{margin-left:auto; color:var(--brand); font-size:17px; font-weight:800; opacity:0;} .pro[aria-pressed="true"] .pro-check{opacity:1;} .segmented{display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:4px; gap:4px; margin-bottom:16px;} .segmented button{flex:1; border-radius:var(--r-sm); padding:10px 8px; font-size:13.5px; font-weight:700; color:var(--ink-2); line-height:1.25; min-height:44px;} .segmented button[aria-pressed="true"]{background:var(--surface); color:var(--brand); box-shadow:var(--sh-1);} .segmented .sub{display:block; font-size:11px; font-weight:600; color:var(--ink-muted); margin-top:2px;} .month-label{display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:13px; font-weight:700; color:var(--ink-2); margin:0 0 10px;} .days-month{font-size:12.5px; font-weight:800; color:var(--ink-2); margin-bottom:8px; text-transform:capitalize;} .days{display:flex; gap:9px; overflow-x:auto; padding-bottom:6px; margin-bottom:6px; scrollbar-width:none;} .day-month{flex:none; width:20px; display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; text-orientation:mixed; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-muted); border-left:1.5px dashed var(--border-strong); padding-left:6px; margin-right:1px;} .day-month:first-child{border-left:none; padding-left:0; width:auto;} .days::-webkit-scrollbar{display:none;} .day{flex:none; width:60px; height:74px; border-radius:var(--r-md); border:1.5px solid var(--border); background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; box-shadow:var(--sh-1);} .day .dw{font-size:11.5px; font-weight:600; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em;} .day .dn{font-size:20px; font-weight:800; letter-spacing:-.02em;} .day[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:var(--on-brand); box-shadow:none;} .day[aria-pressed="true"] .dw{color:var(--on-brand); opacity:.85;} .day:disabled{background:var(--surface-2); border-color:var(--border); color:var(--ink-muted); box-shadow:none; cursor:not-allowed; opacity:.6;} .closed-note{display:flex; align-items:center; gap:9px; background:var(--warn-soft); color:var(--ink-2); border-radius:var(--r-sm); padding:10px 13px; font-size:13px; margin-bottom:18px;} .closed-note b{color:var(--ink);} .slot-head{display:flex; align-items:center; gap:9px; margin:18px 0 10px;} .slot-head h3{font-size:13.5px; font-weight:700; margin:0;} .slot-head .cnt{font-size:12.5px; color:var(--ink-muted);} .slots{display:grid; grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); gap:9px;} .slot{height:46px; border-radius:var(--r-sm); border:1.5px solid var(--border); background:var(--surface); font-size:14.5px; font-weight:700; box-shadow:var(--sh-1); position:relative;} .slot[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:var(--on-brand); box-shadow:none;} .slot.first{border-color:var(--teal); color:var(--teal);} .slot.first[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:var(--on-brand);} .slot.first::after{content:'primera libre'; position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--teal); color:#fff; font-size:9.5px; font-weight:700; padding:1px 7px; border-radius:999px; white-space:nowrap;} .plan{margin-top:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; box-shadow:var(--sh-1);} .plan-title{font-size:13px; font-weight:700; color:var(--ink-2); margin:0 0 9px;} .plan-row{display:flex; align-items:center; gap:10px; font-size:13.5px; padding:5px 0;} .plan-row .t{font-weight:800; font-size:13.5px; width:118px; flex:none;} .plan-row .s{color:var(--ink-2);} .plan-total{border-top:1px dashed var(--border); margin-top:8px; padding-top:9px; font-size:13px; color:var(--ink-2);} .plan-total b{color:var(--ink);} .sched-state{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700;} .sched-state.ok{color:var(--good);} .sched-state.pend{color:var(--warn);} .field{margin-bottom:15px;} .field label{display:block; font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:6px;} .field label .req{color:var(--brand);} .field label .opt{font-weight:600; color:var(--ink-muted);} .field input, .field select{width:100%; height:48px; border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--surface); padding:0 13px; font-size:15px; color:var(--ink);} .field .hint{font-size:12.5px; color:var(--ink-muted); margin-top:6px;} .field .err{font-size:12.5px; color:var(--crit); margin-top:6px;} .field-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;} .field-doc{display:grid; grid-template-columns:112px 1fr; gap:12px;} .sex-row{display:flex; gap:10px;} .sex-opt{flex:1; height:48px; border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--surface); font-size:14.5px; font-weight:700; color:var(--ink-2); display:flex; align-items:center; justify-content:center; gap:8px;} .sex-opt[aria-pressed="true"]{border-color:var(--brand); background:var(--brand-soft); color:var(--brand);} /* Selector de indicativo (plugins/intlTelInput) dentro de los campos propios: el plugin envuelve el input en .iti, que por defecto es inline-block. */ .field .iti{display:block; width:100%;} .field .iti input{padding-left:12px;} .iti--separate-dial-code .iti__selected-flag{background:var(--surface-2); border-radius:var(--r-md) 0 0 var(--r-md);} .iti__country-list{font-size:14px; max-width:min(320px, 86vw);} /* Aviso de campos obligatorios pendientes (ficha nueva). El boton "Reservar" sigue deshabilitado, pero ahora se explica QUE falta -- antes el cliente veia el boton en gris sin ninguna razon visible. */ .req-note{display:flex; gap:10px; background:var(--warn-soft); border-radius:var(--r-md); padding:12px 14px; font-size:13.5px; color:var(--ink-2); line-height:1.45; margin:2px 0 14px; font-weight:600;} .req-note .ico{flex:none; line-height:1.3;} .field input.is-missing, .field select.is-missing{border-color:var(--warn);} .sex-row.is-missing .sex-opt{border-color:var(--warn);} .info-box{display:flex; gap:11px; background:var(--teal-soft); border-radius:var(--r-md); padding:13px 15px; font-size:13.5px; color:var(--ink-2); line-height:1.5; margin:4px 0 18px;} .info-box .ico{color:var(--teal); font-size:16px; flex:none; line-height:1.3;} .info-box b{color:var(--ink);} .found{display:flex; gap:12px; align-items:flex-start; background:var(--good-soft); border-radius:var(--r-md); padding:14px 16px; margin-bottom:16px;} .found .ico{font-size:19px; line-height:1.2;} .found-title{font-weight:800; font-size:15px; color:var(--ink);} .found-sub{font-size:13px; color:var(--ink-2); margin-top:3px;} .recap-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:16px; box-shadow:var(--sh-1); margin-bottom:18px;} .recap-row{display:flex; gap:12px; font-size:13.5px; padding:7px 0;} .recap-row .l{color:var(--ink-muted); width:92px; flex:none;} .recap-row .v{font-weight:600;} .cita-line{display:flex; gap:12px; padding:11px 0; border-bottom:1px dashed var(--border);} .cita-line:last-child, .cita-line.last-of-day{border-bottom:none;} .cita-when{width:118px; flex:none;} .cita-when .d{font-size:12.5px; color:var(--ink-muted); font-weight:600;} .cita-when .h{font-size:14px; font-weight:800;} .cita-what .n{font-size:14px; font-weight:700;} .cita-what .w{font-size:12.5px; color:var(--ink-2); margin-top:2px;} .summary-card{display:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-1); position:sticky; top:118px;} @media(min-width:900px){ .summary-card{display:block;} } .sc-title{font-size:15px; font-weight:800; margin:0 0 12px;} .sc-item{padding:9px 0; border-bottom:1px dashed var(--border);} .sc-item:last-of-type{border-bottom:none;} .sc-item .n{font-size:13.5px; font-weight:700; display:flex; justify-content:space-between; gap:10px;} .sc-item .d{font-size:12.5px; color:var(--ink-2); margin-top:3px;} .sc-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; padding-top:12px; border-top:1px solid var(--border);} .sc-total .l{font-size:13.5px; color:var(--ink-2); font-weight:600;} .sc-total .v{font-size:22px; font-weight:800; letter-spacing:-.02em;} .sc-note{font-size:12px; color:var(--ink-muted); margin-top:12px; line-height:1.5;} .btn{display:flex; align-items:center; justify-content:center; gap:8px; height:48px; border-radius:var(--r-md); font-size:15px; font-weight:700; padding:0 20px; width:100%;} .btn-primary{background:var(--brand); color:var(--on-brand);} .btn-primary:hover{background:var(--brand-dark);} .btn-primary:disabled{background:var(--surface-3); color:var(--ink-muted); cursor:not-allowed;} .btn-ghost{border:1.5px solid var(--border-strong); color:var(--ink-2); background:var(--surface);} .btn-sm{height:40px; font-size:13.5px;} .bottom-bar{position:fixed; left:0; right:0; bottom:0; background:var(--surface); border-top:1px solid var(--border); box-shadow:var(--sh-up); padding:11px 18px calc(11px + env(safe-area-inset-bottom)); z-index:30; display:flex; align-items:center; gap:14px;} .bb-info{flex:1; min-width:0;} .bb-main{font-size:14.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .bb-sub{font-size:12.5px; color:var(--ink-2); margin-top:1px;} .bottom-bar .btn{width:auto; min-width:132px;} /* Flecha + "Atrás" (2026-09-17): la flecha sola no se leia como "volver". */ .bb-back{flex:none; height:44px; padding:0 13px 0 10px; border-radius:var(--r-md); border:1.5px solid var(--brand-border); background:var(--brand-soft); color:var(--brand-dark); font-size:14px; font-weight:800; display:flex; align-items:center; gap:5px;} .bb-back span{font-size:17px; line-height:1;} @media (max-width:400px){ .bottom-bar{gap:10px; padding-left:14px; padding-right:14px;} .bottom-bar .btn{min-width:0; padding:0 14px;} } @media(min-width:900px){ .bottom-bar{display:none;} } .done-wrap{max-width:540px; margin:0 auto; text-align:center; padding-top:10px;} .done-tick{width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:32px; margin:0 auto 16px; background:var(--good-soft); color:var(--good);} .done-title{font-size:24px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px;} .done-sub{color:var(--ink-2); font-size:14.5px; margin:0 0 20px;} .done-sub b{color:var(--ink);} .done-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-1); text-align:left; margin-bottom:16px;} /* Encabezado de dia dentro de la confirmacion: con "Por separado" puede haber varios dias y cada uno lleva su propia fecha visible. */ .done-day{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px;} .done-day.next{margin-top:16px; padding-top:14px; border-top:1px solid var(--border);} .done-day .dd-date{font-size:16px; font-weight:800;} .pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; background:var(--good-soft); color:var(--good);} .done-actions{display:flex; flex-direction:column; gap:10px;} @media(min-width:900px){ .done-actions{flex-direction:row;} } .spinner{display:inline-block; width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:v2spin .6s linear infinite;} @keyframes v2spin{to{transform:rotate(360deg);}} .error-banner{background:var(--crit-soft); color:var(--crit); border-radius:var(--r-sm); padding:11px 14px; font-size:13.5px; margin-bottom:14px; font-weight:600;} /* Selección de sede (2026-09-23): portada del link cuando llega sin ?company=. Reemplaza al