/*
   LC Responsive Perfect
   Parche exclusivamente responsive/adaptabilidad.
   No cambia colores, textos, logica ni estructura funcional.
*/

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg,
iframe,
object,
embed {
    max-width: 100%;
}

img,
picture,
video,
canvas,
svg {
    height: auto;
}

iframe {
    display: block;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

input,
select,
textarea {
    min-width: 0;
}

textarea {
    resize: vertical;
}

pre,
code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Contenedores generales: evitar desbordes sin alterar estetica */
.container,
.container-fluid,
.contenedor,
.wrapper,
.page,
.main,
.main-content,
.content,
.app,
.panel,
.card,
.box,
.form-container,
.table-container,
.modal,
.modal-dialog,
.modal-content,
.modal-box,
.modal-contenido,
.hero-panel,
.cta-panel,
.feature-panel,
.smart-panel {
    max-width: 100%;
    min-width: 0;
}

/* Tablas: scroll horizontal controlado en mobile/tablet */
.table-responsive,
.table-container,
.table-wrap,
.dataTables_wrapper,
.overflow-x-auto,
.card-body,
.panel,
.box {
    max-width: 100%;
}

.table-responsive,
.table-container,
.table-wrap,
.dataTables_wrapper,
.overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

td,
th {
    word-break: normal;
}

/* Formularios fluidos */
form,
.form,
.form-grid,
.grid-form,
.row,
.actions,
.form-actions,
.button-group,
.btn-group,
.toolbar,
.table-header,
.header-actions,
.hero-botones,
.card-footer,
.modal-actions {
    max-width: 100%;
    min-width: 0;
}

.form-grid,
.grid-form {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.row {
    min-width: 0;
}

[class*="col-"] {
    min-width: 0;
}

.actions,
.form-actions,
.button-group,
.btn-group,
.toolbar,
.table-header,
.header-actions,
.hero-botones,
.card-footer,
.modal-actions {
    flex-wrap: wrap;
}

/* Botones y enlaces largos */
.btn,
button,
input[type="submit"],
input[type="button"],
a.btn,
.nav a,
.nav-item,
.navlink,
.btn-principal,
.btn-secundario,
.btn-demo,
.btn-preview,
.btn-module {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Dashboard principal con sidebar/sandwich */
@media (max-width: 1024px) {
    .app {
        width: 100%;
        max-width: 100%;
    }

    .main,
    .main-content,
    main {
        width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
    }

    .sidebar {
        max-width: min(86vw, 320px);
    }
}

@media (max-width: 820px) {
    #btnMenuMobile,
    .btn-menu-mobile,
    .menu-toggle,
    .hamburger,
    button[aria-label*="Menu"],
    button[title*="Menu"] {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    #btnCollapse {
        display: none !important;
    }

    .sidebar {
        position: fixed !important;
        left: max(10px, env(safe-area-inset-left));
        top: calc(82px + env(safe-area-inset-top));
        width: min(86vw, 320px) !important;
        max-width: min(86vw, 320px) !important;
        height: calc(100dvh - 98px - env(safe-area-inset-top));
        max-height: calc(100dvh - 98px - env(safe-area-inset-top));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .sidebar.open,
    .sidebar.active,
    .sidebar.show {
        transform: translateX(0) !important;
    }

    header,
    .header,
    .topbar,
    .page-header {
        max-width: calc(100vw - 20px);
    }

    .brand-left,
    .brand,
    .brand-link,
    .brand-title,
    .logo-area,
    .top-actions {
        min-width: 0;
    }

    .brand-title,
    .brand-texto,
    .brand-name,
    .logo-area h1,
    .logo-area h2 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Grillas: caen progresivamente sin tocar el estilo visual */
@media (max-width: 1400px) {
    .cards-grid,
    .feature-grid,
    .smart-grid,
    .kpi-grid,
    .stats-grid,
    .dashboard-grid,
    .grid,
    .products-grid,
    .servicios-grid,
    .turnos-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
    }
}

@media (max-width: 768px) {
    body {
        min-height: 100dvh;
    }

    .container,
    .container-fluid,
    .contenedor,
    .wrapper,
    .page,
    .main,
    .main-content,
    .content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: clamp(12px, 4vw, 20px) !important;
        padding-right: clamp(12px, 4vw, 20px) !important;
    }

    header,
    .header,
    .topbar,
    .page-header {
        width: auto;
        max-width: calc(100vw - 20px);
    }

    h1 {
        font-size: clamp(1.7rem, 8vw, 2.35rem) !important;
        line-height: 1.08 !important;
    }

    h2 {
        font-size: clamp(1.45rem, 6.4vw, 2rem) !important;
        line-height: 1.12 !important;
    }

    h3 {
        font-size: clamp(1.15rem, 5vw, 1.45rem) !important;
        line-height: 1.16 !important;
    }

    .panel,
    .card,
    .box,
    .form-container,
    .table-container,
    .hero-panel,
    .cta-panel,
    .feature-panel,
    .smart-panel {
        width: 100%;
    }

    .panel-header,
    .cards-wrap,
    .feature-header,
    .feature-grid,
    .smart-grid,
    .cta-main,
    .cta-side,
    .hero-main,
    .card-body {
        padding-left: clamp(14px, 5vw, 22px) !important;
        padding-right: clamp(14px, 5vw, 22px) !important;
    }

    .cards-grid,
    .feature-grid,
    .smart-grid,
    .kpi-grid,
    .stats-grid,
    .dashboard-grid,
    .grid,
    .products-grid,
    .servicios-grid,
    .turnos-grid {
        grid-template-columns: 1fr !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .row > * {
        min-width: 0;
    }

    .actions,
    .form-actions,
    .button-group,
    .btn-group,
    .toolbar,
    .table-header,
    .header-actions,
    .hero-botones,
    .card-footer,
    .modal-actions {
        width: 100%;
        align-items: stretch;
    }

    .actions > *,
    .form-actions > *,
    .button-group > *,
    .toolbar > *,
    .hero-botones > *,
    .modal-actions > * {
        max-width: 100%;
    }

    input,
    select,
    textarea,
    .form-control,
    .form-select {
        width: 100%;
        font-size: 16px !important;
    }

    .search-box,
    .search,
    .buscador-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .table-container,
    .table-wrap,
    .table-responsive,
    .dataTables_wrapper {
        border-radius: inherit;
    }

    table {
        width: max-content;
        min-width: 720px;
    }

    .modal,
    .modal-dialog,
    .modal-box,
    .modal-contenido,
    .modal-content {
        width: min(100%, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
    }

    .modal-overlay,
    .modal-backdrop {
        padding: 10px !important;
        overflow: auto !important;
        align-items: flex-start !important;
    }

    .modal-body,
    .modal-frame-wrap,
    .iframe-wrap {
        max-width: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-frame-wrap,
    .modal-body iframe,
    iframe.modal-frame {
        height: min(72dvh, 760px) !important;
    }

    .contacto-fijo,
    .whatsapp-btn,
    .floating-btn,
    .fab {
        right: max(14px, env(safe-area-inset-right)) !important;
        bottom: max(14px, env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 520px) {
    header,
    .header,
    .topbar,
    .page-header {
        gap: 10px !important;
    }

    .brand-left img,
    .brand-logo-wrap,
    .brand-icon,
    .logo-area img {
        max-width: 48px !important;
        max-height: 48px !important;
    }

    .top-actions,
    .header-actions,
    .nav,
    nav {
        gap: 8px !important;
    }

    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    a.btn,
    .btn-principal,
    .btn-secundario,
    .btn-demo,
    .btn-preview,
    .btn-module {
        min-height: 42px;
    }

    .table-header,
    .modal-header,
    .card-footer,
    .card-top {
        flex-direction: column;
        align-items: stretch !important;
    }

    .modal-header h1,
    .modal-header h2,
    .modal-header h3 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .toast,
    .alert,
    .message,
    .notification {
        max-width: calc(100vw - 24px) !important;
    }
}

@media (max-width: 380px) {
    .container,
    .container-fluid,
    .contenedor,
    .wrapper,
    .page,
    .main,
    .main-content,
    .content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    header,
    .header,
    .topbar,
    .page-header {
        max-width: calc(100vw - 12px);
        margin-left: 6px !important;
        margin-right: 6px !important;
    }

    .panel-header,
    .cards-wrap,
    .feature-header,
    .feature-grid,
    .smart-grid,
    .cta-main,
    .cta-side,
    .hero-main,
    .card-body {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .sidebar {
        left: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }
}

@media (max-height: 680px) and (max-width: 900px) {
    .modal,
    .modal-dialog,
    .modal-box,
    .modal-contenido,
    .modal-content {
        max-height: calc(100dvh - 12px) !important;
    }

    .modal-frame-wrap,
    .modal-body iframe,
    iframe.modal-frame,
    .iframe-wrap {
        height: calc(100dvh - 96px) !important;
    }

    .sidebar {
        top: 70px !important;
        height: calc(100dvh - 82px) !important;
        max-height: calc(100dvh - 82px) !important;
    }
}

@media (pointer: coarse) {
    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    a.btn,
    select,
    input,
    textarea,
    .nav a,
    .nav-item,
    .navlink {
        touch-action: manipulation;
    }
}