/* ============================================================================
partesapp-abar.css -- barra de acciones contextual (.pa-abar) y lo que la
rodea: safe area, teclado, doble envío, aviso de errores y hoja «Más».
Diseño y reglas en docs/diseno/entrega-barra-acciones-movil/README.md.
Global (base.html), no solo del conductor: la oficina también la usa en
móvil (pie de _pa_form_page.html, ver_albaran, parte_trabajo_detalle).
============================================================================ */
/* Un campo enfocado nunca queda escondido bajo la barra: el navegador
desplaza dejando este margen abajo. --pa-abar-h lo mantiene base.js con
la altura real de la barra (0 si no hay barra sticky). También en body:
en oficina html/body van a height:100% (style.css) y quien hace scroll
es el body, no la ventana; scroll-padding solo cuenta en el contenedor
que hace scroll. */
html, body { scroll-padding-bottom: calc(var(--pa-abar-h, 0px) + 12px); }
/* Sticky, no fixed: ocupa su sitio en el flujo, así que ninguna pantalla
necesita un padding-bottom inventado para que el último campo asome.
z-index 15: por debajo de .pa-menu y .pa-dhead (20), Select2 (1051),
.pa-sheet (60/61) y el modal de confirmación. El padding inferior suma la
safe area del iPhone (necesita viewport-fit=cover en base.html). */
.pa-abar,
.pa-driver .pa-dbar,
.pa-driver .pa-save-foot {
position: sticky; bottom: 0; z-index: 15;
background: var(--pa-surface); border-top: 1px solid var(--pa-line);
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
/* Orden fijo dentro de la fila: Más (izq.) · secundaria · primaria (der.).
La primaria se queda el espacio que sobra (flex 1.45). */
.pa-abar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.pa-abar__row { display: flex; gap: 8px; flex: 1 0 100%; min-width: 0; }
/* ".pa-abar ..." sube la especificidad: .pa-dbtn trae flex:1 en
partesapp-driver.css, que se carga después, y dejaba las tres zonas del
mismo ancho (el «⋮» tan ancho como la primaria). */
.pa-abar .pa-abar__more { flex: 0 0 auto; }
.pa-abar .pa-abar__more--icon { flex: 0 0 52px; padding: 0; font-size: 22px; }
.pa-abar .pa-abar__sec { flex: 1 1 0; min-width: 0; }
.pa-abar .pa-abar__pri { flex: 1.45 1 0; min-width: 0; }
.pa-abar__row > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Los botones son flex con el texto centrado: si no cabe, se sale por los
dos lados en vez de acabar en «…». El recorte va en la etiqueta interior. */
.pa-abar__row > * > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-abar__aside { flex: 1 0 100%; }
/* .btn de Bootstrap en la barra (oficina): misma altura que los .pa-dbtn
del conductor, centrados. */
.pa-abar .btn { height: 52px; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.pa-abar .btn-primary { font-size: 17px; font-weight: 700; }
/* Etiquetas cortas: único ajuste por ancho, la estructura no cambia. */
.pa-abar__lbl--short { display: none; }
@media (max-width: 389.98px) { .pa-abar__sec .pa-abar__lbl--long { display: none; } .pa-abar__sec .pa-abar__lbl--short { display: inline; } }
@media (max-width: 359.98px) { .pa-abar__pri .pa-abar__lbl--long { display: none; } .pa-abar__pri .pa-abar__lbl--short { display: inline; } }
/* Tablet en conductor: no estirar la primaria a lo ancho de la pantalla. */
@media (min-width: 768px) { .pa-driver .pa-abar__row { max-width: 560px; margin: 0 auto; } }
/* Aviso de errores dentro de la barra (lo inserta base.js): al volver del
servidor con errores, el primero puede estar muy arriba del formulario. */
.pa-abar__errors {
flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
height: 44px; padding: 0 12px; background: var(--pa-danger-bg); border: 1px solid var(--pa-danger-line);
border-radius: var(--pa-r-control); color: var(--pa-danger-ink); font-size: 14.5px; font-weight: 600;
text-decoration: none;
}
.pa-abar__errors span:last-child {
font-family: var(--pa-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--pa-danger);
}
/* En .pa-save-foot y en el pie de oficina (que no son flex-wrap) el aviso
va encima de los botones. */
.pa-save-foot .pa-abar__errors, .pa-form-foot .pa-abar__errors { margin-bottom: 10px; }
/* En curso: igual que .pa-dbtn--busy, extendido a .btn. Sin disabled (un
botón deshabilitado no envía su name=value: cerrar_repostaje, etc.). */
.is-busy, [aria-busy="true"] { pointer-events: none; opacity: .85; }
.is-busy .pa-dbtn__spinner, .btn.is-busy .pa-dbtn__spinner { display: inline-block; }
.btn .pa-dbtn__spinner { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; }
/* En botones claros (borde, fantasma) el spinner blanco no se vería. */
:is(.pa-dbtn--ghost, .btn-outline-secondary, .pa-sign-later, .pa-save-draft) .pa-dbtn__spinner { border-color: rgba(16,25,43,.18); border-top-color: currentColor; }
.pa-dbtn.is-busy { gap: 10px; }
/* Mientras se envía, el resto de botones del pie deja de aceptar toques. */
form[data-pa-submitting] :is(.pa-abar, .pa-dbar, .pa-save-foot, .pa-form-foot, .pa-sign-foot) :is(a, button):not(.is-busy) { pointer-events: none; color: var(--pa-label); }
/* Spinner y hoja también fuera del conductor: partesapp-driver.css solo se
carga en las pantallas del conductor, y la oficina (ver_albaran,
parte_trabajo_detalle) usa la misma hoja «Más». Mismos valores que allí. */
.pa-dbtn__spinner { width: 18px; height: 18px; border-radius: 50%;
border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
animation: pa-spin .7s linear infinite; flex-shrink: 0; }
@keyframes pa-spin { to { transform: rotate(360deg); } }
.pa-sheet-bd { position: fixed; inset: 0; background: rgba(16,25,43,.72); z-index: 60; }
.pa-sheet {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
background: var(--pa-surface); border-radius: 12px 12px 0 0;
padding: 20px 18px 22px; max-height: 92vh; overflow-y: auto;
}
/* Safe area bajo la hoja. "html" sube la especificidad: partesapp-driver.css
se carga después (bloque extra_css) y su .pa-sheet pisaría el padding. */
html .pa-sheet { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
.pa-sheet__t { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.pa-sheet__x { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--pa-muted); background: none; border: 0; }
.pa-sheet__s { font-size: 14px; color: var(--pa-muted); margin-bottom: 16px; line-height: 1.45; }
/* En escritorio la hoja no ocupa todo el ancho (solo aparece por debajo de
768px en oficina, pero el conductor puede usar tablet). */
@media (min-width: 768px) { .pa-sheet { max-width: 560px; margin: 0 auto; } }
/* Focus visible en la barra (los .pa-dbtn no tenían ninguno). */
.pa-abar :is(a, button):focus-visible,
.pa-dbar :is(a, button):focus-visible,
.pa-save-foot :is(a, button):focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--pa-surface), 0 0 0 4px var(--pa-ink); }
/* Teclado abierto (clase puesta por base.js): solo la primaria, más baja,
para no comerse media pantalla. */
html.pa-kb :is(.pa-abar, .pa-dbar, .pa-save-foot) { padding: 8px 16px; }
html.pa-kb :is(.pa-abar__more, .pa-abar__sec, .pa-abar__aside, .pa-abar__errors, .pa-save-draft, .pa-dbar-cancel, .pa-sign-later, .pa-sign-refuse) { display: none !important; }
html.pa-kb :is(.pa-abar, .pa-dbar, .pa-save-foot) .pa-dbtn { height: 52px; font-size: 17px; }
/* Oficina: el pie de _pa_form_page se vuelve la barra por debajo de 768px
(el mismo breakpoint de oficina que el resto de la app). */
@media (max-width: 767.98px) {
.pa-form-foot {
position: sticky; bottom: 0; z-index: 15; background: var(--pa-surface);
border-top: 1px solid var(--pa-line);
padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
}
.pa-form-foot__right { flex: 1 0 100%; margin-left: 0; gap: 10px; }
.pa-form-foot__right > .btn { height: 52px; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.pa-form-foot__right > .btn-outline-secondary { flex: 0 0 auto; min-width: 104px; }
.pa-form-foot__right > .btn-primary { flex: 1 1 0; font-size: 17px; font-weight: 700; }
/* La tarjeta tiene overflow:hidden, que anula el sticky del pie. */
.pa-form-card { overflow: visible; }
/* Detalles de oficina: botones de cabecera solo en escritorio; la barra solo en móvil. */
.pa-head-actions { display: none !important; }
}
@media (min-width: 768px) { .pa-abar--mobile { display: none; } }
/* Destructiva de oficina: al final del contenido, fuera del