/* ============================================================
   Habitta — Responsive
   ============================================================ */

/* Overlay sidebar móvil */
#sidebarOverlay {
    display: none;
    position: fixed;
    top: var(--shell-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 899;
    cursor: pointer;
}

#sidebarOverlay.active {
    display: block;
}

body.sidebar-open {
    overflow: hidden;
}

/* Utilidades usadas en formularios */
.justify-content-center {
    justify-content: center;
}

.mb-3 {
    margin-bottom: var(--spacing-md);
}

/* ── Tablet (≤1024px) ───────────────────────────────────── */

@media (max-width: 1024px) {
    .content {
        margin-left: 0 !important;
        padding: 10px var(--shell-inset) 90px;
    }

    .breadcrumb {
        margin: 6px var(--shell-inset) 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .user-avatar img {
        margin-right: 10px;
    }

    .content .dataTables_wrapper .dataTables_length,
    .content .dataTables_wrapper .dataTables_filter {
        float: none;
        text-align: left;
        margin-bottom: 10px;
    }

    .content .dataTables_wrapper .dataTables_info,
    .content .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        margin-top: 10px;
    }

    .content .dataTables_wrapper .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
}

/* ── Mobile (≤768px) ────────────────────────────────────── */

@media (max-width: 768px) {
    :root {
        --shell-header-height: 84px;
    }

    .navbar {
        padding: 0 12px;
    }

    .logo img,
    .logo__img {
        width: 76px;
        height: 52px;
    }

    .logo__brand {
        max-width: min(200px, 48vw);
    }

    .logo__brand--mark {
        max-width: none;
    }

    .logo__brand--mark .logo__img {
        width: 48px;
        height: 48px;
    }

    .logo__wordmark {
        font-size: 1.5rem;
    }

    .logo__name {
        font-size: 0.95rem;
    }

    .user-panel .panel-footer img,
    .user-panel__logo {
        width: 76px;
        height: 52px;
    }

    .welcome {
        display: none;
    }

    .breadcrumb {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .breadcrumb__trail {
        order: 1;
        width: 100%;
        flex: 0 0 auto;
    }

    .empresa-contexto-selector-wrap {
        order: 2;
        width: 100%;
        margin-left: 0;
        padding-top: 6px;
        border-top: 1px solid var(--shell-border);
    }

    .empresa-contexto-selector {
        align-items: flex-end;
        width: 100%;
    }

    .empresa-contexto-selector__label {
        text-align: right;
        width: 100%;
    }

    .empresa-contexto-selector__row {
        justify-content: flex-end;
        width: 100%;
    }

    .empresa-contexto-selector__select {
        flex: 1 1 auto;
        min-width: 0;
        max-width: min(100%, 320px);
        width: min(100%, 320px);
        height: 34px;
        font-size: var(--font-size-xs);
    }

    .empresa-contexto-selector__btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .notification {
        padding-left: 0;
        margin-left: 0;
        border-left: none;
    }

    .notif-bell {
        padding-left: 0;
        margin-left: 0;
        border-left: none;
    }

    body:has(.notif-bell--open) {
        overflow: hidden;
    }

    .notif-bell__backdrop {
        background: rgba(15, 23, 42, 0.45);
    }

    .notif-bell__panel {
        position: fixed;
        top: calc(var(--shell-header-height) + 8px);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: min(72dvh, calc(100dvh - var(--shell-header-height) - 20px));
        box-shadow: 0 16px 48px rgba(15, 23, 42, 0.22);
    }

    .notif-bell__header {
        flex-wrap: wrap;
        row-gap: 0.35rem;
        padding: 0.65rem 0.85rem;
    }

    .notif-bell__header strong {
        font-size: 0.9rem;
        min-width: 0;
    }

    .notif-bell__mark-all {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
        text-align: left;
        font-size: 0.7rem;
        line-height: 1.3;
    }

    .notif-bell__body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .notif-item {
        padding: 0.65rem 0.85rem;
    }

    .notif-item__head {
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
    }

    .notif-item__date {
        white-space: normal;
    }

    .notif-item__msg {
        font-size: 0.8125rem;
        word-break: break-word;
    }

    .user-avatar img {
        width: 36px;
        height: 36px;
        margin-right: 0;
    }

    .card-menu-dos {
        height: auto;
        min-height: 130px;
    }

    .card-slide {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        height: auto;
        min-height: 280px;
        padding: 30px 20px;
    }

    .card-imagen-redonda {
        max-width: 180px;
    }

    .subir-imagen {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .subir-imagen .acciones-derecha {
        width: 100%;
    }

    .subir-imagen .acciones-derecha .form-control {
        max-width: 100%;
    }

    .contenedor-botones {
        flex-direction: column;
        align-items: stretch;
    }

    .contenedor-botones > .titulo-seccion {
        white-space: normal;
    }

    .grupo-botones-derecha {
        margin-left: 0;
        width: 100%;
        justify-content: stretch;
    }

    .grupo-botones-derecha .ds-btn,
    .grupo-botones-derecha .btn-custom {
        width: 100%;
        justify-content: center;
    }

    .botones-formulario {
        flex-direction: column;
        align-items: stretch;
    }

    .botones-formulario .ds-btn,
    .botones-formulario .btn-custom {
        width: 100%;
    }

    .user-panel {
        width: 100%;
        right: -100%;
        top: var(--shell-header-height);
        bottom: 0;
        height: auto;
    }

    /* Modales unificados */
    .auto-modal-box-new {
        width: calc(100vw - 24px);
        max-width: 480px;
        max-height: 90vh;
    }

    .ds-upload-preview {
        width: 90px;
        height: 90px;
    }

    .ds-btn,
    .btn-custom {
        padding: 9px 18px;
        font-size: 15px;
    }

    .footer {
        padding: 12px 10px;
        font-size: var(--font-size-xs);
    }
}

/* ── Small mobile (≤576px) ────────────────────────────── */

@media (max-width: 768px) {
    :root {
        --shell-header-height: 84px;
    }
}

@media (max-width: 576px) {
    :root {
        --shell-header-height: 76px;
        --shell-footer-height: 52px;
        --shell-content-pad-bottom: calc(var(--shell-footer-height) + 18px);
    }

    body {
        padding-top: var(--shell-header-height);
    }

    .navbar {
        min-height: var(--shell-header-height);
    }

    .sidebar {
        top: var(--shell-header-height);
        width: min(280px, 92vw);
        bottom: var(--shell-footer-height);
    }

    .content {
        padding-bottom: var(--shell-content-pad-bottom);
    }

    .content .card {
        padding: 14px;
        border-radius: var(--radius);
    }

    .titulo-seccion {
        font-size: var(--font-size-base);
        white-space: normal;
    }

    .breadcrumb {
        font-size: var(--font-size-xs);
        padding: 8px 12px;
    }

    .card-content-uno img {
        width: 56px;
        height: 56px;
    }

    .card-panel {
        grid-template-columns: 1fr;
    }

    .form-row-box {
        padding: 20px 12px 12px;
    }

    .auth-card {
        padding: 24px 20px;
        margin: 0 12px;
    }

    .auth-card--registro {
        margin: 0;
    }

    .theme-toggle:not(.theme-toggle--footer) {
        top: auto;
        bottom: 12px;
    }

    .theme-toggle:not(.theme-toggle--footer) .theme-toggle-content {
        transform: translateX(70%);
        padding: 8px 12px;
        font-size: var(--font-size-xs);
    }

    .footer__inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .theme-toggle--footer .theme-toggle-content span {
        display: none;
    }

    .notif-bell__panel {
        left: 8px;
        right: 8px;
        top: calc(var(--shell-header-height) + 6px);
        max-height: calc(100dvh - var(--shell-header-height) - 12px);
        border-radius: var(--radius);
    }

    .notif-bell__btn {
        font-size: 22px;
    }

    .notif-bell__badge {
        top: -5px;
        right: -6px;
        min-width: 16px;
        height: 16px;
        font-size: 0.6rem;
        line-height: 16px;
    }
}