/*
 * Observatorio DDHH — Mobile UI v1.3.4
 * Basado en el mockup móvil aprobado.
 * No depende de IDs internos de Elementor.
 */

@media (max-width: 767px) {

    body.obs-ddhh-monitor-page {
        overflow-x: hidden !important;
    }

    body.obs-ddhh-monitor-page * {
        box-sizing: border-box;
    }

    /* HERO */
    body.obs-ddhh-monitor-page .obs-ui-hero {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 48px 0 24px !important;
        background-position: center center !important;
        background-size: cover !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
        padding: 0 20px !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-hero-content .elementor-heading-title {
        margin: 0 !important;
        font-size: 29px !important;
        line-height: 1.06 !important;
        letter-spacing: -.35px !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-hero-content .elementor-widget-text-editor,
    body.obs-ddhh-monitor-page .obs-ui-hero-content .elementor-widget-text-editor p {
        font-size: 14px !important;
        line-height: 1.48 !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-report-button {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 46px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 10px !important;
        padding: 12px 18px !important;
        border-radius: 5px !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }

    /* CONTADORES 2x2 */
    body.obs-ddhh-monitor-page .obs-ui-counters-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px !important;
    }

    body.obs-ddhh-monitor-page .obs-contadores {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.obs-ddhh-monitor-page .obs-contador {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 90px !important;
        margin: 0 !important;
        padding: 12px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border: 1px solid rgba(255,255,255,.68) !important;
        border-radius: 7px !important;
        background: rgba(255,255,255,.035) !important;
        color: #fff !important;
    }

    body.obs-ddhh-monitor-page .obs-contador__numero {
        display: block !important;
        color: #fff !important;
        font-size: 31px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    body.obs-ddhh-monitor-page .obs-contador__label {
        display: block !important;
        margin-top: 7px !important;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 1.22 !important;
    }

    /* BUSCADOR */
    body.obs-ddhh-monitor-page .obs-ui-search-wrap,
    body.obs-ddhh-monitor-page .obs-ui-search-widget {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-search-wrap {
        margin: 0 !important;
        padding: 20px 16px 0 !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-search,
    body.obs-ddhh-monitor-page .obs-ui-search .jet-search-filter__input-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-search {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-search .jet-search-filter__input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
        padding: 0 14px !important;
        border: 1px solid #D7DDE3 !important;
        border-radius: 7px !important;
        background: #fff !important;
        color: #24364B !important;
        font-size: 13px !important;
        line-height: 48px !important;
        box-shadow: 0 1px 2px rgba(24,39,58,.03) !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-search .jet-search-filter__submit {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 5px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
    }

    /* FILTROS */
    body.obs-ddhh-monitor-page .obs-ui-filters-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 13px 16px 18px !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-filters-wrap > .elementor-element,
    body.obs-ddhh-monitor-page .obs-ui-radio-widget,
    body.obs-ddhh-monitor-page .obs-ui-select-widget {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-radio-widget .jet-radio-list-wrapper {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-radio-widget .jet-radio-list__row {
        width: 100% !important;
        margin: 0 !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-radio-widget .jet-radio-list__label {
        font-size: 13px !important;
        line-height: 1.35 !important;
        color: #354155 !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-select-widget .jet-select,
    body.obs-ddhh-monitor-page .obs-ui-select-widget .jet-select__control,
    body.obs-ddhh-monitor-page .obs-ui-select-widget select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        padding: 0 13px !important;
        border: 1px solid #D7DDE3 !important;
        border-radius: 7px !important;
        background: #fff !important;
        color: #354155 !important;
        font-size: 13px !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-reset-widget {
        display: none !important;
    }

    /* Cabecera de tabla: en móvil las alertas son cards */
    body.obs-ddhh-monitor-page .obs-ui-table-head {
        display: none !important;
    }

    /* LISTING */
    body.obs-ddhh-monitor-page .obs-ui-listing-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 16px 26px !important;
        margin: 0 auto !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-listing-section .jet-listing-grid,
    body.obs-ddhh-monitor-page .obs-ui-listing-section .jet-listing-grid__items {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-listing-section .jet-listing-grid__items {
        display: block !important;
        margin: 0 !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 0 13px !important;
        background: #fff !important;
        border: 1px solid #DDE3E9 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 1px 3px rgba(25,41,61,.045) !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card > .elementor,
    body.obs-ddhh-monitor-page .obs-ui-card-shell,
    body.obs-ddhh-monitor-page .obs-ui-card-fields {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        background: transparent !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-fields {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 10px !important;
        padding: 15px !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-fields > .elementor-element {
        min-width: 0 !important;
        border: 0 !important;
        background: transparent !important;
        margin: 0 !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-title {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        justify-content: flex-start !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-title .elementor-heading-title {
        margin: 0 !important;
        color: #11233F !important;
        font-size: 16px !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
        letter-spacing: -.1px !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-description {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-description .jet-listing-dynamic-field,
    body.obs-ddhh-monitor-page .obs-ui-card-description .jet-listing-dynamic-field__content {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-description .jet-listing-dynamic-field__content {
        color: #536174 !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 4 !important;
        overflow: hidden !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-type,
    body.obs-ddhh-monitor-page .obs-ui-card-state {
        width: auto !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
        padding: 0 !important;
        justify-content: flex-start !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-type { order: 3 !important; }
    body.obs-ddhh-monitor-page .obs-ui-card-state { order: 4 !important; }

    body.obs-ddhh-monitor-page .obs-ui-card .obs-badge,
    body.obs-ddhh-monitor-page .obs-ui-card .obs-estado {
        max-width: 100% !important;
        min-height: 31px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 6px 9px !important;
        border-radius: 6px !important;
        white-space: normal !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 1.12 !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-year {
        order: 5 !important;
        width: 45% !important;
        max-width: 45% !important;
        flex: 0 0 45% !important;
        padding: 2px 0 0 !important;
        justify-content: flex-start !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-year .elementor-heading-title {
        margin: 0 !important;
        color: #697687 !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-detail {
        order: 6 !important;
        width: 55% !important;
        max-width: 55% !important;
        flex: 0 0 55% !important;
        padding: 2px 0 0 !important;
        justify-content: flex-end !important;
        text-align: right !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-detail .elementor-widget-container {
        width: 100% !important;
        text-align: right !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-detail .obs-alerta-detalle {
        width: auto !important;
        max-width: 100% !important;
        margin-left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
        color: #E94848 !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
    }


    /* ESTRUCTURA FIJA DE CARD: evita que el año suba a la fila de badges */
    body.obs-ddhh-monitor-page .obs-ui-card-title {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-description {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-type {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        align-self: center !important;
        justify-self: start !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-state {
        grid-column: 2 !important;
        grid-row: auto !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        align-self: center !important;
        justify-self: start !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-year {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        padding: 2px 0 0 !important;
        justify-self: start !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-detail {
        grid-column: 2 !important;
        grid-row: auto !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        padding: 2px 0 0 !important;
        justify-self: end !important;
        text-align: right !important;
    }

    /* BADGES: misma lógica cromática del desktop */
    body.obs-ddhh-monitor-page .obs-ui-card .obs-badge,
    body.obs-ddhh-monitor-page .obs-ui-card .obs-estado {
        border: 1px solid transparent !important;
        box-shadow: none !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card .obs-badge--normativa {
        color: #226BC9 !important;
        background: #EAF2FF !important;
        border-color: #C9DCFA !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card .obs-badge--normativa i {
        color: #226BC9 !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card .obs-badge--ddhh {
        color: #D84444 !important;
        background: #FDEBEC !important;
        border-color: #F5C9CC !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card .obs-badge--ddhh i {
        color: #D84444 !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card .obs-estado__dot {
        width: 7px !important;
        height: 7px !important;
        min-width: 7px !important;
        border-radius: 50% !important;
        display: inline-block !important;
        background: currentColor !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card .obs-estado--aprobado {
        color: #137A4C !important;
        background: #E8F7EF !important;
        border-color: #BFE5CF !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card .obs-estado--desarrollo,
    body.obs-ddhh-monitor-page .obs-ui-card .obs-estado--riesgo {
        color: #B87500 !important;
        background: #FFF2D9 !important;
        border-color: #F3D492 !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card .obs-estado--rechazado,
    body.obs-ddhh-monitor-page .obs-ui-card .obs-estado--actual {
        color: #D9363E !important;
        background: #FDEBEC !important;
        border-color: #F5C9CC !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card .obs-estado--archivado,
    body.obs-ddhh-monitor-page .obs-ui-card .obs-estado--pasado {
        color: #5F7182 !important;
        background: #EEF3F7 !important;
        border-color: #D9E3EA !important;
    }

    /* Mantener el año y "Ver detalle" juntos en su propia fila */
    body.obs-ddhh-monitor-page .obs-ui-card-year .elementor-heading-title {
        white-space: nowrap !important;
    }

    /* PAGINACIÓN */
    body.obs-ddhh-monitor-page .obs-ui-pagination-widget {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 18px !important;
        text-align: center !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-pagination-widget .jet-filters-pagination {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
}

@media (max-width: 355px) {
    body.obs-ddhh-monitor-page .obs-ui-hero-content .elementor-heading-title {
        font-size: 27px !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card-fields {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 8px !important;
    }

    body.obs-ddhh-monitor-page .obs-ui-card .obs-badge,
    body.obs-ddhh-monitor-page .obs-ui-card .obs-estado {
        font-size: 9.5px !important;
        padding: 6px 7px !important;
    }
}