/* ──────────────────────────────────────────────────────────────────────────
Que el sistema se pueda usar desde el celular
──────────────────────────────────────────────────────────────────────────
Esto NO es el rediseño tipo app: es un puente para que se pueda trabajar
desde el teléfono hasta que lo hagamos bien.
Sólo actúa en pantallas de hasta 820 px. En la computadora no cambia nada.
Se agrega con: , y un es de linea: el min-height de 44 px
no le hace nada y queda de 34, muy chico para el dedo. Con inline-flex si. */
header .header-actions > .btn, .header .header-actions > .btn {
flex: 0 1 auto;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
}
/* ── Las solapas del expediente: que se puedan deslizar ───────────────
El body tiene overflow-x:hidden, asi que lo que no entra se RECORTA. Con
cinco solapas la ultima no se alcanzaba. (03/09/2026)
El overflow-y:hidden no sobra: cuando a una caja le pedis overflow-x:auto,
el navegador le pone overflow-y:auto solo, sin avisar. Los .tab-btn asoman
2 px por abajo (llevan margin-bottom:-2px para pisar la linea gris) y con
esos 2 px de nada Chrome dibuja una barra vertical CON FLECHITAS al lado
de las solapas, que no lleva a ningun lado.
Pero ojo: esos 2 px que asoman SON la rayita dorada de la solapa abierta.
Si tapamos el desborde y listo, la rayita se corta y no se ve cual solapa
esta abierta. Por eso ademas se le saca el margen negativo al boton y la
linea gris de abajo se deja de dibujar como borde: pasa a ser una sombra
por dentro. Asi la rayita dorada cae justo encima de la gris, se ve igual
que siempre, y ya no sobresale nada. */
.tabs {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
border-bottom: 0;
box-shadow: inset 0 -2px 0 var(--border, #E7E3DA);
}
.tabs .tab-btn {
white-space: nowrap;
flex: 0 0 auto;
padding: 10px 14px;
min-height: 44px;
margin-bottom: 0;
}
/* La barra de deslizar de abajo tampoco se muestra: en el telefono no se
arrastra con el mouse, se desliza con el dedo, y la barra solo comia lugar.
Lo que avisa que hay mas solapas es el degradado de aca abajo. */
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { width: 0; height: 0; }
/* Sin barra, el borde tiene que avisar solo que hay mas para ese lado.
Son cuatro capas: las dos primeras son del color del fondo y se mueven CON
las solapas (background-attachment:local), asi que tapan la sombra cuando
ya no queda nada para ese lado; las dos de atras se quedan quietas y
asoman como una sombrita justo del lado donde todavia hay solapa. */
.tabs {
background-image:
linear-gradient(to right, var(--bg, #FAF9F6), transparent),
linear-gradient(to left, var(--bg, #FAF9F6), transparent),
linear-gradient(to right, rgba(30,37,54,.18), transparent),
linear-gradient(to left, rgba(30,37,54,.18), transparent);
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-size: 26px 100%, 26px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
/* ── Botones que se tocan con el dedo: 44 px ──────────────────────
Los .btn-sm se dejan chicos a proposito en las FILAS de una tabla, para que
la fila no crezca. Pero estos se tocan con el dedo, asi que van a 44 px.
Se suman los de Familia y los de Documentos: son tiras .doc-actions, que
nunca viven dentro de un , asi que ninguna fila de tabla se agranda. */
.action-bar .btn, .t-exp .btn, .mas-menu button,
.doc-actions .btn, #tab-familia .btn {
min-height: 44px;
font-size: 15px;
display: inline-flex;
align-items: center;
}
.action-bar .mas, .action-bar .mas > .btn { width: auto; }
/* Con 4 px de separacion dos botones vecinos entran en la misma yema del
dedo y se toca el que no era. 8 px es lo minimo para no equivocarse. */
.doc-actions { gap: 8px; }
/* ── Los pasos de la orden de servicio: que entren en la pantalla ────── */
.stepper, .pasos, .steps, .wizard-steps {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
font-size: 11px;
}
/* ── El listado de Funeraria: tarjetas, no una tabla arrastrable ──────── */
.tabla-listado { display: none; }
.tarjetas-lista { display: flex; }
/* ── Tarzán no tapa los botones de abajo ──────────────────────────────── */
body { padding-bottom: 78px; }
}
/* En pantallas muy chicas, todavía más ajustado */
@media (max-width: 400px) {
.topbar h1, .header h1 { font-size: 17px !important; }
table { font-size: 12px; }
th, td { padding: 6px 8px; }
}