/* ============================================================================= EL SEMANAL EN EL TELÉFONO — etapa 3l del teléfono docs/movil/lamina-14-azucar-semanal.html: ganó la B (08/10/2026), «la semana y sus días». La pantalla la arma ENTERA `parte-semanal-movil.js`. Scope por id `#mobile-data-container #pse-ui`. Las piezas comunes son las del Parte Diario del teléfono con otro prefijo: el mismo dibujo, sin compartir clases. ┌───────────────┬───────────────┐ │ PRODUCIDO │ DESVÍO ──▮── │ tocar una cifra = su pestaña │ DÍAS │ INSUMOS (kg) │ └───────────────┴───────────────┘ [ Días | Producción | Insumos ] renglones · un día → su Parte Diario · un insumo → su hoja [ PDF ] [ Compartir ] pegado abajo ========================================================================== */ @media (max-width: 767px) { #mobile-data-container #pse-ui { display: flex; flex-direction: column; min-height: 100%; background: var(--canvas); color: var(--ink); font-size: 14px; line-height: 1.45; } #mobile-data-container #pse-ui .pse-zona { flex: 1; padding-bottom: 18px; } /* ── La píldora (el indicador que viaja lo pone mobile-gestos.js) ──── */ #mobile-data-container #pse-ui .pse-seg { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, 1fr); margin: 8px 12px 0; padding: 3px; border-radius: 11px; background: #e3e7ef; } #mobile-data-container #pse-ui .pse-seg[hidden] { display: none; } #mobile-data-container #pse-ui .pse-seg > button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); transition: color .24s; } #mobile-data-container #pse-ui .pse-seg > button.on { color: var(--navy); } #mobile-data-container #pse-ui .pse-seg:not(.mv-con-ind) > button.on { background: #fff; box-shadow: var(--e1); } #mobile-data-container #pse-ui .pse-seg > button:focus-visible { outline: 2px solid var(--navy-300); outline-offset: -2px; } /* ── Rótulos, listas, vacíos ───────────────────────────────────────── */ #mobile-data-container #pse-ui .pse-hh { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); font-weight: 700; } #mobile-data-container #pse-ui .pse-hh .der { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; } #mobile-data-container #pse-ui .pse-lista { margin: 0 12px 4px; background: #fff; border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--e1); overflow: hidden; } #mobile-data-container #pse-ui .pse-vacio { margin: 14px 12px; padding: 22px 18px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.45; background: #fff; border: 1px solid var(--hair); border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; } #mobile-data-container #pse-ui .pse-vacio > .material-symbols-outlined { font-size: 30px; color: var(--faint); } #mobile-data-container #pse-ui .pse-vacio b { color: var(--ink); font-size: 14.5px; } #mobile-data-container #pse-ui .pse-vacio.mal { color: var(--crit); } #mobile-data-container #pse-ui .pse-vacio.chico { margin: 10px 0; border: 0; } #mobile-data-container #pse-ui .pse-nota { margin: 10px 16px 0; font-size: 12px; color: var(--muted); line-height: 1.45; } /* ── Los renglones ─────────────────────────────────────────────────── */ #mobile-data-container #pse-ui .pse-r { display: grid; gap: 2px 10px; padding: 10px 12px; border-bottom: 1px solid var(--hair); cursor: pointer; transition: background .12s ease, transform .12s ease; animation: pseEntra .3s cubic-bezier(.2, .8, .2, 1) both; } #mobile-data-container #pse-ui .pse-r:last-child { border-bottom: 0; } #mobile-data-container #pse-ui .pse-r:active, #mobile-data-container #pse-ui .pse-r.pse-toc { background: var(--navy-050); transform: scale(.985); } /* ── El pie: pegado abajo ──────────────────────────────────────────── */ #mobile-data-container #pse-ui .pse-pie { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; align-items: center; padding: 10px 12px 14px; background: var(--surface); border-top: 1px solid var(--hair); box-shadow: 0 -4px 14px rgba(16, 32, 64, .05); } #mobile-data-container #pse-ui .pse-pie[hidden] { display: none; } /* ── Las piezas comunes: las del Pase de Depósito, con otro prefijo ── */ #mobile-data-container #pse-ui .pse-btn { min-height: 44px; padding: 0 18px; border-radius: 11px; border: 1px solid var(--navy); background: var(--navy); color: #fff; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .12s ease, background .12s ease; } #mobile-data-container #pse-ui .pse-btn:active { transform: scale(.96); background: var(--navy-700); } #mobile-data-container #pse-ui .pse-btn[disabled] { opacity: .45; pointer-events: none; } #mobile-data-container #pse-ui .pse-btn.sec { background: #fff; color: var(--ink); border-color: var(--hair-strong); } #mobile-data-container #pse-ui .pse-btn .material-symbols-outlined { font-size: 18px; } #mobile-data-container #pse-ui .pse-btn .gs-spin { width: 14px; height: 14px; } /* ── Las consecuencias ─────────────────────────────────────────────── */ #mobile-data-container #pse-ui .pse-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; line-height: 1.4; padding: 2px 8px; border-radius: 9px; border: 1px solid var(--hair-strong); background: #fff; color: var(--muted); } #mobile-data-container #pse-ui .pse-chip .material-symbols-outlined { font-size: 14px; } #mobile-data-container #pse-ui .pse-chip.ok { color: var(--ok); background: var(--ok-050); border-color: var(--ok-hair); } #mobile-data-container #pse-ui .pse-chip.warn { color: var(--warn); background: var(--warn-050); border-color: var(--warn-hair); } #mobile-data-container #pse-ui .pse-chip.mal { color: var(--crit); background: var(--crit-050); border-color: var(--crit-hair); } /* ── El velo y las hojas ───────────────────────────────────────────── */ #mobile-data-container #pse-ui .pse-velo { position: fixed; inset: 0; z-index: 184; background: rgba(10, 20, 40, .38); opacity: 0; pointer-events: none; transition: opacity .25s ease; } #mobile-data-container #pse-ui.pse-con-hoja .pse-velo { opacity: 1; pointer-events: auto; } #mobile-data-container #pse-ui .pse-hoja[hidden] { display: none; } #mobile-data-container #pse-ui .pse-hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 185; max-height: 88vh; display: flex; flex-direction: column; background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(16, 32, 64, .18); animation: mvHojaSube .28s cubic-bezier(.2, .8, .2, 1) both; will-change: transform; } #mobile-data-container #pse-ui .pse-hoja .asa { flex: none; align-self: center; width: 40px; height: 5px; margin: 8px 0 4px; border-radius: 9px; background: var(--hair-strong); } #mobile-data-container #pse-ui .pse-hoja .h-cab { padding: 4px 18px 10px; border-bottom: 1px solid var(--hair); flex: none; } #mobile-data-container #pse-ui .pse-hoja .h-cab .lb { font-size: 12px; color: var(--muted); } #mobile-data-container #pse-ui .pse-hoja .h-cab h4 { margin: 2px 0 2px; font-size: 18px; line-height: 1.25; font-variant-numeric: tabular-nums; } #mobile-data-container #pse-ui .pse-hoja .h-cab .sub { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } #mobile-data-container #pse-ui .pse-hoja .h-cab .sub .material-symbols-outlined { font-size: 15px; } #mobile-data-container #pse-ui .pse-hoja .h-cuerpo { padding: 4px 18px 14px; overflow: auto; overscroll-behavior: contain; flex: 1; font-size: 13.5px; } #mobile-data-container #pse-ui .pse-hoja .h-pie { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 16px; border-top: 1px solid var(--hair); } #mobile-data-container #pse-ui .pse-hoja .h-pie .pse-btn { flex: 1 1 30%; padding: 0 10px; } #mobile-data-container #pse-ui .pse-hoja .h-pie .pse-btn.ancho { flex: 1 1 100%; } #mobile-data-container #pse-ui .pse-hoja.mv-arrastra { animation: none; transition: none; } #mobile-data-container #pse-ui .pse-hoja.mv-baja { transition: transform .22s ease-in; transform: translateY(105%) !important; } #mobile-data-container #pse-ui .pse-hoja.mv-vuelve { transition: transform .2s ease; } #mobile-data-container #pse-ui .nota { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; } /* ── Las piezas del Parte Diario que el Semanal usa igual ──────────── */ #mobile-data-container #pse-ui .pse-cab:empty { display: none; } #mobile-data-container #pse-ui .pse-chip.nav { color: var(--navy-500); background: var(--navy-050); border-color: #d3dff0; } #mobile-data-container #pse-ui .pse-chip.mut { color: var(--faint); background: #f4f5f8; } #mobile-data-container #pse-ui .pse-r .pse-chip { white-space: nowrap; flex: none; } #mobile-data-container #pse-ui .w { color: var(--warn); } #mobile-data-container #pse-ui .o { color: var(--ok); } /* la lista de días */ #mobile-data-container #pse-ui .pse-mes { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 14px 16px 6px; font-size: 13px; color: var(--navy); } #mobile-data-container #pse-ui .pse-mes small { font-size: 11.5px; color: var(--muted); } #mobile-data-container #pse-ui .pse-r.dd { grid-template-columns: 44px minmax(0, 1fr) auto; } #mobile-data-container #pse-ui .pse-r.dd .fe { grid-row: 1 / 3; align-self: center; display: flex; flex-direction: column; align-items: center; line-height: 1.05; padding: 5px 0; border-radius: 10px; background: var(--navy-050); color: var(--navy); } #mobile-data-container #pse-ui .pse-r.dd .fe small { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--navy-500); } #mobile-data-container #pse-ui .pse-r.dd .fe b { font-size: 18px; font-weight: 800; } #mobile-data-container #pse-ui .pse-r.dd .st { min-width: 0; display: flex; align-items: center; overflow: hidden; } #mobile-data-container #pse-ui .pse-r.dd .val { font-size: 15px; font-weight: 800; } #mobile-data-container #pse-ui .pse-r.dd .l2 { grid-column: 2 / -1; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; min-width: 0; } #mobile-data-container #pse-ui .pse-r.dd .l2 > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; } #mobile-data-container #pse-ui .pse-r.dd .dv { font-variant-numeric: tabular-nums; flex: none; } #mobile-data-container #pse-ui .pse-r.dd .dv.warn { color: var(--warn); font-weight: 600; } #mobile-data-container #pse-ui .pse-r.dd .dv.mal { color: var(--crit); font-weight: 600; } #mobile-data-container #pse-ui .pse-r.dd.sin .fe { background: var(--warn-050); color: var(--warn); } #mobile-data-container #pse-ui .pse-r.dd.sin .fe small { color: var(--warn); } #mobile-data-container #pse-ui .pse-r.dd.viejo { opacity: .72; } #mobile-data-container #pse-ui .pse-r.dd.viejo .fe { background: #eef0f4; color: var(--muted); } #mobile-data-container #pse-ui .pse-r.dd.viejo .fe small { color: var(--faint); } #mobile-data-container #pse-ui .pse-mas { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 24px); margin: 10px 12px 20px; padding: 11px; border: 1px dashed var(--hair-strong); border-radius: 12px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--navy-500); cursor: pointer; } #mobile-data-container #pse-ui .pse-mas[disabled] { opacity: .6; } #mobile-data-container #pse-ui .pse-mas .gs-spin { width: 14px; height: 14px; } #mobile-data-container #pse-ui .pse-fin { margin: 12px 16px 20px; text-align: center; font-size: 11.5px; color: var(--faint); } /* las cuatro cifras */ #mobile-data-container #pse-ui .pse-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 8px 12px 0; background: var(--hair); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; box-shadow: var(--e1); } #mobile-data-container #pse-ui .pse-cifras > button { display: block; min-width: 0; padding: 8px 11px; border: 0; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .12s ease; } #mobile-data-container #pse-ui .pse-cifras > button:active { background: var(--navy-050); } #mobile-data-container #pse-ui .pse-cifras > button[disabled] { cursor: default; } #mobile-data-container #pse-ui .pse-cifras .k { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #mobile-data-container #pse-ui .pse-cifras .v { display: block; font-size: 19px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; } #mobile-data-container #pse-ui .pse-cifras .v small { font-size: 11.5px; color: var(--muted); font-weight: 500; } #mobile-data-container #pse-ui .pse-cifras .v.ok { color: var(--ok); } #mobile-data-container #pse-ui .pse-cifras .v.warn { color: var(--warn); } #mobile-data-container #pse-ui .pse-cifras .v.mal { color: var(--crit); } #mobile-data-container #pse-ui .pse-cifras .s { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #mobile-data-container #pse-ui .pse-gau { position: relative; display: flex; height: 5px; margin: 4px 0 2px; } #mobile-data-container #pse-ui .pse-gau i { flex: 6; background: #cfe7dc; } #mobile-data-container #pse-ui .pse-gau i:first-child { border-radius: 9px 0 0 9px; } #mobile-data-container #pse-ui .pse-gau i + i { flex: 4; background: #f3e2c2; border-radius: 0; } #mobile-data-container #pse-ui .pse-gau i + i + i { flex: 5; background: #f3d0d0; border-radius: 0 9px 9px 0; } #mobile-data-container #pse-ui .pse-gau b { position: absolute; top: -2px; width: 3px; height: 9px; border-radius: 2px; background: var(--navy); transform: translateX(-1px); } /* la franja roja: los días no suman lo guardado */ #mobile-data-container #pse-ui .pse-franja { display: flex; gap: 9px; margin: 12px 12px 0; padding: 10px 12px; border: 1px solid var(--crit-hair); border-left: 4px solid var(--crit); border-radius: 12px; background: var(--crit-050); color: #8f1d1d; font-size: 12.5px; line-height: 1.45; } #mobile-data-container #pse-ui .pse-franja > .material-symbols-outlined { color: var(--crit); font-size: 20px; flex: none; } #mobile-data-container #pse-ui .pse-franja b { color: var(--crit); } /* los renglones de la ficha */ #mobile-data-container #pse-ui .pse-r.ar { grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; cursor: default; } #mobile-data-container #pse-ui .pse-r.ar:active { background: none; transform: none; } #mobile-data-container #pse-ui .pse-r.ar .l2 { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #mobile-data-container #pse-ui .pse-r.ar .l2 b { color: var(--ink); font-weight: 600; } #mobile-data-container #pse-ui .pse-r .pg { color: var(--warn); font-weight: 600; } #mobile-data-container #pse-ui .pse-dl { padding: 8px 14px; } #mobile-data-container #pse-ui .pse-dl dl, #mobile-data-container #pse-ui .pse-hdl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; } #mobile-data-container #pse-ui .pse-dl dt, #mobile-data-container #pse-ui .pse-hdl dt { color: var(--muted); } #mobile-data-container #pse-ui .pse-dl dd, #mobile-data-container #pse-ui .pse-hdl dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; } #mobile-data-container #pse-ui .pse-hdl { margin-top: 10px; } #mobile-data-container #pse-ui .pse-nota-l { margin: 10px 16px 6px; font-size: 12px; color: var(--faint); line-height: 1.45; } /* los depósitos, plegados */ #mobile-data-container #pse-ui .pse-dep { margin: 0 12px 8px; background: #fff; border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--e1); overflow: hidden; } #mobile-data-container #pse-ui .pse-dep > button { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1px 8px; align-items: center; width: 100%; padding: 10px 12px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } #mobile-data-container #pse-ui .pse-dep > button .nm { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #mobile-data-container #pse-ui .pse-dep > button .val { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; } #mobile-data-container #pse-ui .pse-dep > button .l2 { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); } #mobile-data-container #pse-ui .pse-dep > button > .material-symbols-outlined { grid-row: 1; grid-column: 3; color: var(--faint); transition: transform .24s cubic-bezier(.2, .8, .2, 1); } #mobile-data-container #pse-ui .pse-dep.ab > button > .material-symbols-outlined { transform: rotate(180deg); } #mobile-data-container #pse-ui .pse-dep .cue { display: none; border-top: 1px solid var(--hair); } #mobile-data-container #pse-ui .pse-dep.ab .cue { display: block; } #mobile-data-container #pse-ui .pse-dep .sub3 { padding: 8px 14px 3px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); font-weight: 700; background: #fafbfc; border-bottom: 1px solid var(--hair); } /* la hoja del insumo */ #mobile-data-container #pse-ui .pse-aviso { display: flex; gap: 9px; margin-top: 12px; padding: 9px 11px; border: 1px solid; border-radius: 10px; font-size: 12.5px; line-height: 1.45; } #mobile-data-container #pse-ui .pse-aviso .material-symbols-outlined { font-size: 18px; flex: none; } #mobile-data-container #pse-ui .pse-aviso.nav { background: var(--navy-050); border-color: #cfdcf1; color: var(--navy-500); } #mobile-data-container #pse-ui .pse-aviso.nav b { color: var(--navy); } #mobile-data-container #pse-ui .pse-aviso.warn { background: var(--warn-050); border-color: var(--warn-hair); color: #7a4100; } #mobile-data-container #pse-ui .pse-pie .pse-btn { flex: 1; } /* el toast, arriba del pie; con la hoja abierta, arriba de todo */ body:has(#mobile-data-container #pse-ui) #gs-toasts { left: 12px; right: 12px; bottom: 84px; align-items: center; } body:has(#mobile-data-container #pse-ui.pse-con-hoja) #gs-toasts { bottom: auto; top: 70px; flex-direction: column; } /* ── Lo propio del Semanal ─────────────────────────────────────────── */ /* la lista de semanas */ #mobile-data-container #pse-ui .pse-r.sw { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; } #mobile-data-container #pse-ui .pse-r.sw .fe { grid-row: 1 / 4; align-self: center; display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 5px 0; border-radius: 10px; background: var(--navy-050); color: var(--navy); } #mobile-data-container #pse-ui .pse-r.sw .fe small { font-size: 9.5px; letter-spacing: .06em; font-weight: 700; color: var(--navy-500); } #mobile-data-container #pse-ui .pse-r.sw .fe b { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } #mobile-data-container #pse-ui .pse-r.sw .val { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } #mobile-data-container #pse-ui .pse-r.sw .val small { font-size: 11px; font-weight: 500; color: var(--faint); } #mobile-data-container #pse-ui .pse-r.sw .dv { text-align: right; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ok); } #mobile-data-container #pse-ui .pse-r.sw .dv.warn { color: var(--warn); } #mobile-data-container #pse-ui .pse-r.sw .dv.mal { color: var(--crit); } #mobile-data-container #pse-ui .pse-r.sw .bar { grid-column: 2 / -1; } #mobile-data-container #pse-ui .pse-r.sw .l2 { grid-column: 2 / -1; display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); white-space: nowrap; min-width: 0; } #mobile-data-container #pse-ui .pse-r.sw .l2 > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; } #mobile-data-container #pse-ui .pse-r.sw .niv { flex: none; color: var(--faint); } #mobile-data-container #pse-ui .pse-r.sw .niv.warn { color: var(--warn); font-weight: 600; } #mobile-data-container #pse-ui .pse-r.sw .niv.mal { color: var(--crit); font-weight: 600; } #mobile-data-container #pse-ui .pse-r.sw.abierta .fe { background: #fff; border: 1px dashed var(--hair-strong); } #mobile-data-container #pse-ui .bar { display: block; height: 4px; border-radius: 9px; background: #edf0f5; overflow: hidden; } #mobile-data-container #pse-ui .bar i { display: block; height: 100%; border-radius: 9px; background: var(--navy-500); opacity: .55; } /* los días y los artículos llevan su barra */ #mobile-data-container #pse-ui .pse-r.dd .l2 .bar { flex: 1; align-self: center; max-width: 120px; } #mobile-data-container #pse-ui .pse-r.ar .l2 .bar { display: inline-block; width: 60px; vertical-align: middle; margin-right: 8px; } #mobile-data-container #pse-ui .pse-r.ar .nm { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #mobile-data-container #pse-ui .pse-r.ar .val { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } #mobile-data-container #pse-ui .pse-r.ar .val small { font-weight: 500; color: var(--faint); font-size: 11px; } /* los insumos se tocan */ #mobile-data-container #pse-ui .pse-r.ar.ins { cursor: pointer; } #mobile-data-container #pse-ui .pse-r.ar.ins:active, #mobile-data-container #pse-ui .pse-r.ar.ins.pse-toc { background: var(--navy-050); transform: scale(.985); } #mobile-data-container #pse-ui .pse-r.ar .val.mal { color: var(--crit); } #mobile-data-container #pse-ui .pse-r.ar .val.warn { color: var(--warn); } #mobile-data-container #pse-ui .pse-dep { margin-top: 10px; } #mobile-data-container #pse-ui .pse-aviso.mal { background: var(--crit-050); border-color: var(--crit-hair); color: var(--crit); } #mobile-data-container #pse-ui .pse-franja > span { min-width: 0; } } @keyframes pseEntra { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion: reduce) { #mobile-data-container #pse-ui .pse-r, #mobile-data-container #pse-ui .pse-hoja { animation: none; } }