/* Ajustes pensados para uso principal en celular (sobre Bootstrap 5.3). */

.celda-diagnostico { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Celulares y tablets chicas ---------- */
@media (max-width: 767.98px) {
    /* 16px evita el zoom automático de iOS al enfocar un campo; alturas cómodas para el dedo */
    .form-control, .form-select { min-height: 46px; font-size: 16px; }
    textarea.form-control { min-height: 96px; }
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; padding: .4rem .85rem; font-size: .95rem; }
    .form-check-input { width: 1.25em; height: 1.25em; }
    h1.h3 { font-size: 1.35rem; }

    /* Botones de la cabecera de cada pantalla: ocupan todo el ancho, de dos en dos */
    .acciones-pagina { width: 100%; }
    .acciones-pagina .btn { flex: 1 1 45%; }

    /* Modales: pie con botones grandes lado a lado */
    .modal-footer { flex-wrap: nowrap; gap: .5rem; }
    .modal-footer > .btn, .modal-footer > form { flex: 1 1 0; margin: 0; }
    .modal-footer > form .btn { width: 100%; }

    /* ---------- Tablas como tarjetas (clase .tabla-cards) ---------- */
    .tabla-cards { --bs-table-striped-bg: transparent; --bs-table-hover-bg: transparent; }
    .tabla-cards thead { display: none; }
    .tabla-cards, .tabla-cards tbody, .tabla-cards tr, .tabla-cards td { display: block; width: 100%; }
    .tabla-cards tbody tr {
        border: 1px solid var(--bs-border-color);
        border-radius: .6rem;
        margin: .75rem;
        width: auto;
        padding: .4rem .85rem;
        background: var(--bs-body-bg);
    }
    .tabla-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        text-align: right;
        border: 0;
        padding: .4rem 0;
        box-shadow: none;
    }
    .tabla-cards td::before {
        content: attr(data-label);
        flex: 0 0 36%;
        text-align: left;
        font-weight: 600;
        color: var(--bs-secondary-color);
    }
    .tabla-cards td[data-label=""]::before { content: none; }
    .tabla-cards td[colspan] { display: block; text-align: center; }
    .tabla-cards td[colspan]::before { content: none; }
    .tabla-cards .celda-diagnostico { max-width: none; white-space: normal; }
    .tabla-cards .celda-acciones {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: .5rem;
        margin-top: .35rem;
        padding-top: .65rem;
        border-top: 1px solid var(--bs-border-color);
    }
    .tabla-cards .celda-acciones .btn { flex: 1 1 auto; }
    .tabla-cards select { min-width: 0 !important; width: 100%; }
    .tabla-cards .table-responsive, .table-responsive:has(> .tabla-cards) { overflow: visible; }
}

/* ---------- Menú principal en celular/tablet ---------- */
@media (max-width: 991.98px) {
    .navbar-collapse .nav-link { padding: .8rem 0; font-size: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
    .navbar-collapse .btn { width: 100%; margin-top: .75rem; }
}