/* =====================================================
       ESTRUCTURA GENERAL
    ===================================================== */

    .bus {
        border-collapse: separate !important;
        border-spacing: 4px !important;
    }

    .bus td {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 2px;
        box-sizing: border-box;

        text-align: center;
        vertical-align: middle;
    }

    /* Sólo las celdas que contienen butacas */
    .bus td.free,
    .bus td.ocupado {
        position: relative;
        overflow: hidden;

        padding: 0 !important;
        border-radius: 8px;

        text-align: center;
        vertical-align: middle;

        /*font-size: 13px; si no aplico zoom a bus-wrapper*/
        font-size: 21px;
        font-weight: 600;
        line-height: 42px;

        cursor: default;
    }


    /* =====================================================
       BUTACA LIBRE
    ===================================================== */

    .bus td.free {
        background:#D9F2FF;

        box-shadow:
        inset 0 0 0 1px #78C9EC,
        0 1px 2px rgba(0,0,0,.04);
        color:#1F4F73;
        font-weight:600;
        box-shadow:
        inset 0 0 0 1px #78C9EC,
        0 1px 2px rgba(0,0,0,.04);
    }

    /* =====================================================
       BUTACA OCUPADA
    ===================================================== */

    .bus td.ocupado {
              
        background:#FFDCDC;

        box-shadow:
        inset 0 0 0 1px #E88E8E,
        0 1px 2px rgba(0,0,0,.04);

        color:#A33A3A;
        cursor: default;
    }

    /* =====================================================
       BARRA INFERIOR DE TARIFA
    ===================================================== */

    .bus td[class*="seat-tpa-"]::after,
    .bus td.seat-cama::after {
        content: "";
        position: absolute;

        left: 9px;
        right: 9px;
        bottom: 4px;

        height: 3px;
        border-radius: 999px;

        opacity: .8;
        pointer-events: none;
    }

    /* Cama */
    .bus td.seat-cama::after {
        background: #8B7355;
    }

    /* Premium */
    .bus td.seat-tpa-1::after {
        background: #826FA8;
    }

    /* Preferente */
    .bus td.seat-tpa-2::after {
        background: #6685AA;
    }

    /* Plus */
    .bus td.seat-tpa-3::after {
        background: #5D929E;
    }

    /* Clásica */
    .bus td.seat-tpa-4::after {
        background: #6E9676;
    }

    /* Turista */
    .bus td.seat-tpa-5::after {
        background: #B59968;
    }

    /* Promo */
    .bus td.seat-tpa-6::after {
        background: #8A94A3;
    }


    /* =====================================================
       REFERENCIAS GENERALES
    ===================================================== */

    #referencias {
        max-width: 700px;
        margin: 18px auto 0;
    }

    .bus-reference-group {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;

        margin-bottom: 15px;
    }

    .bus-status-reference {
        display: inline-flex;
        align-items: center;
        gap: 7px;

        color: #667085;
        font-size: 13px;
    }

    .bus-status-reference .badge {
        display: inline-block;

        width: 14px;
        min-width: 14px;
        height: 14px;
        padding: 0;

        border-radius: 4px;
    }

    .bus-status-reference .badge.free {
        background: #DDF4FF !important;
        box-shadow: inset 0 0 0 1px #C9E7F4;
    }

    #referencias .badge.free {
        background: #DDF4FF !important;
        box-shadow: inset 0 0 0 1px #C9E7F4;
    }

    .bus-status-reference .badge.ocupado {
        background: #FFE3E3;
        box-shadow: inset 0 0 0 1px #E2E8F0;
    }

    #referencias .badge.ocupado {
        background: #FFE3E3;
        box-shadow: inset 0 0 0 1px #E2E8F0;
    }



    /* =====================================================
       REFERENCIAS DE TARIFAS
    ===================================================== */

    .bus-fare-reference {
        padding: 13px 16px;

        background: #FFFFFF;
        border-radius: 8px;

        box-shadow:
        inset 0 0 0 1px #E5E7EB,
        0 2px 7px rgba(38, 54, 77, .05);
    }

    .bus-reference-title {
        display: block;
        margin-bottom: 8px;

        color: #344054;
        font-size: 13px;
        font-weight: 700;
    }

    .bus-fare-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;

        padding: 8px 0;
        border-bottom: 1px solid #EEF1F4;

        color: #667085;
        font-size: 14px;
    }

    .bus-fare-item:last-child {
        border-bottom: 0;
    }

    .bus-fare-description {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .bus-fare-item strong {
        color: #475467;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }


    /* =====================================================
       MARCADORES DE COLOR DE TARIFA
    ===================================================== */

    .bus-fare-color {
        display: inline-block;

        width: 14px;
        min-width: 14px;
        height: 4px;

        border-radius: 999px;
        opacity: .8;
    }

    .bus-fare-color.seat-cama {
        background: #8B7355;
    }

    .bus-fare-color.seat-tpa-1 {
        background: #826FA8;
    }

    .bus-fare-color.seat-tpa-2 {
        background: #6685AA;
    }

    .bus-fare-color.seat-tpa-3 {
        background: #5D929E;
    }

    .bus-fare-color.seat-tpa-4 {
        background: #6E9676;
    }

    .bus-fare-color.seat-tpa-5 {
        background: #B59968;
    }

    .bus-fare-color.seat-tpa-6 {
        background: #8A94A3;
    }

    .bus-wrapper{
        display:inline-block;
        padding:18px;
        background:#fff;
        border:1px solid #e5e7eb;
        border-radius:30px 12px 12px 30px;
        box-shadow:0 2px 10px rgba(0,0,0,.05);
        zoom: 57%;
    }


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

    @media (max-width: 767px) {
        .bus {
            border-spacing: 3px !important;
        }

        .bus td {
            width: 25px;
            min-width: 25px;
            height: 25px;
            padding: 1px;
        }

        .bus td.free,
        .bus td.ocupado {
            font-size: 15px;
            border-radius: 7px;
            line-height: 30px;
        }

        .bus td[class*="seat-tpa-"]::after,
        .bus td.seat-cama::after {
            left: 8px;
            right: 8px;
            bottom: 4px;
            height: 2px;
        }

        .bus-fare-reference {
            padding: 11px 13px;
        }

        .bus-fare-item {
            gap: 8px;
        }
        .bus-wrapper{

          padding:6px;
          zoom: 95%;

      }
    }

    /******************************
    
    ********************************/

    .package-detail-scroll {
        max-height: 520px;
        overflow-y: auto;
        padding-right: 12px;

        color: #475467;
        font-size: 15px;
        line-height: 1.7;
    }

    .package-detail-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .package-detail-scroll::-webkit-scrollbar-thumb {
        background: #D0D5DD;
        border-radius: 10px;
    }

    .seat-categories {
        margin-top: 22px;
    }

    .seat-category {
        display: table;
        width: 100%;

        margin-bottom: 10px;
        padding: 13px 15px;

        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 8px;

        box-shadow: 0 2px 6px rgba(38, 54, 77, .04);
    }

    .seat-category-color,
    .seat-category-content,
    .seat-category-price {
        display: table-cell;
        vertical-align: middle;
    }

    .seat-category-color {
        width: 5px;
        min-width: 5px;

        border-radius: 999px;
    }

    .seat-category-color.seat-tpa-1 {
        background: #826FA8;
    }

    .seat-category-color.seat-tpa-2 {
        background: #6685AA;
    }

    .seat-category-content {
        padding-left: 14px;
    }

    .seat-category-content strong {
        display: block;

        color: #344054;
        font-size: 15px;
        font-weight: 700;
    }

    .seat-category-numbers {
        display: block;
        margin-top: 2px;

        color: #667085;
        font-size: 12px;
        font-weight: 600;
    }

    .seat-category-content p {
        margin: 5px 0 0;

        color: #667085;
        font-size: 13px;
        line-height: 1.45;
    }

    .seat-category-price {
        width: 105px;
        padding-left: 15px;

        color: #344054;
        font-size: 14px;
        font-weight: 700;
        text-align: right;
        white-space: nowrap;
    }

    /* =====================================================
       DETALLE DEL PAQUETE CON SCROLL
    ===================================================== */

    .package-detail-scroll {
        max-height: 520px;
        padding-right: 12px;
        overflow-y: auto;

        color: #4F566B;
        font-size: 14px;
        line-height: 1.75;
    }

    .package-detail-scroll p {
        margin: 0 0 14px;
        text-align: justify;
    }

    .package-detail-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .package-detail-scroll::-webkit-scrollbar-track {
        background: #F4F6F8;
        border-radius: 10px;
    }

    .package-detail-scroll::-webkit-scrollbar-thumb {
        background: #C8CED8;
        border-radius: 10px;
    }


    /* =====================================================
       DISPONIBILIDAD
    ===================================================== */

    .bus-availability {
        margin: 0 0 8px;
        color: #667085;
    }

    .bus-availability .fa {
        margin-right: 5px;
        color: #813284;
    }

    .bus-floor-title {
        margin: 8px 0 7px;
        color: #29304D;
        font-size: 13px;
        font-weight: 700;
    }

    .bus-status-list {
        margin: 10px 0 14px;
        text-align: center;
    }

    .bus-status-list .bus-status-reference {
        margin: 0 8px;
    }


    /* =====================================================
       BLOQUE EXPERIENCIAS
    ===================================================== */

    .seat-experience {
        margin-top: 12px;
    }

    .seat-experience-title {
        margin: 0 0 10px;
        padding-bottom: 8px;

        border-bottom: 1px solid #E4E7EC;

        color: #4A286F;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .seat-experience-title .fa {
        margin-right: 6px;
        color: #813284;
    }

    .seat-category-row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .seat-category-row > div {
        padding-left: 5px;
        padding-right: 5px;
    }


    /* =====================================================
       TARJETA COMPACTA
    ===================================================== */

    .seat-category-card {
        position: relative;
        display: table;

        width: 100%;
        min-height: 88px;
        margin-bottom: 10px;
        padding: 10px 11px 9px 16px;

        background: #FFFFFF;
        border: 1px solid #E4E7EC;
        border-radius: 7px;

        box-shadow: 0 2px 5px rgba(38, 54, 77, .04);
    }

    .seat-category-bar {
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: 0;

        width: 4px;
        border-radius: 0 4px 4px 0;
    }

    .seat-category-main {
        display: table-cell;
        vertical-align: middle;
    }

    .seat-category-heading {
        display: table;
        width: 100%;
        margin-bottom: 2px;
    }

    .seat-category-heading strong,
    .seat-category-heading .seat-category-price {
        display: table-cell;
        vertical-align: middle;
    }

    .seat-category-heading strong {
        color: #344054;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .seat-category-price {
        padding-left: 8px;

        color: #344054;
        font-size: 12px;
        font-weight: 700;
        text-align: right;
        white-space: nowrap;
    }

    .seat-category-seats {
        display: block;
        margin-bottom: 3px;

        color: #475467;
        font-size: 11px;
        font-weight: 700;
    }

    .seat-category-card p {
        margin: 0;

        color: #667085;
        font-size: 11px;
        line-height: 1.35;
    }


    /* =====================================================
       COLORES
    ===================================================== */

    .seat-category-bar.seat-cama {
        background: #8B7355;
    }

    .seat-category-bar.seat-tpa-1 {
        background: #826FA8;
    }

    .seat-category-bar.seat-tpa-2 {
        background: #6685AA;
    }

    .seat-category-bar.seat-tpa-3 {
        background: #5D929E;
    }

    .seat-category-bar.seat-tpa-4 {
        background: #6E9676;
    }

    .seat-category-bar.seat-tpa-5 {
        background: #B59968;
    }

    .seat-category-bar.seat-tpa-6 {
        background: #8A94A3;
    }


    /* El bloque cama usa todo el ancho, pero menos altura */
    .seat-category-cama {
        min-height: 70px;
    }


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

    @media (max-width: 991px) {

        .package-detail-scroll {
            max-height: 300px;
            margin-bottom: 25px;
        }

    }

    @media (max-width: 767px) {

        .package-detail-scroll {
            max-height: 260px;
        }

        .seat-category-card {
            min-height: auto;
        }

        .seat-category-card p {
            font-size: 12px;
        }

        .seat-category-seats {
            font-size: 12px;
        }

    }

    /*************************************

    **************************************/

    .price-box{
        background:#fff;
        border:1px solid #E5E7EB;
        box-shadow:0 2px 8px rgba(0,0,0,.05);
    }

    .price-header{

        padding:10px 20px;

        background:#4A5563;

        color:#FFF;

        font-size:15px;
        font-weight:700;
        text-transform:uppercase;
    }

    .price-body{

        padding:16px 18px;
        text-align:center;
    }

    .price-value{

        margin:0;

        color:#FF5A3C;

        font-size:34px;
        line-height:1;
        font-weight:700;
    }

    .price-subtitle{

        margin-top:4px;
        margin-bottom:12px;

        color:#98A2B3;

        font-size:12px;
        text-transform:uppercase;
        letter-spacing:.5px;
    }

    .price-note{

        padding-top:10px;

        border-top:1px solid #ECEFF3;

        color:#667085;

        font-size:13px;
    }

    .price-note i{

        color:#4CAF50;
        margin-right:4px;
    }

    .price-note strong{

        font-weight:600;
    }