.bubango-historico-listado{display:flex;flex-direction:column;gap:16px}
.bubango-pedido-card{border:1px solid #ddd;border-radius:10px;padding:16px;background:#fff}
.bubango-pedido-header{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}

.bubango-btn-detalle,
.bubango-btn-accion{
    display:inline-block;
    padding:10px 14px;
    background:#111;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    border:none;
    cursor:pointer;
}

.bubango-btn-secundario{background:#666}

.bubango-detalle-pedido{max-width:1200px}

.bubango-resumen-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
    margin:20px 0;
}

.bubango-resumen-box{
    border:1px solid #ddd;
    border-radius:10px;
    padding:16px;
    background:#fafafa;
}

.bubango-resumen-box h3{
    margin:0 0 12px 0;
    font-size:18px;
}

.bubango-resumen-box div{margin-bottom:6px}

.bubango-lineas{
    width:100%;
    border-collapse:collapse;
    margin-top:25px;
}

.bubango-lineas th,
.bubango-lineas td{
    border:1px solid #ddd;
    padding:10px;
    vertical-align:middle;
}

.bubango-lineas th{
    background:#f5f5f5;
    text-align:left;
}

.bubango-lineas td.num{text-align:right;white-space:nowrap}
.bubango-lineas td.center{text-align:center}

.bubango-img{width:80px;min-width:80px}
.bubango-img img{max-width:60px;height:auto;display:block}
.bubango-no-img{width:60px;height:60px;background:#eee;border-radius:6px}
.bubango-linea-producto{min-width:220px}

.bubango-badge{
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.bubango-badge.pendiente{background:#fff3cd;color:#856404}
.bubango-badge.parcial{background:#d1ecf1;color:#0c5460}
.bubango-badge.servido{background:#d4edda;color:#155724}

.bubango-acciones{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:20px 0;
}

.bubango-modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:9999;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.bubango-modal{
    background:#fff;
    border-radius:12px;
    padding:24px;
    max-width:460px;
    width:100%;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.bubango-modal h3{margin-top:0;margin-bottom:12px}
.bubango-modal p{margin-bottom:18px}

.bubango-modal-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.bubango-aviso{
    border:1px solid #d9d9d9;
    background:#fafafa;
    padding:12px 14px;
    border-radius:8px;
    margin:16px 0;
}

.bubango-aviso.ok{border-color:#b7e1c0;background:#edf9f0}
.bubango-aviso.warn{border-color:#f3d6a0;background:#fff8e8}

.bubango-paginacion{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:20px;
}

.bubango-paginacion a,
.bubango-paginacion span{
    display:inline-block;
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:6px;
    text-decoration:none;
}

.bubango-paginacion .actual{
    background:#111;
    color:#fff;
    border-color:#111;
}

#bubango-historico-wrapper.bubango-loading{opacity:.55;pointer-events:none}

.bubango-listado {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.bubango-listado th {
    text-align: left;
    padding: 10px;
    border-bottom: 2px solid #ddd;
    background: #fafafa;
    font-weight: 600;
}

.bubango-listado td {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.bubango-listado td.num {
    text-align: right;
    white-space: nowrap;
}

.bubango-listado td.pendiente {
    color: #d9534f;
    font-weight: 600;
}

.bubango-listado tr:hover {
    background: #f9f9f9;
}

.bubango-link {
    text-decoration: none;
    font-weight: 600;
}

.bubango-link:hover {
    text-decoration: underline;
}

.bubango-detalle-pedido {
    margin-top: 20px;
}

.bubango-detalle-pedido h2 {
    margin-bottom: 8px;
    font-size: 30px;
    line-height: 1.2;
}

.bubango-detalle-fecha {
    margin-bottom: 24px;
    color: #555;
    font-size: 16px;
}

.bubango-detalle-volver {
    margin-bottom: 18px;
}

.bubango-btn-volver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 8px;
    background: #f1f1f1;
    color: #333;
    text-decoration: none;
    font-weight: 600;
}

.bubango-btn-volver:hover {
    text-decoration: none;
    background: #e7e7e7;
    color: #111;
}

.bubango-resumen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.bubango-resumen-box {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.bubango-resumen-box h3 {
    margin: 0 0 14px;
    font-size: 20px;
    color: #1d3557;
}

.bubango-resumen-box div {
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.5;
}

.bubango-pedido-card {
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    overflow: hidden;
}

.bubango-lineas-estilo {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.bubango-lineas-estilo thead th {
    text-align: left;
    font-size: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid #e5e5e5;
    color: #2f3b52;
    background: #fafafa;
}

.bubango-lineas-estilo tbody td,
.bubango-lineas-estilo tfoot th,
.bubango-lineas-estilo tfoot td {
    padding: 20px 22px;
    border-bottom: 1px solid #ececec;
    vertical-align: middle;
}

.bubango-lineas-estilo tfoot th,
.bubango-lineas-estilo tfoot td {
    background: #fafafa;
    font-size: 18px;
    font-weight: 700;
}

.bubango-producto-detalle {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-width: 280px;
}

.bubango-producto-img img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 6px;
}

.bubango-producto-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bubango-producto-nombre {
    font-size: 18px;
    line-height: 1.2;
    color: #0097a7;
    font-weight: 500;
}

.bubango-producto-sku {
    font-size: 14px;
    color: #666;
}

.bubango-producto-meta {
    font-size: 14px;
    line-height: 1.5;
    color: #4f4f4f;
}

.bubango-lineas-estilo td.num,
.bubango-lineas-estilo th.num {
    text-align: right;
    white-space: nowrap;
}

.bubango-filtros-historico {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 22px;
}

.bubango-filtros-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
}

.bubango-filtros-grid-productos {
    grid-template-columns: minmax(240px, 2fr) minmax(220px, 1fr);
}

.bubango-filtro-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bubango-filtro-campo-amplio {
    grid-column: span 1;
}

.bubango-filtro-campo-check {
    justify-content: flex-end;
}

.bubango-filtro-campo label {
    font-size: 14px;
    font-weight: 600;
    color: #2f3b52;
}

.bubango-filtro-campo input,
.bubango-filtro-campo select {
    height: 42px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    font-size: 14px;
}

.bubango-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    font-size: 14px;
    font-weight: 600;
    color: #2f3b52;
}

.bubango-check-inline input {
    width: auto;
    height: auto;
    margin: 0;
}

.bubango-filtros-acciones {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.bubango-btn-filtrar,
.bubango-btn-limpiar {
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.bubango-btn-filtrar {
    background: #0aa3a3;
    color: #fff;
}

.bubango-btn-limpiar {
    background: #f1f1f1;
    color: #333;
}

#bubango-historico-listado.bubango-loading,
#bubango-historico-productos-listado.bubango-loading,
#bubango-historico-facturas-listado.bubango-loading {
    opacity: 0.55;
    pointer-events: none;
}

.bubango-detalle-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}

.bubango-detalle-cabecera-info {
    flex: 1;
}

.bubango-detalle-cabecera-info h2 {
    margin: 0 0 8px;
}

.bubango-detalle-cabecera-acciones {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.bubango-acciones-detalle {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.bubango-acciones-detalle form {
    margin: 0;
}

.bubango-acciones-detalle .bubango-btn-filtrar,
.bubango-acciones-detalle .bubango-btn-limpiar {
    min-height: 42px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.bubango-modal-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.bubango-modal-actions form {
    margin: 0;
}

/* ========================================
 * MOSAICO PRODUCTOS
 * ======================================== */

.bubango-productos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.bubango-producto-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bubango-producto-card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 170px;
    padding: 16px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

.bubango-producto-card-img img {
    max-width: 100%;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.bubango-producto-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bubango-producto-card-titulo {
    font-size: 17px;
    line-height: 1.3;
    color: #1d3557;
    font-weight: 600;
}

.bubango-producto-card-sku {
    font-size: 13px;
    color: #666;
}

.bubango-producto-card-precio {
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

.bubango-producto-card-precio ins {
    text-decoration: none;
}

.bubango-producto-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 4px;
}

.bubango-producto-card-stats div {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.bubango-producto-card-stats span {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.bubango-producto-card-stats strong {
    font-size: 15px;
    color: #111;
}

.bubango-producto-card-carrito {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}

.bubango-cantidad-carrito {
    width: 90px;
    min-width: 90px;
    height: 42px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    padding: 0 10px;
}

.bubango-producto-card-carrito .bubango-btn-filtrar {
    flex: 1 1 auto;
    min-width: 0;
}

.bubango-producto-card-msg {
    min-height: 20px;
    font-size: 13px;
    font-weight: 600;
}

.bubango-producto-card-msg.ok {
    color: #1f7a1f;
}

.bubango-producto-card-msg.error {
    color: #b42318;
}

.bubango-producto-no-disponible {
    padding: 10px 12px;
    background: #fff8e8;
    border: 1px solid #f3d6a0;
    border-radius: 8px;
    font-size: 13px;
    color: #856404;
}

/* ========================================
 * FACTURAS
 * ======================================== */

.bubango-listado-facturas td strong {
    font-size: 15px;
}

.bubango-listado-facturas td:last-child {
    white-space: nowrap;
}

.bubango-listado-facturas .bubango-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    background: #f1f1f1;
    color: #222;
    text-decoration: none;
    font-weight: 600;
}

.bubango-listado-facturas .bubango-link:hover {
    background: #e7e7e7;
    text-decoration: none;
}

/* ========================================
 * RESPONSIVE
 * ======================================== */

@media (max-width: 1100px) {
    .bubango-productos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .bubango-filtros-grid {
        grid-template-columns: 1fr;
    }

    .bubango-filtros-grid-productos {
        grid-template-columns: 1fr;
    }

    .bubango-filtros-acciones {
        flex-direction: column;
    }

    .bubango-detalle-cabecera {
        flex-direction: column;
        align-items: stretch;
    }

    .bubango-detalle-cabecera-acciones {
        justify-content: flex-start;
    }

    .bubango-acciones-detalle {
        justify-content: flex-start;
    }

    .bubango-resumen-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .bubango-listado,
    .bubango-listado thead,
    .bubango-listado tbody,
    .bubango-listado th,
    .bubango-listado td,
    .bubango-listado tr {
        display: block;
        width: 100%;
    }

    .bubango-listado thead {
        display: none;
    }

    .bubango-listado {
        border: 0;
        background: transparent;
    }

    .bubango-listado tbody {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .bubango-listado tr {
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        padding: 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .bubango-listado td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 8px 0;
        border: 0;
        text-align: left !important;
        font-size: 14px;
        line-height: 1.4;
    }

    .bubango-listado td[data-label="Pedido"] strong,
    .bubango-listado td[data-label="Factura"] strong {
        font-size: 16px;
        line-height: 1.3;
    }

    .bubango-listado td::before {
        content: attr(data-label);
        flex: 0 0 95px;
        font-weight: 700;
        color: #2f3b52;
    }

    .bubango-listado td > * {
        max-width: calc(100% - 95px);
    }

    .bubango-listado td .bubango-badge,
    .bubango-listado td .bubango-link {
        margin-left: auto;
    }

    .bubango-listado td:last-child {
        padding-top: 12px;
    }

    .bubango-listado-facturas td:last-child {
        justify-content: flex-end;
    }

    .bubango-listado-facturas td:last-child::before {
        margin-right: auto;
    }

    .bubango-lineas-estilo thead {
        display: none;
    }

    .bubango-lineas-estilo,
    .bubango-lineas-estilo tbody,
    .bubango-lineas-estilo tr,
    .bubango-lineas-estilo td,
    .bubango-lineas-estilo tfoot {
        display: block;
        width: 100%;
    }

    .bubango-lineas-estilo tr {
        border-bottom: 1px solid #ececec;
    }

    .bubango-lineas-estilo tbody td {
        padding: 14px 18px;
        border-bottom: none;
    }

    .bubango-producto-detalle {
        flex-direction: column;
        min-width: 0;
    }

    .bubango-producto-nombre {
        font-size: 22px;
    }

    .bubango-lineas-estilo tfoot th,
    .bubango-lineas-estilo tfoot td {
        display: block;
        width: 100%;
    }

    .bubango-productos-grid {
        grid-template-columns: 1fr;
    }

    .bubango-producto-card-stats {
        grid-template-columns: 1fr;
    }

    .bubango-producto-card-carrito {
        flex-direction: column;
        align-items: stretch;
    }

    .bubango-cantidad-carrito {
        width: 100%;
        min-width: 0;
    }
}