/* ============================================================
   DANGOFE OS · SERVICIOS → BLOQUE «DÓNDE» CON LAS UBICACIONES DEL CLIENTE (prefijo sdo-) · v1.0.0 · 2026-10-22 · chat de Diseño
   Va con servicios-donde.js. Mismo cristal C1 (blanco de día, «Noche azul» por [data-theme='dark']), SIN sombras (solo anillos planos de foco), Plus Jakarta Sans.
   Se adapta al ancho que le den (la tarjeta angosta de la Agenda o el ancho de Nuevo servicio). Tres formas por data-v: A · Lista, B · Etiquetas, C · Mapa primero.
   Verde = verificada · azul = fijo · ámbar = sin verificar. Nada se anima sin parar.
   ============================================================ */
.sdo, .sdo *, .sdo *::before, .sdo *::after { box-sizing: border-box; }
.sdo {
  --sdo-az: #03269b; --sdo-cel: #3592cf; --sdo-azrgb: 3, 38, 155; --sdo-celrgb: 53, 146, 207; --sdo-tinta: #0b1540; --sdo-tenue: #4a5680; --sdo-suave: #7a85a8;
  --sdo-vidrio: rgba(255, 255, 255, .72); --sdo-vidrio3: rgba(255, 255, 255, .92); --sdo-linea: rgba(3, 38, 155, .12); --sdo-linea2: rgba(3, 38, 155, .2); --sdo-campo: rgba(3, 38, 155, .05);
  --sdo-ok: #15724a; --sdo-okrgb: 34, 197, 94; --sdo-amb: #9a5b00; --sdo-ambrgb: 245, 158, 11; --sdo-mal: #b42318; --sdo-malrgb: 239, 68, 68;
  --sdo-mp-f: #e7eefb; --sdo-mp-m: #f6f9ff; --sdo-mp-v: #ffffff; --sdo-mp-g: #c7d6f3; --sdo-mp-a: #b9d6f2; --sdo-mp-pin: #d33a2c;
  display: block; width: 100%; container-type: inline-size; container-name: sdo; color: var(--sdo-tinta); font-family: var(--font-family-ui, 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); font-size: 13.5px; line-height: 1.4;
}
[data-theme='dark'] .sdo {
  --sdo-cel: #7dc4ff; --sdo-tinta: #eef1ff; --sdo-tenue: #aab5e0; --sdo-suave: #7d89b8; --sdo-vidrio: rgba(12, 22, 60, .72); --sdo-vidrio3: rgba(16, 28, 76, .92);
  --sdo-linea: rgba(120, 150, 255, .16); --sdo-linea2: rgba(120, 150, 255, .3); --sdo-campo: rgba(255, 255, 255, .06); --sdo-ok: #86efac; --sdo-amb: #fcd34d; --sdo-mal: #ff8a7a;
  --sdo-mp-f: #0e1a44; --sdo-mp-m: #14235a; --sdo-mp-v: #2a3c78; --sdo-mp-g: #3a5199; --sdo-mp-a: #0e3a63; --sdo-mp-pin: #ff6a5a;
}
.sdo svg { display: block; flex: none; }
.sdo b { font-weight: 800; }
:where(.sdo p, .sdo ul) { margin: 0; padding: 0; }
.sdo-a, .sdo-b, .sdo-c { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sdo [data-sdo-z]:empty { display: none; }
.sdo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- cabecera ---------- */
.sdo-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.sdo-cab__t { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sdo-tenue); }
.sdo-cab__c { font-size: 12.5px; color: var(--sdo-suave); min-width: 0; overflow-wrap: anywhere; }

/* ---------- botones, insignias, avisos ---------- */
.sdo-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 8px 16px; border: 0; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 800; line-height: 1.1; text-align: center; text-decoration: none; cursor: pointer; color: var(--sdo-tinta); background: var(--sdo-vidrio3); box-shadow: inset 0 0 0 1px var(--sdo-linea2); }
.sdo-btn span { min-width: 0; overflow-wrap: anywhere; }
.sdo-btn--pri { color: #fff; box-shadow: none; background: linear-gradient(135deg, #03269b, #3592cf); }
.sdo-btn--sec { background: transparent; }
.sdo-btn--mini { min-height: 34px; padding: 6px 12px; font-size: 12.5px; }
.sdo-btn--sug { color: #fff; box-shadow: none; background: linear-gradient(135deg, #03269b, #3592cf); }
.sdo-btn--leer { flex: none; min-height: 44px; }
.sdo-btn[disabled] { opacity: .5; cursor: default; }
.sdo-btn:focus-visible, .sdo-chip:focus-visible, .sdo-ficha:focus-visible, .sdo-lg__b:focus-visible, .sdo-mas:focus-visible, .sdo-x:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--sdo-celrgb), .45); }
.sdo-ins { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.sdo-ins--fijo { color: var(--sdo-az); background: rgba(var(--sdo-azrgb), .1); }
[data-theme='dark'] .sdo-ins--fijo { color: #9db9ff; background: rgba(143, 180, 255, .16); }
.sdo-ins--ver { color: var(--sdo-ok); background: rgba(var(--sdo-okrgb), .14); }
.sdo-ins--sin { color: var(--sdo-amb); background: rgba(var(--sdo-ambrgb), .16); }
.sdo-ins--pend { color: var(--sdo-tenue); background: var(--sdo-campo); }
.sdo-msg { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 14px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.sdo-msg span { min-width: 0; overflow-wrap: anywhere; }
.sdo-msg--ok { color: var(--sdo-ok); background: rgba(var(--sdo-okrgb), .12); }
.sdo-msg--amb { color: var(--sdo-amb); background: rgba(var(--sdo-ambrgb), .14); }
.sdo-msg--mal { color: var(--sdo-mal); background: rgba(var(--sdo-malrgb), .1); }
.sdo-msg svg { margin-top: 1px; }
.sdo-nota { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; color: var(--sdo-tenue); }
.sdo-nota svg { margin-top: 1px; }
.sdo-nota span { min-width: 0; overflow-wrap: anywhere; }

/* ---------- A · tarjetas ---------- */
.sdo-lista { display: flex; flex-direction: column; gap: 8px; }
.sdo-lg { border-radius: 18px; border: 1px solid var(--sdo-linea); background: var(--sdo-vidrio3); overflow: hidden; }
.sdo-lg.is-on { border-color: rgba(var(--sdo-celrgb), .8); background: rgba(var(--sdo-celrgb), .1); }
.sdo-lg__b { appearance: none; width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; gap: 12px; align-items: center; padding: 12px; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.sdo-lg__i { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--sdo-az); background: rgba(var(--sdo-azrgb), .09); }
[data-theme='dark'] .sdo-lg__i { color: #9db9ff; background: rgba(143, 180, 255, .16); }
.sdo-lg__t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sdo-lg__t > b { font-size: 14.5px; }
.sdo-lg__d { color: var(--sdo-tenue); overflow-wrap: anywhere; }
.sdo-lg__s { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.sdo-ref { display: block; font-size: 12.5px; font-style: italic; color: var(--sdo-suave); overflow-wrap: anywhere; }
.sdo-ref::before { content: 'Ref.: '; font-style: normal; font-weight: 800; }
.sdo-lg__r { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--sdo-linea2); }
.sdo-lg.is-on .sdo-lg__r { border-color: var(--sdo-cel); background: radial-gradient(circle, var(--sdo-cel) 0 45%, transparent 48%); }
.sdo-lg__acc { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px 64px; }
.sdo-mas { appearance: none; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 2px; padding: 8px 14px; border-radius: 16px; border: 1.5px dashed var(--sdo-linea2); background: transparent; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--sdo-az); cursor: pointer; }
[data-theme='dark'] .sdo-mas { color: #9db9ff; }

/* ---------- B y C · fichas ---------- */
.sdo-fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.sdo-ficha { appearance: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; max-width: 100%; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--sdo-linea2); background: var(--sdo-vidrio3); font: inherit; font-size: 13.5px; font-weight: 800; color: inherit; cursor: pointer; }
.sdo-ficha span { min-width: 0; overflow-wrap: anywhere; }
.sdo-ficha.is-on { color: #fff; border-color: transparent; background: linear-gradient(135deg, #03269b, #3592cf); }
.sdo-ficha__m { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; color: var(--sdo-az); background: rgba(255, 255, 255, .85); }
.sdo-ficha__m--v { color: #15724a; }
.sdo-ficha--mas { border-style: dashed; color: var(--sdo-az); background: transparent; }
[data-theme='dark'] .sdo-ficha--mas { color: #9db9ff; }
.sdo-ficha--mas.is-on { color: #fff; border-style: solid; }

/* B · el detalle con su mapa a un lado */
.sdo-det { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 18px; border: 1px solid var(--sdo-linea); background: var(--sdo-vidrio3); }
.sdo-det__m { min-width: 0; }
.sdo-det__m .sdo-mapa, .sdo-det__m .sdo-mp--vacio { height: 128px; }
.sdo-det__t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sdo-det__t > b { font-size: 15px; }
.sdo-det__d { color: var(--sdo-tenue); overflow-wrap: anywhere; }
.sdo-det__acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* C · el mapa grande arriba */
.sdo-mc { border-radius: 18px; border: 1px solid var(--sdo-linea); background: var(--sdo-vidrio3); overflow: hidden; }
.sdo-mc__m .sdo-mapa, .sdo-mc__m .sdo-mp--vacio { height: 150px; border-radius: 0; }
.sdo-mc__m .sdo-mp--vacio { min-height: 0; height: 96px; }
.sdo-mc__pie { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
.sdo-mc__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sdo-mc__t > b { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; }
.sdo-mc__t > span:not(.sdo-lg__s) { color: var(--sdo-tenue); overflow-wrap: anywhere; }
.sdo-mc__nuevo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--sdo-amb); }

/* ---------- el croquis / el mapa ---------- */
.sdo-mapa { position: relative; overflow: hidden; border-radius: 14px; background: var(--sdo-mp-f); }
.sdo-mp { display: block; width: 100%; height: 100%; }
.sdo-mp__f { fill: var(--sdo-mp-f); }
.sdo-mp__m { fill: var(--sdo-mp-m); }
.sdo-mp__a { fill: var(--sdo-mp-a); }
.sdo-mp__v { stroke: var(--sdo-mp-v); stroke-width: 7; }
.sdo-mp__v--g { stroke: var(--sdo-mp-g); stroke-width: 9; }
.sdo-mp__halo { fill: rgba(211, 58, 44, .18); }
.sdo-mp__pin { fill: var(--sdo-mp-pin); }
.sdo-mp__dot { fill: #fff; }
.sdo-mp--vacio { display: grid; place-items: center; min-height: 110px; border-radius: 14px; background: var(--sdo-campo); border: 1.5px dashed var(--sdo-linea2); color: var(--sdo-suave); text-align: center; padding: 12px; }
.sdo-mp--vacio span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; }
.sdo-mp--vacio svg { margin: 0 auto; }

/* ---------- el formulario de agregar / editar ---------- */
.sdo-form { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 20px; border: 1px solid var(--sdo-linea2); background: var(--sdo-vidrio3); }
.sdo-form__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sdo-form__cab > b { font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.sdo-x { appearance: none; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--sdo-linea2); background: transparent; display: grid; place-items: center; color: inherit; cursor: pointer; }
.sdo-f { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.sdo-f__l { font-size: 12.5px; font-weight: 800; }
.sdo-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sdo-chip { appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--sdo-linea2); background: var(--sdo-campo); font: inherit; font-size: 13px; font-weight: 800; color: inherit; cursor: pointer; }
.sdo-chip.is-on { color: #fff; border-color: transparent; background: linear-gradient(135deg, #03269b, #3592cf); }
.sdo-in { width: 100%; min-width: 0; min-height: 44px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--sdo-linea2); background: var(--sdo-campo); font: inherit; font-size: 14px; font-weight: 600; color: var(--sdo-tinta); outline: 0; }
.sdo-in::placeholder { color: var(--sdo-suave); font-weight: 500; }
.sdo-in:focus { border-color: rgba(var(--sdo-celrgb), .8); box-shadow: 0 0 0 3px rgba(var(--sdo-celrgb), .28); }
[data-theme='dark'] .sdo-in { color-scheme: dark; }
.sdo-camp { display: flex; gap: 8px; align-items: stretch; }
.sdo-camp > [data-sdo-z='f-leer'], .sdo-form > [data-sdo-z='f-err'], .sdo-form > [data-sdo-z='f-vista'] { display: contents; }
.sdo-camp .sdo-in { flex: 1 1 auto; }
.sdo-vista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 16px; background: var(--sdo-campo); border: 1px solid var(--sdo-linea); }
.sdo-vista__m { min-width: 0; }
.sdo-vista__m .sdo-mapa { height: 128px; }
.sdo-vista__t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sdo-etq { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sdo-tenue); }
.sdo-vista__p { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 12px; color: var(--sdo-tenue); overflow-wrap: anywhere; }
.sdo-vista__p a { color: var(--sdo-az); font-weight: 800; }
[data-theme='dark'] .sdo-vista__p a { color: #9db9ff; }
.sdo-form__b .sdo-btn--pri { flex: 2 1 240px; }
.sdo-form__b .sdo-btn--sec { flex: 1 1 110px; }
.sdo-chk { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.sdo-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sdo-chk__c { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: transparent; background: var(--sdo-campo); box-shadow: inset 0 0 0 1.5px var(--sdo-suave); }
.sdo-chk input:checked + .sdo-chk__c { color: #fff; background: var(--sdo-az); box-shadow: none; }
[data-theme='dark'] .sdo-chk input:checked + .sdo-chk__c { background: #2563eb; }
.sdo-chk input:focus-visible + .sdo-chk__c { box-shadow: 0 0 0 3px rgba(var(--sdo-celrgb), .5); }
.sdo-chk__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sdo-chk__t b { font-size: 13.5px; }
.sdo-chk__t small { font-size: 12px; color: var(--sdo-tenue); }
.sdo-form__b { display: flex; flex-wrap: wrap; gap: 8px; }
.sdo-form__b .sdo-btn { flex: 1 1 110px; }
.sdo-form__b .sdo-nota { flex: 1 1 100%; }

/* ---------- según el ancho que le den (la tarjeta de la Agenda es angosta; Nuevo servicio, ancha) ---------- */
@container sdo (min-width: 440px) {
  .sdo[data-v='A'] .sdo-vista, .sdo[data-v='B'] .sdo-vista { grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); }
  .sdo[data-v='A'] .sdo-vista__m .sdo-mapa, .sdo[data-v='B'] .sdo-vista__m .sdo-mapa { height: 100%; min-height: 128px; }
  .sdo-det { grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); }
  .sdo-det__m .sdo-mapa, .sdo-det__m .sdo-mp--vacio { height: 100%; min-height: 118px; }
}
@container sdo (max-width: 360px) {
  .sdo-lg__acc { padding-left: 12px; }
  .sdo-camp { flex-direction: column; }
  .sdo-btn--leer { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .sdo *, .sdo *::before, .sdo *::after { animation: none !important; transition: none !important; } }