/*
 * Capa responsiva común de Catalina.
 * Todas las reglas se limitan a pantallas pequeñas para preservar el escritorio.
 */

@media (max-width: 900px) {
    html {
        max-width: 100%;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

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

    button,
    a,
    [onclick] {
        touch-action: manipulation;
    }

    input:not([type="hidden"]),
    select,
    textarea {
        max-width: 100%;
        font-size: 16px !important;
    }

    /* Las tablas conservan sus columnas y se recorren horizontalmente. */
    :is(.cont_resultados,.modal_busqueda_resultados,.parte_resultados,.city_table_wrap) {
        max-width: 100%;
        overflow: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    table.tabla,
    table.tabla_resultados {
        min-width: 700px;
    }

    /* Diálogos utilizables dentro del alto real del navegador móvil. */
    dialog:is(.modal,.modal_new,.modal_search,.modal_notificacion) {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        margin: auto;
        overscroll-behavior: contain;
    }

    dialog.modal_search {
        height: min(92dvh, 760px) !important;
    }

    dialog :is(.encabezado,.encabezado_new,.encabezado_search,.cabecera_informacion) {
        position: sticky;
        top: 0;
        z-index: 6;
    }

    dialog :is(.cuerpo,.cuerpo_new,.contact_form_grid,.expense_form_grid) {
        max-width: 100%;
    }

    /* Encabezados de las vistas cargadas en el iframe. */
    :is(.billing_header,.expenses_header,.contact_header,.messages_header,.financial_header) {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    :is(.billing_title,.expenses_title,.contact_title,.messages_title,.financial_title) p {
        display: none !important;
    }

    :is(.billing_content,.expenses_content,.contact_content,.messages_content,.financial_content,.inventory_content) {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    /* Crear servicio: se priorizan búsqueda, creación y navegación. */
    body.page-create-service .cabecera {
        position: relative;
        align-items: center;
        flex-wrap: nowrap;
        min-height: 116px;
        height: 116px;
        padding: 10px 12px 62px;
    }

    body.page-create-service .cabecera > span + span {
        display: none;
    }

    body.page-create-service .busqueda {
        position: absolute;
        right: 10px;
        bottom: 10px;
        left: 10px;
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 44px;
        align-items: center;
        gap: 7px;
        width: auto !important;
        height: 42px;
        margin: 0;
    }

    body.page-create-service .busqueda > div {
        display: none !important;
    }

    body.page-create-service .busqueda > button,
    body.page-create-service .busqueda > button + input,
    body.page-create-service .busqueda > button + input + button {
        position: static;
        width: 100% !important;
        min-width: 0;
        height: 42px;
        margin: 0;
    }

    body.page-create-service .busqueda > button + input + button {
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    body.page-create-service .busqueda > button + input + button > span {
        justify-content: center;
        width: 100%;
    }

    body.page-create-service .busqueda > button + input + button span span {
        display: none;
    }

    body.page-create-service .busqueda > button + input + button span ion-icon {
        margin: 0;
    }

    body.page-create-service .cont_resultados {
        top: 126px;
        right: 8px;
        left: 8px;
        width: auto;
        height: calc(100dvh - 194px);
    }

    body.page-create-service .tabla_control {
        right: 8px;
        bottom: 8px;
        left: 8px;
        width: auto;
    }

    /* Dashboard por estado: tarjetas legibles y tabla desplazable. */
    body.page-dashboard {
        min-height: 100%;
        overflow: auto !important;
    }

    body.page-dashboard .dashboard_resumen {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 8px;
        width: 100%;
        min-height: 0;
        height: auto;
        margin: 0;
        padding: 8px 10px 0;
        border: 0;
    }

    body.page-dashboard .dashboard_resumen .cont_dash {
        width: 100% !important;
        min-width: 0;
        height: 92px !important;
        margin: 0 !important;
    }

    body.page-dashboard .dashboard_resumen .cont_dash:hover {
        transform: none;
    }

    body.page-dashboard .cont_resultados {
        width: calc(100% - 20px);
        height: 58dvh;
        min-height: 330px;
        margin: 12px 10px 70px;
    }

    body.page-dashboard .tabla_control {
        right: 10px;
        bottom: 8px;
        left: 10px;
        width: auto;
    }

    /* Detalle del servicio. */
    body.page-service-detail .workspace_servicio {
        width: 100%;
        padding: 10px !important;
        overflow-x: hidden;
    }

    body.page-service-detail :is(.servicio_hoja,.resumen_servicio) {
        width: 100% !important;
        min-width: 0;
    }

    body.page-service-detail #modal_solicitud {
        width: calc(100vw - 12px) !important;
        height: calc(100dvh - 12px) !important;
        max-width: none;
        max-height: none !important;
    }

    body.page-service-detail #modal_remision .remision_totales {
        margin-right: 10px;
        margin-left: 10px;
    }

    /* Formularios principales de contacto, inventario y gastos. */
    :is(.contact_form_grid,.expense_form_grid) {
        grid-template-columns: 1fr !important;
    }

    .modal_new .info_casilla {
        min-width: 0 !important;
    }

    /* Acceso: tarjeta completa y cómoda en teléfonos. */
    body.page-login {
        align-items: center;
        justify-content: center;
        min-height: 100dvh;
        padding: 12px;
        overflow: auto;
    }

    body.page-login .session {
        width: min(100%, 430px);
        max-width: 430px;
        margin: auto;
        overflow: hidden;
        border-radius: 22px;
    }

    body.page-login .rigth {
        display: none;
    }

    body.page-login .session > div:first-child,
    body.page-login form {
        width: 100%;
    }

    body.page-login form {
        padding: 32px 22px 24px;
        border-radius: 22px;
    }

    body.page-login input {
        width: 100%;
        min-width: 0;
        height: 48px;
    }

    body.page-login #popup_msj {
        width: 100%;
        height: auto;
        min-height: 20px;
    }

    /* Mensajes: tarjetas en flujo vertical, sin compresión ni superposición. */
    html.page-messages-root,
    body.page-messages {
        height: auto !important;
        min-height: 100dvh;
    }

    body.page-messages {
        display: block;
        overflow-x: hidden;
        overflow-y: auto !important;
    }

    body.page-messages .messages_header {
        position: sticky;
        top: 0;
        width: 100%;
        height: 72px;
        min-height: 72px;
    }

    body.page-messages .messages_content {
        display: flex !important;
        flex: none;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        min-height: 0;
        padding: 12px !important;
        overflow: visible !important;
    }

    body.page-messages :is(.message_editor_card,.published_card) {
        position: static;
        flex: none;
        width: 100%;
        min-height: 0;
        align-self: auto;
    }

    body.page-messages #message-form {
        flex: none;
        min-height: 0;
        padding: 14px;
    }

    body.page-messages .textarea_shell {
        flex: none;
        width: 100%;
        height: 170px;
        min-height: 170px;
    }

    body.page-messages #message {
        width: 100%;
        height: 168px;
        min-height: 168px;
    }

    body.page-messages .published_card {
        margin-bottom: 12px;
    }
}

@media (max-width: 600px) {
    /* Paginadores idénticos y sin desbordamiento. */
    :is(.tabla_control,.tabla_control_busqueda) {
        display: grid !important;
        grid-template-columns: 54px 74px 64px 74px;
        align-items: center;
        justify-content: center !important;
        gap: 4px !important;
        min-height: 52px;
        height: auto !important;
        padding: 7px 6px !important;
    }

    :is(.tabla_control,.tabla_control_busqueda) > span:first-child,
    :is(.tabla_control,.tabla_control_busqueda) > label:first-child {
        display: none !important;
    }

    :is(.tabla_control,.tabla_control_busqueda) select {
        grid-column: 1;
        width: 54px !important;
        min-width: 54px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 20px 0 7px !important;
        font-size: 13px !important;
    }

    :is(.tabla_control,.tabla_control_busqueda) .back_forward {
        box-sizing: border-box;
        width: 74px !important;
        min-width: 74px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 5px !important;
        font-size: 10px !important;
        white-space: nowrap;
    }

    :is(.tabla_control,.tabla_control_busqueda) :is(
        #total_items,
        #total_items_cliente,
        #total_items_servicios_sin_asignar,
        .total_items,
        .total_items_cliente
    ) {
        box-sizing: border-box;
        width: 64px !important;
        min-width: 64px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        font-size: 10px !important;
        white-space: nowrap;
    }

    /* Controles de formulario cómodos sin agrandar iconos de las barras. */
    dialog input:not([type="hidden"]),
    dialog select,
    dialog textarea,
    dialog :is(.botones,.botones_new) > button,
    :is(.primary_action,.publish_button,#aplicar_filtros_financieros) {
        min-height: 42px;
    }

    dialog :is(.cuerpo_new,.contact_form_grid,.expense_form_grid),
    body.page-create-service #form_crear .cuerpo {
        grid-template-columns: 1fr !important;
        padding: 14px !important;
    }

    body.page-create-service #form_crear .cuerpo > div {
        grid-column: 1;
        flex-wrap: wrap;
    }

    body.page-create-service #form_crear .cuerpo > div > input {
        flex: 1 1 calc(100% - 50px);
    }

    body.page-create-service #form_crear .cuerpo > input,
    body.page-create-service #form_crear .cuerpo > select {
        grid-column: 1;
        width: 100%;
    }

    body.page-service-detail .info_casilla {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    body.page-service-detail #modal_solicitud[open] {
        grid-template-rows: 54px 78px minmax(120px, 1fr) auto;
    }

    body.page-service-detail #modal_solicitud .parte_seleccionada {
        grid-template-columns: 1fr;
        max-height: 42dvh;
        overflow: auto;
    }

    body.page-service-detail #modal_solicitud .solicitud_acciones,
    dialog :is(.botones,.botones_new) {
        display: flex;
        gap: 8px;
        width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }

    dialog :is(.botones,.botones_new) > button,
    body.page-service-detail #modal_solicitud .solicitud_acciones > button {
        flex: 1 1 0;
        min-width: 0 !important;
    }

    .financial_filters .filter_group,
    .financial_filters #aplicar_filtros_financieros {
        flex: 1 1 100%;
        width: 100%;
    }

    .financial_kpis {
        grid-template-columns: 1fr !important;
    }

    :is(.table_heading,.contact_table_heading,.chart_header) > :last-child:not(:first-child) {
        max-width: 46%;
    }
}

@media (max-width: 380px) {
    :is(.tabla_control,.tabla_control_busqueda) {
        grid-template-columns: 50px 68px 58px 68px;
    }

    :is(.tabla_control,.tabla_control_busqueda) select { width: 50px !important; min-width: 50px !important; }
    :is(.tabla_control,.tabla_control_busqueda) .back_forward { width: 68px !important; min-width: 68px !important; }
    :is(.tabla_control,.tabla_control_busqueda) :is(#total_items,#total_items_cliente,#total_items_servicios_sin_asignar,.total_items,.total_items_cliente) { width: 58px !important; min-width: 58px !important; }

    body.page-dashboard .dashboard_resumen {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}