/| en el DOM, así que
* la semántica y los lectores de pantalla siguen funcionando.
*/
.table-wrap { border: none; background: none; }
.table thead { display: none; }
.table,
.table tbody,
.table tr,
.table td { display: block; width: 100%; }
.table tr {
position: relative;
padding: 12px 48px 12px 14px;
background: #fff;
border: 1px solid var(--slate-200);
border-radius: var(--radius);
}
.table tr + tr { margin-top: 8px; }
/* La celda del nombre manda: es el título de la tarjeta. */
.table td {
padding: 3px 0;
border: none;
text-align: left;
}
.table td[data-label]::before {
content: attr(data-label);
display: block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--slate-500);
}
/* El nombre no lleva rótulo: ya es el título. */
.table td[data-label='Nombre']::before,
.table td[data-label='Empresa']::before { display: none; }
.table td[data-label='Nombre'],
.table td[data-label='Empresa'] { margin-bottom: 4px; }
.row__open {
font-size: 1rem;
min-height: 44px;
/* Toda la fila es zona táctil (Ley de Fitts). */
padding-right: 4px;
}
/* Contactos se deja fuera a propósito: se ve el email y el teléfono. */
.cell-sub { display: inline-block; margin-right: 6px; }
/* Editar y el checkbox se anclan a la esquina, sin sumar una fila. */
.cell-actions {
position: absolute;
top: 8px;
right: 10px;
width: auto;
padding: 0;
}
.cell-actions .btn--link { min-height: 44px; padding: 6px 8px; }
.cell-select {
position: absolute;
top: 8px;
right: 10px;
width: auto;
padding: 0;
}
/* En modo batch el checkbox y Editar no pueden pisarse. */
.table--select .cell-actions { right: 44px; }
.table--select .cell-sub { display: block; }
/* --- Barra de selección múltiple ---
Deja de ser una barra pegada abajo y pasa a ser una hoja propia:
ocupa el ancho, respeta el gesto de volver y sus botones son grandes. */
.bulkbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 12px;
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
border-radius: 0;
box-shadow: 0 -8px 28px rgb(32 37 41 / 22%);
}
.bulkbar__count { margin: 0; font-size: 0.92rem; }
.bulkbar__actions { display: flex; gap: 8px; }
.bulkbar__actions .btn { flex: 1 1 0; min-height: 44px; }
/* Con la hoja de selección abierta, el contenido no puede quedar debajo. */
.table-wrap + .pagination,
.pagination { padding-bottom: 0; }
/* --- Ficha lateral ---
Deja de entrar por la derecha y ocupa toda la pantalla, como una hoja
de detalle. El fondo atenuado sigue cerrando al tocar fuera. */
.drawer__panel {
width: 100vw;
border-left: none;
}
.drawer__head {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: 'head head' 'edit close';
padding: 12px;
}
.drawer__heading { grid-area: head; }
#detail-edit { grid-area: edit; }
#detail-close { grid-area: edit close; justify-self: end; }
.drawer__name { font-size: 1.08rem; }
.drawer__head .btn { min-height: 44px; }
.drawer__meta,
.drawer__content { padding-inline: 12px; }
/* --- Formularios --- */
.form__grid { grid-template-columns: 1fr; }
.form__actions { flex-direction: column-reverse; align-items: stretch; }
.form__actions .btn { width: 100%; min-height: 46px; }
/* --- Panel de perfil ---
En mobile deja de flotar sobre la esquina y se abre como una hoja
anclada abajo, que es el patrón que ya conocen y donde el pulgar llega. */
.profile__menu {
position: fixed;
top: auto;
right: 0;
bottom: 0;
left: 0;
width: 100%;
border-radius: 14px 14px 0 0;
border-bottom: none;
padding: 16px 12px;
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
animation: sheet-in 0.2s ease-out;
z-index: 41;
}
/* Fondo atenuado: sin él, una hoja flotando sobre el contenido se lee como
algo pegado. Va detrás del panel y también cierra al tocarlo.
El :not([hidden]) es necesario: `display` de autor le gana al `hidden`
del navegador, y sin esto el scrim quedaría siempre visible. */
.profile__scrim:not([hidden]) {
display: block;
position: fixed;
inset: 0;
z-index: 40;
background: rgb(32 37 41 / 45%);
animation: scrim-in 0.2s ease-out;
}
@keyframes sheet-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes scrim-in {
from { opacity: 0; }
to { opacity: 1; }
}
.profile__trigger,
.profile__action { min-height: 44px; }
.profile__trigger-name { display: inline; }
/* --- Avisos --- */
.toast {
left: 12px;
right: 12px;
bottom: 12px;
width: auto;
}
/* --- Tablas de administración (Equipo, Diagnóstico) ---
Mismo tratamiento de tarjetas: el se oculta y cada celda muestra
su rótulo desde data-label. */
.table thead { display: none; }
.table tr { padding: 10px 12px; }
.table td { padding: 2px 0; }
}
/* Teléfonos angostos (SE, iPhone SE): un poco más de margen. */
@media (max-width: 380px) {
.navlink { font-size: 0.86rem; }
.toolbar__actions .btn { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
|