/* ============================================================
   DANGOFE OS · Portal del técnico · «MI HORARIO» (prefijo pho-) · S13 · 2026-10-16
   Karla (2026-10-11): «el técnico ve su horario y sus tandas en su portal, sin poder cambiarlos». Solo para mirar.
   Pieza del chat de Diseño, misma familia que las hojas del cobro (.pcb), del motivo (.pmt) y del imprevisto (.pim):
   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'] / .is-noche / data-tono medianoche.
   Tres versiones por data-v: A · Hoy primero · B · Calendario (tira de 14 días) · C · Semana (la tabla primero).
   ============================================================ */
/* el botón «Ver mi horario» (lo pone portal_tecnico.js con DangofeOS.horarioTecnico.botonHTML) */
.pho-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(3, 38, 155, .2); background: rgba(3, 38, 155, .07); color: #03269b; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pho-btn svg { width: 15px; height: 15px; flex: none; }
.pho-btn:active { transform: scale(.98); }
[data-theme='dark'] .pho-btn, .is-noche .pho-btn, [data-tono='medianoche'] .pho-btn { color: #8fb4ff; border-color: rgba(143, 180, 255, .35); background: rgba(143, 180, 255, .12); }
/* v2: en la tarjeta de llegada (azul oscuro) el botón va en blanco; y la línea «Ver mi horario» cuando no hay tarjeta (día libre o técnico que no marca) */
.ptx-jor--llegada .pho-btn, [data-theme='dark'] .ptx-jor--llegada .pho-btn, .is-noche .ptx-jor--llegada .pho-btn, [data-tono='medianoche'] .ptx-jor--llegada .pho-btn { color: #fff; border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .14); }
.ptx-jor--llegada .pho-btn:active { background: rgba(255, 255, 255, .22); }
.ptx-horario-fuera { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 6px; padding: 0; font-size: .8rem; opacity: .85; text-align: center; }
.ptx-horario-fuera::before { content: 'Hoy no marcas llegada, pero tu horario sigue aquí:'; color: var(--text-secondary, #5b6880); font-weight: 600; }
.ptx-horario-fuera .pho-btn { min-height: 34px; font-size: 12.5px; }

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

/* ---------- HOY (la tarjeta grande) ---------- */
.pho-hoy { padding: 14px 16px 14px; border-radius: 20px; border: 1px solid var(--pho-linea); background: var(--pho-vidrio2); display: flex; flex-direction: column; gap: 10px; }
.pho-hoy__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pho-hoy__cab b { font-size: 17px; }
.pho-hoy__cab b::first-letter { text-transform: uppercase; }
.pho-hoy__cab span { font-size: 12.5px; color: var(--pho-tenue); }
.pho-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pho-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--pho-campo); color: var(--pho-tinta); }
.pho-pill svg { width: 14px; height: 14px; flex: none; }
.pho-pill b { font-variant-numeric: tabular-nums; }
.pho-pill--ok { background: rgba(var(--pho-ok), .13); color: var(--pho-ok-txt); }
.pho-pill--amb { background: rgba(var(--pho-amb), .14); color: var(--pho-amb-txt); }
.pho-pill--mor { background: rgba(var(--pho-mor), .13); color: var(--pho-mor-txt); }
.pho-pill--gris { background: var(--pho-campo); color: var(--pho-tenue); }
.pho-pill--az { background: rgba(var(--pho-az), .1); color: var(--pho-azul-txt); }
/* la barra del día: mañana · almuerzo · tarde */
.pho-barra { position: relative; height: 34px; border-radius: 12px; background: var(--pho-vacio); overflow: hidden; }
.pho-barra i { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; padding: 0 6px; }
.pho-barra i.is-m { background: var(--pho-m); border-radius: 12px 0 0 12px; }
.pho-barra i.is-t { background: var(--pho-t); border-radius: 0 12px 12px 0; }
.pho-barra i.is-alm { background: var(--pho-alm); color: var(--pho-tenue); }
.pho-barra i.is-ent { background: var(--pho-pri); border-radius: 12px; }
.pho-barra em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgb(var(--pho-mal)); }
.pho-barra em::after { content: 'ahora'; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800; font-style: normal; color: var(--pho-mal-txt); }
.pho-barra--conahora { margin-bottom: 14px; overflow: visible; }
.pho-barra--conahora i { border-radius: 0; }
.pho-barra--conahora i.is-m { border-radius: 12px 0 0 12px; } .pho-barra--conahora i.is-t { border-radius: 0 12px 12px 0; } .pho-barra--conahora i.is-ent { border-radius: 12px; }
.pho-horas { display: flex; justify-content: space-between; font-size: 11px; color: var(--pho-suave); font-variant-numeric: tabular-nums; }
/* las tandas de hoy con sus servicios */
.pho-tandas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pho-tanda { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--pho-linea); background: var(--pho-campo); }
.pho-tanda b { font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.pho-tanda b svg { width: 14px; height: 14px; }
.pho-tanda--m b svg { color: var(--pho-amb-txt); } .pho-tanda--t b svg { color: var(--pho-azul-txt); }
.pho-tanda span { font-size: 12.5px; color: var(--pho-tenue); font-variant-numeric: tabular-nums; }
.pho-tanda em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--pho-ok-txt); }
.pho-tanda em.is-cero { color: var(--pho-suave); font-weight: 600; }
.pho-tanda.is-no { opacity: .55; }
.pho-nota { margin: 0; font-size: 12.5px; color: var(--pho-tenue); line-height: 1.4; }
.pho-nota b { color: var(--pho-tinta); }
.pho-aviso { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; font-weight: 600; }
.pho-aviso svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.pho-aviso--amb { background: rgba(var(--pho-amb), .12); color: var(--pho-amb-txt); }
.pho-aviso--mor { background: rgba(var(--pho-mor), .12); color: var(--pho-mor-txt); }
.pho-aviso--gris { background: var(--pho-campo); color: var(--pho-tenue); }
.pho-aviso--mal { background: rgba(var(--pho-mal), .1); color: var(--pho-mal-txt); }

/* ---------- los próximos días ---------- */
.pho-dias { display: flex; flex-direction: column; gap: 6px; }
.pho-dia { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 10px; border-radius: 14px; border: 1px solid var(--pho-linea); background: var(--pho-vidrio2); text-align: left; width: 100%; }
.pho-dia.is-hoy { border-color: rgba(var(--pho-az), .5); box-shadow: inset 0 0 0 1.5px rgba(var(--pho-az), .4); }
.pho-dia.is-libre { background: var(--pho-campo); }
.pho-dia.is-distinto { border-color: rgba(var(--pho-amb), .5); }
.pho-dia.is-ausencia { border-color: rgba(var(--pho-mor), .45); }
.pho-dia__f { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--pho-campo); }
.pho-dia__f b { font-size: 18px; line-height: 1; letter-spacing: -.02em; }
.pho-dia__f small { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pho-tenue); margin-top: 2px; }
.pho-dia.is-hoy .pho-dia__f { background: var(--pho-pri); color: #fff; } .pho-dia.is-hoy .pho-dia__f small { color: rgba(255, 255, 255, .85); }
.pho-dia__t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pho-dia__t > b { font-size: 14px; line-height: 1.2; }
.pho-dia__t > b::first-letter { text-transform: uppercase; }
.pho-dia__t > span { font-size: 12.5px; color: var(--pho-tenue); }
.pho-dia__t .pho-pills { gap: 4px; }
.pho-dia__t .pho-pill { min-height: 24px; padding: 3px 8px; font-size: 11.5px; }
.pho-mini { position: relative; height: 8px; border-radius: 999px; background: var(--pho-vacio); overflow: hidden; margin-top: 2px; }
.pho-mini i { position: absolute; top: 0; bottom: 0; }
.pho-mini i.is-m { background: var(--pho-m); } .pho-mini i.is-t { background: var(--pho-t); } .pho-mini i.is-ent { background: var(--pho-pri); }

/* ---------- la semana normal ---------- */
.pho-semana { display: flex; flex-direction: column; gap: 4px; }
.pho-sem { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 12px; }
.pho-sem:nth-child(odd) { background: var(--pho-campo); }
.pho-sem.is-hoy { outline: 1.5px solid rgba(var(--pho-az), .4); outline-offset: -1.5px; }
.pho-sem b { font-size: 13.5px; }
.pho-sem b::first-letter { text-transform: uppercase; }
.pho-sem small { font-size: 12px; color: var(--pho-tenue); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pho-sem.is-libre small { color: var(--pho-suave); }
.pho-leyenda { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--pho-tenue); }
.pho-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.pho-leyenda i { width: 10px; height: 10px; border-radius: 3px; }
.pho-leyenda .is-m { background: var(--pho-m); } .pho-leyenda .is-t { background: var(--pho-t); } .pho-leyenda .is-alm { background: var(--pho-alm); } .pho-leyenda .is-ent { background: var(--pho-pri); }

/* ---------- avisos (lo que cambia) ---------- */
.pho-cambios { display: flex; flex-direction: column; gap: 6px; }
.pho-cambio { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 11px; border-radius: 14px; border: 1px solid var(--pho-linea); background: var(--pho-vidrio2); font-size: 13px; line-height: 1.4; }
.pho-cambio svg { width: 18px; height: 18px; color: var(--pho-amb-txt); margin-top: 1px; }
.pho-cambio.is-libre svg { color: var(--pho-tenue); }
.pho-cambio b { display: block; }
.pho-cambio b::first-letter { text-transform: uppercase; }
.pho-cambio span { color: var(--pho-tenue); }

/* ---------- cargando / error ---------- */
.pho-carga { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.pho-carga i { display: block; border-radius: 18px; background: var(--pho-campo); animation: pho-brilla 1.4s ease-in-out infinite; }
@keyframes pho-brilla { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.pho-error { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 6px 4px; }
.pho-error__ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(var(--pho-mal), .9); box-shadow: 0 0 0 8px rgba(var(--pho-mal), .12); }
.pho-error__ic svg { width: 28px; height: 28px; }
.pho-error h3 { margin: 4px 0 0; font-size: 18px; font-weight: 800; }
.pho-error p { margin: 0; font-size: 14px; color: var(--pho-tenue); line-height: 1.45; }
.pho-pie { flex: none; display: flex; gap: 8px; padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--pho-linea); }
.pho-b { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--pho-linea); background: var(--pho-campo); color: var(--pho-tinta); font-weight: 800; font-size: 15px; }
.pho-b--pri { background: var(--pho-pri); color: #fff; border-color: transparent; }
.pho-b svg { width: 18px; height: 18px; }

/* ============================================================ B · Calendario ============================================================ */
.pho-tira { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pho-tira::-webkit-scrollbar { display: none; }
.pho-fecha { flex: 0 0 58px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 7px; border-radius: 16px; border: 1px solid var(--pho-linea); background: var(--pho-vidrio2); transition: border-color .2s ease, background .2s ease; position: relative; }
.pho-fecha small { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pho-tenue); }
.pho-fecha b { font-size: 20px; line-height: 1.1; letter-spacing: -.02em; }
.pho-fecha span { font-size: 10px; color: var(--pho-suave); }
.pho-fecha i { width: 7px; height: 7px; border-radius: 50%; margin-top: 3px; background: transparent; }
.pho-fecha.is-libre { background: var(--pho-campo); } .pho-fecha.is-libre b { color: var(--pho-suave); }
.pho-fecha.is-distinto i { background: rgb(var(--pho-amb)); }
.pho-fecha.is-ausencia i { background: rgb(var(--pho-mor)); }
.pho-fecha.is-servicios i { background: rgb(var(--pho-ok)); }
.pho-fecha.is-on { border-color: rgba(var(--pho-az), .6); background: rgba(var(--pho-az), .1); }
.pho-fecha.is-on b, .pho-fecha.is-on small { color: var(--pho-azul-txt); }
.pho-fecha.is-hoy small { color: var(--pho-azul-txt); }
.pho-detalle { animation: pho-sube-poco .35s cubic-bezier(.2, .9, .25, 1) both; }

/* ============================================================ C · Semana (la tabla primero) ============================================================ */
.pho-tabla { display: flex; flex-direction: column; gap: 4px; }
.pho-fila { display: grid; grid-template-columns: 38px minmax(0, 1fr) 60px; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; }
.pho-fila.is-hoy { background: rgba(var(--pho-az), .08); }
.pho-fila > b { font-size: 12.5px; text-transform: capitalize; }
.pho-fila > small { font-size: 11.5px; color: var(--pho-tenue); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pho-fila .pho-mini { height: 16px; border-radius: 6px; margin: 0; }
.pho-fila .pho-mini i { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; }
.pho-fila.is-libre .pho-mini { background: repeating-linear-gradient(45deg, var(--pho-vacio), var(--pho-vacio) 4px, transparent 4px, transparent 8px); }
.pho-escala { display: grid; grid-template-columns: 38px minmax(0, 1fr) 60px; gap: 8px; padding: 0 8px; }
.pho-escala div { display: flex; justify-content: space-between; font-size: 10px; color: var(--pho-suave); font-variant-numeric: tabular-nums; }

@media (max-width: 380px) { .pho-tandas { grid-template-columns: 1fr; } .pho-sem { grid-template-columns: 76px minmax(0, 1fr) auto; } }
@media (prefers-reduced-motion: reduce) { .pho-velo, .pho-hoja, .pho-sec, .pho-detalle, .pho-carga i { animation: none !important; } }
html.pho-bloqueo, html.pho-bloqueo body { overflow: hidden !important; }