/* Portal del cliente y app del técnico: pantallas de móvil con la marca de Massana. */
body { background: var(--fondo); }
.movil-app { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 84px; }
.banda { position: relative; overflow: hidden; color: #fff; padding: 18px 18px 54px; background: linear-gradient(180deg, var(--petroleo) 0%, #0b5571 100%); }
.banda::after { content: ""; position: absolute; right: -40px; top: -10px; width: 200px; aspect-ratio: 520 / 456; background: url("../img/logo-negativo.svg") no-repeat center / contain; opacity: .09; }
.banda-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; position: relative; z-index: 1; }
.banda-top img { height: 34px; }
.banda h1 { color: #fff; font-size: 23px; position: relative; z-index: 1; }
.banda p { margin: 4px 0 0; color: rgba(255, 255, 255, .8); position: relative; z-index: 1; }
.banda .icono-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; }
.cuerpo { padding: 0 14px; margin-top: -36px; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 2; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; padding: 14px; box-shadow: var(--sombra); }
.tarjeta h2 { font-size: 15px; margin-bottom: 10px; }
.tarjeta .ayuda { font-size: 12.5px; }
.tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tipo { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; border: 1px solid var(--linea); background: #fafcfd; font-family: Poppins, sans-serif; font-weight: 500; font-size: 13.5px; }
.tipo .ic { width: 22px; height: 22px; color: var(--marca); }
.tipo small { font-family: Roboto, sans-serif; font-weight: 400; }
.tipo.elegido { border-color: var(--marca); background: var(--marca-claro); box-shadow: 0 0 0 1px var(--marca) inset; }
.tipo.urgente .ic { color: var(--rojo); }
.texto-caja { border: 1px solid var(--linea); border-radius: 12px; padding: 12px; min-height: 84px; color: var(--tinta); font-size: 14px; line-height: 1.45; background: #fff; }
.fila-botones { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mini-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; font: 500 13px Poppins, sans-serif; color: var(--tinta); }
.mini-btn .ic { width: 16px; height: 16px; }
.mini-btn.acento { background: var(--marca-claro); border-color: transparent; color: var(--marca-2); }
.fotos { display: flex; gap: 8px; margin-top: 10px; }
.foto { width: 74px; height: 74px; border-radius: 12px; display: grid; place-items: center; color: var(--tenue); background: repeating-linear-gradient(135deg, #e9eff2 0 8px, #f3f7f9 8px 16px); border: 1px solid var(--linea); font-size: 11px; text-align: center; }
.foto.mas { background: #fff; border-style: dashed; color: var(--marca); }
.dias { display: flex; gap: 6px; overflow: hidden; }
.dia { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--linea); font-size: 12px; color: var(--suave); }
.dia b { font: 600 16px Poppins, sans-serif; color: var(--tinta); }
.dia.elegido { background: var(--petroleo); border-color: var(--petroleo); color: rgba(255, 255, 255, .8); }
.dia.elegido b { color: #fff; }
.franjas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.franja { padding: 10px; border-radius: 12px; border: 1px solid var(--linea); text-align: center; font: 500 13px Poppins, sans-serif; }
.franja small { display: block; font: 400 12px Roboto, sans-serif; }
.franja.elegido { border-color: var(--marca); background: var(--marca-claro); color: var(--marca-2); }
.grande { width: 100%; height: 52px; border-radius: 16px; font-size: 15px; justify-content: center; }
.pie-fijo { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--linea); z-index: 10; }
.pie-fijo small { display: block; text-align: center; margin-top: 6px; }
.dato { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linea-2); }
.dato:first-of-type { border-top: 0; }
.dato .ic { color: var(--marca); }
.dato span { flex: 1; }

/* Seguimiento */
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding-bottom: 16px; }
.linea-tiempo li::after { content: ""; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: var(--linea); }
.linea-tiempo li:last-child::after { display: none; }
.linea-tiempo li.hecho::after { background: var(--marca); }
.punto { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--linea); background: #fff; color: #fff; z-index: 1; }
.punto .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.hecho .punto { background: var(--marca); border-color: var(--marca); }
.ahora .punto { border-color: var(--cian); box-shadow: 0 0 0 5px rgba(46, 187, 224, .2); }
.ahora .punto::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cian); animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(.6); opacity: .6; } }
.linea-tiempo b { display: block; font: 500 14px Poppins, sans-serif; }
.linea-tiempo small { display: block; }
.pendiente b { color: var(--tenue); }
.caja-pres { margin-top: 8px; padding: 12px; border-radius: 14px; background: var(--marca-claro); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.caja-pres b { font-size: 18px; }
.en-camino { display: flex; gap: 12px; align-items: center; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid #c6e1ea; }
.en-camino .avatar { width: 40px; height: 40px; font-size: 16px; }

/* Técnico */
.reloj { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #0b5571, var(--marca)); box-shadow: 0 10px 26px rgba(0, 68, 102, .28); }
.reloj b { font: 600 26px Poppins, sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.reloj small { color: rgba(255, 255, 255, .8); display: block; }
.reloj .btn { margin-left: auto; background: #fff; color: var(--rojo); border: 0; }
.reloj > div { min-width: 0; }
.trabajo { display: grid; grid-template-columns: 54px 1fr; gap: 12px; }
.trabajo .hora { font: 600 15px Poppins, sans-serif; color: var(--marca-2); }
.trabajo .hora small { display: block; font: 400 11px Roboto, sans-serif; color: var(--tenue); }
.trabajo b { font: 600 15px Poppins, sans-serif; display: block; }
.trabajo p { margin: 2px 0 8px; color: var(--suave); font-size: 13px; }
.trabajo.actual { border-color: var(--cian); box-shadow: 0 0 0 1px var(--cian) inset, var(--sombra); }
.trabajo.hecho { opacity: .6; }
.menu-abajo { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--linea); z-index: 10; }
.menu-abajo span { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 500 11px Poppins, sans-serif; color: var(--suave); position: relative; }
.menu-abajo .ic { width: 22px; height: 22px; }
.menu-abajo .activo { color: var(--marca); }
.menu-abajo em { position: absolute; top: -4px; left: 56%; font-style: normal; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--rojo); color: #fff; display: grid; place-items: center; }
.dictar { display: flex; align-items: center; gap: 14px; }
.mic { width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, #2f93ae, var(--marca)); box-shadow: 0 0 0 8px rgba(46, 187, 224, .16), 0 10px 22px rgba(31, 111, 134, .35); }
.mic .ic { width: 28px; height: 28px; }
.dicho { margin-top: 12px; padding: 12px; border-radius: 14px; background: #f4f8fa; font-size: 14px; line-height: 1.45; color: var(--tinta); border-left: 3px solid var(--cian); }
.entendido { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.entendido li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--linea); font-size: 13.5px; }
.entendido li > span { flex: 1; min-width: 0; }
.entendido .ic { color: var(--verde); }
.entendido small { display: block; }
.entendido .aviso-l { border-color: #f3dfb8; background: var(--ambar-f); }
.entendido .aviso-l .ic { color: var(--ambar); }
.acciones-t { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.acc { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 14px; border: 1px solid var(--linea); background: #fff; font: 500 12px Poppins, sans-serif; text-align: center; }
.acc .ic { width: 22px; height: 22px; color: var(--marca); }
.acc small { font: 400 11px Roboto, sans-serif; }
.guardado { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12.5px; color: var(--verde); }
.guardado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px var(--verde-f); }
.chip-est { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(255, 255, 255, .16); color: #fff; }

/* Oficina (escritorio) */
.directo { list-style: none; margin: 0; padding: 0; }
.directo li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linea-2); font-size: 13.5px; }
.directo li:first-child { border-top: 0; }
.directo .h { color: var(--tenue); font-size: 12px; font-variant-numeric: tabular-nums; }
.directo b { font-weight: 600; }
.directo .nuevo-p { color: var(--marca); }
.solicitud { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; padding: 12px; border-radius: 14px; border: 1px solid #c6e1ea; background: linear-gradient(120deg, #fff, var(--marca-claro)); }
.solicitud + .solicitud { margin-top: 8px; }
.solicitud b { font-family: Poppins, sans-serif; font-weight: 600; }
.solicitud p { margin: 2px 0 0; color: var(--suave); font-size: 13px; }
.solicitud .fotos { margin-top: 8px; }
.solicitud .foto { width: 54px; height: 54px; }
.solicitud .sig-botones { align-self: center; }
.origen { display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px; font-weight: 600; color: var(--marca-2); background: #fff; border: 1px solid #c6e1ea; padding: 1px 8px; border-radius: 999px; margin-left: 6px; }
.chat { display: flex; flex-direction: column; gap: 8px; }
.burbuja { max-width: 88%; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: #f1f5f7; font-size: 13.5px; }
.burbuja small { display: block; margin-bottom: 2px; }
.burbuja.mia { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--marca); color: #fff; }
.burbuja.mia small { color: rgba(255, 255, 255, .75); }
.escribir { display: flex; gap: 8px; margin-top: 4px; }
.escribir > span:first-child { flex: 1; height: 38px; border-radius: 999px; border: 1px solid var(--linea); display: flex; align-items: center; padding: 0 14px; color: var(--tenue); font-size: 13px; }