/* ============================================================
   DANGOFE OS · Portal del técnico · «IMPREVISTO: pasar a la tarde u otro día» (prefijo pim-) · S7 · 2026-10-16
   Karla: «avisar el retraso y pasar a la tarde o a otro día; el TÉCNICO debe poder elegirlas desde su portal».
   Pieza del chat de Diseño, misma familia que la hoja del cobro (.pcb), el checklist (.chkh) y el motivo (.pmt):
   velo con desenfoque, hoja de cristal desde abajo (tarjeta centrada en pantallas anchas), SIN sombras,
   Plus Jakarta Sans, claro y «Noche azul» por [data-theme='dark'] o .is-noche.
   Tres versiones por data-v en la hoja: A · Lista (todo de corrido) · B · Calendario (tira de días) · C · Pasos (uno a la vez).
   ============================================================ */
/* el botón discreto en la tarjeta de la parada (lo pone portal_tecnico.js con DangofeOS.imprevisto.botonHTML) */
.pim-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 13px; border-radius: 999px;
  border: 1px dashed rgba(194, 117, 0, .55); background: rgba(194, 117, 0, .08); color: #9a5b00;
  font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.2;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pim-btn svg { width: 16px; height: 16px; flex: none; }
.pim-btn:active { transform: scale(.98); }
[data-theme='dark'] .pim-btn, .is-noche .pim-btn { color: #fcd34d; border-color: rgba(252, 211, 77, .45); background: rgba(252, 211, 77, .1); }

.pim-velo {
  --pim-az: 3, 38, 155; --pim-cel: 53, 146, 207; --pim-ok: 29, 154, 91; --pim-amb: 194, 117, 0; --pim-mal: 192, 57, 43;
  --pim-tinta: #0a1633; --pim-tenue: #5b6880; --pim-suave: #93a0b8; --pim-azul-txt: #03269b; --pim-amb-txt: #9a5b00; --pim-mal-txt: #a52f20; --pim-ok-txt: #15803d;
  --pim-vidrio: rgba(255, 255, 255, .76); --pim-vidrio2: rgba(255, 255, 255, .9); --pim-borde: rgba(255, 255, 255, .9);
  --pim-linea: rgba(10, 22, 51, .09); --pim-campo: rgba(10, 22, 51, .05); --pim-pri: #03269b; --pim-pri-txt: #fff; --pim-fondo-hoja: #fff;
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(10, 22, 51, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: pim-aparece .3s ease both;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--pim-tinta);
}
[data-theme='dark'] .pim-velo, .pim-velo.is-noche {
  --pim-tinta: #f2f5fb; --pim-tenue: #a9b4c9; --pim-suave: #6f7a93; --pim-azul-txt: #8fb4ff; --pim-amb-txt: #fcd34d; --pim-mal-txt: #fca5a5; --pim-ok-txt: #4ade80;
  --pim-vidrio: rgba(12, 22, 60, .82); --pim-vidrio2: rgba(20, 34, 84, .9); --pim-borde: rgba(140, 170, 255, .28);
  --pim-linea: rgba(255, 255, 255, .11); --pim-campo: rgba(255, 255, 255, .06); --pim-pri: #2e5bd9; --pim-fondo-hoja: #0b1220;
  background: rgba(2, 6, 24, .6);
}
.pim-velo *, .pim-velo *::before, .pim-velo *::after { box-sizing: border-box; }
.pim-velo b { font-weight: 800; }
.pim-velo button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pim-velo button:focus-visible, .pim-velo textarea:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--pim-cel), .35); }
.pim-velo.is-fuera { animation: pim-aparece .25s ease reverse both; pointer-events: none; }
@keyframes pim-aparece { from { opacity: 0; } }
@keyframes pim-sube { from { transform: translateY(40px); opacity: 0; } }
@keyframes pim-baja { to { transform: translateY(30px); opacity: 0; } }
@keyframes pim-sube-poco { from { transform: translateY(10px); opacity: 0; } }
.pim-hoja {
  position: relative; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column;
  padding: 10px 18px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 30px 30px 0 0;
  border: 1px solid var(--pim-borde); border-bottom: 0; background: var(--pim-vidrio);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  animation: pim-sube .55s cubic-bezier(.2, .9, .25, 1) both; outline: 0;
}
.pim-velo.is-fuera .pim-hoja { animation: pim-baja .28s ease both; }
@media (min-width: 700px) {
  .pim-velo { align-items: center; padding: 20px; }
  .pim-hoja { border-radius: 28px; border-bottom: 1px solid var(--pim-borde); max-height: min(88dvh, 820px); padding-bottom: 16px; }
  .pim-asa { display: none; }
}
.pim-asa { flex: none; width: 42px; height: 5px; margin: 0 auto 12px; border-radius: 999px; background: var(--pim-linea); }
.pim-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--pim-linea); background: var(--pim-campo); color: var(--pim-tenue); display: grid; place-items: center; padding: 0; }
.pim-x svg { width: 18px; height: 18px; }
.pim-cuerpo { min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 0 2px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.pim-cuerpo::-webkit-scrollbar { display: none; }
.pim-cab { padding-right: 44px; }
.pim-ojal { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--pim-amb-txt); }
.pim-ojal i { width: 18px; height: 1px; background: currentColor; opacity: .6; }
.pim-tit { margin: 4px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; }
.pim-quien { margin: 4px 0 0; font-size: 14px; color: var(--pim-tenue); line-height: 1.4; }
.pim-quien b { color: var(--pim-tinta); }
.pim-sec { display: flex; flex-direction: column; gap: 8px; animation: pim-sube-poco .45s cubic-bezier(.2, .9, .25, 1) both; }
.pim-sec h4 { margin: 2px 0 0; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pim-tenue); display: flex; align-items: center; gap: 8px; }
.pim-sec h4 svg, .pim-ojal svg { width: 14px; height: 14px; flex: none; }
.pim-sec h4 small { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--pim-suave); }
.pim-sec h4 .pim-req { color: var(--pim-mal-txt); }

/* ---------- opción «A la tarde de hoy» y los días ---------- */
.pim-op {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 18px; border: 1px solid var(--pim-linea); background: var(--pim-vidrio2); transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.pim-op:active { transform: scale(.99); }
.pim-op.is-on { border-color: rgba(var(--pim-az), .55); box-shadow: inset 0 0 0 1.5px rgba(var(--pim-az), .45); }
.pim-op[disabled] { opacity: .6; cursor: not-allowed; }
.pim-op__ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(var(--pim-amb), .14); color: var(--pim-amb-txt); }
.pim-op__ic svg { width: 20px; height: 20px; }
.pim-op__ic--dia { background: rgba(var(--pim-cel), .14); color: var(--pim-azul-txt); }
.pim-op__t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pim-op__t b { font-size: 15px; line-height: 1.2; }
.pim-op__t span { font-size: 12.5px; color: var(--pim-tenue); line-height: 1.35; }
.pim-op__t span.is-mal { color: var(--pim-mal-txt); }
.pim-op__marca { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--pim-linea); display: grid; place-items: center; color: #fff; flex: none; }
.pim-op__marca svg { width: 14px; height: 14px; opacity: 0; }
.pim-op.is-on .pim-op__marca { background: var(--pim-pri); border-color: var(--pim-pri); }
.pim-op.is-on .pim-op__marca svg { opacity: 1; }
/* el día con sus dos tandas */
.pim-dia { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-radius: 18px; border: 1px solid var(--pim-linea); background: var(--pim-vidrio2); transition: border-color .2s ease; }
.pim-dia.is-on { border-color: rgba(var(--pim-az), .55); box-shadow: inset 0 0 0 1.5px rgba(var(--pim-az), .45); }
.pim-dia__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pim-dia__cab b { font-size: 14.5px; }
.pim-dia__cab b::first-letter { text-transform: uppercase; }
.pim-dia__cab small { font-size: 12px; color: var(--pim-suave); white-space: nowrap; }
.pim-tandas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pim-tanda {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 11px; border-radius: 14px; text-align: left;
  border: 1px solid var(--pim-linea); background: var(--pim-campo); transition: border-color .2s ease, background .2s ease;
}
.pim-tanda b { font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.pim-tanda b svg { width: 14px; height: 14px; color: var(--pim-amb-txt); }
.pim-tanda--t b svg { color: var(--pim-azul-txt); }
.pim-tanda span { font-size: 12px; color: var(--pim-tenue); font-variant-numeric: tabular-nums; }
.pim-tanda em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--pim-ok-txt); }
.pim-tanda em.is-lleno { color: var(--pim-amb-txt); }
.pim-tanda.is-on { border-color: rgba(var(--pim-az), .6); background: rgba(var(--pim-az), .1); }
.pim-tanda.is-on b { color: var(--pim-azul-txt); }
.pim-tanda[disabled] { opacity: .45; cursor: not-allowed; }

/* v2: el porqué en cada tanda, «va llena», los que quedan cerca */
.pim-tanda small { display: block; font-size: 11.5px; color: var(--pim-tenue); line-height: 1.3; margin-top: 2px; }
.pim-tanda i, .pim-op__t i { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 11px; font-weight: 800; color: var(--pim-azul-txt); margin-top: 2px; }
.pim-tanda i svg, .pim-op__t i svg { width: 11px; height: 11px; }
.pim-tanda.is-llena { border-color: rgba(var(--pim-amb), .45); background: rgba(var(--pim-amb), .07); }
.pim-tanda.is-llena.is-on { border-color: rgba(var(--pim-az), .6); background: rgba(var(--pim-az), .1); }
.pim-op.is-llena .pim-op__t b em, .pim-op__t b em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--pim-ok-txt); margin-left: 6px; }
.pim-op.is-llena .pim-op__t b em { color: var(--pim-amb-txt); }
/* v2: la recomendación, arriba y marcada */
.pim-rec {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(var(--pim-az), .25);
  background: linear-gradient(135deg, rgba(var(--pim-az), .12), rgba(var(--pim-cel), .06)), var(--pim-vidrio2);
  transition: border-color .2s ease, transform .15s ease; animation: pim-sube-poco .45s cubic-bezier(.2, .9, .25, 1) both;
}
.pim-rec:active { transform: scale(.99); }
.pim-rec.is-on { border-color: rgba(var(--pim-az), .65); box-shadow: inset 0 0 0 1.5px rgba(var(--pim-az), .5); }
.pim-rec__ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 60%), var(--pim-pri); }
.pim-rec__ic svg { width: 20px; height: 20px; }
.pim-rec__t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pim-rec__t small { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pim-azul-txt); }
.pim-rec__t span { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--pim-tinta); }
.pim-rec__sello { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; color: var(--pim-azul-txt); background: rgba(var(--pim-az), .1); vertical-align: 2px; }
.pim-rec__sello svg { width: 11px; height: 11px; }
/* v2: «ten en cuenta», antes de confirmar */
.pim-cuidado { display: flex; flex-direction: column; gap: 6px; padding: 11px 13px; border-radius: 16px; border: 1px solid rgba(var(--pim-amb), .35); background: rgba(var(--pim-amb), .09); animation: pim-sube-poco .4s cubic-bezier(.2, .9, .25, 1) both; }
.pim-cuidado b { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pim-amb-txt); }
.pim-cuidado b svg { width: 14px; height: 14px; }
.pim-cuidado span { font-size: 13.5px; line-height: 1.4; color: var(--pim-tinta); padding-left: 20px; position: relative; }
.pim-cuidado span::before { content: ''; position: absolute; left: 6px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--pim-amb)); }

/* ---------- motivo y nota ---------- */
.pim-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pim-chip { min-height: 38px; padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--pim-tinta); background: var(--pim-campo); border: 1px solid transparent; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.pim-chip.is-on { background: rgba(var(--pim-az), .12); color: var(--pim-azul-txt); border-color: rgba(var(--pim-az), .35); }
.pim-nota { width: 100%; min-height: 76px; padding: 11px 13px; border-radius: 16px; border: 1px solid var(--pim-linea); background: var(--pim-campo); color: var(--pim-tinta); font: inherit; font-size: 16px; line-height: 1.4; resize: vertical; outline: 0; }
.pim-nota::placeholder { color: var(--pim-suave); }
.pim-nota:focus { border-color: rgba(var(--pim-cel), .6); }
.pim-nota.is-mal { border-color: rgba(var(--pim-mal), .6); }

/* ---------- resumen, error, pie ---------- */
.pim-resumen { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(var(--pim-az), .08); color: var(--pim-azul-txt); font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.pim-resumen svg { width: 18px; height: 18px; flex: none; }
.pim-resumen span { min-width: 0; }
.pim-resumen span::first-letter { text-transform: uppercase; }
.pim-err { display: none; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--pim-mal), .1); color: var(--pim-mal-txt); font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.pim-err.is-on { display: flex; }
.pim-err svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.pim-pie { flex: none; display: flex; gap: 8px; padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--pim-linea); }
.pim-pie .pim-b { flex: 1; }
.pim-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--pim-linea); background: var(--pim-campo); color: var(--pim-tinta); font-weight: 800; font-size: 15px; transition: transform .15s ease, opacity .2s ease; white-space: nowrap; }
.pim-b svg { width: 18px; height: 18px; flex: none; }
.pim-b:active { transform: scale(.97); }
.pim-b--pri { background: var(--pim-pri); color: var(--pim-pri-txt); border-color: transparent; }
.pim-b--sut { flex: 0 0 auto !important; }
.pim-b[disabled] { opacity: .45; pointer-events: none; }
.pim-b.is-cargando { opacity: .7; pointer-events: none; }
.pim-b--wa { background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 55%), rgba(37, 211, 102, .95); color: #fff; border-color: transparent; text-decoration: none; }

/* ---------- cargando / listo / error de carga ---------- */
.pim-carga { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.pim-carga i { display: block; border-radius: 18px; background: var(--pim-campo); animation: pim-brilla 1.4s ease-in-out infinite; }
@keyframes pim-brilla { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.pim-listo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 10px 6px 4px; }
.pim-listo__ic { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%), rgba(var(--pim-ok), .95); box-shadow: 0 0 0 8px rgba(var(--pim-ok), .14); animation: pim-pop .6s cubic-bezier(.34, 1.45, .64, 1) both; }
.pim-listo__ic svg { width: 32px; height: 32px; }
.pim-listo__ic--mal { background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%), rgba(var(--pim-mal), .92); box-shadow: 0 0 0 8px rgba(var(--pim-mal), .12); }
@keyframes pim-pop { from { transform: scale(.5); opacity: 0; } }
.pim-listo h3 { margin: 4px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; text-wrap: balance; }
.pim-listo p { margin: 0; font-size: 14px; color: var(--pim-tenue); line-height: 1.45; max-width: 40ch; text-wrap: pretty; }
.pim-listo p b { color: var(--pim-tinta); }
.pim-listo__nueva { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(var(--pim-az), .1); color: var(--pim-azul-txt); font-weight: 800; font-size: 14px; }
.pim-listo__nueva svg { width: 16px; height: 16px; }
.pim-listo__nueva span::first-letter { text-transform: uppercase; }
.pim-listo__correo { font-size: 12.5px; color: var(--pim-tenue); display: inline-flex; align-items: center; gap: 6px; }
.pim-listo__correo svg { width: 14px; height: 14px; }

/* ============================================================ B · Calendario ============================================================ */
.pim-tira { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pim-tira::-webkit-scrollbar { display: none; }
.pim-fecha { flex: 0 0 72px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 9px; border-radius: 18px; border: 1px solid var(--pim-linea); background: var(--pim-vidrio2); transition: border-color .2s ease, background .2s ease; }
.pim-fecha small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pim-tenue); }
.pim-fecha b { font-size: 24px; line-height: 1; letter-spacing: -.02em; }
.pim-fecha span { font-size: 11px; color: var(--pim-suave); }
.pim-fecha em { font-style: normal; margin-top: 4px; font-size: 10.5px; font-weight: 800; color: var(--pim-ok-txt); }
.pim-fecha.is-on { border-color: rgba(var(--pim-az), .6); background: rgba(var(--pim-az), .1); }
.pim-fecha.is-on b, .pim-fecha.is-on small { color: var(--pim-azul-txt); }
.pim-fecha--hoy { background: rgba(var(--pim-amb), .1); }
.pim-fecha--hoy small { color: var(--pim-amb-txt); }
.pim-fecha[disabled] { opacity: .45; cursor: not-allowed; }
.pim-fecha--hoy.is-on { border-color: rgba(var(--pim-amb), .6); background: rgba(var(--pim-amb), .16); }
.pim-fecha--hoy.is-on b, .pim-fecha--hoy.is-on small { color: var(--pim-amb-txt); }
.pim-tandas--b { animation: pim-sube-poco .35s cubic-bezier(.2, .9, .25, 1) both; }

/* ============================================================ C · Pasos ============================================================ */
.pim-pasos { display: flex; align-items: center; gap: 6px; }
.pim-pasos i { height: 6px; flex: 1; border-radius: 999px; background: var(--pim-linea); transition: background .3s ease; }
.pim-pasos i.is-hecho { background: rgba(var(--pim-ok), .8); }
.pim-pasos i.is-ahora { background: var(--pim-pri); }
.pim-paso__t { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pim-tenue); }
.pim-hoja[data-v='C'] .pim-tit { font-size: 20px; }
.pim-resumen--c { flex-direction: column; align-items: flex-start; gap: 6px; font-weight: 600; color: var(--pim-tinta); background: var(--pim-vidrio2); border: 1px solid var(--pim-linea); padding: 12px 14px; }
.pim-resumen--c div { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.35; }
.pim-resumen--c div span:first-child { color: var(--pim-tenue); flex: none; min-width: 72px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding-top: 1px; }

@media (prefers-reduced-motion: reduce) { .pim-velo, .pim-hoja, .pim-sec, .pim-listo__ic, .pim-tandas--b, .pim-carga i { animation: none !important; } }
html.pim-bloqueo, html.pim-bloqueo body { overflow: hidden !important; }