/* COMPRASAPP OPERATIONAL UI SYSTEM
   Global mobile-first operational cards/lists/actions.
   Applies softly to existing tables and mobile-cardified content without changing backend logic.
*/

:root{
    --op-bg:#ffffff;
    --op-soft:#f7f7f5;
    --op-line:rgba(0,0,0,.075);
    --op-line-soft:rgba(0,0,0,.045);
    --op-text:#151515;
    --op-muted:#777;
    --op-muted-soft:#a2a2a2;
    --op-radius:18px;
    --op-radius-lg:22px;
    --op-shadow:0 8px 22px rgba(0,0,0,.045);
    --op-shadow-soft:0 4px 14px rgba(0,0,0,.035);
}

/* =========================
   OPERATIONAL LIST BASE
========================= */

.operational-list,
.mobile-table-cards,
.po-mobile-cards,
.invoice-mobile-list,
.user-mobile-list{
    display:grid;
    gap:12px;
}

.operational-card,
.mobile-table-card,
.po-card,
.invoice-card,
.user-card{
    background:var(--op-bg)!important;
    border:1px solid var(--op-line)!important;
    border-radius:var(--op-radius-lg)!important;
    box-shadow:var(--op-shadow)!important;
    overflow:hidden!important;
}

/* =========================
   MOBILE TABLE CARD NORMALIZATION
========================= */

.mobile-table-card{
    padding:14px!important;
}

.mobile-table-card__row{
    display:grid!important;
    grid-template-columns:34% minmax(0,1fr)!important;
    gap:10px!important;
    align-items:center!important;
    min-height:34px!important;
    padding:7px 0!important;
    border-bottom:1px solid var(--op-line-soft)!important;
}

.mobile-table-card__row:last-child{
    border-bottom:0!important;
}

.mobile-table-card__label{
    font-size:10px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
    color:var(--op-muted-soft)!important;
}

.mobile-table-card__value{
    max-width:none!important;
    text-align:right!important;
    font-size:14px!important;
    line-height:1.18!important;
    font-weight:850!important;
    color:var(--op-text)!important;
    overflow-wrap:anywhere!important;
}

/* =========================
   ACTIONS SYSTEM
========================= */

.actions,
.operational-actions,
.mobile-table-card .actions,
.po-card-actions,
.invoice-actions,
.user-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

@media(max-width:820px){
    .mobile-table-card .actions,
    .po-card-actions,
    .invoice-actions,
    .user-actions,
    .operational-actions{
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:8px!important;
        width:100%!important;
        padding-top:11px!important;
        margin-top:8px!important;
        border-top:1px solid var(--op-line)!important;
    }

    .mobile-table-card .actions > *,
    .po-card-actions > *,
    .invoice-actions > *,
    .user-actions > *,
    .operational-actions > *,
    .mobile-table-card .actions form,
    .po-card-actions form,
    .invoice-actions form,
    .user-actions form,
    .operational-actions form{
        width:100%!important;
        min-width:0!important;
        margin:0!important;
    }

    .mobile-table-card .actions .button,
    .mobile-table-card .actions button,
    .po-card-actions .button,
    .po-card-actions button,
    .invoice-actions .button,
    .invoice-actions button,
    .user-actions .button,
    .user-actions button,
    .operational-actions .button,
    .operational-actions button{
        width:100%!important;
        min-width:0!important;
        min-height:38px!important;
        padding:0 9px!important;
        border-radius:13px!important;
        font-size:12.5px!important;
        line-height:1!important;
        font-weight:850!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        white-space:nowrap!important;
    }
}

/* =========================
   STATUS / BADGES SYSTEM
========================= */

.badge,
.chip,
[class*="status-"],
.operational-status,
.po-status{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:24px!important;
    padding:4px 10px!important;
    border-radius:999px!important;
    font-size:11.5px!important;
    line-height:1!important;
    font-weight:850!important;
    border:1px solid color-mix(in srgb,var(--app-accent-dark,#777) 18%,transparent)!important;
    background:var(--app-accent-soft,#f5f5f5)!important;
    color:var(--app-accent-text,#222)!important;
    box-shadow:none!important;
    white-space:nowrap!important;
}

/* Neutral successful/validated badges */
.status-validated,
.status-validado,
.badge.validated,
.badge-validado{
    background:#f3f7f0!important;
    color:#31402f!important;
    border-color:rgba(49,64,47,.12)!important;
}

/* Pending/requested */
.status-requested,
.status-pending,
.status-pendiente{
    background:var(--app-accent-soft,#fff6e8)!important;
    color:var(--app-accent-text,#4d3a18)!important;
}

/* Danger/duplicate/error */
.status-duplicate,
.status-duplicado,
.status-error,
.status-rejected,
.badge.danger,
.badge-error{
    background:#fff4f4!important;
    color:#8d2f2f!important;
    border-color:rgba(141,47,47,.16)!important;
}

/* Sent/processed */
.status-sent,
.status-enviado,
.status-processed,
.status-procesado{
    background:#f4f4f3!important;
    color:#333!important;
    border-color:rgba(0,0,0,.08)!important;
}

/* =========================
   TABLES → MOBILE CARDIFY POLISH
========================= */

@media(max-width:820px){
    table.mobile-cardified{
        display:none!important;
    }

    table.mobile-cardified + .mobile-table-cards{
        display:grid!important;
        gap:12px!important;
    }

    .table-card{
        background:transparent!important;
        border:0!important;
        box-shadow:none!important;
        padding:0!important;
        overflow:visible!important;
    }
}

/* =========================
   FILTERS / TOP ACTIONS
========================= */

.filters,
.filter-tabs,
.purchase-orders-index .po-filters,
.purchase-orders-index .po-top-actions{
    gap:8px!important;
}

@media(max-width:820px){
    .filters,
    .filter-tabs{
        display:flex!important;
        overflow-x:auto!important;
        padding:2px 0 8px!important;
        margin-left:-2px!important;
        margin-right:-2px!important;
        scrollbar-width:none!important;
    }

    .filters::-webkit-scrollbar,
    .filter-tabs::-webkit-scrollbar{
        display:none!important;
    }

    .filters .button,
    .filter-tabs .button,
    .filters a,
    .filter-tabs a{
        flex:0 0 auto!important;
        min-height:38px!important;
        border-radius:999px!important;
        font-size:12.5px!important;
        font-weight:850!important;
        padding:0 14px!important;
    }
}

/* =========================
   PAGE DENSITY
========================= */

@media(max-width:820px){
    main{
        padding-bottom:104px!important;
    }

    .page-header,
    .section-header{
        margin-bottom:14px!important;
    }

    .page-header h1,
    main h1{
        font-size:32px!important;
        line-height:1!important;
        letter-spacing:-.065em!important;
    }

    .page-header p,
    main h1 + p{
        font-size:15px!important;
        line-height:1.25!important;
        color:var(--op-muted)!important;
        font-weight:750!important;
    }
}

/* =========================
   PRINT SAFETY
========================= */

@media print{
    .mobile-bottom-nav,
    .store-shell-topbar,
    .user-chip-popup{
        display:none!important;
    }

    .card,
    .table-card,
    table{
        box-shadow:none!important;
    }
}

/* MOBILE_CONTRAST_POLISH_START */

/* Contraste global en tarjetas mobile / operativas */
@media(max-width:820px){

    .mobile-table-card__label,
    .po-label,
    .ca-label,
    .op-label,
    .meta-label,
    .card-label,
    [class*="label"]{
        color:#5f6368!important;
        opacity:1!important;
        font-weight:850!important;
    }

    .mobile-table-card__value,
    .po-value,
    .ca-value,
    .op-value,
    .meta-value,
    .card-value,
    [class*="value"]{
        color:#151515!important;
        opacity:1!important;
        font-weight:800!important;
    }

    .mobile-table-card,
    .po-card,
    .card,
    .panel,
    .table-card,
    section{
        color:#151515!important;
    }

    .mobile-table-card small,
    .po-card small,
    .card small,
    .panel small,
    .muted,
    .text-muted,
    .help-text,
    .form-text,
    p{
        color:#5f6368!important;
        opacity:1!important;
    }

    .badge,
    .chip,
    .po-status,
    [class*="status-"]{
        color:var(--app-accent-text,#2f3320)!important;
        opacity:1!important;
        font-weight:850!important;
    }

    button:disabled,
    .button:disabled,
    input[type="submit"]:disabled,
    .is-disabled,
    .disabled{
        opacity:.62!important;
        filter:none!important;
    }

    .button,
    button,
    input[type="submit"],
    a.button{
        color:#151515!important;
    }

    .button:not(.secondary):not(.danger),
    button:not(.secondary):not(.danger),
    input[type="submit"]:not(.secondary):not(.danger),
    a.button:not(.secondary):not(.danger){
        color:var(--app-accent-text,#151515)!important;
    }

    .button.danger,
    button.danger,
    a.button.danger{
        color:#5b1f2d!important;
    }
}

/* MOBILE_CONTRAST_POLISH_END */

/* MOBILE_READABILITY_AND_DUPLICATE_LIST_POLISH_START */

@media(max-width:820px){

    /* Labels demasiado pálidos */
    .mobile-table-card__label,
    .ca-label,
    .op-label,
    .po-label,
    .meta-label,
    .card-label,
    .field-label,
    dt,
    [class*="label"]{
        color:#42464d!important;
        opacity:1!important;
        font-weight:900!important;
        letter-spacing:.16em!important;
    }

    /* Valores principales */
    .mobile-table-card__value,
    .ca-value,
    .op-value,
    .po-value,
    .meta-value,
    .card-value,
    dd,
    [class*="value"]{
        color:#111!important;
        opacity:1!important;
        font-weight:850!important;
    }

    /* Texto secundario legible */
    .muted,
    .text-muted,
    .help-text,
    .form-text,
    .subtitle,
    .page-subtitle,
    .card-subtitle,
    small,
    p{
        color:#666b72!important;
        opacity:1!important;
    }

    /* Chips / estados */
    .badge,
    .chip,
    .status,
    .po-status,
    [class*="badge"],
    [class*="chip"],
    [class*="status"]{
        color:#1f2419!important;
        opacity:1!important;
        font-weight:900!important;
        border-color:rgba(0,0,0,.10)!important;
    }

    /* Botones blancos con texto visible */
    .button,
    button,
    input[type="submit"],
    a.button,
    .actions a,
    .actions button{
        color:#111!important;
        font-weight:900!important;
    }

    /* Botones principales mantienen tema */
    .button:not(.secondary):not(.danger),
    button:not(.secondary):not(.danger),
    input[type="submit"]:not(.secondary):not(.danger),
    a.button:not(.secondary):not(.danger){
        color:var(--app-accent-text,#151515)!important;
    }

    /* Acciones peligrosas */
    .button.danger,
    button.danger,
    a.button.danger,
    form[action*="delete"] button,
    form[action*="destroy"] button{
        color:#6b1f2d!important;
    }

    /* Inputs file más claros */
    input[type="file"]{
        color:#111!important;
        font-weight:750!important;
        background:#fff!important;
    }

    /* Apariencia: descripción demasiado pequeña/clara */
    .appearance-option small,
    .theme-option small,
    .appearance-card small{
        color:#676b72!important;
        font-size:12px!important;
        font-weight:750!important;
        opacity:1!important;
    }

    /* Documentos/facturas: si existe lista simple duplicada legacy, ocultarla */
    .purchase-invoices-legacy-list,
    .purchase-invoice-legacy-list,
    .invoice-legacy-list,
    .invoice-simple-list,
    .documents-simple-list,
    .legacy-mobile-list,
    .mobile-fallback-list,
    .simple-mobile-list{
        display:none!important;
    }
}

/* MOBILE_READABILITY_AND_DUPLICATE_LIST_POLISH_END */

/* DOCUMENTS_MOBILE_DUPLICATE_AND_READABILITY_FIX_START */

@media(max-width:820px){

    /*
     * En Documentos de compra estaba apareciendo una segunda lista legacy/fallback
     * debajo de las tarjetas buenas. La ocultamos solo dentro de la vista de facturas/documentos.
     */
    body:has([data-page="purchase-invoices"]) .legacy-mobile-list,
    body:has([data-page="purchase-invoices"]) .mobile-fallback-list,
    body:has([data-page="purchase-invoices"]) .simple-mobile-list,
    body:has([data-page="purchase-invoices"]) .purchase-invoices-legacy-list,
    body:has([data-page="purchase-invoices"]) .purchase-invoice-legacy-list,
    body:has([data-page="purchase-invoices"]) .invoice-simple-list,
    body:has([data-page="purchase-invoices"]) .documents-simple-list{
        display:none!important;
    }

    /*
     * Fallback estructural: si una lista simple aparece después de la tabla/tarjetas principales,
     * queda visualmente anulada sin tocar backend.
     */
    .purchase-invoices-page .legacy-mobile-list,
    .purchase-invoices-page .mobile-fallback-list,
    .purchase-invoices-page .simple-mobile-list,
    .purchase-invoices-page .purchase-invoices-legacy-list,
    .purchase-invoices-page .purchase-invoice-legacy-list,
    .purchase-invoices-page .invoice-simple-list,
    .purchase-invoices-page .documents-simple-list{
        display:none!important;
    }

    /*
     * Refuerzo de contraste en Documentos de compra y Pedidos.
     */
    .purchase-invoices-page .mobile-table-card__label,
    .purchase-invoices-page .ca-label,
    .purchase-invoices-page .op-label,
    .purchase-invoices-page [class*="label"],
    .purchase-orders-page .mobile-table-card__label,
    .purchase-orders-page .ca-label,
    .purchase-orders-page .op-label,
    .purchase-orders-page [class*="label"]{
        color:#2f343a!important;
        opacity:1!important;
        font-weight:950!important;
        letter-spacing:.14em!important;
    }

    .purchase-invoices-page .mobile-table-card__value,
    .purchase-invoices-page .ca-value,
    .purchase-invoices-page .op-value,
    .purchase-invoices-page [class*="value"],
    .purchase-orders-page .mobile-table-card__value,
    .purchase-orders-page .ca-value,
    .purchase-orders-page .op-value,
    .purchase-orders-page [class*="value"]{
        color:#0f1115!important;
        opacity:1!important;
        font-weight:900!important;
    }

    .purchase-invoices-page small,
    .purchase-invoices-page .muted,
    .purchase-invoices-page .text-muted,
    .purchase-orders-page small,
    .purchase-orders-page .muted,
    .purchase-orders-page .text-muted{
        color:#5f646b!important;
        opacity:1!important;
        font-weight:750!important;
    }

    /*
     * Apariencia: descripción de opciones más legible.
     */
    .appearance-option small,
    .theme-option small,
    .appearance-card small,
    .appearance-page small{
        color:#5f646b!important;
        opacity:1!important;
        font-size:12px!important;
        font-weight:800!important;
        line-height:1.25!important;
    }

    .appearance-option,
    .theme-option{
        min-height:58px!important;
        align-items:center!important;
    }
}

/* DOCUMENTS_MOBILE_DUPLICATE_AND_READABILITY_FIX_END */

/* FINAL_MOBILE_READABILITY_POLISH_START */

@media(max-width:820px){

    /* Pedidos: labels PROVEEDOR / CENTRO / ESTADO demasiado invisibles */
    .mobile-table-card__label,
    .purchase-orders-page [class*="label"],
    .purchase-invoices-page [class*="label"],
    .po-label,
    .op-label,
    .ca-label,
    dt{
        color:#3f454b!important;
        opacity:1!important;
        font-weight:950!important;
        letter-spacing:.13em!important;
        text-shadow:none!important;
    }

    /* Texto de ayuda/descripción demasiado pálido */
    .page-subtitle,
    .section-header p,
    .card-subtitle,
    .appearance-page small,
    .appearance-option small,
    .theme-option small,
    .muted,
    .text-muted,
    small{
        color:#5d636a!important;
        opacity:1!important;
        font-weight:750!important;
        line-height:1.28!important;
    }

    /* Apariencia: evitar que descripción choque con el título */
    .appearance-option,
    .theme-option{
        display:grid!important;
        grid-template-columns:36px minmax(0,1fr) 24px!important;
        gap:10px!important;
        align-items:center!important;
        min-height:58px!important;
    }

    .appearance-option strong,
    .theme-option strong{
        display:block!important;
        margin-bottom:3px!important;
    }

    .appearance-option small,
    .theme-option small{
        display:block!important;
        white-space:normal!important;
        overflow:visible!important;
    }

    /* Valores principales en tarjetas */
    .mobile-table-card__value,
    .purchase-orders-page [class*="value"],
    .purchase-invoices-page [class*="value"],
    .po-value,
    .op-value,
    .ca-value,
    dd{
        color:#101216!important;
        opacity:1!important;
        font-weight:900!important;
    }

    /* Importe y número de pedido más nítidos */
    .purchase-orders-page .mobile-table-card strong,
    .purchase-orders-page .mobile-table-card a,
    .purchase-orders-page [class*="order"],
    .purchase-orders-page [class*="total"]{
        color:#111!important;
        opacity:1!important;
    }
}

/* FINAL_MOBILE_READABILITY_POLISH_END */

/* SQUARE_PHASE3_OPERATIONAL_NEUTRALIZATION_START */
.card,
.panel,
.mobile-table-card,
.documents-mobile-card,
.upload-zone-card,
.upload-mini-card{
    background:inherit;
}
/* SQUARE_PHASE3_OPERATIONAL_NEUTRALIZATION_END */