/* DANGOFE OS · Portal del técnico · «¿Por qué vas tarde?» (portal-retraso v1.0.0, chat de Diseño). Vidrio, sin sombras; claro y Noche azul. */
.prt-velo { position: fixed; inset: 0; z-index: 9400; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: rgba(8, 18, 54, .34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: prt-velo .22s ease-out both;
  --prt-bg: rgba(255,255,255,.84); --prt-borde: rgba(255,255,255,.9); --prt-txt: #0b1540; --prt-txt2: #4b5a86; --prt-txt3: #6b7aa6; --prt-azul: #03269b; --prt-azul2: #2563eb; --prt-pill: rgba(3,38,155,.08); --prt-linea: rgba(3,38,155,.16);
  --prt-amb: #b45309; --prt-amb-bg: rgba(245,158,11,.16); --prt-ok: #15803d; --prt-ok-bg: rgba(22,163,74,.13); --prt-mal: #b91c1c; --prt-wa: #16a34a;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; color: var(--prt-txt); }
.prt-velo.is-noche, [data-theme='dark'] .prt-velo { background: rgba(2, 6, 24, .55); --prt-bg: rgba(12,22,64,.86); --prt-borde: rgba(140,170,255,.28); --prt-txt: #eef2ff; --prt-txt2: #b6c2ea; --prt-txt3: #8a98c9; --prt-azul: #8db0ff; --prt-azul2: #3b82f6; --prt-pill: rgba(141,176,255,.14); --prt-linea: rgba(141,176,255,.24);
  --prt-amb: #fbbf24; --prt-amb-bg: rgba(251,191,36,.16); --prt-ok: #4ade80; --prt-ok-bg: rgba(74,222,128,.14); --prt-mal: #fca5a5; --prt-wa: #4ade80; }
.prt-velo.is-fuera { animation: prt-velo .25s ease-in reverse both; }
@keyframes prt-velo { from { opacity: 0; } to { opacity: 1; } }
.prt-velo *, .prt-velo *::before, .prt-velo *::after { box-sizing: border-box; }
.prt-hoja { width: 100%; max-width: 560px; max-height: calc(100% - 24px); overflow: auto; border-radius: 26px 26px 0 0; border: 1px solid var(--prt-borde); border-bottom: 0; background: var(--prt-bg); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; outline: 0; animation: prt-sube .36s cubic-bezier(.2, .8, .2, 1) both; }
.prt-hoja::before { content: ''; display: block; width: 42px; height: 5px; border-radius: 999px; margin: 0 auto 2px; background: var(--prt-linea); }
.prt-velo.is-fuera .prt-hoja { animation: prt-sube .25s ease-in reverse both; }
@keyframes prt-sube { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
.prt-velo.is-quieto, .prt-velo.is-quieto .prt-hoja { animation: none; }
@media (min-width: 700px) { .prt-velo { align-items: center; padding: 16px; } .prt-hoja { border-radius: 26px; border-bottom: 1px solid var(--prt-borde); max-height: calc(100% - 32px); } .prt-hoja::before { display: none; } }
.prt-cab { display: flex; align-items: flex-start; gap: 12px; }
.prt-cab__ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--prt-amb-bg); color: var(--prt-amb); }
.prt-cab__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prt-cab__t b { font-size: 21px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.prt-cab__t span { font-size: 14px; color: var(--prt-txt2); overflow-wrap: anywhere; }
.prt-cab__ya { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--prt-amb); }
.prt-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--prt-linea); background: var(--prt-pill); color: var(--prt-txt2); display: grid; place-items: center; cursor: pointer; }
.prt-cuerpo { display: flex; flex-direction: column; gap: 10px; }
.prt-preg { margin: 0; font-size: 15px; font-weight: 800; }
.prt-pista { margin: 0; font-size: 13.5px; color: var(--prt-txt3); line-height: 1.4; }
.prt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.prt-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1px solid var(--prt-linea); background: var(--prt-pill); color: var(--prt-txt); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.prt-chip svg { flex: none; color: var(--prt-azul); }
.prt-chip.is-on { background: var(--prt-azul); border-color: transparent; color: #fff; } .prt-chip.is-on svg { color: #fff; }
[data-theme='dark'] .prt-chip.is-on, .is-noche .prt-chip.is-on { background: var(--prt-azul2); }
/* B · Tarjetas: seis fichas grandes con su dibujo */
.prt-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.prt-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 12px 10px; border-radius: 18px; border: 1px solid var(--prt-linea); background: var(--prt-pill); color: var(--prt-txt); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.prt-tile svg { color: var(--prt-azul); }
.prt-tile.is-on { background: var(--prt-azul); border-color: transparent; color: #fff; } .prt-tile.is-on svg { color: #fff; }
[data-theme='dark'] .prt-tile.is-on, .is-noche .prt-tile.is-on { background: var(--prt-azul2); }
@media (min-width: 480px) { .prt-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* C · Rápido: una fila de motivos, para el que va manejando */
.prt-fila { display: flex; gap: 6px; }
.prt-ico { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 68px; padding: 8px 2px; border-radius: 16px; border: 1px solid var(--prt-linea); background: var(--prt-pill); color: var(--prt-azul); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.prt-ico small { font-size: 11px; font-weight: 800; color: var(--prt-txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.prt-ico.is-on { background: var(--prt-azul); border-color: transparent; color: #fff; } .prt-ico.is-on small { color: rgba(255,255,255,.9); }
[data-theme='dark'] .prt-ico.is-on, .is-noche .prt-ico.is-on { background: var(--prt-azul2); }
/* lo común: la nota, lo que leerá el cliente, errores, pie, listo */
.prt-lbl { font-size: 12.5px; font-weight: 800; color: var(--prt-txt2); }
.prt-in { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--prt-linea); background: var(--prt-pill); color: var(--prt-txt); font: inherit; font-size: 16px; line-height: 1.4; resize: none; }
.prt-in:focus { outline: 2px solid var(--prt-azul2); outline-offset: 1px; }
.prt-lee { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--prt-ok-bg); color: var(--prt-txt); }
.prt-lee svg { flex: none; margin-top: 3px; color: var(--prt-ok); }
.prt-lee small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--prt-ok); }
.prt-lee b { font-size: 14px; font-weight: 600; line-height: 1.4; }
.prt-err { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--prt-mal); }
.prt-pie { display: flex; gap: 8px; }
.prt-bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--prt-linea); background: var(--prt-pill); color: var(--prt-txt); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; flex: 1 1 auto; min-width: 0; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.prt-bt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prt-bt svg { flex: none; }
.prt-bt--pri { background: var(--prt-azul); border-color: transparent; color: #fff; flex: 2 1 auto; }
[data-theme='dark'] .prt-bt--pri, .is-noche .prt-bt--pri { background: var(--prt-azul2); }
.prt-bt--wa { background: var(--prt-wa); border-color: transparent; color: #fff; }
.prt-bt:disabled { opacity: .45; cursor: default; }
.prt-bt.is-ocupado { opacity: .7; }
.prt-listo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px 4px; text-align: center; }
.prt-listo__ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--prt-ok-bg); color: var(--prt-ok); }
.prt-listo b { font-size: 19px; font-weight: 800; }
.prt-listo p { margin: 0; font-size: 14.5px; color: var(--prt-txt2); line-height: 1.45; }
/* el botón discreto en la ruta (lo pinta portal-ruta v1.8 o botonHTML) */
.prt-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(180, 83, 9, .4); background: rgba(245, 158, 11, .16); color: #92400e; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
[data-theme='dark'] .prt-btn { background: rgba(251, 191, 36, .16); border-color: rgba(251, 191, 36, .4); color: #fbbf24; }
@media (max-width: 360px) { .prt-hoja { padding-left: 14px; padding-right: 14px; } .prt-cab__t b { font-size: 19px; } .prt-chip { font-size: 14px; padding: 8px 12px 8px 10px; } }