/* ====== Look & feel moderno (NARANJA) ====== */
#tmOrdersPage {
    --ord-primary: #ff7b00; /* naranja principal */
    --ord-grad2: #ff9d4a; /* naranja gradiente */
    --ord-bg: #fff8f0;
    --ord-text: #1f2937;
}

    #tmOrdersPage .tmo-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: 14px 16px;
        border-radius: 16px;
        color: #fff;
        background: radial-gradient(1000px 380px at -10% -80%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 45%), linear-gradient(135deg,var(--ord-primary) 0%,var(--ord-grad2) 100%);
        box-shadow: 0 10px 26px rgba(255,123,0,.20);
        margin-bottom: 12px;
    }

    #tmOrdersPage .tmo-title {
        margin: 0;
        font-weight: 800;
        letter-spacing: .3px;
        font-size: clamp(1.2rem,1rem + 1vw,1.6rem)
    }

    #tmOrdersPage .tmo-sub {
        opacity: .93;
        margin: 2px 0 0 0;
        font-size: .95rem
    }

    #tmOrdersPage .tmo-badge {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        background: rgba(255,255,255,.15);
        border: 1px solid rgba(255,255,255,.3);
        padding: .35rem .6rem;
        border-radius: 999px;
        font-weight: 700
    }

        #tmOrdersPage .tmo-badge i {
            font-size: 1rem
        }

    #tmOrdersPage .tmo-loader {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: 1rem;
        color: #6c757d
    }

    #tmOrdersPage .tmo-empty {
        text-align: center;
        background: #fff;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 16px;
        padding: 28px
    }

        #tmOrdersPage .tmo-empty i {
            font-size: 2.2rem;
            color: var(--ord-primary)
        }

        #tmOrdersPage .tmo-empty h2 {
            font-weight: 800;
            margin: .4rem 0
        }

        #tmOrdersPage .tmo-empty p {
            color: #666;
            margin: 0 0 1rem
        }

    /* === LISTA CENTRADA EN DESKTOP === */
    #tmOrdersPage .tmo-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: 1fr; /* modo lista */
        max-width: 860px; /* centrado en desktop */
        margin: 0 auto;
    }

    #tmOrdersPage .tmo-card {
        position: relative;
        background: #fff;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 6px 24px rgba(0,0,0,.06);
        transition: transform .15s, box-shadow .15s
    }

        #tmOrdersPage .tmo-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 28px rgba(0,0,0,.10)
        }

    #tmOrdersPage .tmo-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        color: #fff;
        background: linear-gradient(90deg,var(--ord-primary),var(--ord-grad2));
    }

    #tmOrdersPage .tmo-card-title {
        display: flex;
        align-items: center;
        gap: .5rem
    }

    #tmOrdersPage .tmo-pill {
        display: inline-block;
        background: rgba(255,255,255,.2);
        border: 1px solid rgba(255,255,255,.35);
        padding: .15rem .5rem;
        border-radius: 999px;
        font-weight: 700
    }

    #tmOrdersPage .tmo-card-meta {
        opacity: .95;
        font-weight: 600
    }

    #tmOrdersPage .tmo-card-body {
        padding: 12px
    }

    #tmOrdersPage .tmo-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .35rem
    }

        #tmOrdersPage .tmo-total span {
            color: #6b7280
        }

    #tmOrdersPage .tmo-actions {
        display: flex;
        gap: .5rem;
        flex-wrap: wrap
    }

    #tmOrdersPage .btn-brand {
        background: linear-gradient(135deg,var(--ord-primary),var(--ord-grad2));
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: .45rem .75rem;
        font-weight: 700
    }

    /* === HOVER PANEL ABAJO (no tapa botones) === */
    #tmOrdersPage .tmo-hover-panel {
        position: static; /* antes era absolute */
        background: #fff;
        border-top: 1px dashed rgba(255,123,0,.28);
        padding: 10px 12px;
        max-height: 0; /* colapsado por defecto */
        opacity: 0;
        overflow: hidden; /* oculta mientras colapsado */
        transition: max-height .22s ease, opacity .18s ease;
    }

    #tmOrdersPage .tmo-card:hover .tmo-hover-panel {
        max-height: 240px; /* se despliega abajo del cuerpo */
        opacity: 1;
    }

    #tmOrdersPage .tmo-panel-title {
        font-weight: 700;
        margin-bottom: .35rem;
        color: #374151
    }

    #tmOrdersPage .tmo-items {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: .25rem
    }

    #tmOrdersPage .tmo-item-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: .5rem
    }

    #tmOrdersPage .tmo-item-desc {
        font-weight: 600
    }

    #tmOrdersPage .tmo-item-sub {
        color: #6b7280
    }

    /* === Acordeón móvil con acento naranja === */
    #tmOrdersPage .tmo-accordion-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff2e4; /* naranja suave */
        border: none;
        border-top: 1px dashed rgba(255,123,0,.28);
        padding: .5rem .75rem;
        font-weight: 700;
        color: #5b5b5b
    }

    #tmOrdersPage .tmo-accordion {
        max-height: 0;
        overflow: hidden;
        transition: max-height .2s ease;
        background: #fff;
        border-top: 1px dashed rgba(255,123,0,.28)
    }

        #tmOrdersPage .tmo-accordion.show {
            max-height: 260px;
            overflow: auto
        }

@media (max-width:575.98px) {
    #tmOrdersPage .tmo-hero {
        padding: 12px
    }

    #tmOrdersPage .tmo-title {
        font-size: 1.2rem
    }
}


/* ====== Paleta de estados (compatibles con naranja) ====== */
#tmOrdersPage {
    --status-pagado: #16a34a; /* verde */
    --status-entregado: #0ea5e9; /* azul cielo */
    --status-cancelado: #ef4444; /* rojo */
    --status-pendiente: #d1d5db; /* gris */
}

    /* ====== Leyenda de estado ====== */
    #tmOrdersPage .tmo-status-legend {
        background: #fff;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 16px;
        padding: 12px 14px;
        margin: 10px auto 14px auto;
        max-width: 860px; /* mismo ancho que la grid de tarjetas */
        box-shadow: 0 6px 18px rgba(0,0,0,.04);
    }

    #tmOrdersPage .legend-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
        gap: 8px 16px;
        text-align: center;
    }

    #tmOrdersPage .legend-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    #tmOrdersPage .legend-line {
        width: min(64px, 45%);
        height: 6px;
        border-radius: 999px;
        background: var(--status-pendiente);
        opacity: .95;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }

        #tmOrdersPage .legend-line.pagado {
            background: var(--status-pagado);
        }

        #tmOrdersPage .legend-line.entregado {
            background: var(--status-entregado);
        }

        #tmOrdersPage .legend-line.cancelado {
            background: var(--status-cancelado);
        }

    #tmOrdersPage .legend-label {
        font-weight: 700;
        font-size: .9rem;
        color: #374151;
        letter-spacing: .2px;
    }

    /* ====== Barra de estado dentro de la tarjeta ====== */
    #tmOrdersPage .tmo-status-bar {
        height: 6px; /* grosor de la línea */
        width: 100%;
        background: var(--status-pendiente);
        opacity: .95;
    }

        #tmOrdersPage .tmo-status-bar.pagado {
            background: var(--status-pagado);
        }

        #tmOrdersPage .tmo-status-bar.entregado {
            background: var(--status-entregado);
        }

        #tmOrdersPage .tmo-status-bar.cancelado {
            background: var(--status-cancelado);
        }

        #tmOrdersPage .tmo-status-bar.pendiente {
            background: var(--status-pendiente);
        }

    /* ====== Toolbar de filtros ====== */
    #tmOrdersPage .tmo-toolbar {
        max-width: 860px;
        margin: 8px auto 10px auto;
        padding: 0 2px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
    }

    #tmOrdersPage .tmo-filter-summary {
        display: flex;
        align-items: center;
        gap: .35rem;
        flex-wrap: wrap;
    }

    #tmOrdersPage .tmo-filter-pill {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        font-weight: 700;
        padding: .25rem .55rem;
        border-radius: 999px;
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 4px 12px rgba(0,0,0,.04);
        color: #374151;
    }

    #tmOrdersPage .tmo-filter-clear {
        text-decoration: none;
        padding: .15rem .25rem;
        color: #6b7280;
    }

    #tmOrdersPage .tmo-filter-actions .tmo-filter-btn {
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(0,0,0,.08);
        background: linear-gradient(135deg, #fff, #fffaf5);
        padding: .4rem .7rem;
        font-weight: 700;
        border-radius: 10px;
        box-shadow: 0 6px 16px rgba(0,0,0,.06);
    }

    /* ====== Panel de filtros ====== */
    #tmOrdersPage .tmo-filters-panel {
        max-width: 860px;
        margin: 0 auto 10px auto;
        background: #fff;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 14px;
        padding: 10px 12px;
        box-shadow: 0 8px 20px rgba(0,0,0,.05);
        display: none;
    }

        #tmOrdersPage .tmo-filters-panel.show {
            display: block;
        }

    #tmOrdersPage .filters-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0,1fr));
        gap: 8px;
    }

@media (max-width: 575.98px) {
    #tmOrdersPage .filters-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

#tmOrdersPage .filter-opt {
    display: grid;
    grid-template-columns: 18px auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
}

    #tmOrdersPage .filter-opt:hover {
        background: #fff9f2;
        border-color: rgba(255,123,0,.25);
    }

    #tmOrdersPage .filter-opt input {
        accent-color: var(--ord-primary);
    }

    #tmOrdersPage .filter-opt .dot {
        width: 12px;
        height: 12px;
        border-radius: 999px;
        background: var(--status-pendiente);
        display: inline-block;
    }

        #tmOrdersPage .filter-opt .dot.pagado {
            background: var(--status-pagado);
        }

        #tmOrdersPage .filter-opt .dot.entregado {
            background: var(--status-entregado);
        }

        #tmOrdersPage .filter-opt .dot.cancelado {
            background: var(--status-cancelado);
        }

        #tmOrdersPage .filter-opt .dot.all {
            background: linear-gradient(90deg, var(--status-pagado), var(--status-entregado) 50%, var(--status-cancelado));
        }

/* ====== (Ya definidos antes) Paleta de estados ====== */
#tmOrdersPage {
    --status-pagado: #16a34a; /* verde */
    --status-entregado: #0ea5e9; /* azul cielo */
    --status-cancelado: #ef4444; /* rojo */
    --status-pendiente: #d1d5db; /* gris */
}



    /* ====== Buscador debajo de la leyenda ====== */
    #tmOrdersPage .tmo-searchbar {
        max-width: 860px;
        margin: 8px auto 12px auto;
        padding: 0 2px;
    }

    #tmOrdersPage .tmo-search {
        display: flex;
        align-items: center;
        gap: .5rem;
        background: #fff;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 12px;
        padding: .5rem .6rem .5rem .65rem;
        box-shadow: 0 6px 16px rgba(0,0,0,.06);
    }

        #tmOrdersPage .tmo-search i {
            opacity: .8;
        }

    #tmOrdersPage .tmo-search-input {
        flex: 1;
        border: none;
        outline: none;
        font-size: .95rem;
        color: #1f2937;
        background: transparent;
    }

        #tmOrdersPage .tmo-search-input::placeholder {
            color: #9ca3af;
        }

    #tmOrdersPage .tmo-search-clear {
        border: none;
        background: transparent;
        padding: .25rem .35rem;
        border-radius: 8px;
        cursor: pointer;
    }

        #tmOrdersPage .tmo-search-clear:hover {
            background: #f3f4f6;
        }

    /* Punto para el filtro Pendientes */
    #tmOrdersPage .filter-opt .dot.pendiente {
        background: var(--status-pendiente);
    }


    /* ==== Botón "Limpiar" más visible ==== */
    #tmOrdersPage .tmo-filter-clear {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .28rem .6rem; /* un poco más grande */
        border-radius: 999px; /* pastilla */
        background: linear-gradient(135deg, #ffffff, #fffaf5);
        border: 1px solid rgba(255,123,0,.25); /* acorde al naranja */
        box-shadow: 0 4px 12px rgba(0,0,0,.06);
        color: #b45309; /* tono naranja oscuro */
        font-weight: 700;
        text-decoration: none !important; /* evitar subrayado del link */
        transition: transform .08s ease, box-shadow .12s ease, background .2s ease, border-color .2s ease, color .2s ease;
    }

        #tmOrdersPage .tmo-filter-clear:hover {
            transform: translateY(-1px);
            background: linear-gradient(135deg, #fff7ed, #fff1e6);
            border-color: rgba(255,123,0,.38);
            box-shadow: 0 8px 16px rgba(0,0,0,.08);
            color: #92400e;
        }

        #tmOrdersPage .tmo-filter-clear:active {
            transform: translateY(0);
            box-shadow: 0 3px 10px rgba(0,0,0,.07);
        }

        #tmOrdersPage .tmo-filter-clear:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(255,123,0,.28), 0 6px 16px rgba(0,0,0,.06);
        }

        /* Si más adelante le pones un ícono <i> dentro, alineará bonito: */
        #tmOrdersPage .tmo-filter-clear i {
            font-size: .95rem;
            line-height: 1;
        }


    /* ==== Buscador más notorio (clean + moderno) ==== */
    #tmOrdersPage .tmo-search-loud {
        border: 1.5px solid rgba(255,123,0,.35);
        background: linear-gradient(180deg, #fff, #fffaf6);
        box-shadow: 0 10px 24px rgba(0,0,0,.06), 0 2px 10px rgba(255,123,0,.08);
    }

        #tmOrdersPage .tmo-search-loud:focus-within {
            border-color: rgba(255,123,0,.65);
            box-shadow: 0 10px 24px rgba(0,0,0,.06), 0 0 0 3px rgba(255,123,0,.20);
        }

        #tmOrdersPage .tmo-search-loud i {
            opacity: 1;
        }

    #tmOrdersPage .tmo-search-input {
        font-weight: 600;
    }

    /* ==== Resumen + paginación ==== */
    #tmOrdersPage .tmo-page-summary {
        max-width: 860px;
        margin: 6px auto 10px auto;
        padding: 6px 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #374151;
        gap: .5rem;
    }

    #tmOrdersPage .tmo-page-counter strong {
        font-weight: 800;
    }

    /* Controles */
    #tmOrdersPage .tmo-pager {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        background: #fff;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 12px;
        padding: .3rem .4rem;
        box-shadow: 0 6px 16px rgba(0,0,0,.06);
    }

    #tmOrdersPage .tmo-pager-bottom {
        max-width: 860px;
        margin: 12px auto 8px auto;
    }

    #tmOrdersPage .tmo-pg-btn {
        border: 1px solid rgba(0,0,0,.06);
        background: linear-gradient(180deg, #fff, #fffaf5);
        border-radius: 10px;
        padding: .35rem .5rem;
        font-weight: 800;
        color: #374151;
    }

        #tmOrdersPage .tmo-pg-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 16px rgba(0,0,0,.08);
        }

        #tmOrdersPage .tmo-pg-btn:disabled {
            opacity: .5;
            transform: none;
            cursor: not-allowed;
        }

    #tmOrdersPage .tmo-pg-label {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: 0 .3rem;
        font-weight: 700;
        color: #374151;
    }

    #tmOrdersPage .tmo-pg-input {
        width: 64px;
        text-align: center;
        border: 1px solid rgba(0,0,0,.12);
        border-radius: 8px;
        padding: .2rem .35rem;
        font-weight: 700;
    }

        #tmOrdersPage .tmo-pg-input:focus {
            outline: none;
            border-color: rgba(255,123,0,.45);
            box-shadow: 0 0 0 3px rgba(255,123,0,.18);
        }

/* Responsive ajustes */
@media (max-width: 575.98px) {
    #tmOrdersPage .tmo-page-summary {
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
    }

    #tmOrdersPage .tmo-pager {
        justify-content: center;
    }
}



/* ====== PEDIDOS DETALLE (verde como lo tenías) ====== */
#tmPedidoDetalle {
    --det-primary: #10b981; /* verde */
    --det-grad2: #34d399;
}

    #tmPedidoDetalle .tmd-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: 14px 16px;
        border-radius: 16px;
        color: #fff;
        background: radial-gradient(1000px 380px at -10% -80%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 45%), linear-gradient(135deg,var(--det-primary) 0%,var(--det-grad2) 100%);
        box-shadow: 0 10px 26px rgba(16,185,129,.20);
        margin-bottom: 12px;
    }

    #tmPedidoDetalle .tmd-title {
        margin: 0;
        font-weight: 800;
        letter-spacing: .3px;
        font-size: clamp(1.2rem,1rem + 1vw,1.6rem)
    }

    #tmPedidoDetalle .tmd-sub {
        opacity: .93;
        margin: 2px 0 0 0;
        font-size: .95rem
    }

    #tmPedidoDetalle .tmd-badge {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        background: rgba(255,255,255,.15);
        border: 1px solid rgba(255,255,255,.3);
        padding: .35rem .6rem;
        border-radius: 999px;
        font-weight: 700
    }

        #tmPedidoDetalle .tmd-badge i {
            font-size: 1rem
        }

    #tmPedidoDetalle .tmd-loader {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: 1rem;
        color: #6c757d
    }

    #tmPedidoDetalle .tmd-empty {
        text-align: center;
        background: #fff;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 16px;
        padding: 28px
    }

        #tmPedidoDetalle .tmd-empty i {
            font-size: 2.2rem;
            color: var(--det-primary)
        }

        #tmPedidoDetalle .tmd-empty h2 {
            font-weight: 800;
            margin: .4rem 0
        }

        #tmPedidoDetalle .tmd-empty p {
            color: #666;
            margin: 0 0 1rem
        }

    #tmPedidoDetalle .tmd-card {
        border: none;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 6px 24px rgba(0,0,0,.06)
    }

        #tmPedidoDetalle .tmd-card .card-body {
            padding: 14px
        }

    #tmPedidoDetalle .tmd-table-scroll {
        border-radius: 14px;
        border: 1px solid rgba(0,0,0,.06);
        overflow: auto
    }

    #tmPedidoDetalle .tmd-table {
        min-width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background: #fff
    }

        #tmPedidoDetalle .tmd-table thead {
            position: sticky;
            top: 0;
            z-index: 1;
            color: #fff;
            background: linear-gradient(90deg,var(--det-primary),var(--det-grad2))
        }

        #tmPedidoDetalle .tmd-table th, #tmPedidoDetalle .tmd-table td {
            border: none;
            vertical-align: middle
        }

        #tmPedidoDetalle .tmd-table th {
            font-weight: 700;
            font-size: .9rem;
            padding: .65rem .75rem
        }

        #tmPedidoDetalle .tmd-table td {
            font-size: .95rem;
            padding: .55rem .75rem
        }

    #tmPedidoDetalle .tmd-badge-soft {
        display: inline-block;
        background: #ecfdf5;
        border: 1px solid rgba(16,185,129,.25);
        color: #065f46;
        border-radius: 999px;
        padding: .2rem .5rem;
        font-weight: 600
    }

    #tmPedidoDetalle .tmd-desc-title {
        font-weight: 600;
        color: #2b2b2b
    }

    #tmPedidoDetalle .tmd-cta {
        display: flex;
        justify-content: flex-end;
        gap: .5rem;
        margin-top: .9rem
    }

@media (max-width:575.98px) {
    #tmPedidoDetalle .tmd-hero {
        padding: 12px
    }

    #tmPedidoDetalle .tmd-title {
        font-size: 1.2rem
    }
}


/* === Acciones del detalle: botones modernos y responsive === */
#tmPedidoDetalle {
    --status-pagado: #16a34a; /* verde */
    --status-entregado: #0ea5e9; /* azul cielo */
    --status-cancelado: #ef4444; /* rojo */
}

    #tmPedidoDetalle .tmd-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin: .25rem 0 1rem 0;
    }

    #tmPedidoDetalle .tmd-btn {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .5rem .9rem;
        border-radius: 12px;
        font-weight: 800;
        border: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 6px 16px rgba(0,0,0,.06);
        background: #fff;
        color: #1f2937;
        transition: transform .08s ease, box-shadow .12s ease, background .2s ease;
    }

        #tmPedidoDetalle .tmd-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 20px rgba(0,0,0,.08);
        }

        /* Variantes por acción */
        #tmPedidoDetalle .tmd-btn.pagado {
            border-color: rgba(22,163,74,.25);
            background: linear-gradient(135deg, #ffffff, #ecfdf5);
            color: #065f46;
        }

        #tmPedidoDetalle .tmd-btn.entregado {
            border-color: rgba(14,165,233,.25);
            background: linear-gradient(135deg, #ffffff, #eff6ff);
            color: #0c4a6e;
        }

        #tmPedidoDetalle .tmd-btn.cancelado {
            border-color: rgba(239,68,68,.25);
            background: linear-gradient(135deg, #ffffff, #fef2f2);
            color: #7f1d1d;
        }

        #tmPedidoDetalle .tmd-btn:disabled {
            opacity: .65;
            filter: grayscale(.2);
            cursor: not-allowed;
            transform: none !important;
            box-shadow: 0 2px 8px rgba(0,0,0,.04);
        }



    /* Encabezado "Marcar como:" encima de los botones */
    #tmPedidoDetalle .tmd-actions-title {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-weight: 800;
        color: #2b2b2b;
        margin: 2px 2px 8px 2px;
        padding: .25rem .5rem;
        border-radius: 8px;
        background: #f8fafc; /* muy sutil para no saturar */
        border: 1px solid rgba(0,0,0,.05);
    }

    /* Contenedor de botones (ya existente en tu hoja anterior, lo mantengo) */
    #tmPedidoDetalle .tmd-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin: .25rem 0 1rem 0;
    }

    /* Botones (ya definidos) – se mantienen tus estilos previos */
    #tmPedidoDetalle .tmd-btn {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .5rem .9rem;
        border-radius: 12px;
        font-weight: 800;
        border: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 6px 16px rgba(0,0,0,.06);
        background: #fff;
        color: #1f2937;
        transition: transform .08s ease, box-shadow .12s ease, background .2s ease;
    }

        #tmPedidoDetalle .tmd-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 20px rgba(0,0,0,.08);
        }

        #tmPedidoDetalle .tmd-btn.pagado {
            border-color: rgba(22,163,74,.25);
            background: linear-gradient(135deg, #ffffff, #ecfdf5);
            color: #065f46;
        }

        #tmPedidoDetalle .tmd-btn.entregado {
            border-color: rgba(14,165,233,.25);
            background: linear-gradient(135deg, #ffffff, #eff6ff);
            color: #0c4a6e;
        }

        #tmPedidoDetalle .tmd-btn.cancelado {
            border-color: rgba(239,68,68,.25);
            background: linear-gradient(135deg, #ffffff, #fef2f2);
            color: #7f1d1d;
        }

        #tmPedidoDetalle .tmd-btn:disabled {
            opacity: .65;
            filter: grayscale(.2);
            cursor: not-allowed;
            transform: none !important;
            box-shadow: 0 2px 8px rgba(0,0,0,.04);
        }



/* ============================
   DETALLE: Colores por ESTATUS
   ============================ */

#tmPedidoDetalle {
    /* Colores base (fallback pendiente) */
    --det-primary: #6b7280; /* gris en pendiente */
    --det-grad2: #9ca3af;
    --status-pagado: #16a34a;
    --status-entregado: #0ea5e9;
    --status-cancelado: #ef4444;
    --status-pendiente: #9ca3af;
}

    /* Hero usa variables -> cambia por clase dinámica en el contenedor */
    #tmPedidoDetalle .tmd-hero {
        background: radial-gradient(1000px 380px at -10% -80%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 45%), linear-gradient(135deg,var(--det-primary) 0%,var(--det-grad2) 100%);
        box-shadow: 0 10px 26px rgba(0,0,0,.15);
    }

    /* Pendiente */
    #tmPedidoDetalle.status-pendiente {
        --det-primary: var(--status-pendiente);
        --det-grad2: #cbd5e1;
    }
    /* Pagado */
    #tmPedidoDetalle.status-pagado {
        --det-primary: var(--status-pagado);
        --det-grad2: #34d399;
    }
    /* Entregado */
    #tmPedidoDetalle.status-entregado {
        --det-primary: var(--status-entregado);
        --det-grad2: #38bdf8;
    }
    /* Cancelado */
    #tmPedidoDetalle.status-cancelado {
        --det-primary: var(--status-cancelado);
        --det-grad2: #f87171;
    }

    /* =============== 
   Barra de estado
   =============== */
    #tmPedidoDetalle .tmd-status-strip {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 10px 0 12px 0;
    }

    #tmPedidoDetalle .tmd-status-line {
        height: 8px;
        width: 100%;
        background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0));
        border-radius: 999px;
        position: relative;
        overflow: hidden;
    }

    /* color efectivo de la barra según estatus */
    #tmPedidoDetalle.status-pendiente .tmd-status-line {
        background: var(--status-pendiente);
        opacity: .9;
    }

    #tmPedidoDetalle.status-pagado .tmd-status-line {
        background: var(--status-pagado);
        opacity: .9;
    }

    #tmPedidoDetalle.status-entregado .tmd-status-line {
        background: var(--status-entregado);
        opacity: .9;
    }

    #tmPedidoDetalle.status-cancelado .tmd-status-line {
        background: var(--status-cancelado);
        opacity: .9;
    }

    #tmPedidoDetalle .tmd-status-pill {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .35rem .6rem;
        border-radius: 999px;
        background: #fff;
        border: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 6px 16px rgba(0,0,0,.06);
        font-weight: 800;
        color: #1f2937;
        width: fit-content;
    }

        #tmPedidoDetalle .tmd-status-pill i {
            opacity: .9;
        }

    #tmPedidoDetalle .tmd-status-date {
        margin-left: .25rem;
        font-weight: 600;
        color: #6b7280;
    }

    /* Píldora con borde según estatus */
    #tmPedidoDetalle.status-pendiente .tmd-status-pill {
        border-color: rgba(107,114,128,.3);
    }

    #tmPedidoDetalle.status-pagado .tmd-status-pill {
        border-color: rgba(22,163,74,.28);
        color: #065f46;
    }

    #tmPedidoDetalle.status-entregado .tmd-status-pill {
        border-color: rgba(14,165,233,.28);
        color: #0c4a6e;
    }

    #tmPedidoDetalle.status-cancelado .tmd-status-pill {
        border-color: rgba(239,68,68,.28);
        color: #7f1d1d;
    }

    /* ============================
   Acciones: reforzar intención
   ============================ */
    #tmPedidoDetalle .tmd-actions-title {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-weight: 800;
        color: #2b2b2b;
        margin: 2px 2px 8px 2px;
        padding: .35rem .6rem;
        border-radius: 10px;
        background: #f8fafc;
        border: 1px solid rgba(0,0,0,.05);
    }

        #tmPedidoDetalle .tmd-actions-title .tmd-actions-hint {
            margin-left: .35rem;
            font-weight: 700;
            color: #6b7280;
        }

    /* Botones ya definidos, añadimos un leve glow en hover según acción */
    #tmPedidoDetalle .tmd-btn.pagado:hover {
        box-shadow: 0 10px 20px rgba(22,163,74,.18);
    }

    #tmPedidoDetalle .tmd-btn.entregado:hover {
        box-shadow: 0 10px 20px rgba(14,165,233,.18);
    }

    #tmPedidoDetalle .tmd-btn.cancelado:hover {
        box-shadow: 0 10px 20px rgba(239,68,68,.18);
    }