/* Cierre discreto, visible y accesible en las fichas. */
#detail-dialog{padding:0;overflow-y:auto}
#detail-dialog .dialog-toolbar{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;align-items:center;padding:4px 12px;background:var(--cream);border-bottom:1px solid var(--line)}
#detail-dialog .dialog-close{position:relative;inset:auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:44px;height:34px;min-height:34px;margin:5px 0;padding:6px 9px;border:1px solid var(--yellow);border-radius:8px;background:var(--purple);color:#fff;font-size:12px;font-weight:600;line-height:1;flex-shrink:0}
/* El recuadro mide 34 px; el área para tocarlo conserva 44 px. */
#detail-dialog .dialog-close::after{content:"";position:absolute;inset:-5px 0}
#detail-dialog .dialog-close:hover{background:var(--purple-dark);border-color:var(--yellow)}
#detail-dialog .dialog-close svg{display:block;width:16px;height:16px;flex:none;pointer-events:none}
#detail-dialog #dialog-body{padding:24px 44px 44px}
@media(max-width:650px){#detail-dialog #dialog-body{padding:20px 24px 28px}}
/* Lista de áreas en la ficha de un servicio */
#detail-dialog .dialog-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
#detail-dialog .dialog-list li{position:relative;padding-left:22px;color:var(--muted);font-size:15px;line-height:1.55}
#detail-dialog .dialog-list li:before{content:'';position:absolute;left:4px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--purple);opacity:.7}