/* ============================================================
   DANGOFE OS · Portal del técnico · «TE PASASTE DEL TIEMPO» (prefijo pmt-)
   La hoja del motivo cuando un servicio se pasa del estimado + margen (S11 · 1.0.291). Pieza del chat de
   Diseño, misma familia que la hoja del cobro (.pcb) y la del checklist (.chkh): velo con desenfoque, hoja
   de cristal desde abajo (tarjeta centrada en pantallas anchas), sin sombras, letra Plus Jakarta Sans,
   claro y «Noche azul» por [data-theme='dark'].
   ============================================================ */
.pmt-velo {
  --pmt-az: 3, 38, 155; --pmt-cel: 53, 146, 207; --pmt-ok: 29, 154, 91; --pmt-amb: 194, 117, 0; --pmt-mal: 192, 57, 43;
  --pmt-tinta: #0a1633; --pmt-tenue: #5b6880; --pmt-suave: #93a0b8; --pmt-azul-txt: #03269b; --pmt-amb-txt: #9a5b00; --pmt-mal-txt: #a52f20;
  --pmt-vidrio: rgba(255, 255, 255, .76); --pmt-vidrio2: rgba(255, 255, 255, .9); --pmt-borde: rgba(255, 255, 255, .9);
  --pmt-linea: rgba(10, 22, 51, .09); --pmt-campo: rgba(10, 22, 51, .05); --pmt-pri: #03269b; --pmt-pri-txt: #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);
  perspective: 1100px; perspective-origin: 50% 100%; animation: pmt-aparece .3s ease both;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--pmt-tinta);
}
[data-theme='dark'] .pmt-velo, .pmt-velo.is-noche {
  --pmt-tinta: #f2f5fb; --pmt-tenue: #a9b4c9; --pmt-suave: #6f7a93; --pmt-azul-txt: #8fb4ff; --pmt-amb-txt: #fcd34d; --pmt-mal-txt: #fca5a5;
  --pmt-vidrio: rgba(12, 22, 60, .8); --pmt-vidrio2: rgba(20, 34, 84, .9); --pmt-borde: rgba(140, 170, 255, .28);
  --pmt-linea: rgba(255, 255, 255, .11); --pmt-campo: rgba(255, 255, 255, .06); --pmt-pri: #2e5bd9;
  background: rgba(2, 6, 24, .6);
}
.pmt-velo *, .pmt-velo *::before, .pmt-velo *::after { box-sizing: border-box; }
.pmt-velo b { font-weight: 800; }
.pmt-velo.is-fuera { animation: pmt-aparece .25s ease reverse both; pointer-events: none; }
.pmt-hoja {
  position: relative; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 30px 30px 0 0;
  border: 1px solid var(--pmt-borde); border-bottom: 0; background: var(--pmt-vidrio);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  transform-origin: 50% 100%; animation: pmt-sube .6s cubic-bezier(.2, .9, .25, 1) both; outline: 0;
}
.pmt-velo.is-fuera .pmt-hoja { animation: pmt-baja .28s ease both; }
.pmt-asa { flex: none; width: 42px; height: 5px; margin: 0 auto 12px; border-radius: 999px; background: var(--pmt-linea); }
.pmt-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--pmt-linea); background: var(--pmt-campo); color: var(--pmt-tenue); display: grid; place-items: center; cursor: pointer; padding: 0; font: inherit; }
.pmt-x svg { width: 18px; height: 18px; }
.pmt-cuerpo { min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 0 2px; display: flex; flex-direction: column; gap: 12px; }
.pmt-cuerpo::-webkit-scrollbar { display: none; }
.pmt-cab { padding-right: 44px; }
.pmt-ojal { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--pmt-azul-txt); }
.pmt-ojal i { width: 18px; height: 1px; background: currentColor; opacity: .6; }
.pmt-tit { margin: 4px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.pmt-quien { margin: 4px 0 0; font-size: 14px; color: var(--pmt-tenue); line-height: 1.4; }
.pmt-quien b { color: var(--pmt-tinta); }
/* el tiempo: cuánto se pasó y la barra estimado · margen · pasado */
.pmt-tiempo { padding: 12px 14px 12px; border-radius: 18px; border: 1px solid var(--pmt-linea); background: var(--pmt-vidrio2); display: flex; flex-direction: column; gap: 8px; animation: pmt-sube-poco .5s cubic-bezier(.2, .9, .25, 1) .1s both; }
.pmt-tiempo__cifras { display: flex; align-items: baseline; gap: 8px; }
.pmt-tiempo__mas { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--pmt-mal-txt); font-variant-numeric: tabular-nums; }
.pmt-tiempo__cifras span { font-size: 13px; color: var(--pmt-tenue); }
.pmt-barra { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--pmt-campo); }
.pmt-barra i { display: block; height: 100%; }
.pmt-barra__est { background: rgb(var(--pmt-az)); border-radius: 999px 0 0 999px; }
.pmt-barra__mar { background: rgb(var(--pmt-amb)); }
.pmt-barra__exc { background: rgb(var(--pmt-mal)); border-radius: 0 999px 999px 0; animation: pmt-late 1.6s ease-in-out infinite; }
.pmt-barra i:last-child { border-radius: 0 999px 999px 0; }
.pmt-tiempo__leyenda { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--pmt-tenue); }
.pmt-tiempo__leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.pmt-tiempo__leyenda i { width: 8px; height: 8px; border-radius: 50%; }
.pmt-tiempo__leyenda .is-est { background: rgb(var(--pmt-az)); } .pmt-tiempo__leyenda .is-mar { background: rgb(var(--pmt-amb)); } .pmt-tiempo__leyenda .is-exc { background: rgb(var(--pmt-mal)); }
[data-theme='dark'] .pmt-tiempo__leyenda .is-est, .is-noche .pmt-tiempo__leyenda .is-est, [data-theme='dark'] .pmt-barra__est, .is-noche .pmt-barra__est { background: #8fb4ff; }
.pmt-tiempo__pie { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pmt-tenue); }
.pmt-tiempo__pie svg { width: 15px; height: 15px; }
/* la regla */
.pmt-regla { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: var(--pmt-campo); font-size: 13.5px; line-height: 1.4; color: var(--pmt-tenue); }
.pmt-regla svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--pmt-azul-txt); }
.pmt-regla b { color: var(--pmt-tinta); }
/* los motivos en cápsulas */
.pmt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pmt-chip { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--pmt-linea); background: var(--pmt-vidrio2); color: var(--pmt-tinta); font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.2; text-align: left; cursor: pointer; transition: transform .2s, border-color .25s, background .25s, color .25s; -webkit-tap-highlight-color: transparent; animation: pmt-sube-poco .45s cubic-bezier(.2, .9, .25, 1) both; }
.pmt-chip:nth-child(2) { animation-delay: .04s; } .pmt-chip:nth-child(3) { animation-delay: .08s; } .pmt-chip:nth-child(4) { animation-delay: .12s; } .pmt-chip:nth-child(5) { animation-delay: .16s; }
.pmt-chip:active { transform: scale(.97); }
.pmt-chip.is-on { background: var(--pmt-pri); border-color: transparent; color: var(--pmt-pri-txt); }
/* el campo libre */
.pmt-campo { display: flex; flex-direction: column; gap: 6px; }
.pmt-campo > span { font-size: 12.5px; font-weight: 700; color: var(--pmt-tenue); padding-left: 4px; }
.pmt-campo > span em { font-style: normal; font-weight: 600; opacity: .8; }
.pmt-campo textarea { width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--pmt-linea); background: var(--pmt-vidrio2); color: inherit; font: inherit; font-size: 15px; line-height: 1.4; resize: vertical; outline: none; transition: box-shadow .2s; }
.pmt-campo textarea::placeholder { color: var(--pmt-suave); }
.pmt-campo textarea:focus { box-shadow: 0 0 0 3px rgba(var(--pmt-cel), .28); }
/* error, pie, enviando, listo */
.pmt-err { display: none; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--pmt-mal), .12); color: var(--pmt-mal-txt); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.pmt-err.is-on { display: flex; animation: pmt-sube-poco .3s ease both; }
.pmt-err svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.pmt-pie { flex: none; display: flex; flex-direction: column; gap: 4px; padding-top: 12px; }
.pmt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .2s, opacity .2s; }
.pmt-btn:active { transform: scale(.97); }
.pmt-btn svg { width: 18px; height: 18px; }
.pmt-btn--pri { width: 100%; min-height: 54px; padding: 0 16px; border: 0; background: var(--pmt-pri); color: var(--pmt-pri-txt); font-size: 16.5px; }
.pmt-btn--pri[disabled] { opacity: .45; pointer-events: none; }
.pmt-btn--txt { width: 100%; min-height: 44px; border: 0; background: transparent; color: var(--pmt-tenue); font-size: 14px; font-weight: 700; }
.pmt-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: pmt-gira .8s linear infinite; }
.pmt-hoja.is-enviando .pmt-chip, .pmt-hoja.is-enviando .pmt-campo, .pmt-hoja.is-enviando .pmt-x { pointer-events: none; opacity: .6; }
.pmt-listo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 10px 16px; animation: pmt-sube-poco .4s ease both; }
.pmt-listo__ic { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--pmt-ok)); color: #fff; animation: pmt-pop .55s cubic-bezier(.34, 1.45, .64, 1) both; }
.pmt-listo__ic svg { width: 38px; height: 38px; }
.pmt-listo b { font-size: 22px; letter-spacing: -.01em; }
.pmt-listo p { margin: 0; font-size: 14px; color: var(--pmt-tenue); line-height: 1.4; max-width: 34ch; }
/* pantallas anchas */
@media (min-width: 700px) {
  .pmt-velo { align-items: center; padding: 20px; }
  .pmt-hoja { max-width: 480px; max-height: calc(100vh - 40px); border-radius: 30px; border-bottom: 1px solid var(--pmt-borde); padding-top: 22px; padding-bottom: 18px; animation-name: pmt-sube-centro; }
  .pmt-velo.is-fuera .pmt-hoja { animation-name: pmt-baja-centro; }
  .pmt-asa { display: none; }
}
/* movimiento */
@keyframes pmt-aparece { from { opacity: 0; } }
@keyframes pmt-sube { from { opacity: 0; transform: translateY(70px) rotateX(14deg); } }
@keyframes pmt-baja { to { opacity: 0; transform: translateY(60px); } }
@keyframes pmt-sube-centro { from { opacity: 0; transform: translateY(40px) rotateX(12deg) scale(.97); } }
@keyframes pmt-baja-centro { to { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes pmt-sube-poco { from { opacity: 0; transform: translateY(12px); } }
@keyframes pmt-pop { from { transform: scale(.4); opacity: 0; } }
@keyframes pmt-gira { to { transform: rotate(360deg); } }
@keyframes pmt-late { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .pmt-velo, .pmt-hoja, .pmt-tiempo, .pmt-chip, .pmt-listo, .pmt-listo__ic, .pmt-err.is-on, .pmt-barra__exc { animation: none !important; } }
html.pmt-bloqueo, html.pmt-bloqueo body { overflow: hidden !important; }