/**
 * SEI — estilos responsivos globales (layout, listados, formularios).
 */

/* ── Layout principal ── */
@media only screen and (max-width: 992px) {
    .content {
        margin-left: 0;
        padding-left: 8px;
        padding-right: 8px;
        padding-bottom: 24px;
    }
}

@media only screen and (max-width: 600px) {
    .content {
        padding-left: 4px;
        padding-right: 4px;
    }

    .content .card-content {
        padding: 12px !important;
    }

    .content .card .card-content[style*="padding-top: 0"] {
        padding-top: 0 !important;
    }
}

/* ── Navbar ── */
@media only screen and (max-width: 992px) {
    nav .nav-wrapper .brand-logo {
        font-size: 1.4rem;
        left: 50%;
        transform: translateX(-50%);
    }

    nav .nav-wrapper > .row {
        margin-bottom: 0;
    }

    nav .nav-wrapper .col.s3:first-child {
        width: auto;
        position: absolute;
        left: 0;
        z-index: 2;
    }
}

.sei-mobile-search {
    display: none;
    padding: 8px 12px 12px;
    background: #1565c0;
}

.sei-mobile-search.is-open {
    display: block;
}

.sei-mobile-search .input-field {
    margin-top: 0;
    margin-bottom: 0;
}

.sei-mobile-search input {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
}

@media only screen and (max-width: 992px) {
    .sei-nav-search-desktop {
        display: none !important;
    }

    .sei-nav-search-toggle {
        display: inline-flex !important;
    }
}

@media only screen and (min-width: 993px) {
    .sei-nav-search-toggle {
        display: none !important;
    }
}

/* ── Encabezados de página (.encabezado) ── */
@media only screen and (max-width: 600px) {
    .content .encabezado .card-title {
        font-size: 1.25rem;
    }

    .content .encabezado .valign-wrapper {
        display: block;
    }

    .content .encabezado .valign-wrapper > [class*="col"] {
        width: 100% !important;
        margin-left: 0 !important;
        text-align: center !important;
        float: none;
    }

    .content .encabezado .right-align {
        text-align: center !important;
        margin-top: 0.75rem;
    }

    .content .encabezado .btn {
        width: 100%;
        max-width: 320px;
    }
}

/* ── Pestañas con scroll horizontal ── */
.content .sei-tabs-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
}

.content .sei-tabs-scroll .tabs {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
}

.content .sei-tabs-scroll .tabs .tab {
    flex: 0 0 auto;
    width: auto !important;
    float: none;
}

.content .sei-tabs-scroll .tabs .tab a {
    padding: 0 14px;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Anular columnas fijas de Materialize en pestañas (col s4/s6) */
.content .sei-tabs-scroll .tabs .tab.col.s4,
.content .sei-tabs-scroll .tabs .tab.col.s6,
.content .sei-tabs-scroll .tabs .tab[class*="col s"] {
    width: auto !important;
    float: none !important;
}

@media only screen and (max-width: 992px) {
    .content .sei-tabs-scroll .tabs .tab {
        flex: 0 0 auto !important;
        -webkit-box-flex: 0 !important;
        -webkit-flex-grow: 0 !important;
        -ms-flex-positive: 0 !important;
    }
}

@media only screen and (min-width: 993px) {
    .content .sei-tabs-scroll .tabs {
        width: 100%;
    }

    .content .sei-tabs-scroll .tabs .tab a {
        font-size: 0.9rem;
    }

    .content .sei-tabs-scroll.sei-list-tabs .tabs .tab a {
        font-size: 0.85rem;
    }
}

/* ── Tarjetas de listado ── */
.content .card.z-depth-3 {
    max-width: 100%;
    box-sizing: border-box;
}

@media only screen and (max-width: 992px) {
    .content .row > .col:only-child {
        width: 100% !important;
        margin-left: 0 !important;
        float: none !important;
    }
}

@media only screen and (max-width: 600px) {
    .content .card.z-depth-3 .card-content > .row {
        margin-left: 0;
        margin-right: 0;
    }

    body.sei-mobile-list-view .content .card.z-depth-3 .dataTables_wrapper {
        overflow-x: visible !important;
    }
}

/* ── Tablas (listados) ── */
.sei-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 0.5rem;
}

.content .card-content .sei-table-wrap table {
    margin-bottom: 0;
}

/* Anular responsive-table de Materialize (rompe DataTables) */
@media only screen and (max-width: 992px) {
    .content table.responsive-table:not(.peritaje-entry-table),
    .content table.sei-list-table:not(.peritaje-entry-table),
    .content .dataTables_wrapper table:not(.peritaje-entry-table) {
        display: table !important;
        table-layout: auto !important;
        white-space: normal !important;
    }

    .content table.responsive-table:not(.peritaje-entry-table) thead,
    .content table.sei-list-table:not(.peritaje-entry-table) thead,
    .content .dataTables_wrapper table:not(.peritaje-entry-table) thead {
        display: table-header-group !important;
    }

    .content table.responsive-table:not(.peritaje-entry-table) tbody,
    .content table.sei-list-table:not(.peritaje-entry-table) tbody,
    .content .dataTables_wrapper table:not(.peritaje-entry-table) tbody {
        display: table-row-group !important;
    }

    .content table.responsive-table:not(.peritaje-entry-table) tr,
    .content table.sei-list-table:not(.peritaje-entry-table) tr,
    .content .dataTables_wrapper table:not(.peritaje-entry-table) tr {
        display: table-row !important;
    }

    .content table.responsive-table:not(.peritaje-entry-table) th,
    .content table.responsive-table:not(.peritaje-entry-table) td,
    .content table.sei-list-table:not(.peritaje-entry-table) th,
    .content table.sei-list-table:not(.peritaje-entry-table) td,
    .content .dataTables_wrapper table:not(.peritaje-entry-table) th,
    .content .dataTables_wrapper table:not(.peritaje-entry-table) td {
        display: table-cell !important;
        float: none !important;
        clear: none !important;
        position: static !important;
    }

    .content table.responsive-table td::before,
    .content table.responsive-table th::before {
        display: none !important;
        content: none !important;
    }
}

/* Listados en tarjetas (móvil) */
@media only screen and (max-width: 600px) {
    body.sei-mobile-list-view .content .sei-table-wrap {
        overflow-x: visible;
    }

    body.sei-mobile-list-view .content .sei-table-wrap > .dataTables_wrapper,
    body.sei-mobile-list-view .content .dataTables_wrapper {
        overflow-x: visible !important;
        min-width: 0 !important;
    }

    body.sei-mobile-list-view .content .sei-table-wrap > table,
    body.sei-mobile-list-view .content .sei-table-wrap > .dataTables_wrapper {
        min-width: 0 !important;
    }

    body.sei-mobile-list-view .content .sei-list-table,
    body.sei-mobile-list-view .content .sei-list-table.dataTable {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        border: none !important;
    }

    body.sei-mobile-list-view .content .sei-list-table thead,
    body.sei-mobile-list-view .content .sei-list-table tfoot {
        display: none !important;
    }

    body.sei-mobile-list-view .content .sei-list-table tbody {
        display: block !important;
        width: 100% !important;
    }

    body.sei-mobile-list-view .content .sei-list-table tbody tr {
        display: block !important;
        background: #fafafa;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 12px;
        padding: 12px 12px 8px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    }

    body.sei-mobile-list-view .content .sei-list-table tbody tr td {
        display: block !important;
        padding: 0 0 10px !important;
        border: none !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: break-word;
    }

    body.sei-mobile-list-view .content .sei-list-table tbody tr td.sei-col-hidden,
    body.sei-mobile-list-view .content .sei-list-table tbody tr td[hidden] {
        display: none !important;
    }

    body.sei-mobile-list-view .content .sei-list-table tbody tr td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        font-size: 0.68rem;
        font-weight: 600;
        color: #78909c;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 3px;
    }

    body.sei-mobile-list-view .content .sei-list-table tbody tr td.sei-actions-cell,
    body.sei-mobile-list-view .content .sei-list-table tbody tr td.peritaje-actions-cell {
        border-top: 1px solid #eceff1;
        margin-top: 4px;
        padding-top: 10px !important;
    }

    body.sei-mobile-list-view .content .sei-list-table tbody tr td.sei-actions-cell .center,
    body.sei-mobile-list-view .content .sei-list-table tbody tr td.peritaje-actions-cell .center {
        justify-content: flex-start;
    }

    body.sei-mobile-list-view .content .sei-list-table tbody tr td small {
        display: block;
        margin-top: 2px;
    }

    /* DataTables controles en móvil */
    body.sei-mobile-list-view .content .dataTables_wrapper .dataTables_length select {
        display: inline-block;
        width: auto;
    }
}

/* Columnas anidadas en tabs de listados */
@media only screen and (max-width: 992px) {
    .content .card-content > .row > .col.s12 > .col,
    .content .card-content > .row > .col.s12 > .col.s12,
    .content .card-content > .row > .col.s12 > .col.s12.m12.l12 {
        width: 100% !important;
        margin-left: 0 !important;
        float: none !important;
        padding-left: 0;
        padding-right: 0;
    }
}

/* DataTables */
.content .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.content .dataTables_wrapper .dataTables_length,
.content .dataTables_wrapper .dataTables_filter {
    margin-bottom: 0.5rem;
}

@media only screen and (max-width: 600px) {
    .content .dataTables_wrapper .dataTables_length,
    .content .dataTables_wrapper .dataTables_filter {
        text-align: left;
        float: none;
        width: 100%;
    }

    .content .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0;
        margin-top: 0.25rem;
    }

    .content .dataTables_wrapper .dataTables_paginate {
        margin-top: 0.75rem;
        text-align: center;
        float: none;
    }

    .content .dataTables_wrapper .dataTables_info {
        text-align: center;
        float: none;
        width: 100%;
    }
}

/* Acciones en tablas */
.sei-actions-cell,
.content table td:last-child .center {
    white-space: nowrap;
}

.content table td .center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
}

@media only screen and (max-width: 600px) {
    .content table td .btn-floating {
        margin: 0;
        transform: scale(0.92);
    }
}

/* scroll horizontal solo en escritorio/tablet para listados */
@media only screen and (min-width: 601px) {
    .content .sei-table-wrap > table,
    .content .sei-table-wrap > .dataTables_wrapper {
        min-width: 520px;
    }
}

/* ── Formularios ── */
@media only screen and (max-width: 992px) {
    .content .input-field.col.s10,
    .content .input-field.col[class*="s10"] {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .content .col.s10 + .btn-floating,
    .content .input-field.col.s10 ~ .btn-floating {
        margin: 0.5rem 0 0;
    }

    .content form .row .col[class*="l"]:not([class*="s12"]) {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

@media only screen and (max-width: 600px) {
    .content .btn.right[type="submit"],
    .content .btn[type="submit"].right,
    .content form .btn.waves-effect.right {
        width: 100%;
        float: none !important;
        margin-top: 0.5rem;
    }

    .content .btn:not(.btn-floating):not(.peritaje-entry-add-btn) {
        min-height: 42px;
        line-height: 42px;
        height: auto;
    }
}

/* Tablas de formulario (no tarjetas peritaje): scroll horizontal */
@media only screen and (max-width: 992px) {
    .content table.responsive-table.centered:not(.peritaje-entry-table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .content table.responsive-table.centered:not(.peritaje-entry-table) thead,
    .content table.responsive-table.centered:not(.peritaje-entry-table) tbody {
        display: table;
        width: 100%;
        min-width: 560px;
    }
}

/* ── Reportes Excel ── */
.sei-report-row {
    border-bottom: 1px solid #eceff1;
    padding: 12px 0;
}

.sei-report-row:last-child {
    border-bottom: none;
}

@media only screen and (max-width: 600px) {
    .sei-report-header {
        display: none;
    }

    .sei-report-row form {
        display: block;
    }

    .sei-report-row form::after {
        content: "";
        display: table;
        clear: both;
    }

    .sei-report-row .col {
        width: 100% !important;
        margin-left: 0 !important;
        text-align: left !important;
        float: none;
    }

    .sei-report-row .center-align {
        text-align: left !important;
    }

    .sei-report-row .btn {
        width: 100%;
        margin-top: 4px;
    }
}

/* ── Modales ── */
@media only screen and (max-width: 600px) {
    .modal {
        width: 94% !important;
        max-height: 88% !important;
        top: 6% !important;
    }

    .modal .modal-footer {
        display: flex;
        flex-direction: column-reverse;
        gap: 8px;
        height: auto;
        padding: 12px;
    }

    .modal .modal-footer .btn {
        width: 100%;
        margin: 0;
        float: none !important;
    }
}

/* ── Auth / contenedores ── */
@media only screen and (max-width: 600px) {
    .content > .container {
        width: 100%;
        padding: 0 4px;
    }
}

/* ── Gráficos ── */
.content .sei-skeleton-chart-host,
.content canvas {
    max-width: 100%;
}

/* ── Mapas (lugares) ── */
.content #map,
.content #mapa_lugares,
.content #lugares_map,
.content .sei-map-container {
    max-width: 100% !important;
    box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
    .content #map,
    .content #mapa_lugares,
    .content #lugares_map {
        height: 280px !important;
        max-height: 50vh !important;
    }
}

/* ── Utilidades ── */
.sei-stack-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media only screen and (max-width: 600px) {
    .sei-stack-mobile {
        flex-direction: column;
    }

    .sei-stack-mobile .btn {
        width: 100%;
    }
}