:root {
      --blue: #174f8f;
      --blue-dark: #113a68;
      --green: #1f7a45;
      --green-soft: #dff0e6;
      --line: #c8d4df;
      --line-dark: #1d3146;
      --bg: #eef3f7;
      --panel: #ffffff;
      --panel-soft: #f7fafc;
      --text: #132033;
      --muted: #68788a;
      --yellow: #ffe5a3;
      --red: #b9332b;
      --cyan: #d9ecff;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background: var(--bg);
      font-family: Arial, Helvetica, sans-serif;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    .top {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 18px;
      background: #fbfdff;
      border-bottom: 1px solid var(--line);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .logo {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      color: white;
      background: var(--blue);
      border-radius: 8px;
      font-size: 18px;
      font-weight: 900;
    }

    h1 {
      margin: 0;
      font-size: 20px;
      letter-spacing: 0;
    }

    .subtitle {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .actions {
      display: flex;
      align-items: end;
      justify-content: flex-end;
      gap: 9px;
      flex-wrap: wrap;
    }

    label {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    input,
    select,
    textarea {
      border: 1px solid var(--line);
      border-radius: 6px;
      background: white;
      color: var(--text);
      outline: 0;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: #2f80d8;
      box-shadow: 0 0 0 2px rgba(47, 128, 216, 0.15);
    }

    .top input {
      width: 180px;
      height: 36px;
      padding: 7px 10px;
    }

    .btn {
      height: 36px;
      border: 0;
      border-radius: 6px;
      padding: 0 14px;
      font-weight: 900;
      cursor: pointer;
    }

    .btn-main {
      color: white;
      background: var(--green);
    }

    .btn-light {
      color: #163a58;
      background: #e8f0f7;
      border: 1px solid var(--line);
    }

    .btn-danger {
      color: white;
      background: var(--red);
    }

    main {
      padding: 0 18px 18px;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 48px;
    }

    .tabs {
      display: flex;
      align-items: end;
      gap: 6px;
      flex-wrap: wrap;
    }

    .tab {
      height: 32px;
      padding: 0 14px;
      color: #163a58;
      background: #e8f0f7;
      border: 1px solid var(--line);
      border-bottom: 0;
      border-radius: 7px 7px 0 0;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .tab.active {
      color: white;
      background: var(--blue);
      border-color: var(--blue);
    }

    /* Submenu de Finanzas en el sidebar */
    .tab-group {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .tab.tab-with-submenu {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      width: 100%;
    }
    .tab-caret {
      font-size: 10px;
      opacity: 0.7;
      transition: transform 0.2s;
    }
    .tab-group.expanded .tab-caret { transform: rotate(180deg); }
    .tab-submenu {
      display: none;
      flex-direction: column;
      gap: 2px;
      padding: 4px 0 6px 10px;
      margin-top: 2px;
      animation: financeSubmenuSlide 0.18s ease-out;
    }
    @keyframes financeSubmenuSlide {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .tab-group.expanded .tab-submenu { display: flex; }
    .tab-submenu-item {
      height: 28px;
      padding: 0 12px;
      border: 0;
      border-left: 3px solid rgba(255, 255, 255, 0.2);
      background: transparent;
      color: rgba(255, 255, 255, 0.7);
      font-size: 11px;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
      border-radius: 0 4px 4px 0;
      transition: all 0.12s;
      width: 100%;
    }
    .tab-submenu-item:hover {
      background: rgba(255, 255, 255, 0.08);
      border-left-color: rgba(255, 255, 255, 0.6);
      color: #fff;
    }
    .tab-submenu-item.active {
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      border-left-color: #fff;
      font-weight: 800;
    }

    .summary {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      justify-content: flex-end;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      white-space: normal;
    }

    .summary span {
      white-space: nowrap;
    }

    .summary strong {
      color: var(--text);
    }

    .service-counter {
      padding: 5px 8px;
      border-radius: 999px;
      color: white;
      background: var(--red);
    }

    .service-counter strong {
      color: white;
    }

    .service-counter.counter-green { background: var(--green); }
    .service-counter.counter-yellow { color: #5f4200; background: #f5c542; }
    .service-counter.counter-yellow strong { color: #5f4200; }
    .service-counter.counter-red { background: var(--red); }

    .period-panel {
      display: grid;
      gap: 8px;
      margin: 12px 0;
      padding: 10px;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .year-tabs,
    .month-tabs {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .period-tab {
      height: 30px;
      padding: 0 12px;
      color: #163a58;
      background: #e8f0f7;
      border: 1px solid var(--line);
      border-radius: 6px;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .period-tab.active {
      color: white;
      background: var(--blue);
      border-color: var(--blue);
    }

    .year-tabs .period-tab {
      min-width: 78px;
    }

    .stats-panel {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 14px;
      margin-bottom: 14px;
      padding: 12px;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .stats-title {
      color: #163a58;
      font-size: 14px;
      font-weight: 900;
    }

    .stats-total {
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .seller-bars {
      display: grid;
      gap: 7px;
      align-content: center;
    }

    .seller-row {
      display: grid;
      grid-template-columns: 120px 1fr 82px;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 900;
    }

    .seller-name {
      color: #163a58;
      text-align: right;
    }

    .bar-track {
      height: 18px;
      overflow: hidden;
      background: #e8f0f7;
      border-radius: 999px;
    }

    .bar-fill {
      height: 100%;
      min-width: 4px;
      background: linear-gradient(90deg, #2f80d8, #6aa7ff);
      border-radius: inherit;
    }

    .seller-count {
      color: var(--text);
      white-space: nowrap;
    }

    .view {
      display: none;
    }

    .view.active {
      display: block;
    }

    .panel {
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 46px;
      padding: 8px 12px;
      background: #f5f8fb;
      border-bottom: 1px solid var(--line);
    }

    .panel-title {
      color: #163a58;
      font-size: 14px;
      font-weight: 900;
    }

    .filters {
      display: flex;
      align-items: end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .filters input,
    .filters select {
      height: 32px;
      min-width: 145px;
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .wrap {
      width: 100%;
      overflow: auto;
    }

    table {
      width: max-content;
      min-width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 12px;
    }

    th,
    td {
      border: 1px solid var(--line);
      text-align: center;
      vertical-align: middle;
    }

    th {
      height: 34px;
      padding: 5px 7px;
      color: white;
      background: var(--blue);
      font-size: 11px;
      font-weight: 900;
    }

    td {
      height: 34px;
      padding: 4px 6px;
      background: white;
      font-weight: 700;
    }

    th,
    td {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Clientes table: font y anchos reducidos ~20% para que entre sin scroll */
    .clientes-table { min-width: 1650px; font-size: 11px; }
    .clientes-table th { font-size: 10px; padding: 8px 5px; }
    .clientes-table td { padding: 6px 5px; }
    .clientes-table th:nth-child(1), .clientes-table td:nth-child(1) { width: 62px; }
    .clientes-table th:nth-child(2), .clientes-table td:nth-child(2) { width: 115px; }
    .clientes-table th:nth-child(3), .clientes-table td:nth-child(3) { width: 115px; }
    .clientes-table th:nth-child(4), .clientes-table td:nth-child(4) { width: 36px; }
    .clientes-table th:nth-child(5), .clientes-table td:nth-child(5) { width: 36px; }
    .clientes-table th:nth-child(6), .clientes-table td:nth-child(6) { width: 38px; }
    .clientes-table th:nth-child(7), .clientes-table td:nth-child(7) { width: 90px; }
    .clientes-table th:nth-child(8), .clientes-table td:nth-child(8) { width: 80px; }
    .clientes-table th:nth-child(9), .clientes-table td:nth-child(9) { width: 70px; }
    .clientes-table th:nth-child(10), .clientes-table td:nth-child(10) { width: 68px; }
    .clientes-table th:nth-child(11), .clientes-table td:nth-child(11) { width: 68px; }
    .clientes-table th:nth-child(12), .clientes-table td:nth-child(12) { width: 95px; }
    .clientes-table th:nth-child(13), .clientes-table td:nth-child(13) { width: 95px; }
    .clientes-table th:nth-child(14), .clientes-table td:nth-child(14) { width: 85px; }
    .clientes-table th:nth-child(15), .clientes-table td:nth-child(15) { width: 180px; display: none; }
    .clientes-table th:nth-child(16), .clientes-table td:nth-child(16) { width: 90px; }
    .clientes-table th:nth-child(17), .clientes-table td:nth-child(17) { width: 68px; }
    .clientes-table th:nth-child(18), .clientes-table td:nth-child(18) { width: 68px; }
    .clientes-table th:nth-child(19), .clientes-table td:nth-child(19) { width: 68px; }

    .acta-table { min-width: 1525px; }
    .acta-table th:nth-child(1), .acta-table td:nth-child(1) { width: 135px; }
    .acta-table th:nth-child(2), .acta-table td:nth-child(2) { width: 95px; }
    .acta-table th:nth-child(3), .acta-table td:nth-child(3) { width: 150px; }
    .acta-table th:nth-child(4), .acta-table td:nth-child(4) { width: 150px; }
    .acta-table th:nth-child(5), .acta-table td:nth-child(5) { width: 54px; }
    .acta-table th:nth-child(6), .acta-table td:nth-child(6) { width: 54px; }
    .acta-table th:nth-child(7), .acta-table td:nth-child(7) { width: 105px; }
    .acta-table th:nth-child(8), .acta-table td:nth-child(8) { width: 105px; }
    .acta-table th:nth-child(9), .acta-table td:nth-child(9) { width: 90px; }
    .acta-table th:nth-child(10), .acta-table td:nth-child(10) { width: 130px; }
    .acta-table th:nth-child(11), .acta-table td:nth-child(11) { width: 155px; }
    .acta-table th:nth-child(12), .acta-table td:nth-child(12) { width: 105px; }
    .acta-table th:nth-child(13), .acta-table td:nth-child(13) { width: 105px; }
    .acta-table th:nth-child(14), .acta-table td:nth-child(14) { width: 105px; }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(170px, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

    .metric-card {
      min-height: 82px;
      padding: 12px;
      border: 1px solid var(--line);
      background: white;
      border-radius: 6px;
    }

    .metric-card span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .metric-card strong {
      display: block;
      margin-top: 9px;
      color: #163a58;
      font-size: 28px;
      line-height: 1;
      font-weight: 900;
    }

    .stats-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
      gap: 14px;
    }

    .stats-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 12px 0;
    }

    .stats-tabs {
      display: inline-flex;
      gap: 6px;
      padding: 4px;
      border: 1px solid var(--line);
      background: #f8fbfe;
      border-radius: 8px;
    }

    .stats-tab {
      min-width: 120px;
      padding: 9px 14px;
      border: 0;
      border-radius: 6px;
      color: #163a58;
      background: transparent;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .stats-tab.active {
      color: white;
      background: var(--blue);
      box-shadow: 0 4px 12px rgba(47, 128, 216, 0.18);
    }

    .stats-section.hidden {
      display: none;
    }

    .stats-seller-table {
      min-width: 780px;
    }

    .stats-seller-table th:first-child,
    .stats-seller-table td:first-child {
      width: 170px;
    }

    .conversion-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 72px;
      padding: 4px 8px;
      border-radius: 999px;
      color: #0b6038;
      background: #dff5e9;
      font-weight: 900;
    }

    .income-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .income-table {
      min-width: 360px;
    }

    .income-table th:first-child,
    .income-table td:first-child {
      width: 240px;
    }

    .income-bars {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .income-bar-row {
      display: grid;
      grid-template-columns: 110px 1fr 42px;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 900;
    }

    .income-bar-label {
      color: #163a58;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .income-bar-track {
      height: 14px;
      overflow: hidden;
      background: #e8f0f7;
      border-radius: 999px;
    }

    .income-bar-fill {
      height: 100%;
      min-width: 3px;
      background: linear-gradient(90deg, var(--green), #9bd86a);
      border-radius: inherit;
    }

    .income-bar-count {
      text-align: right;
      color: var(--text);
    }

    @media print {
      /* CRUCIAL: sin esto, Chrome no imprime fondos azules, imagenes de fondo
         circulares (Ponte Suspensa, etc.), ni los recuadros de color del diseño */
      * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }
      body {
        background: white;
      }

      body * {
        visibility: hidden;
      }

      #estadisticasView,
      #estadisticasView *,
      #publicItineraryPage,
      #publicItineraryPage *,
      #itinerariosView,
      #itinerariosView * {
        visibility: visible;
      }

      #estadisticasView,
      #publicItineraryPage,
      #itinerariosView {
        position: absolute;
        inset: 0;
        display: block !important;
        padding: 0;
        background: white;
      }

      /* Ocultar solo los botones operativos, no los que son parte del diseño
         (como las paradas circulares de Alta Montana, que se dibujan como <button>) */
      #publicItineraryPage .no-print,
      #itinerariosView .no-print,
      #itinerariosView .tabs,
      #itinerariosView .toolbar,
      #itinerariosView .toolbar button,
      #itinerariosView .tabs button,
      #itinerariosView .nav-btn,
      #publicItineraryPage .alta-video-button,
      #publicItineraryPage .transfer-check-button,
      button[data-action],
      button.btn-main,
      button.btn-light,
      button.btn-danger {
        display: none !important;
      }

      /* PARADAS DE ALTA MONTAÑA AL IMPRIMIR
         Tenemos que GANARLE al CSS mobile (que se activa porque el ancho de
         pagina es angosto). Por eso usamos selectores mas especificos y !important. */

      /* 1. Grid de 3 columnas para las 6 paradas, en 2 filas */
      #publicItineraryPage .alta-route,
      #itinerariosView .alta-route,
      html body .alta-route {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 50px 20px !important;
        padding: 30px 20px !important;
        visibility: visible !important;
        page-break-inside: avoid;
        break-inside: avoid;
        position: relative !important;
      }

      /* 2. Cada parada centrada en su celda de grid */
      #publicItineraryPage .alta-stop,
      #itinerariosView .alta-stop,
      html body .alta-stop,
      html body .alta-stop[data-stop-pos] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-self: center !important;
        visibility: visible !important;
        grid-column: auto !important;
        grid-row: auto !important;
      }

      /* 3. Fotos circulares del MISMO tamaño (no clamp con vw variable) */
      html body .alta-stop-photo {
        width: 130px !important;
        height: 130px !important;
        min-width: 130px !important;
        max-width: 130px !important;
        flex-shrink: 0 !important;
      }

      /* 4. Numero de parada al tamaño correcto */
      html body .alta-stop-number {
        width: 32px !important;
        height: 32px !important;
        font-size: 15px !important;
      }

      /* 5. Lineas verdes conectoras (mobile las oculta, aca las volvemos a mostrar) */
      #publicItineraryPage .alta-route::before,
      #publicItineraryPage .alta-route::after,
      #itinerariosView .alta-route::before,
      #itinerariosView .alta-route::after,
      html body .alta-route::before,
      html body .alta-route::after {
        display: block !important;
        content: "" !important;
        position: absolute !important;
        background: #6f9f38 !important;
        height: 4px !important;
        left: 16.6% !important;
        right: 16.6% !important;
        z-index: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }
      html body .alta-route::before { top: 33% !important; }
      html body .alta-route::after { top: 79% !important; }

      /* 6. Etiqueta de cada parada compacta */
      html body .alta-stop-label {
        max-width: 180px !important;
        font-size: 11px !important;
        text-align: center !important;
      }

      /* TARJETAS DE BODEGAS AL IMPRIMIR
         Al imprimir, el navegador simula ancho angosto y activa el CSS mobile
         que hace la foto enorme (a todo el ancho de pagina) → tarjeta gigante
         → se corta en 2 hojas. Aca forzamos el layout desktop compacto. */

      html body .client-stop {
        display: grid !important;
        grid-template-columns: 180px minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 12px 0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
      }

      html body .client-stop-photo {
        min-height: 120px !important;
        max-height: 160px !important;
        width: 180px !important;
        overflow: hidden !important;
      }

      html body .client-stop-photo img {
        width: 100% !important;
        height: 100% !important;
        max-height: 160px !important;
        object-fit: cover !important;
      }

      /* Titulo y texto de la bodega compactos para que la tarjeta entre justa */
      html body .client-stop h4 {
        font-size: 16px !important;
        margin: 0 0 4px !important;
      }
      html body .client-stop p,
      html body .client-stop .client-stop-description {
        font-size: 11px !important;
        line-height: 1.35 !important;
      }

      /* Evitar cortes feos entre paginas: cada bloque intenta quedar entero */
      .client-page,
      .puquios-page,
      .alta-mountain-page,
      .lenas-page,
      .public-itinerary-page > section,
      .client-transfer-card,
      .client-daily-values,
      .sr-section,
      .client-stop,
      .stop-card,
      .client-service-card,
      .alta-info-card,
      .alta-route,
      .client-day-block {
        break-inside: avoid;
        page-break-inside: avoid;
      }

      /* Las imagenes tampoco se cortan al medio */
      img {
        break-inside: avoid;
        page-break-inside: avoid;
        max-width: 100% !important;
      }

      #estadisticasView .stats-toolbar,
      #estadisticasView .stats-tabs,
      #printStatsButton {
        display: none !important;
      }

      #estadisticasView .stats-section.hidden {
        display: block;
      }

      #estadisticasView .panel,
      #estadisticasView .metric-card {
        break-inside: avoid;
      }

      #estadisticasView .income-grid,
      #estadisticasView .metric-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .estadisticas-table { min-width: 580px; }
    .estadisticas-table th:nth-child(1), .estadisticas-table td:nth-child(1) { width: 170px; }
    .estadisticas-table th:nth-child(2), .estadisticas-table td:nth-child(2) { width: 130px; }
    .estadisticas-table th:nth-child(3), .estadisticas-table td:nth-child(3) { width: 150px; }
    .estadisticas-table th:nth-child(4), .estadisticas-table td:nth-child(4) { width: 130px; }

    .service-stats-table { min-width: 430px; }
    .service-stats-table th:nth-child(1), .service-stats-table td:nth-child(1) { width: 280px; }
    .service-stats-table th:nth-child(2), .service-stats-table td:nth-child(2) { width: 150px; }

    .bookings-table { min-width: 1430px; }
    .bookings-table th:nth-child(1), .bookings-table td:nth-child(1) { width: 150px; }
    .bookings-table th:nth-child(2), .bookings-table td:nth-child(2) { width: 105px; }
    .bookings-table th:nth-child(3), .bookings-table td:nth-child(3) { width: 105px; }
    .bookings-table th:nth-child(4), .bookings-table td:nth-child(4) { width: 175px; }
    .bookings-table th:nth-child(5), .bookings-table td:nth-child(5) { width: 190px; }
    .bookings-table th:nth-child(6), .bookings-table td:nth-child(6) { width: 110px; }
    .bookings-table th:nth-child(7), .bookings-table td:nth-child(7) { width: 90px; }
    .bookings-table th:nth-child(8), .bookings-table td:nth-child(8) { width: 230px; }
    .bookings-table th:nth-child(9), .bookings-table td:nth-child(9) { width: 250px; }
    .bookings-table th:nth-child(10), .bookings-table td:nth-child(10) { width: 115px; }
    .bookings-table th:nth-child(11), .bookings-table td:nth-child(11) { width: 90px; }
    .bookings-table th:nth-child(12), .bookings-table td:nth-child(12) { width: 90px; }

    /* ===== Banco de Reservas - nuevo diseno con tarjetas ===== */
    .bookings-summary {
      margin: 16px 0;
    }

    .bookings-alert-btn {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      border: 0;
      padding: 12px 20px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1px;
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .bookings-alert-btn.red {
      background: #FCEBEB;
      color: #A32D2D;
      border: 1px solid #F7C1C1;
    }

    .bookings-alert-btn.red:hover,
    .bookings-alert-btn.red.active {
      background: #A32D2D;
      color: #fff;
      box-shadow: 0 6px 16px rgba(163, 45, 45, 0.3);
    }

    .bookings-alert-btn.gray {
      background: #f4f6f8;
      color: #6b7c92;
      border: 1px solid #e3e7ec;
      cursor: default;
    }

    .bookings-alert-btn .badge-count {
      display: inline-grid;
      place-items: center;
      min-width: 28px;
      height: 28px;
      padding: 0 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.4);
      font-size: 14px;
      font-weight: 900;
    }

    .bookings-alert-btn.gray .badge-count {
      background: rgba(0, 0, 0, 0.08);
    }

    .bookings-alert-btn.red.active .badge-count,
    .bookings-alert-btn.red:hover .badge-count {
      background: rgba(255, 255, 255, 0.25);
    }

    .bookings-alert-btn .badge-label {
      font-size: 12px;
      text-transform: uppercase;
    }

    .bookings-alert-btn .badge-action {
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.25);
      font-size: 11px;
    }

    .bookings-filters {
      margin: 8px 0 14px;
      gap: 10px;
    }

    .bookings-filters input,
    .bookings-filters select {
      min-width: 180px;
    }

    .date-filter-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 32px;
      color: #42566e;
      font-size: 12px;
      font-weight: 900;
    }

    .date-filter-label input {
      min-width: 145px;
    }

    #bookingsAlertBox:empty { display: none; }

    .bookings-alert {
      margin: 0 0 14px;
      padding: 14px 16px;
      border-radius: 12px;
      background: #FCEBEB;
      border-left: 4px solid #A32D2D;
      color: #6c1717;
    }

    .bookings-alert strong {
      display: block;
      font-size: 14px;
      font-weight: 900;
      margin-bottom: 4px;
    }

    .bookings-alert ul {
      margin: 0;
      padding-left: 20px;
      font-size: 13px;
    }

    .bookings-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .booking-card {
      padding: 16px 18px;
      border-radius: 14px;
      background: #fff;
      border: 1px solid #e3e7ec;
      box-shadow: 0 2px 6px rgba(27, 54, 80, 0.04);
      transition: box-shadow 0.18s ease, transform 0.18s ease;
    }

    .booking-card:hover {
      box-shadow: 0 8px 18px rgba(27, 54, 80, 0.1);
    }

    .booking-card.is-alert {
      border-color: #E24B4A;
      box-shadow: 0 0 0 1px #E24B4A inset, 0 4px 12px rgba(226, 75, 74, 0.18);
    }

    .booking-card.is-cancelled {
      opacity: 0.55;
    }

    .booking-card.is-complete {
      background: #f7f9f5;
    }

    .booking-card-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .booking-card-main {
      flex: 1;
      min-width: 0;
    }

    .booking-badges {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }

    .booking-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 1px;
    }

    .booking-badge.disponible { background: #EAF3DE; color: #27500A; }
    .booking-badge.parcial { background: #FAEEDA; color: #633806; }
    .booking-badge.completa { background: #F1EFE8; color: #444441; }
    .booking-badge.cancelada { background: #FCEBEB; color: #A32D2D; text-decoration: line-through; }
    .booking-badge.alerta { background: #A32D2D; color: #fff; }

    .booking-title {
      margin: 0;
      font-size: 16px;
      font-weight: 800;
      color: #1b3650;
      line-height: 1.3;
    }

    .booking-title span {
      color: #6b7c92;
      font-weight: 400;
      margin: 0 6px;
    }

    .booking-meta {
      margin: 4px 0 0;
      font-size: 12px;
      color: #6b7c92;
      line-height: 1.5;
    }

    .booking-meta-row {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-right: 14px;
    }

    .booking-actions {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-shrink: 0;
    }

    .booking-actions .btn {
      min-height: 32px;
      padding: 0 12px;
      font-size: 12px;
    }

    .booking-action-icon {
      width: auto;
      min-width: 46px;
      height: 32px;
      padding: 0 9px;
      display: grid;
      place-items: center;
      background: #f4f6f8;
      border: 1px solid #e3e7ec;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 900;
      color: #1b3650;
      font-size: 11px;
      line-height: 1;
      text-transform: uppercase;
    }

    .booking-action-icon:hover {
      background: #1b3650;
      color: #fff;
    }

    .booking-progress-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 6px;
    }

    .booking-progress-bar {
      flex: 1;
      height: 8px;
      background: #eef1f4;
      border-radius: 999px;
      overflow: hidden;
    }

    .booking-progress-fill {
      height: 100%;
      transition: width 0.4s ease;
      border-radius: 999px;
    }

    .booking-progress-fill.green { background: #97C459; }
    .booking-progress-fill.amber { background: #EF9F27; }
    .booking-progress-fill.gray { background: #B4B2A9; }
    .booking-progress-fill.red { background: #E24B4A; }

    .booking-progress-text {
      font-size: 12px;
      font-weight: 700;
      color: #6b7c92;
      white-space: nowrap;
    }

    .booking-progress-text .free {
      color: #639922;
    }

    .booking-progress-text .alert {
      color: #A32D2D;
    }

    .booking-deadline {
      display: inline-block;
      margin-top: 8px;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
    }

    .booking-deadline.warn {
      background: #FCEBEB;
      color: #A32D2D;
    }

    .booking-deadline.ok {
      background: #EAF3DE;
      color: #27500A;
    }

    .booking-history {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid #e3e7ec;
    }

    .booking-history summary {
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      color: #6b7c92;
      list-style: none;
    }

    .booking-history summary::-webkit-details-marker { display: none; }

    .booking-history summary::before {
      content: ">";
      display: inline-block;
      margin-right: 6px;
      transition: transform 0.2s ease;
    }

    .booking-history[open] summary::before {
      transform: rotate(90deg);
    }

    .booking-history-list {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .booking-history-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 8px;
      background: #f7f9fb;
      font-size: 12px;
    }

    .booking-history-item-info {
      flex: 1;
      min-width: 0;
    }

    .booking-history-item-info strong {
      color: #1b3650;
      font-weight: 700;
    }

    .booking-history-item-meta {
      color: #6b7c92;
      font-size: 11px;
    }

    .booking-history-remove {
      border: 0;
      background: transparent;
      cursor: pointer;
      color: #A32D2D;
      font-weight: 900;
      padding: 4px 8px;
    }

    .bookings-empty {
      padding: 40px 20px;
      text-align: center;
      color: #6b7c92;
      font-size: 14px;
    }

    .assign-booking-header {
      padding: 12px 14px;
      margin-bottom: 14px;
      border-radius: 10px;
      background: #f4f6f8;
      font-size: 13px;
      color: #1b3650;
    }

    .assign-booking-header strong { display: block; font-weight: 900; margin-bottom: 4px; }
    .assign-booking-header .free { color: #639922; font-weight: 700; }

    .assign-booking-history {
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid #e3e7ec;
    }

    .assign-booking-history:empty { display: none; }

    .assign-booking-history h4 {
      margin: 0 0 8px;
      font-size: 13px;
      color: #1b3650;
    }

    @media (max-width: 720px) {
      .bookings-summary { grid-template-columns: repeat(2, 1fr); }
      .booking-card-head { flex-direction: column; }
      .booking-actions { width: 100%; flex-wrap: wrap; }
    }

    /* ===== Historial de versiones - modal ===== */
    .history-client-info {
      padding: 14px 16px;
      margin-bottom: 14px;
      border-radius: 10px;
      background: #f4f6f8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .history-client-info strong {
      font-size: 15px;
      color: #1b3650;
    }

    .history-client-info span {
      font-size: 12px;
      color: #6b7c92;
    }

    .history-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-height: 60vh;
      overflow-y: auto;
    }

    .history-version-card {
      padding: 14px 16px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid #e3e7ec;
      transition: box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .history-version-card:hover {
      border-color: #1b3650;
      box-shadow: 0 4px 12px rgba(27, 54, 80, 0.08);
    }

    .history-version-card.is-latest {
      border-color: #6f9f38;
      background: #f7fbf2;
    }

    .history-version-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }

    .history-version-badge {
      display: inline-block;
      margin-right: 8px;
      padding: 2px 9px;
      border-radius: 999px;
      background: #6f9f38;
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 1px;
    }

    .history-version-title {
      font-size: 14px;
      font-weight: 700;
      color: #1b3650;
    }

    .history-version-actions {
      display: flex;
      gap: 6px;
    }

    .history-download-btn {
      min-height: 32px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 700;
    }

    .history-version-meta {
      font-size: 12px;
      color: #6b7c92;
      line-height: 1.6;
    }

    .history-version-notes {
      margin-top: 6px;
      padding: 8px 10px;
      border-radius: 8px;
      background: #f4f6f8;
      font-size: 11px;
      color: #6b7c92;
      font-style: italic;
    }

    .itinerary-clients-table { min-width: 1180px; }
    .itinerary-clients-table th:nth-child(1), .itinerary-clients-table td:nth-child(1) { width: 95px; }
    .itinerary-clients-table th:nth-child(2), .itinerary-clients-table td:nth-child(2) { width: 220px; }
    .itinerary-clients-table th:nth-child(3), .itinerary-clients-table td:nth-child(3) { width: 90px; }
    .itinerary-clients-table th:nth-child(4), .itinerary-clients-table td:nth-child(4) { width: 80px; }
    .itinerary-clients-table th:nth-child(5), .itinerary-clients-table td:nth-child(5) { width: 80px; }
    .itinerary-clients-table th:nth-child(6), .itinerary-clients-table td:nth-child(6) { width: 135px; }
    .itinerary-clients-table th:nth-child(7), .itinerary-clients-table td:nth-child(7) { width: 105px; }
    .itinerary-clients-table th:nth-child(8), .itinerary-clients-table td:nth-child(8) { width: 105px; }
    .itinerary-clients-table th:nth-child(9), .itinerary-clients-table td:nth-child(9) { width: 105px; }
    .itinerary-clients-table th:nth-child(10), .itinerary-clients-table td:nth-child(10) { width: 95px; }
    .itinerary-clients-table th:nth-child(11), .itinerary-clients-table td:nth-child(11) { width: 95px; }
    .itinerary-clients-table th:nth-child(12), .itinerary-clients-table td:nth-child(12) { width: 105px; }

    .driver-config {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(190px, 0.55fr) auto auto;
      gap: 8px;
      padding: 12px;
      border-bottom: 1px solid var(--line);
      background: #fbfdff;
    }

    .driver-config input,
    .driver-config select {
      width: 100%;
      height: 32px;
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .driver-config select[multiple] {
      height: 112px;
      padding: 6px 8px;
    }

    /* ===== Nuevo diseno: Choferes con tarjetas + modal ===== */
    .drivers-filters {
      display: flex;
      gap: 10px;
      padding: 12px;
      flex-wrap: wrap;
      border-bottom: 1px solid var(--line);
      background: #fbfdff;
    }

    .drivers-filters input,
    .drivers-filters select {
      height: 36px;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 700;
    }

    .drivers-filters input { flex: 1; min-width: 220px; }
    .drivers-filters select { min-width: 180px; }

    .drivers-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
      gap: 12px;
      padding: 14px;
    }

    .driver-card {
      padding: 14px 16px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid #e3e7ec;
      box-shadow: 0 2px 6px rgba(27, 54, 80, 0.04);
      transition: box-shadow 0.18s ease;
    }

    .driver-card:hover {
      box-shadow: 0 6px 14px rgba(27, 54, 80, 0.1);
    }

    .driver-card.is-inactive {
      opacity: 0.55;
      background: #f7f9fb;
    }

    .driver-card-head {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 10px;
    }

    .driver-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #1b3650;
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 900;
      font-size: 16px;
      flex-shrink: 0;
    }

    .driver-avatar.tercerizado {
      background: #BA7517;
    }

    .driver-card-name {
      flex: 1;
      min-width: 0;
    }

    .driver-card-name strong {
      display: block;
      font-size: 15px;
      color: #1b3650;
      font-weight: 800;
      line-height: 1.2;
    }

    .driver-card-name .meta {
      font-size: 11px;
      color: #6b7c92;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-top: 4px;
    }

    .driver-card-badges {
      display: flex;
      gap: 4px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 4px;
    }

    .driver-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 1px;
    }

    .driver-badge.empleado { background: #EAF3DE; color: #27500A; }
    .driver-badge.tercero { background: #FAEEDA; color: #633806; }
    .driver-badge.active { background: #E6F1FB; color: #185FA5; }
    .driver-badge.inactive { background: #F1EFE8; color: #444441; }

    .driver-card-body {
      font-size: 12px;
      color: #5a6b7e;
      line-height: 1.6;
    }

    .driver-card-body .row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      padding: 3px 0;
    }

    .driver-card-body .row .label { color: #6b7c92; font-size: 11px; }

    .driver-card-vehicles {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #e3e7ec;
    }

    .driver-card-vehicles .label {
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #6b7c92;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .driver-vehicle-chip {
      display: inline-block;
      padding: 3px 10px;
      margin: 0 4px 4px 0;
      border-radius: 6px;
      background: #f4f6f8;
      font-size: 11px;
      font-weight: 700;
      color: #1b3650;
      border: 1px solid #e3e7ec;
    }

    .driver-vehicle-chip.is-default {
      background: #1b3650;
      color: #fff;
      border-color: #1b3650;
    }

    .driver-vehicle-chip.is-default::before {
      content: "\2605 ";
    }

    .driver-card-actions {
      display: flex;
      gap: 6px;
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid #e3e7ec;
    }

    .driver-card-actions .btn {
      flex: 1;
      min-height: 30px;
      font-size: 11px;
      padding: 0 8px;
    }

    .drivers-empty {
      grid-column: 1 / -1;
      padding: 40px 20px;
      text-align: center;
      color: #6b7c92;
      font-size: 14px;
    }

    /* Modal de chofer */
    .driver-modal-card {
      max-width: 900px;
    }

    .driver-modal-section {
      margin-bottom: 22px;
    }

    .driver-modal-section h3 {
      margin: 0 0 12px;
      font-size: 13px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #1b3650;
      font-weight: 900;
      padding-bottom: 8px;
      border-bottom: 2px solid #1b3650;
    }

    .driver-section-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }

    .driver-section-head h3 {
      margin: 0;
      padding: 0;
      border: 0;
    }

    .driver-help-text {
      font-size: 11px;
      color: #6b7c92;
      margin: 0 0 10px;
      font-style: italic;
    }

    .driver-items-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .driver-items-list:empty::before {
      content: "Sin elementos agregados.";
      display: block;
      padding: 12px;
      text-align: center;
      color: #6b7c92;
      font-size: 12px;
      font-style: italic;
      border-radius: 8px;
      background: #f7f9fb;
    }

    .driver-item {
      display: grid;
      grid-template-columns: auto 1fr 1fr 1fr auto auto;
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      border-radius: 8px;
      background: #f7f9fb;
      border: 1px solid #e3e7ec;
    }

    .driver-item input {
      height: 32px;
      padding: 0 8px;
      font-size: 12px;
      font-weight: 700;
    }

    .driver-item label {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: #5a6b7e;
      cursor: pointer;
    }

    .driver-item-remove {
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      background: #FCEBEB;
      color: #A32D2D;
      border-radius: 6px;
      font-weight: 900;
      cursor: pointer;
    }

    .driver-item-remove:hover { background: #A32D2D; color: #fff; }

    .transfer-config {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .transfer-row {
      display: grid;
      gap: 8px;
      align-items: center;
    }

    .transfer-row-main {
      grid-template-columns: minmax(135px, 0.38fr) minmax(135px, 0.38fr) minmax(320px, 1.15fr) minmax(150px, 0.42fr);
    }

    .transfer-row-price {
      grid-template-columns: 105px minmax(170px, 0.38fr) minmax(210px, 0.5fr) auto auto;
      justify-content: start;
    }

    .provider-service-form {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .provider-form-row {
      display: grid;
      gap: 8px;
      align-items: start;
    }

    .provider-form-row-main {
      grid-template-columns: minmax(180px, 0.9fr) minmax(150px, 0.55fr) minmax(240px, 1fr) minmax(180px, 0.75fr);
    }

    .provider-form-row-meta {
      grid-template-columns: minmax(220px, 0.9fr) minmax(170px, 0.75fr) minmax(170px, 0.75fr) minmax(155px, 0.55fr);
    }

    .provider-form-row-prices {
      grid-template-columns: 92px minmax(150px, 1fr) 92px minmax(150px, 1fr) minmax(150px, 0.85fr);
    }

    .provider-service-options {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }

    .provider-service-options label {
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 10px;
      background: #eef5fb;
      border: 1px solid var(--line);
      border-radius: 6px;
      color: var(--blue-dark);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.15;
    }

    .service-menu-preview {
      min-height: 32px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .service-menu-preview img {
      width: 42px;
      height: 32px;
      object-fit: cover;
      border-radius: 4px;
      border: 1px solid var(--line);
    }

    .provider-form-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-start;
      flex-wrap: wrap;
    }

    .multi-select {
      position: relative;
      min-width: 0;
      font-size: 12px;
      font-weight: 800;
    }

    .provider-day-schedules {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 4px 0 8px;
    }
    .provider-month-tariff-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin: 6px 0;
    }
    .provider-month-tariff-label {
      font-weight: 800;
      font-size: 13px;
      color: #334155;
    }
    .provider-month-tariff-hint {
      font-size: 11px;
      color: #64748b;
      flex-basis: 100%;
    }
    #providerPriceMonthSelect, #providerPriceMonthInput {
      min-width: 140px;
    }
    .provider-tariff-box {
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      padding: 10px 12px;
      margin: 10px 0 0;
      background: #f8fafc;
    }
    .provider-tariff-line {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }
    .provider-tariff-line:last-of-type { margin-bottom: 0; }
    .provider-month-tariff-sub {
      font-size: 12px;
      color: #475569;
      font-weight: 700;
    }
    #providerPriceMonthSelect {
      font-weight: 800;
      min-width: 220px;
      padding: 6px 8px;
    }
    .provider-tariff-banner {
      margin: 10px 0 4px;
      padding: 8px 12px;
      border-radius: 8px;
      font-weight: 800;
      font-size: 13px;
      letter-spacing: 0.3px;
      background: #e2e8f0;
      color: #1e293b;
    }
    .provider-tariff-banner.is-month {
      background: #1d4ed8;
      color: #fff;
    }
    .provider-day-schedules-title {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.3px;
    }
    .provider-day-schedule-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .provider-day-schedule-label {
      min-width: 92px;
      font-size: 12px;
      font-weight: 800;
      color: #334155;
    }
    .provider-day-schedule-input {
      flex: 1;
      min-width: 0;
    }
    .minors-not-allowed-label {
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .transfer-courtesy-value {
      font-weight: 800;
      letter-spacing: 0.4px;
    }
    .version-status-badge {
      display: inline-block;
      padding: 5px 12px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 12px;
      letter-spacing: 0.3px;
      white-space: nowrap;
    }
    .version-status-badge.is-applied {
      background: #bbf7d0;
      color: #166534;
    }
    .version-status-badge.is-not-applied {
      background: #e2e8f0;
      color: #64748b;
    }

    .sanrafael-bullets {
      margin: 14px auto 6px;
      max-width: 860px;
      padding-left: 20px;
      color: #334155;
      font-size: 14px;
      line-height: 1.55;
      font-weight: 600;
      list-style: none;
    }
    .sanrafael-bullets li {
      margin-bottom: 8px;
      position: relative;
      padding-left: 16px;
    }
    .sanrafael-bullets li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 8px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #2f5d8a;
    }
    .sanrafael-pickup {
      max-width: 860px;
      margin: 18px auto 10px;
      background: #f1f5f9;
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 13px;
      color: #334155;
      font-weight: 600;
    }
    .sanrafael-pickup-label {
      font-weight: 900;
      color: #1f3a5f;
      margin-right: 6px;
    }
    .sanrafael-weather {
      max-width: 860px;
      margin: 0 auto;
      font-size: 12px;
      color: #64748b;
      font-style: italic;
      border-left: 3px solid #2f5d8a;
      padding-left: 10px;
    }
    .citytour-head {
      background: linear-gradient(135deg, #1e3a5f 0%, #0f263a 100%);
    }
    .citytour-icon {
      font-size: 28px;
      line-height: 1;
    }
    .puquios-head {
      background: linear-gradient(160deg, #e0f2fe 0%, #f0f9ff 40%, #ffffff 100%);
      color: #0c4a6e;
    }
    .puquios-head .alta-subtitle {
      color: #0369a1;
    }
    .puquios-head .alta-info-card {
      background: #0c4a6e;
      color: #fff;
    }
    .puquios-icon {
      font-size: 28px;
      line-height: 1;
    }
    .lenas-head {
      background: linear-gradient(160deg, #dbeafe 0%, #eff6ff 40%, #ffffff 100%);
      color: #1e3a8a;
    }
    .lenas-head .alta-subtitle { color: #1d4ed8; }
    .lenas-head .alta-info-card { background: #1e3a8a; color: #fff; }
    .lenas-page .sr-section { margin-top: 14px; }
    .lenas-page .sr-section-title { color: #1e3a8a; }
    .puquios-closing {
      text-align: center;
      font-weight: 800;
      font-size: 15px;
      color: #1e40af;
      margin: 16px 0 8px;
      padding: 12px;
      background: #eff6ff;
      border-radius: 10px;
    }
    .card-options-section {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 2px solid #e2e8f0;
    }
    .activity-user-block {
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      margin-bottom: 10px;
      overflow: hidden;
    }
    .activity-user-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: #f8fafc;
      flex-wrap: wrap;
    }
    .activity-toggle {
      font-size: 10px;
      color: #94a3b8;
      min-width: 12px;
    }
    .activity-collapsed .activity-list { display: none; }
    .activity-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .activity-dot-online { background: #22c55e; }
    .activity-dot-offline { background: #94a3b8; }
    .activity-last-seen {
      font-size: 12px;
      color: #64748b;
    }
    .activity-last-action {
      font-size: 12px;
      color: #1e3a5f;
      font-weight: 600;
      margin-left: auto;
    }
    .activity-list {
      padding: 6px 14px 10px;
    }
    .activity-item {
      display: flex;
      gap: 10px;
      padding: 4px 0;
      font-size: 12px;
      border-bottom: 1px solid #f1f5f9;
    }
    .activity-time {
      color: #1e3a5f;
      font-weight: 700;
      min-width: 130px;
      flex-shrink: 0;
      font-size: 12px;
    }
    .activity-text {
      color: #334155;
    }
    /* ===== Modulo Actividad: lista cronologica limpia ===== */
    .activity-log-flat {
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
    }
    .act-flat-daygroup {
      padding: 7px 14px;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      background: #f1f5f9;
      letter-spacing: 0.4px;
    }
    .act-flat-row {
      display: flex;
      gap: 12px;
      align-items: baseline;
      padding: 8px 14px;
      font-size: 12px;
      border-bottom: 1px solid #f1f5f9;
    }
    .act-flat-row:last-child { border-bottom: none; }
    .act-flat-time {
      color: #1e3a5f;
      font-weight: 700;
      min-width: 64px;
      flex-shrink: 0;
    }
    .act-flat-user {
      flex-shrink: 0;
      min-width: 110px;
      max-width: 150px;
      font-weight: 600;
      color: #0d4f94;
      background: var(--cyan);
      border-radius: 999px;
      padding: 2px 10px;
      font-size: 11px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .act-flat-text { color: #334155; word-break: break-word; }
    .act-flat-empty { padding: 18px 14px; color: #94a3b8; font-size: 13px; }
    /* Resumen compacto, siempre dentro de los bordes */
    .act-summary { display: flex; gap: 14px; flex-wrap: wrap; }
    .act-card {
      flex: 1 1 320px;
      min-width: 0;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
    }
    .act-card-title {
      padding: 8px 14px;
      background: #f8fafc;
      font-size: 12px;
      font-weight: 700;
      color: #1e3a5f;
      border-bottom: 1px solid #eef2f6;
    }
    .act-card-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 6px 14px;
      font-size: 12px;
      border-bottom: 1px solid #f5f8fb;
    }
    .act-card-row:last-child { border-bottom: none; }
    .act-card-row .lbl { color: #334155; min-width: 0; word-break: break-word; }
    .act-card-row .val { color: #64748b; flex-shrink: 0; font-weight: 600; white-space: nowrap; }
    .act-total-line { margin-top: 10px; font-size: 12px; color: #64748b; font-weight: 600; }
    .seller-best-cell { background: #dcfce7; color: #166534; font-weight: 700; }
    .logistica-transfer-note { margin-top: 2px; font-size: 10px; font-weight: 700; color: #64748b; letter-spacing: 0.2px; }
    .logistica-agency-check { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; margin-right: 8px; font-size: 9px; font-weight: 700; color: #b45309; cursor: pointer; white-space: nowrap; }
    .logistica-agency-check input { cursor: pointer; }
    .per-person-note { margin-top: 3px; font-size: 10px; font-weight: 400; color: #9aa7b5; }
    .svc-trf-in { color: #fff; background: #16a34a; }
    .svc-trf-out { color: #fff; background: #ea580c; }
    .svc-alta { color: #fff; background: #7c3aed; }
    .svc-uco { color: #fff; background: #0891b2; }
    .svc-lujan { color: #fff; background: #2563eb; }
    .svc-lujan-maipu { color: #fff; background: #4f46e5; }
    .catalog-count { font-weight: 800; color: #1e3a5f; background: #eef4ff; border-radius: 999px; padding: 2px 10px; margin-left: 6px; font-size: 12px; white-space: nowrap; }
    select.driver-employee { background: #DBEAFE !important; color: #1E40AF !important; font-weight: 700; border-color: #93c5fd !important; }
    select.driver-external { background: #FEF3C7 !important; color: #92400E !important; font-weight: 700; border-color: #fcd34d !important; }
    .svc-maipu { color: #fff; background: #db2777; }
    .svc-rafael { color: #fff; background: #b45309; }
    .svc-city { color: #10263a; background: #fde047; }
    .totals-group-header { background: #12294a; color: #fff; text-align: center; font-size: 11px; letter-spacing: 0.4px; }
    .totals-group-empty { background: transparent; border: none; }
    .vd-indicators {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
      padding: 12px 16px;
    }
    .vd-indicator {
      text-align: center;
      padding: 12px 8px;
      background: #f8fafc;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
    }
    .vd-indicator-value {
      font-size: 26px;
      font-weight: 900;
      color: #1e3a5f;
    }
    .vd-indicator-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 2px;
    }
    .vd-chart-wrap {
      padding: 16px;
      overflow-x: auto;
    }
    .vd-chart {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      min-height: 260px;
      border-bottom: 2px solid #1e3a5f;
      padding-bottom: 0;
    }
    .vd-bar-col {
      flex: 1;
      min-width: 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
    }
    .vd-bar {
      width: 100%;
      max-width: 32px;
      background: linear-gradient(180deg, #2f5d3a 0%, #4a8c5c 100%);
      border-radius: 4px 4px 0 0;
      transition: opacity 0.15s;
      position: relative;
    }
    .vd-bar-col:hover .vd-bar {
      opacity: 0.75;
    }
    .vd-bar-count {
      font-size: 10px;
      font-weight: 800;
      color: #1e3a5f;
      margin-bottom: 2px;
    }
    .vd-bar-day {
      font-size: 10px;
      font-weight: 700;
      color: #475569;
      margin-top: 4px;
    }
    .vd-bar-col.vd-weekend .vd-bar-day { color: #dc2626; }
    .vd-bar-col.vd-today .vd-bar { background: linear-gradient(180deg, #1e3a5f 0%, #334155 100%); }
    .vd-hint {
      text-align: center;
      font-size: 11px;
      color: #94a3b8;
      padding: 8px;
      font-style: italic;
    }
    .undo-bar {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: #1e3a5f;
      color: #fff;
      padding: 12px 20px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 16px;
      z-index: 9999;
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
      font-size: 14px;
      font-weight: 600;
      animation: undo-slide-up 0.3s ease;
    }
    @keyframes undo-slide-up {
      from { opacity: 0; transform: translateX(-50%) translateY(20px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
    .undo-btn {
      background: #fff;
      color: #1e3a5f;
      border: none;
      padding: 6px 16px;
      border-radius: 6px;
      font-weight: 800;
      cursor: pointer;
      font-size: 13px;
    }
    .undo-btn:hover { background: #e2e8f0; }
    @media (max-width: 600px) {
      .vd-bar-col { min-width: 16px; }
      .vd-bar-count { font-size: 8px; }
      .vd-bar-day { font-size: 8px; }
    }
    .card-options-title {
      font-size: 16px;
      font-weight: 900;
      color: #1e3a5f;
      text-align: center;
      margin: 0 0 4px;
      letter-spacing: 0.5px;
    }
    .card-options-subtitle {
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 14px;
    }
    .card-options-table td:nth-child(2) {
      font-weight: 700;
      text-align: right;
    }
    .card-options-note {
      font-size: 11px;
      color: #64748b;
      margin-top: 8px;
    }
    .card-person-block {
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      margin-bottom: 8px;
      overflow: hidden;
    }
    .card-person-block[open] {
      border-color: #1e3a5f;
    }
    .card-person-summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      cursor: pointer;
      background: #f8fafc;
      font-weight: 700;
      font-size: 14px;
      list-style: none;
      user-select: none;
    }
    .card-person-summary::-webkit-details-marker { display: none; }
    .card-person-summary::before {
      content: "\25B6";
      font-size: 10px;
      color: #94a3b8;
      margin-right: 10px;
      transition: transform 0.15s;
    }
    .card-person-block[open] .card-person-summary::before {
      transform: rotate(90deg);
    }
    .card-person-block[open] .card-person-summary {
      background: #1e3a5f;
      color: #fff;
    }
    .card-person-name {
      flex: 1;
    }
    .card-person-total {
      font-weight: 800;
      color: #166534;
    }
    .card-person-block[open] .card-person-total {
      color: #bbf7d0;
    }
    .card-person-block .card-options-table {
      margin: 0;
      border-radius: 0;
    }
    @media (max-width: 500px) {
      .card-person-summary { padding: 10px 12px; font-size: 13px; }
    }
    .transfer-only-page {
      background: #fff;
    }
    .transfer-only-head {
      text-align: center;
      padding: 28px 16px 16px;
      background: #f8fafc;
      border: 2px solid #1e3a5f;
      border-radius: 16px;
      margin: 20px 16px 0;
    }
    .transfer-only-icon {
      margin-bottom: 4px;
      display: flex;
      justify-content: center;
    }
    .transfer-only-title {
      font-size: 32px;
      font-weight: 900;
      color: #1e3a5f;
      margin: 0;
      letter-spacing: 3px;
    }
    .transfer-only-date {
      font-size: 14px;
      font-weight: 700;
      color: #475569;
      margin-top: 6px;
      border-top: 2px solid #cbd5e1;
      padding-top: 8px;
      display: inline-block;
    }
    .transfer-only-info {
      display: flex;
      justify-content: center;
      gap: 16px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      padding: 0 16px 4px;
    }
    .transfer-only-hotel {
      font-size: 14px;
      font-weight: 700;
      color: #475569;
      margin-top: 4px;
    }
    .transfer-only-pickup {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      margin-top: 2px;
    }
    .transfer-route {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0;
      padding: 24px 16px;
    }
    .transfer-route-stop {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .transfer-route-dot {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #1e3a5f;
      color: #fff;
      font-weight: 900;
      font-size: 17px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .transfer-route-label {
      font-size: 12px;
      font-weight: 800;
      color: #334155;
      text-align: center;
      max-width: 130px;
    }
    .transfer-route-line {
      width: 44px;
      height: 3px;
      background: linear-gradient(90deg, #1e3a5f, #94a3b8);
      border-radius: 2px;
      margin: 0 6px;
      align-self: center;
      margin-bottom: 24px;
    }
    .transfer-logistics-text {
      text-align: center;
      padding: 12px 16px;
      font-size: 14px;
      font-weight: 700;
      color: #334155;
    }
    .transfer-only-values {
      padding: 0 16px 8px;
    }
    @media (max-width: 500px) {
      .transfer-route { flex-direction: column; }
      .transfer-route-line { width: 3px; height: 20px; margin: 4px 0; }
    }
    .sr-gallery {
      display: flex;
      gap: 10px;
      margin: 16px auto;
      max-width: 900px;
      overflow: hidden;
      border-radius: 14px;
    }
    .sr-gallery-item {
      flex: 1;
      min-width: 0;
    }
    .sr-gallery-item img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 10px;
      display: block;
    }
    .sr-body {
      max-width: 860px;
      margin: 0 auto;
      padding: 8px 4px;
    }
    .sr-desc-p {
      font-size: 14px;
      line-height: 1.6;
      color: #334155;
      font-weight: 500;
      margin: 0 0 12px;
    }
    .sr-important {
      background: #fef9c3;
      border-left: 4px solid #eab308;
      padding: 12px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #854d0e;
      margin: 14px 0;
    }
    .sr-section { margin: 14px 0; }
    .sr-section-title {
      font-weight: 900;
      font-size: 14px;
      color: #1f3a5f;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }
    .sr-mt { margin-top: 14px; }
    .sr-lists {
      display: flex;
      gap: 20px;
      margin: 14px 0;
    }
    .sr-list-col { flex: 1; min-width: 0; }
    .sr-check-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .sr-check-list li {
      font-size: 13px;
      font-weight: 600;
      color: #166534;
      padding: 4px 0;
      line-height: 1.4;
    }
    .sr-no-list li { color: #991b1b; }
    @media (max-width: 600px) {
      .sr-gallery { flex-direction: column; }
      .sr-gallery-item img { height: 160px; }
      .sr-lists { flex-direction: column; gap: 10px; }
    }

    .backups-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      padding: 16px;
    }
    .backups-modal {
      background: #fff;
      border-radius: 14px;
      width: 100%;
      max-width: 560px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    }
    .backups-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 18px;
      border-bottom: 1px solid #e2e8f0;
      font-size: 16px;
    }
    .backups-close {
      border: none;
      background: #f1f5f9;
      border-radius: 8px;
      padding: 6px 12px;
      cursor: pointer;
      font-weight: 700;
    }
    .backups-list {
      overflow-y: auto;
      padding: 8px 18px 18px;
    }
    .backups-empty {
      padding: 18px 0;
      color: #64748b;
      font-size: 14px;
    }
    .backups-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 0;
      border-bottom: 1px solid #f1f5f9;
    }
    .backups-item-info {
      display: flex;
      flex-direction: column;
    }
    .backups-item-info span {
      font-size: 12px;
      color: #64748b;
    }
    .backups-item-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    .multi-select summary {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 5px 8px;
      border: 1px solid #b6c6d6;
      border-radius: 3px;
      background: white;
      color: #526579;
      cursor: pointer;
      list-style: none;
    }

    .multi-select summary::-webkit-details-marker {
      display: none;
    }

    .multi-select summary::after {
      content: "v";
      color: #163a58;
      font-size: 10px;
      font-weight: 900;
    }

    .multi-select summary span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .multi-select[open] summary::after {
      content: "^";
    }

    .multi-select-menu {
      position: absolute;
      z-index: 30;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      display: grid;
      gap: 4px;
      padding: 8px;
      border: 1px solid #b6c6d6;
      border-radius: 4px;
      background: white;
      box-shadow: 0 10px 22px rgba(10, 30, 50, 0.16);
    }

    .multi-select-menu label {
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 24px;
      color: #10263a;
      cursor: pointer;
    }

    .driver-config .multi-select-menu input {
      width: auto;
      height: auto;
      padding: 0;
    }

    .description-grid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .description-grid label {
      display: grid;
      gap: 5px;
      color: #526579;
      font-size: 11px;
      font-weight: 900;
    }

    .description-grid textarea {
      width: 100%;
      min-height: 104px;
      padding: 8px;
      resize: vertical;
      font-size: 12px;
      font-weight: 800;
    }

    .provider-photo-preview {
      min-height: 32px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #526579;
      font-size: 11px;
      font-weight: 900;
    }

    .provider-photo-preview img {
      width: 38px;
      height: 38px;
      object-fit: cover;
      border: 1px solid var(--line);
      border-radius: 5px;
    }

    .choferes-layout {
      display: grid;
      grid-template-columns: minmax(440px, 0.8fr) minmax(520px, 1fr);
      gap: 14px;
      margin-bottom: 14px;
    }

    .drivers-table { min-width: 720px; }
    .drivers-table th:nth-child(1), .drivers-table td:nth-child(1) { width: 190px; }
    .drivers-table th:nth-child(2), .drivers-table td:nth-child(2) { width: 160px; }
    .drivers-table th:nth-child(3), .drivers-table td:nth-child(3) { width: 90px; }
    .drivers-table th:nth-child(4), .drivers-table td:nth-child(4) { width: 120px; }
    .drivers-table th:nth-child(5), .drivers-table td:nth-child(5) { width: 80px; }
    .drivers-table th:nth-child(6), .drivers-table td:nth-child(6) { width: 80px; }

    .rates-table { min-width: 520px; }
    .rates-table th:nth-child(1), .rates-table td:nth-child(1) { width: 220px; }
    .rates-table th:nth-child(2), .rates-table td:nth-child(2) { width: 150px; }
    .rates-table th:nth-child(3), .rates-table td:nth-child(3) { width: 150px; }

    .driver-services-table { min-width: 1610px; }
    .driver-services-table th:nth-child(1), .driver-services-table td:nth-child(1) { width: 105px; }
    .driver-services-table th:nth-child(2), .driver-services-table td:nth-child(2) { width: 95px; }
    .driver-services-table th:nth-child(3), .driver-services-table td:nth-child(3) { width: 210px; }
    .driver-services-table th:nth-child(4), .driver-services-table td:nth-child(4) { width: 180px; }
    .driver-services-table th:nth-child(5), .driver-services-table td:nth-child(5) { width: 85px; }
    .driver-services-table th:nth-child(6), .driver-services-table td:nth-child(6) { width: 210px; }
    .driver-services-table th:nth-child(7), .driver-services-table td:nth-child(7) { width: 150px; }
    .driver-services-table th:nth-child(8), .driver-services-table td:nth-child(8) { width: 115px; }
    .driver-services-table th:nth-child(9), .driver-services-table td:nth-child(9) { width: 130px; }
    .driver-services-table th:nth-child(10), .driver-services-table td:nth-child(10) { width: 140px; }
    .driver-services-table th:nth-child(11), .driver-services-table td:nth-child(11) { width: 190px; }

    .admin-users-table { min-width: 1660px; }
    .admin-users-table th:nth-child(1), .admin-users-table td:nth-child(1) { width: 135px; }
    .admin-users-table th:nth-child(2), .admin-users-table td:nth-child(2) { width: 130px; }
    .admin-users-table th:nth-child(3), .admin-users-table td:nth-child(3) { width: 130px; }
    .admin-users-table th:nth-child(4), .admin-users-table td:nth-child(4) { width: 130px; }
    .admin-users-table th:nth-child(5), .admin-users-table td:nth-child(5) { width: 220px; }
    .admin-users-table th:nth-child(6), .admin-users-table td:nth-child(6) { width: 140px; }
    .admin-users-table th:nth-child(7), .admin-users-table td:nth-child(7) { width: 220px; }
    .admin-users-table th:nth-child(8), .admin-users-table td:nth-child(8) { width: 130px; }
    .admin-users-table th:nth-child(9), .admin-users-table td:nth-child(9) { width: 125px; }
    .admin-users-table th:nth-child(10), .admin-users-table td:nth-child(10) { width: 120px; }
    .admin-users-table th:nth-child(11), .admin-users-table td:nth-child(11) { width: 90px; }
    .admin-users-table th:nth-child(12), .admin-users-table td:nth-child(12) { width: 120px; }
    .admin-users-table th:nth-child(13), .admin-users-table td:nth-child(13) { width: 120px; }

    .itinerarios-table { min-width: 970px; }
    .itinerarios-table th:nth-child(1), .itinerarios-table td:nth-child(1) { width: 120px; }
    .itinerarios-table th:nth-child(2), .itinerarios-table td:nth-child(2) { width: 240px; }
    .itinerarios-table th:nth-child(3), .itinerarios-table td:nth-child(3) { width: 115px; }
    .itinerarios-table th:nth-child(4), .itinerarios-table td:nth-child(4) { width: 170px; }
    .itinerarios-table th:nth-child(5), .itinerarios-table td:nth-child(5) { width: 125px; }
    .itinerarios-table th:nth-child(6), .itinerarios-table td:nth-child(6) { width: 100px; }
    .itinerarios-table th:nth-child(7), .itinerarios-table td:nth-child(7) { width: 100px; }

    .providers-table { min-width: 1320px; }
    .providers-table th:nth-child(1), .providers-table td:nth-child(1) { width: 165px; }
    .providers-table th:nth-child(2), .providers-table td:nth-child(2) { width: 135px; }
    .providers-table th:nth-child(3), .providers-table td:nth-child(3) { width: 185px; }
    .providers-table th:nth-child(4), .providers-table td:nth-child(4) { width: 285px; }
    .providers-table th:nth-child(5), .providers-table td:nth-child(5) { width: 135px; }
    .providers-table th:nth-child(6), .providers-table td:nth-child(6) { width: 110px; }
    .providers-table th:nth-child(7), .providers-table td:nth-child(7) { width: 110px; }
    .providers-table th:nth-child(8), .providers-table td:nth-child(8) { width: 110px; }
    .providers-table th:nth-child(9), .providers-table td:nth-child(9) { width: 95px; }
    .providers-table th:nth-child(10), .providers-table td:nth-child(10) { width: 95px; }

    .provider-catalog-table { min-width: 960px; }
    .provider-catalog-table th:nth-child(1), .provider-catalog-table td:nth-child(1) { width: 170px; }
    .provider-catalog-table th:nth-child(2), .provider-catalog-table td:nth-child(2) { width: 340px; }
    .provider-catalog-table th:nth-child(3), .provider-catalog-table td:nth-child(3) { width: 130px; }
    .provider-catalog-table th:nth-child(4), .provider-catalog-table td:nth-child(4) { width: 70px; text-align: center; }
    .provider-catalog-table th:nth-child(5), .provider-catalog-table td:nth-child(5) { width: 90px; }
    .provider-catalog-table th:nth-child(6), .provider-catalog-table td:nth-child(6) { width: 80px; }
    .provider-catalog-table th:nth-child(7), .provider-catalog-table td:nth-child(7) { width: 90px; }

    .transfers-table { min-width: 1280px; }
    .transfers-table th:nth-child(1), .transfers-table td:nth-child(1) { width: 160px; }
    .transfers-table th:nth-child(2), .transfers-table td:nth-child(2) { width: 160px; }
    .transfers-table th:nth-child(3), .transfers-table td:nth-child(3) { width: 520px; }
    .transfers-table th:nth-child(4), .transfers-table td:nth-child(4) { width: 120px; }
    .transfers-table th:nth-child(5), .transfers-table td:nth-child(5) { width: 90px; }
    .transfers-table th:nth-child(6), .transfers-table td:nth-child(6) { width: 110px; }
    .transfers-table th:nth-child(7), .transfers-table td:nth-child(7) { width: 85px; }
    .transfers-table th:nth-child(8), .transfers-table td:nth-child(8) { width: 95px; }
    .transfers-table th:nth-child(9), .transfers-table td:nth-child(9) { width: 95px; }

    .module-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .module-tab {
      height: 34px;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 0 14px;
      color: #163a58;
      background: #e8f0f7;
      cursor: pointer;
      font-size: 12px;
      font-weight: 900;
    }

    .module-tab.active {
      color: white;
      background: var(--blue);
      border-color: var(--blue);
    }

    .itinerary-inline-host {
      margin-top: 14px;
    }

    .itinerary-inline-host .modal {
      position: static;
      display: block;
      padding: 0;
      background: transparent;
      z-index: auto;
    }

    .itinerary-inline-host .modal.hidden {
      display: none !important;
    }

    .itinerary-empty-state {
      margin: 12px;
      padding: 22px;
      color: var(--muted);
      background: #fbfdff;
      border: 1px dashed #b6c6d6;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 900;
      text-align: center;
    }

    .itinerary-inline-host .modal-card {
      width: 100%;
      max-height: none;
      box-shadow: none;
    }

    .itinerary-inline-host .modal-body {
      max-height: none;
    }

    .itinerary-client-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }

    .itinerary-client-card {
      min-height: 70px;
      padding: 12px;
      background: white;
      border: 1px solid var(--line);
      border-radius: 5px;
    }

    .itinerary-client-card span {
      display: block;
      margin-bottom: 8px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
    }

    .itinerary-client-card strong {
      color: #10263a;
      font-size: 16px;
      font-weight: 900;
    }

    .itinerary-section {
      margin: 14px 0;
      border: 1px solid var(--line);
      border-radius: 5px;
      overflow: visible;
      background: white;
    }

    .itinerary-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 38px;
      padding: 9px 12px;
      color: white;
      background: var(--blue);
      font-size: 12px;
      font-weight: 900;
    }

    .itinerary-section-head.arrivals {
      background: var(--blue-dark);
    }

    .itinerary-head-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .collapse-toggle {
      min-width: 36px;
      padding: 0 10px;
    }

    .itinerary-section-body {
      padding: 12px;
    }

    .itinerary-section-body.collapsed {
      display: none;
    }
    .itinerary-section-footer {
      display: flex;
      justify-content: flex-end;
      padding: 8px 10px;
      border-top: 1px dashed #cbd5e1;
    }
    .itinerary-section-body.collapsed + .itinerary-section-footer {
      display: none;
    }

    .itinerary-card {
      margin-bottom: 12px;
      border: 1px solid var(--line);
      border-radius: 4px;
      background: #fff;
      overflow: visible;
    }

    .itinerary-card:last-child {
      margin-bottom: 0;
    }

    .itinerary-card-title {
      padding: 9px 10px;
      color: #526579;
      background: #eef2f5;
      border-bottom: 1px solid var(--line);
      font-size: 11px;
      font-weight: 900;
    }

    .itinerary-card-title.dinner {
      color: #fff;
      background: var(--blue-dark);
    }

    .itinerary-card .reservation-fee-field {
      display: none;
    }

    .itinerary-card.is-reservation-fee .reservation-fee-field {
      display: grid;
    }

    .itinerary-card.is-reservation-fee .transfer-only-field {
      display: none;
    }

    .itinerary-dinner-card {
      border-color: #b9ccdf;
    }

    .itinerary-form-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      padding: 12px;
      align-items: start;
    }

    .itinerary-form-grid label,
    .participant-row label {
      display: grid;
      gap: 5px;
      color: #526579;
      font-size: 11px;
      font-weight: 900;
    }

    .itinerary-form-grid input,
    .itinerary-form-grid select,
    .itinerary-form-grid textarea,
    .participant-row input,
    .participant-row select {
      width: 100%;
      min-width: 0;
      height: 32px;
      padding: 6px 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .itinerary-form-grid textarea {
      height: 70px;
      resize: vertical;
    }

    .itinerary-form-grid .wide {
      grid-column: span 2;
    }

    .itinerary-form-grid .full {
      grid-column: 1 / -1;
    }

    .participant-row {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) 150px 130px minmax(220px, 1fr) auto;
      gap: 8px;
      padding: 8px;
      border-bottom: 1px solid var(--line);
      align-items: end;
    }

    .participant-row.is-minor {
      grid-template-columns: minmax(220px, 1fr) 130px 105px 130px minmax(220px, 1fr) auto;
    }

    .participant-row .minor-age-field {
      display: none;
    }

    .participant-row.is-minor .minor-age-field {
      display: grid;
    }

    .participant-row:last-child {
      border-bottom: 0;
    }

    .hotel-row select[multiple] {
      height: 58px;
    }

    .wine-check {
      display: flex !important;
      grid-template-columns: none !important;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      height: 32px;
    }

    .wine-check input {
      width: auto;
      height: auto;
    }

    .participant-picker {
      position: relative;
    }

    .participant-picker summary {
      width: 100%;
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 8px;
      color: #526579;
      background: white;
      border: 1px solid #b6c6d6;
      border-radius: 3px;
      cursor: pointer;
      list-style: none;
      overflow: hidden;
    }

    .participant-picker summary::-webkit-details-marker {
      display: none;
    }

    .participant-picker summary::after {
      content: "v";
      color: #163a58;
      font-size: 10px;
      font-weight: 900;
    }

    .participant-picker[open] summary::after {
      content: "^";
    }

    .participant-picker-menu {
      position: absolute;
      z-index: 40;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      display: grid;
      gap: 4px;
      max-height: 220px;
      overflow-y: auto;
      padding: 8px;
      background: white;
      border: 1px solid #b6c6d6;
      border-radius: 4px;
      box-shadow: 0 10px 22px rgba(10, 30, 50, 0.16);
    }

    .participant-picker-menu label {
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 24px;
      color: #10263a;
      cursor: pointer;
    }

    .participant-picker-menu input {
      width: auto;
      height: auto;
      padding: 0;
    }

    .itinerary-totals-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .itinerary-total-card {
      display: grid;
      gap: 8px;
      min-height: 108px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: #fbfdff;
    }

    .itinerary-total-card strong {
      color: #10263a;
      font-size: 16px;
      font-weight: 900;
    }

    .itinerary-total-card span,
    .itinerary-total-card li {
      color: #526579;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.35;
    }

    .itinerary-total-card ul {
      margin: 0;
      padding-left: 16px;
    }

    .discount-row {
      display: grid;
      grid-template-columns: 110px minmax(160px, 0.4fr) minmax(220px, 1fr) auto;
      gap: 8px;
      align-items: center;
      margin-top: 10px;
    }

    .discount-row input,
    .discount-row select {
      width: 100%;
      height: 32px;
      padding: 6px 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .client-preview {
      display: grid;
      gap: 18px;
      max-width: 980px;
      margin: 0 auto;
      background: #f5f7f9;
      padding: 18px;
    }

    .public-itinerary-page {
      min-height: 100vh;
      padding: 24px;
      background: #eef3f7;
    }

    html.public-route-boot .app-shell,
    html.public-route-boot #globalSidebarToggle,
    html.public-route-boot #loginModal,
    html.public-route-boot #uvitaLauncher,
    html.public-route-boot .uvita-panel {
      display: none !important;
    }

    html.public-route-boot #publicItineraryPage.hidden {
      display: block !important;
    }

    html.public-route-boot #backToSystemButton {
      display: none !important;
    }

    .public-itinerary-head {
      max-width: 980px;
      margin: 0 auto 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 18px;
      background: white;
      border: 1px solid #d9e1e8;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(16, 38, 58, 0.1);
    }

    .public-itinerary-head > div {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .public-itinerary-head img {
      width: 54px;
      height: 54px;
      object-fit: contain;
    }

    .public-itinerary-head span {
      color: #6f7f90;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .public-itinerary-head h1 {
      margin: 2px 0 0;
      color: #10263a;
      font-size: 20px;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .client-page {
      min-height: 760px;
      background: white;
      border: 1px solid #d9e1e8;
      box-shadow: 0 12px 28px rgba(16, 38, 58, 0.12);
      overflow: hidden;
    }

    .client-cover {
      min-height: 980px;
      display: grid;
      align-content: space-between;
      gap: 42px;
      padding: 54px 48px 44px;
      background: #fff;
      color: #17283d;
      font-family: "Public Sans", "Open Sans", Arial, sans-serif;
    }

    .client-cover-top {
      display: grid;
      justify-items: center;
      gap: 10px;
    }

    .client-cover-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      min-width: min(100%, 460px);
      padding: 18px 42px;
      border-radius: 999px;
      background: #6f9f38;
      color: white;
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .client-cover-badge img {
      display: none;
    }

    .client-cover-tagline {
      color: #6f9f38;
      font-family: "Canva Sans", "Open Sans", Arial, sans-serif;
      font-size: 28px;
      font-weight: 900;
      line-height: 1.1;
      text-align: center;
      text-transform: uppercase;
      text-shadow:
        1px 0 #fff,
        -1px 0 #fff,
        0 1px #fff,
        0 -1px #fff,
        0 4px 0 rgba(111, 159, 56, 0.28);
    }

    .client-cover-name {
      display: grid;
      justify-items: center;
      align-self: center;
      margin: 90px 0 64px;
      text-align: center;
    }

    .client-cover-first {
      margin-bottom: 10px;
      color: #17283d;
      font-family: "League Spartan", "Open Sans", Arial, sans-serif;
      font-size: clamp(50px, 11vw, 112px);
      font-weight: 900;
      line-height: 0.95;
      text-transform: uppercase;
      text-align: center;
      overflow-wrap: anywhere;
      z-index: 1;
    }

    .client-cover-last {
      color: #17283d;
      font-family: "League Spartan", "Open Sans", Arial, sans-serif;
      font-size: clamp(50px, 11vw, 112px);
      font-weight: 900;
      line-height: 0.95;
      text-transform: uppercase;
      text-align: center;
      overflow-wrap: anywhere;
    }

    .client-cover-info {
      display: grid;
      gap: 18px;
    }

    .client-cover-info-row {
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr);
      gap: 28px;
      align-items: center;
      padding: 18px 0;
      border-top: 6px solid #6f9f38;
    }

    .client-cover-info-row:last-child {
      border-bottom: 6px solid #6f9f38;
    }

    .client-cover-info-icon {
      display: grid;
      place-items: center;
      color: #6f9f38;
    }

    .client-cover-info-icon svg {
      width: 108px;
      height: 108px;
      stroke-width: 2.2;
    }

    .client-cover-info-text {
      color: #05080c;
      font-family: "Open Sans", Arial, sans-serif;
      font-size: 30px;
      font-weight: 900;
      line-height: 1.2;
      text-align: center;
      text-transform: uppercase;
    }

    .alta-mountain-page {
      min-height: 760px;
      padding: 40px 44px;
      background: linear-gradient(180deg, #f4f8fb 0%, #ffffff 100%);
      color: #1b3650;
    }

    .alta-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 22px;
      margin-bottom: 24px;
    }

    .alta-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 22px 36px;
      min-width: 0;
      width: 100%;
      max-width: 720px;
      background: #fff;
      border-radius: 22px;
      border-top: 6px solid #1b3650;
      box-shadow: 0 14px 32px rgba(27, 54, 80, 0.08);
      text-align: center;
    }

    .alta-title-row {
      display: flex;
      gap: 16px;
      align-items: center;
      justify-content: center;
      min-width: 0;
    }

    .alta-mountain-icon {
      width: 78px;
      flex-shrink: 0;
      color: #1b3650;
    }

    .alta-brand h3 {
      margin: 0;
      color: #1b3650;
      font-family: "League Spartan", "Open Sans", Arial, sans-serif;
      font-size: clamp(28px, 3.4vw, 48px);
      font-weight: 900;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: 2px;
      white-space: nowrap;
    }

    .alta-subtitle {
      padding-top: 8px;
      border-top: 2px solid rgba(27, 54, 80, 0.12);
      color: #5a7794;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 6px;
      text-transform: uppercase;
      text-align: center;
      width: 100%;
      max-width: 460px;
    }

    .alta-info-card {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      padding: 0;
      width: 100%;
      max-width: 860px;
      border-radius: 22px;
      background: #1b3650;
      color: #fff;
      box-shadow: 0 14px 32px rgba(27, 54, 80, 0.18);
      overflow: hidden;
    }

    .alta-info-line {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 14px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-align: center;
      border-right: 1px solid rgba(255, 255, 255, 0.1);
    }
    .alta-info-line:last-child { border-right: 0; }

    .alta-info-icon {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border: 2px solid rgba(255, 255, 255, 0.85);
      border-radius: 999px;
      font-size: 14px;
      letter-spacing: 0;
      font-weight: 900;
      margin-bottom: 4px;
    }

    .alta-info-line span:last-child {
      line-height: 1.4;
    }

    .alta-stops-hint {
      margin: 0 auto 6px;
      max-width: 720px;
      padding: 10px 18px;
      border-radius: 14px;
      background: rgba(27, 54, 80, 0.06);
      color: #1b3650;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-align: center;
    }

    .alta-route {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(160px, 1fr));
      gap: 90px 70px;
      margin-top: 18px;
      padding: 40px 30px 30px;
    }

    /* CSS-only connector lines: two horizontal lines that pass through the
       center of each row of stops. Simple, robust, always aligned. */
    .alta-route::before,
    .alta-route::after {
      content: "";
      position: absolute;
      background: #6f9f38;
      height: 5px;
      z-index: 0;
      pointer-events: none;
      border-radius: 999px;
    }

    /* Top line connects stops 1, 2, 3 - aligned with row 1 photo centers */
    .alta-route::before {
      top: 33%;
      left: 16.6%;
      right: 16.6%;
    }

    /* Bottom line connects stops 4, 5, 6 - aligned with row 2 photo centers */
    .alta-route::after {
      top: 79%;
      left: 16.6%;
      right: 16.6%;
    }

    /* Hide the old SVG approach */
    .alta-route-svg {
      display: none;
    }

    @keyframes altaDraw {
      to { stroke-dashoffset: 0; }
    }

    .alta-stop {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      gap: 10px;
      border: 0;
      background: transparent;
      cursor: pointer;
      color: #1b3650;
      padding: 0;
    }

    .alta-stop[data-stop-pos="1"] { grid-column: 1; grid-row: 1; }
    .alta-stop[data-stop-pos="2"] { grid-column: 2; grid-row: 1; }
    .alta-stop[data-stop-pos="3"] { grid-column: 3; grid-row: 1; }
    .alta-stop[data-stop-pos="4"] { grid-column: 1; grid-row: 2; }
    .alta-stop[data-stop-pos="5"] { grid-column: 2; grid-row: 2; }
    .alta-stop[data-stop-pos="6"] { grid-column: 3; grid-row: 2; }

    .alta-stop-label {
      max-width: 200px;
      min-height: 36px;
      font-family: "League Spartan", "Open Sans", Arial, sans-serif;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.1;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #1b3650;
    }

    .alta-stop-photo {
      position: relative;
      display: grid;
      place-items: center;
      width: clamp(130px, 14vw, 168px);
      aspect-ratio: 1;
      overflow: visible;
      border-radius: 999px;
      background: transparent;
      transition: transform 0.28s ease;
    }

    .alta-stop-photo::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 999px;
      border: 5px solid #fff;
      outline: 3px solid #1b3650;
      box-shadow: 0 14px 28px rgba(27, 54, 80, 0.22);
      pointer-events: none;
      z-index: 1;
    }

    .alta-stop-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 999px;
      position: relative;
      z-index: 0;
    }

    .alta-stop:hover .alta-stop-photo,
    .alta-stop:focus-visible .alta-stop-photo {
      transform: translateY(-4px) scale(1.04);
    }
    .alta-stop:hover .alta-stop-photo::before,
    .alta-stop:focus-visible .alta-stop-photo::before {
      box-shadow: 0 22px 36px rgba(27, 54, 80, 0.3);
    }

    .alta-stop-number {
      position: absolute;
      top: -10px;
      left: -10px;
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      background: #1b3650;
      color: #fff;
      font-family: "League Spartan", "Open Sans", Arial, sans-serif;
      font-size: 20px;
      font-weight: 900;
      letter-spacing: 0;
      box-shadow: 0 6px 14px rgba(27, 54, 80, 0.4);
      border: 3px solid #fff;
      z-index: 3;
    }

    .alta-actions-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin-top: 28px;
    }

    .alta-video-row {
      display: none;
    }

    .alta-video-button {
      border: 0;
      border-radius: 999px;
      padding: 0 26px;
      min-height: 44px;
      min-width: 240px;
      background: #1b3650;
      color: white;
      box-shadow: 0 8px 18px rgba(27, 54, 80, 0.22);
      font-family: "League Spartan", "Open Sans", Arial, sans-serif;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .alta-video-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(27, 54, 80, 0.3);
    }

    .alta-mountain-page .client-daily-values {
      margin: 0;
      text-align: center;
    }

    .alta-mountain-page .client-daily-values summary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      justify-content: center;
      min-height: 44px;
      min-width: 240px;
      padding: 0 26px;
      border-radius: 999px;
      background: #1b3650;
      color: #fff;
      font-family: "League Spartan", "Open Sans", Arial, sans-serif;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 2px;
      text-transform: uppercase;
      box-shadow: 0 8px 18px rgba(27, 54, 80, 0.22);
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .alta-mountain-page .client-daily-values summary::after {
      content: "v";
      font-size: 14px;
      opacity: 0.85;
      transition: transform 0.2s ease;
    }

    .alta-mountain-page .client-daily-values[open] summary::after {
      transform: rotate(180deg);
    }

    .alta-mountain-page .client-daily-values summary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(27, 54, 80, 0.3);
    }

    .alta-mountain-page .client-daily-values table {
      margin: 16px auto 0;
      max-width: 720px;
    }

    .alta-dinner-block {
      margin-top: 30px;
      padding-top: 22px;
      border-top: 2px solid #d9e1e8;
    }

    .alta-dinner-block h4 {
      margin: 0 0 16px;
      color: #1b3650;
      font-size: 24px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .alta-modal {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: grid;
      place-items: center;
      padding: 22px;
      background: rgba(9, 23, 37, 0.56);
      backdrop-filter: blur(4px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.24s ease;
    }

    .alta-modal.open {
      opacity: 1;
      pointer-events: auto;
    }

    .alta-modal-card {
      width: min(560px, 100%);
      overflow: hidden;
      border-radius: 18px;
      background: white;
      box-shadow: 0 30px 70px rgba(9, 23, 37, 0.32);
      transform: translateY(18px) scale(0.96);
      transition: transform 0.24s ease;
      border-top: 6px solid #6f9f38;
    }

    .alta-modal.open .alta-modal-card {
      transform: translateY(0) scale(1);
    }

    .alta-modal-photo {
      display: none;
    }

    .alta-modal-body {
      display: grid;
      gap: 16px;
      padding: 28px 30px 30px;
      position: relative;
    }

    .alta-modal-body h4 {
      margin: 0;
      color: #1b3650;
      font-size: 24px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding-right: 40px;
    }

    .alta-modal-body p {
      margin: 0;
      color: #526579;
      font-size: 15px;
      line-height: 1.55;
      font-weight: 600;
    }

    .alta-modal-body strong {
      display: block;
      padding: 12px 14px;
      border-left: 4px solid #6f9f38;
      background: rgba(111, 159, 56, 0.08);
      color: #1b3650;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 1px;
      line-height: 1.4;
    }

    .alta-modal-body strong:empty {
      display: none;
    }

    .alta-modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      border: 0;
      border-radius: 999px;
      width: 34px;
      height: 34px;
      padding: 0;
      background: #f0f4f7;
      color: #1b3650;
      font-weight: 900;
      font-size: 14px;
      cursor: pointer;
      display: grid;
      place-items: center;
    }

    .alta-modal-close:hover {
      background: #1b3650;
      color: #fff;
    }

    @keyframes altaFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    @keyframes altaLinePulse {
      0%, 100% { filter: drop-shadow(0 0 0 rgba(27,54,80,0)); }
      50% { filter: drop-shadow(0 0 8px rgba(27,54,80,0.24)); }
    }

    .client-day,
    .client-transfers-page,
    .client-total-page,
    .client-policies {
      min-height: 760px;
      padding: 30px;
    }

    .client-day-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      padding-bottom: 14px;
      border-bottom: 4px solid #6f9f38;
    }

    .client-day-head h3,
    .client-total-page h3,
    .client-policies h3 {
      margin: 0;
      color: #10263a;
      font-size: 28px;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .client-day-head span {
      color: #6f9f38;
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .client-route {
      margin: 18px 0;
      padding: 12px 14px;
      color: white;
      background: #1b3650;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 900;
    }

    .client-transfer-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 22px;
    }

    .client-transfer-card {
      padding: 18px;
      background: #f7fafc;
      border: 1px solid #d9e1e8;
      border-left: 8px solid #1aa6bd;
      border-radius: 6px;
    }

    .client-transfer-card strong {
      display: block;
      margin-bottom: 14px;
      color: #10263a;
      font-size: 20px;
      font-weight: 900;
    }

    .client-transfer-card dl {
      display: grid;
      gap: 10px;
      margin: 0;
    }

    .client-transfer-card div {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
    }

    .client-transfer-card dt {
      color: #6f9f38;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .client-transfer-card dd {
      margin: 0;
      color: #10263a;
      font-size: 13px;
      font-weight: 900;
    }

    /* Visible values table inside each transfer card */
    .client-transfer-card .client-daily-values {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid #d9e1e8;
    }

    .client-transfer-card .client-daily-values summary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 32px;
      padding: 0 14px;
      border-radius: 999px;
      background: #1aa6bd;
      color: #fff;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
      list-style: none;
    }

    .client-transfer-card .client-daily-values summary::-webkit-details-marker {
      display: none;
    }

    .client-transfer-card .client-daily-values summary::after {
      content: "v";
      font-size: 11px;
      opacity: 0.85;
      transition: transform 0.2s ease;
    }

    .client-transfer-card .client-daily-values[open] summary::after {
      transform: rotate(180deg);
    }

    .client-transfer-card .client-daily-values table {
      margin-top: 10px;
      width: 100%;
    }

    .client-stop {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 18px;
      padding: 18px 0;
      border-bottom: 1px solid #d9e1e8;
    }

    .client-stop-photo {
      min-height: 158px;
      background: #e8f0f7;
      border-radius: 4px;
      overflow: hidden;
    }

    .client-stop-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .client-stop-photo.empty {
      display: grid;
      place-items: center;
      color: #6f9f38;
      font-size: 32px;
      font-weight: 900;
    }

    .client-stop h4 {
      margin: 0 0 6px;
      color: #10263a;
      font-size: 22px;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .client-stop-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }

    .itinerary-options-bar {
      margin: 0 auto 18px;
      max-width: 900px;
      padding: 14px 16px;
      background: #0f263a;
      border-radius: 14px;
      color: #fff;
    }
    .itinerary-options-intro {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 10px;
      opacity: 0.92;
    }
    .itinerary-options-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .itinerary-option-tab {
      border: 2px solid rgba(255,255,255,0.4);
      background: transparent;
      color: #fff;
      font-weight: 800;
      font-size: 14px;
      padding: 10px 18px;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .itinerary-option-tab:hover {
      border-color: #fff;
    }
    .itinerary-option-tab.active {
      background: #fff;
      color: #0f263a;
      border-color: #fff;
    }

    .client-stop-meta span {
      padding: 5px 8px;
      color: #10263a;
      background: #e8f0f7;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
    }

    .client-stop-meta span.client-status-chip.status-pendiente {
      background: #fde68a;
      color: #854d0e;
    }
    .client-stop-meta span.client-status-chip.status-confirmado {
      background: #bbf7d0;
      color: #166534;
    }
    .client-stop-meta span.client-status-chip.status-cancelado {
      background: #fecaca;
      color: #991b1b;
    }

    .client-stop p {
      margin: 0 0 10px;
      color: #526579;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.5;
    }

    .client-price-details summary {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 12px;
      color: white;
      background: #6f9f38;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 900;
      list-style: none;
    }

    .client-stop-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: flex-start;
    }

    .client-menu-details summary {
      background: #1aa6bd;
    }

    .client-menu-image {
      margin-top: 12px;
      max-width: 520px;
      width: 100%;
      border: 1px solid #d9e1e8;
      border-radius: 6px;
      display: block;
    }

    .client-service-warning {
      display: inline-flex;
      margin: 0 0 10px;
      padding: 6px 9px;
      color: #842029;
      background: #f8d7da;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .client-daily-values {
      margin-top: 18px;
    }

    .client-daily-values-title {
      margin-bottom: 8px;
      color: #1b3650;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .client-daily-values summary {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 14px;
      color: white;
      background: #1b3650;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 900;
      list-style: none;
    }

    .client-daily-values summary::-webkit-details-marker {
      display: none;
    }

    .client-price-details summary::-webkit-details-marker {
      display: none;
    }

    .client-price-table,
    .client-payment-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 12px;
      color: #10263a;
      font-size: 12px;
      font-weight: 900;
    }

    .client-price-table th,
    .client-price-table td,
    .client-payment-table th,
    .client-payment-table td {
      border: 1px solid #d9e1e8;
      padding: 10px;
      text-align: center;
    }

    .client-price-table th,
    .client-payment-table th {
      color: white;
      background: #6f9f38;
      text-transform: uppercase;
    }

    .client-price-table th:first-child,
    .client-price-table td:first-child,
    .client-payment-table th:first-child,
    .client-payment-table td:first-child {
      text-align: left;
    }

    /* En celular, la tabla "Detalhe por integrante" se apila en tarjetas,
       para que R$ (PIX) y USD (Especie) se vean siempre, sin deslizar. */
    @media (max-width: 700px) {
      .totals-detail-table { border: none; }
      .totals-detail-table thead { display: none; }
      .totals-detail-table tbody tr {
        display: block;
        border: 1px solid #d9e1e8;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 14px;
      }
      .totals-detail-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border: none;
        border-bottom: 1px solid #eef2f6;
        text-align: right;
      }
      .totals-detail-table tbody td:last-child { border-bottom: none; }
      .totals-detail-table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #10263a;
        text-align: left;
        flex: 1;
        text-transform: uppercase;
        font-size: 11px;
      }
      .totals-detail-table tbody td:first-child {
        background: #6f9f38;
        color: #fff;
        font-size: 14px;
        justify-content: flex-start;
        text-transform: uppercase;
      }
      .totals-detail-table tbody td:first-child::before { content: ""; display: none; }
    }

    .totals-accordion { max-width: 520px; margin: 0 auto; }
    .totals-accordion .card-options-subtitle { text-align: center; }
    .totals-accordion-detail { padding: 4px 14px 12px; }
    .totals-accordion-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 7px 0;
      border-bottom: 1px solid #f1f5f9;
      font-size: 13px;
      color: #10263a;
    }
    .totals-accordion-line:last-child { border-bottom: none; }
    .totals-accordion-line span:first-child { color: #6b7c92; text-transform: uppercase; font-size: 11px; font-weight: 700; }
    .totals-accordion-line span:last-child { font-weight: 800; }

    .transfer-original-value {
      color: #10263a;
      font-weight: 900;
      white-space: nowrap;
    }

    .transfer-discounted-value {
      display: inline-block;
      margin-left: 2px;
      color: var(--red);
      font-weight: 900;
      white-space: nowrap;
    }

    .client-total-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 150px;
      height: 52px;
      padding: 0 24px;
      color: white;
      background: #1aa6bd;
      border-radius: 999px;
      font-size: 24px;
      font-weight: 900;
      margin-bottom: 22px;
    }

    .client-note-box {
      margin-top: 18px;
      padding: 16px 18px;
      color: white;
      background: #1b3650;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.5;
    }

    .client-balance-grid {
      display: flex;
      gap: 16px;
      margin-top: 20px;
      flex-wrap: wrap;
    }
    .client-balance-card {
      flex: 1 1 220px;
      border: 1px solid #d9e2ec;
      border-radius: 10px;
      padding: 16px 18px;
      background: #f7fafc;
    }
    .client-balance-card > span {
      display: block;
      font-size: 13px;
      font-weight: 900;
      color: #1b3650;
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: .5px;
    }
    .client-balance-line {
      font-size: 14px;
      color: #415061;
      margin: 3px 0;
      display: flex;
      justify-content: space-between;
    }
    .client-balance-falta {
      font-size: 15px;
      color: #14532d;
      margin-top: 10px;
      padding-top: 8px;
      border-top: 1px dashed #cbd5e1;
      display: flex;
      justify-content: space-between;
    }
    .client-balance-falta strong { color: #b45309; }

    .client-payments-block {
      margin-top: 34px;
      padding-top: 28px;
      border-top: 2px solid #e2e8f0;
    }
    .client-payments-block .client-total-badge { margin-bottom: 18px; }

    .client-winery-note {
      margin-top: 20px;
      padding: 14px 16px;
      color: #10263a;
      background: #fff5cf;
      border-left: 8px solid #6f9f38;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.45;
      text-transform: uppercase;
    }

    .client-policy-box {
      margin: 18px 0;
      padding: 18px;
      background: #eef2f5;
      border-left: 8px solid #6f9f38;
    }

    .client-policy-box.dark {
      color: white;
      background: #1b3650;
      border-left-color: #1aa6bd;
    }

    .client-policy-box h4 {
      margin: 0 0 10px;
      font-size: 18px;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .client-policy-box li {
      margin-bottom: 8px;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.45;
    }

    .dia-table { min-width: 1760px; }
    .dia-table th:nth-child(1), .dia-table td:nth-child(1) { width: 105px; }
    .dia-table th:nth-child(2), .dia-table td:nth-child(2) { width: 95px; }
    .dia-table th:nth-child(3), .dia-table td:nth-child(3) { width: 75px; }
    .dia-table th:nth-child(4), .dia-table td:nth-child(4) { width: 210px; }
    .dia-table th:nth-child(5), .dia-table td:nth-child(5) { width: 200px; }
    .dia-table th:nth-child(6), .dia-table td:nth-child(6) { width: 70px; }
    .dia-table th:nth-child(7), .dia-table td:nth-child(7) { width: 210px; }
    .dia-table th:nth-child(8), .dia-table td:nth-child(8) { width: 130px; }
    .dia-table th:nth-child(9), .dia-table td:nth-child(9) { width: 135px; }
    .dia-table th:nth-child(10), .dia-table td:nth-child(10) { width: 170px; }
    .dia-table th:nth-child(11), .dia-table td:nth-child(11) { width: 105px; }
    .dia-table th:nth-child(12), .dia-table td:nth-child(12) { width: 105px; }
    .dia-table th:nth-child(13), .dia-table td:nth-child(13) { width: 105px; }
    .dia-table th:nth-child(14), .dia-table td:nth-child(14) { width: 105px; }

    /* Logistics table: reduce font and widths by ~20% so it fits without horizontal scroll on most screens (equivalent to viewing at 80% zoom in the rest of the app, but only for this table) */
    .logistica-table { min-width: 1820px; font-size: 11px; }
    .logistica-table th { font-size: 10px; padding: 6px 6px; }
    .logistica-table td { padding: 3px 6px; }
    .logistica-table th:nth-child(1), .logistica-table td:nth-child(1) { width: 32px; text-align: center; }   /* check personal */
    .logistica-table th:nth-child(2), .logistica-table td:nth-child(2) { width: 34px; text-align: center; }   /* # */
    .logistica-table th:nth-child(3), .logistica-table td:nth-child(3) { width: 74px; }                        /* DIA */
    .logistica-table th:nth-child(4), .logistica-table td:nth-child(4) { width: 84px; }                        /* FECHA */
    .logistica-table th:nth-child(5), .logistica-table td:nth-child(5) { width: 56px; text-align: center; }    /* N CLIENTE (mas chico) */
    .logistica-table th:nth-child(6), .logistica-table td:nth-child(6) { width: 175px; white-space: nowrap; }  /* CLIENTE (una linea) */
    .logistica-table th:nth-child(7), .logistica-table td:nth-child(7) { width: 42px; text-align: center; }    /* CANT (mas chico) */
    .logistica-table th:nth-child(8), .logistica-table td:nth-child(8) { width: 150px; }                       /* SERVICIO */
    .logistica-table th:nth-child(9), .logistica-table td:nth-child(9) { width: 78px; }                        /* VUELO (mas chico) */
    .logistica-table th:nth-child(10), .logistica-table td:nth-child(10) { width: 320px; }                     /* ITINERARIO / OBS (mas grande) */
    .logistica-table th:nth-child(11), .logistica-table td:nth-child(11) { width: 64px; }                      /* PICK UP / hora (mas chico) */
    .logistica-table th:nth-child(12), .logistica-table td:nth-child(12) { width: 130px; }                     /* HOTEL */
    .logistica-table th:nth-child(13), .logistica-table td:nth-child(13) { width: 145px; }                     /* CHOFER (legible) */
    .logistica-table th:nth-child(14), .logistica-table td:nth-child(14) { width: 145px; }                     /* VEHICULO (legible) */
    .logistica-table th:nth-child(15), .logistica-table td:nth-child(15) { width: 80px; }                      /* VER MENSAJE */
    .logistica-table th:nth-child(16), .logistica-table td:nth-child(16) { width: 80px; }                      /* EDITAR SERV */
    .logistica-table th:nth-child(17), .logistica-table td:nth-child(17) { width: 84px; }                      /* ELIMINAR CIERRE */
    /* Rediseno A+B: encabezado fijo + vista compacta para ver el dia completo de una */
    .logistica-wrap { max-height: 72vh; }
    .logistica-table thead th { position: sticky; top: 0; z-index: 6; }
    .logistica-table .itinerary-preview { max-height: 46px; line-height: 14px; }

    /* Alternating color blocks by date in logistics table */
    .logistica-table tbody tr.logistica-day-a > td {
      background-color: #f8fafc;
    }
    .logistica-table tbody tr.logistica-day-b > td {
      background-color: #e6f0f7;
    }
    .logistica-table tbody tr.logistica-day-block:hover > td {
      background-color: #cfe2f0;
    }

    .itinerary-preview {
      display: block;
      max-height: 62px;
      overflow: auto;
      text-align: left;
      white-space: pre-line;
      line-height: 15px;
      font-size: 11px;
      font-weight: 800;
    }

    tbody tr:nth-child(even) td {
      background: var(--panel-soft);
    }

    .empty-row td {
      height: 64px;
      color: var(--muted);
      background: #fbfdff;
      font-size: 13px;
      font-weight: 800;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 96px;
      height: 21px;
      padding: 0 9px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
    }

    .pill-blue { color: #0d4f94; background: var(--cyan); }
    .pill-yellow { color: #6a4a00; background: var(--yellow); }
    .pill-green { color: white; background: var(--green); }
    .pill-red { color: white; background: var(--red); }
    .pill-gray { color: #425466; background: #e8edf2; }

    .pill-orange { color: #6a3a00; background: #ffd39a; }

    .semaforo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 98px;
      height: 23px;
      padding: 0 10px;
      color: white;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
    }

    .semaforo-ok { background: var(--green); }
    .semaforo-warn { color: #5f4200; background: #f5c542; }
    .semaforo-alert { background: var(--red); }

    /* Semaforo como punto de color (Acta de Clientes) */
    .semaforo-wrap { display: inline-flex; align-items: center; gap: 6px; }
    .semaforo-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: inline-block;
      flex: none;
      box-shadow: 0 0 0 2px rgba(0,0,0,0.06) inset;
    }
    .semaforo-dot.semaforo-ok { background: var(--green); }
    .semaforo-dot.semaforo-warn { background: #f5c542; }
    .semaforo-dot.semaforo-alert { background: var(--red); }
    .semaforo-text { font-size: 11px; font-weight: 900; letter-spacing: .3px; }
    .semaforo-text.t-ok { color: #0f7a3d; }
    .semaforo-text.t-warn { color: #9a6b00; }
    .semaforo-text.t-alert { color: #c0392b; }

    .panel td select {
      width: 100%;
      height: 26px;
      padding: 3px 6px;
      font-size: 11px;
      font-weight: 900;
      cursor: pointer;
    }

    .panel td input[type="date"],
    .panel td input[type="number"],
    .panel td input[type="file"] {
      width: 100%;
      height: 26px;
      padding: 3px 6px;
      font-size: 11px;
      font-weight: 900;
    }

    .receipt-control {
      display: grid;
      gap: 3px;
      text-align: left;
    }

    .file-note {
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      white-space: normal;
    }

    .table-button {
      min-width: 84px;
      height: 24px;
      border: 0;
      border-radius: 5px;
      padding: 0 9px;
      color: white;
      background: #245c94;
      font-size: 11px;
      font-weight: 900;
      cursor: pointer;
    }

    .table-button.secondary {
      color: #163a58;
      background: #e8f0f7;
      border: 1px solid var(--line);
    }

    .table-button.danger {
      background: var(--red);
    }

    .table-button.sent {
      background: var(--green);
    }

    .itinerary-icon-button {
      min-width: 32px;
      width: 32px;
      height: 28px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #0c2034;
      border-radius: 7px;
    }

    .itinerary-icon-button svg {
      width: 21px;
      height: 21px;
      pointer-events: none;
    }

    .sena-link-cell {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 190px;
    }

    .sena-link-cell input {
      width: 132px;
      height: 26px;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 0 8px;
      font-size: 11px;
      font-weight: 800;
      color: var(--blue-dark);
      background: #f8fbff;
      text-transform: none;
    }

    .sena-link-cell a {
      height: 24px;
      display: inline-flex;
      align-items: center;
      padding: 0 8px;
      border-radius: 999px;
      background: #dcfce7;
      color: #166534;
      font-size: 10px;
      font-weight: 900;
      text-decoration: none;
    }

    .inline-actions {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      white-space: nowrap;
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 40;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(12, 25, 38, 0.52);
    }

    .modal.hidden {
      display: none;
    }

    .modal-card {
      width: min(1180px, 100%);
      max-height: calc(100vh - 36px);
      overflow: auto;
      background: #fbfdff;
      border-radius: 8px;
      box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
    }

    .account-card {
      width: min(880px, calc(100vw - 40px));
      overflow-x: hidden;
    }

    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      background: white;
    }

    .modal-head h2 {
      margin: 0;
      font-size: 18px;
      letter-spacing: 0;
    }

    .modal-close {
      width: 32px;
      height: 32px;
      color: #163a58;
      background: #e8f0f7;
      border: 1px solid var(--line);
      border-radius: 6px;
      font-weight: 900;
      cursor: pointer;
    }

    .modal-body {
      display: grid;
      gap: 14px;
      padding: 14px 16px 16px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(150px, 1fr));
      gap: 10px;
    }

    .form-grid input,
    .form-grid select,
    .modal-table input,
    .modal-table select {
      width: 100%;
      height: 32px;
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .form-grid select {
      cursor: pointer;
    }

    .section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #163a58;
      font-size: 13px;
      font-weight: 900;
    }

    .modal-table {
      min-width: 980px;
      background: white;
    }

    .modal-table th {
      background: var(--blue-dark);
    }

    .modal-table td {
      padding: 3px;
      background: #f3f8fc;
    }

    .modal-table tr:not(.service-transfer) .flight-field input {
      display: none;
    }

    .modal-table tr:not(.service-transfer) .flight-field::after {
      content: "No aplica";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 28px;
      color: var(--muted);
      background: #e8edf2;
      border-radius: 5px;
      font-size: 11px;
      font-weight: 900;
    }

    .modal-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .no-close-card {
      width: min(760px, calc(100vw - 36px));
      max-width: min(760px, calc(100vw - 36px));
      overflow-x: hidden;
    }

    .no-close-card .form-grid {
      grid-template-columns: 1fr;
    }

    .no-close-card .modal-actions {
      justify-content: flex-end;
    }

    .no-close-card .stats-total {
      line-height: 1.35;
      white-space: normal;
    }

    .modal-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .modal-summary span {
      padding: 6px 8px;
      color: #163a58;
      background: #e8f0f7;
      border: 1px solid var(--line);
      border-radius: 6px;
      font-size: 12px;
      font-weight: 900;
    }

    .hidden {
      display: none !important;
    }

    .user-pill {
      display: inline-flex;
      align-items: center;
      height: 32px;
      padding: 0 10px;
      color: #163a58;
      background: #e8f0f7;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
    }

    .app-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      min-height: 100vh;
    }

    .app-shell.locked {
      display: none;
    }

    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 70;
      width: 238px;
      max-width: calc(100vw - 32px);
      height: 100vh;
      overflow: auto;
      padding: 24px 18px;
      color: white;
      background: #33404c;
      box-shadow: 18px 0 42px rgba(19, 32, 51, 0.24);
      transform: translateX(-102%);
      transition: transform 0.22s ease;
    }

    .app-shell.sidebar-open .sidebar {
      transform: translateX(0);
    }

    .sidebar-backdrop {
      position: fixed;
      inset: 0;
      z-index: 69;
      border: 0;
      background: rgba(19, 32, 51, 0.38);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease;
    }

    .app-shell.sidebar-open .sidebar-backdrop {
      opacity: 1;
      pointer-events: auto;
    }

    body.sidebar-menu-open {
      overflow: hidden;
    }

    .sidebar-brand {
      position: relative;
      display: grid;
      justify-items: center;
      gap: 8px;
      margin-bottom: 26px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .sidebar-close {
      position: absolute;
      top: 0;
      right: 0;
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 6px;
      color: white;
      background: rgba(255, 255, 255, 0.1);
      cursor: pointer;
      font-size: 13px;
      font-weight: 900;
    }

    .sidebar-close:hover {
      background: rgba(255, 255, 255, 0.18);
    }

    .sidebar-brand img {
      width: 138px;
      max-width: 100%;
      height: auto;
      display: block;
      background: white;
      border-radius: 8px;
      padding: 6px;
    }

    .app-main {
      min-width: 0;
    }

    .top {
      align-items: center;
      gap: 16px;
      min-height: 72px;
      padding: 12px 24px;
    }

    .menu-toggle {
      width: 42px;
      height: 42px;
      display: inline-grid !important;
      place-items: center;
      gap: 4px;
      flex: 0 0 auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: white;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(19, 32, 51, 0.08);
      visibility: visible !important;
      opacity: 1 !important;
    }

    .menu-toggle span {
      width: 20px;
      height: 2px;
      display: block;
      border-radius: 999px;
      background: #113a68;
    }

    .floating-menu-toggle {
      position: fixed;
      top: 16px;
      left: 18px;
      z-index: 999;
      color: white;
      background: var(--blue);
      border-color: var(--blue);
      box-shadow: 0 10px 22px rgba(17, 58, 104, 0.24);
    }

    .floating-menu-toggle span {
      background: white;
    }

    #sidebarToggle,
    #sidebarFloatingToggle {
      display: none !important;
    }

    .app-shell.driver-mode .floating-menu-toggle {
      display: none !important;
    }

    .global-menu-toggle {
      position: fixed;
      top: 16px;
      left: 18px;
      z-index: 10000;
      width: 46px;
      height: 46px;
      display: inline-grid;
      place-items: center;
      gap: 4px;
      border: 1px solid var(--blue-dark);
      border-radius: 8px;
      color: white;
      background: var(--blue);
      box-shadow: 0 10px 22px rgba(17, 58, 104, 0.28);
      cursor: pointer;
    }

    .global-menu-toggle span {
      width: 22px;
      height: 2px;
      display: block;
      border-radius: 999px;
      background: white;
    }

    .global-menu-toggle.hidden,
    .global-menu-toggle[hidden] {
      display: none !important;
    }

    .app-shell:not(.locked):not(.driver-mode) .top {
      padding-left: 84px;
    }

    .top-logo {
      width: 44px;
      height: 44px;
      object-fit: contain;
      background: white;
      border-radius: 8px;
    }

    .sidebar-tabs {
      display: grid;
      gap: 3px;
      align-items: stretch;
    }

    .sidebar-tabs .tab {
      width: 100%;
      height: 34px;
      justify-content: flex-start;
      padding: 0 10px;
      color: rgba(255, 255, 255, 0.72);
      background: transparent;
      border: 0;
      border-radius: 7px;
      font-size: 11px;
      line-height: 1;
      text-align: left;
    }

    .sidebar-tabs .tab.active,
    .sidebar-tabs .tab:hover {
      color: white;
      background: rgba(255, 255, 255, 0.12);
    }

    .nav {
      justify-content: flex-end;
      min-height: 46px;
    }

    .actions {
      align-items: center;
    }

    .sync-status {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 6px 10px;
      border: 1px solid #c8d4df;
      border-radius: 999px;
      color: #39516a;
      background: #f7fafc;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .sync-status.online {
      color: #17623b;
      border-color: #a9d8bd;
      background: #e2f3e9;
    }

    .sync-status.saving {
      color: #7b5b00;
      border-color: #e8cd72;
      background: #fff3bf;
    }

    .sync-status.offline {
      color: #8b2f29;
      border-color: #e2b7b3;
      background: #fde8e6;
    }

    .user-menu {
      position: relative;
    }

    .avatar-button {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      overflow: hidden;
      color: white;
      background: #596778;
      border: 0;
      border-radius: 999px;
      font-weight: 900;
      cursor: pointer;
    }

    .avatar-button img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .user-dropdown {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      z-index: 35;
      width: 210px;
      overflow: hidden;
      background: white;
      border: 1px solid var(--line);
      border-radius: 7px;
      box-shadow: 0 12px 34px rgba(15, 35, 55, 0.18);
    }

    .dropdown-user {
      padding: 12px 14px;
      color: #163a58;
      background: #f7fafc;
      border-bottom: 1px solid var(--line);
      font-size: 12px;
      font-weight: 900;
    }

    .user-dropdown button {
      width: 100%;
      height: 42px;
      padding: 0 14px;
      color: var(--text);
      background: white;
      border: 0;
      border-bottom: 1px solid var(--line);
      text-align: left;
      font-weight: 800;
      cursor: pointer;
    }

    .user-dropdown button:hover {
      background: #f1f5f9;
    }

    .login-screen {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      padding: 22px;
      background: #f3f5f8;
    }
    /* Pantalla de auto-carga del chofer */
    .driver-onboarding {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: grid;
      place-items: center;
      padding: 22px;
      background: linear-gradient(135deg, #f3f5f8 0%, #E6F1FB 100%);
      overflow-y: auto;
    }
    .driver-onboarding.hidden { display: none; }
    .driver-onboarding-card {
      width: min(820px, 100%);
      max-height: 92vh;
      overflow-y: auto;
      padding: 28px 32px;
      background: white;
      border: 1px solid #dfe5eb;
      border-radius: 12px;
      box-shadow: 0 16px 48px rgba(15, 35, 55, 0.15);
    }
    .driver-onboarding-head h2 {
      margin: 0 0 6px;
      color: #1b3650;
      font-size: 22px;
      font-weight: 900;
    }
    .driver-onboarding-head p {
      margin: 0 0 18px;
      font-size: 13px;
      color: #6b7c92;
      line-height: 1.5;
    }
    .onboarding-section {
      margin-bottom: 18px;
    }
    .onboarding-section h3 {
      margin: 0 0 10px;
      padding-bottom: 6px;
      border-bottom: 2px solid #E6F1FB;
      color: #185FA5;
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .onboarding-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px 14px;
    }
    .onboarding-grid label {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 11px;
      font-weight: 700;
      color: #6b7c92;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .onboarding-grid label.full { grid-column: 1 / -1; }
    .onboarding-grid input,
    .onboarding-grid select,
    .onboarding-grid textarea {
      height: 36px;
      padding: 0 10px;
      border: 1px solid #d4dae0;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #1b3650;
      background: #fff;
      text-transform: none;
      letter-spacing: normal;
    }
    .onboarding-grid textarea {
      height: auto;
      min-height: 60px;
      padding: 8px 10px;
      font-family: inherit;
    }
    .onboarding-grid input:focus,
    .onboarding-grid select:focus,
    .onboarding-grid textarea:focus {
      outline: none;
      border-color: #185FA5;
      box-shadow: 0 0 0 2px rgba(24,95,165,0.15);
    }
    .onboarding-grid input.required-empty {
      border-color: #B91C1C;
      background: #FEF2F2;
    }
    .onboarding-vehicle {
      padding: 14px;
      background: #f6f8fa;
      border-radius: 10px;
      border: 1px solid #e3e7ec;
      margin-bottom: 10px;
    }
    .onboarding-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid #e3e7ec;
    }
    #onboardingError {
      flex: 1;
      color: #B91C1C;
      font-size: 12px;
      font-weight: 700;
      margin: 0;
      padding: 8px;
    }

    .login-card {
      width: min(524px, 100%);
      padding: 34px 36px;
      background: white;
      border: 1px solid #dfe5eb;
      border-radius: 6px;
      box-shadow: 0 12px 38px rgba(15, 35, 55, 0.08);
    }

    .login-logo {
      display: block;
      width: 210px;
      margin: 0 auto 22px;
    }

    .login-title {
      margin: 0 0 20px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line);
      color: var(--text);
      font-size: 15px;
      font-weight: 900;
    }

    .login-card label {
      margin-bottom: 18px;
      color: #536276;
      font-size: 12px;
      letter-spacing: 0;
      text-transform: none;
    }

    .login-card input {
      height: 38px;
      padding: 7px 10px;
      font-size: 13px;
      font-weight: 700;
    }

    .recover-link {
      display: inline-block;
      margin: -6px 0 22px;
      color: var(--blue);
      background: transparent;
      border: 0;
      padding: 0;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .account-grid {
      display: grid;
      grid-template-columns: 185px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }

    .account-form {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      min-width: 0;
    }

    .account-form label {
      min-width: 0;
      color: #536276;
      font-size: 11px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .account-form input {
      width: 100%;
      height: 34px;
      padding: 6px 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .account-form .full-row {
      grid-column: 1 / -1;
    }

    .account-form .password-fields {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      min-width: 0;
      padding-top: 4px;
      border-top: 1px solid var(--line);
    }

    .profile-photo-box {
      display: grid;
      gap: 10px;
      justify-items: center;
      padding: 14px;
      border: 1px solid var(--line);
      background: white;
      border-radius: 7px;
      min-width: 0;
    }

    .profile-photo-box input[type="file"] {
      width: 100%;
      max-width: 100%;
      font-size: 11px;
    }

    .profile-photo-preview {
      width: 122px;
      height: 122px;
      display: grid;
      place-items: center;
      overflow: hidden;
      color: white;
      background: #596778;
      border-radius: 999px;
      font-size: 28px;
      font-weight: 900;
    }

    .profile-photo-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .uvita-launcher {
      position: relative;
      z-index: 58;
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      filter: drop-shadow(0 4px 8px rgba(17, 58, 104, 0.2));
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
    }

    .uvita-launcher img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transform: scaleX(-1);
    }

    .uvita-launcher::after {
      content: "";
      position: absolute;
      right: 1px;
      top: 1px;
      width: 8px;
      height: 8px;
      border: 2px solid white;
      border-radius: 999px;
      background: var(--green);
    }

    /* When viewing the driver panel, hide period selectors and other admin UI */
    .app-shell.driver-mode .period-tabs,
    .app-shell.driver-mode .year-tabs,
    .app-shell.driver-mode .month-tabs,
    .app-shell.driver-mode .summary-row,
    .app-shell.driver-mode .stats-bar,
    .app-shell.driver-mode .uvita-launcher,
    .app-shell.driver-mode .uvita-panel,
    .app-shell.driver-mode .sidebar,
    .app-shell.driver-mode .sidebar-backdrop,
    .app-shell.driver-mode .menu-toggle,
    .app-shell.driver-mode .tabs {
      display: none !important;
    }
    .app-shell.driver-mode main { margin-left: 0 !important; }
    /* Colapsar el grid a una sola columna cuando el sidebar esta oculto */
    .app-shell.driver-mode {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    /* ===== Panel Finanzas ===== */
    /* Combustible: panel chofer */
    .fuel-form-card {
      margin-top: 16px;
      padding: 18px;
      background: #fff;
      border: 1px solid #e3e7ec;
      border-radius: 10px;
    }
    .fuel-form-card h4 {
      margin: 0 0 14px;
      font-size: 14px;
      color: #185FA5;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .fuel-form-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px 16px;
    }
    .fuel-form-grid label {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 11px;
      font-weight: 700;
      color: #6b7c92;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .fuel-form-grid label.full { grid-column: 1 / -1; }
    .fuel-form-grid input,
    .fuel-form-grid select,
    .fuel-form-grid textarea {
      height: 34px;
      padding: 0 10px;
      border: 1px solid #d4dae0;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #1b3650;
      background: #fff;
      text-transform: none;
      letter-spacing: normal;
    }
    .fuel-form-grid textarea {
      height: auto;
      min-height: 50px;
      padding: 8px 10px;
      font-family: inherit;
    }
    .fuel-form-grid input:focus,
    .fuel-form-grid select:focus,
    .fuel-form-grid textarea:focus {
      outline: none;
      border-color: #185FA5;
    }
    .fuel-form-actions {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid #eef1f5;
    }
    .fuel-records-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }
    .fuel-record-card {
      background: #fff;
      border: 1px solid #e3e7ec;
      border-radius: 10px;
      padding: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .fuel-record-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid #eef1f5;
    }
    .fuel-record-date {
      font-size: 12px;
      font-weight: 800;
      color: #6b7c92;
      text-transform: uppercase;
    }
    .fuel-record-amount {
      font-size: 16px;
      font-weight: 900;
      color: #B91C1C;
      font-variant-numeric: tabular-nums;
    }
    .fuel-record-body {
      font-size: 12px;
      color: #1b3650;
      line-height: 1.5;
    }
    .fuel-record-notes {
      margin-top: 4px;
      font-style: italic;
      color: #6b7c92;
      font-size: 11px;
    }
    .fuel-record-actions {
      display: flex;
      gap: 6px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #eef1f5;
    }
    .btn-tiny {
      padding: 4px 10px;
      font-size: 10px;
      font-weight: 700;
      border-radius: 4px;
      border: 1px solid;
      cursor: pointer;
      background: #fff;
    }
    .btn-tiny-info { color: #185FA5; border-color: #185FA5; }
    .btn-tiny-info:hover { background: #185FA5; color: #fff; }
    .btn-tiny-danger { color: #B91C1C; border-color: #B91C1C; }
    .btn-tiny-danger:hover { background: #B91C1C; color: #fff; }

    /* Filtros del panel combustible (finanzas) */
    .fuel-filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      padding: 12px 16px;
      background: #f6f8fa;
      border-bottom: 1px solid #e3e7ec;
    }
    .fuel-filters label {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 10px;
      font-weight: 700;
      color: #6b7c92;
      text-transform: uppercase;
    }
    .fuel-filters-sep {
      width: 1px;
      height: 24px;
      background: #d4dae0;
      margin: 0 4px;
    }

    /* Planilla de liquidacion estilo Google Sheets */
    .liq-header-bar {
      background: #fff;
      padding: 14px 16px;
      border-radius: 10px 10px 0 0;
      border: 1px solid #e3e7ec;
      border-bottom: 0;
    }
    .liq-title {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .liq-title h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 800;
      color: #1b3650;
    }
    .liq-period-selectors {
      display: flex;
      gap: 6px;
    }
    .liq-period-sel {
      height: 30px;
      padding: 0 8px;
      border: 1px solid #d4dae0;
      border-radius: 6px;
      background: #fff;
      font-size: 12px;
      font-weight: 700;
      color: #1b3650;
    }
    .liq-summary-cards {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .liq-card {
      padding: 8px 14px;
      background: #f6f8fa;
      border-radius: 8px;
      border: 1px solid #e3e7ec;
      min-width: 120px;
    }
    .liq-card .lbl {
      font-size: 10px;
      font-weight: 700;
      color: #6b7c92;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .liq-card .val {
      font-size: 16px;
      font-weight: 900;
      color: #1b3650;
      margin-top: 2px;
      font-variant-numeric: tabular-nums;
    }
    .liq-card.paid .val { color: #16A34A; }
    .liq-card.pending .val { color: #B91C1C; }
    .liq-table-wrap {
      overflow-x: auto;
      border: 1px solid #e3e7ec;
      border-top: 0;
      border-radius: 0 0 10px 10px;
      background: #fff;
    }
    .liq-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }
    .liq-table thead th {
      background: #1b3650;
      color: #fff;
      padding: 8px 6px;
      text-align: left;
      font-size: 10px;
      letter-spacing: 0.5px;
      font-weight: 800;
      white-space: nowrap;
    }
    .liq-table thead th.num { text-align: right; }
    .liq-table tbody td {
      padding: 5px 6px;
      border-bottom: 1px solid #eef1f5;
      vertical-align: middle;
      color: #1b3650;
      white-space: nowrap;
    }
    .liq-table tbody td.num {
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
    }
    .liq-table tbody td.num-col {
      text-align: center;
      font-weight: 800;
      color: #185FA5;
      font-variant-numeric: tabular-nums;
    }
    .liq-table tbody td.liq-client {
      font-weight: 700;
    }
    .liq-table tbody tr.row-pending {
      background: #FEF9C3; /* amarillo como la imagen */
    }
    .liq-table tbody tr.row-pending:hover {
      background: #FEF08A;
    }
    .liq-table tbody tr.row-paid:hover {
      background: #f9fbfd;
    }
    .liq-paydate {
      height: 22px;
      padding: 0 4px;
      border: 1px solid #d4dae0;
      border-radius: 4px;
      background: #fff;
      font-size: 10px;
      font-weight: 700;
      color: #1b3650;
    }
    .liq-paymethod {
      height: 22px;
      padding: 0 4px;
      border: 1px solid #d4dae0;
      border-radius: 4px;
      background: #fff;
      font-size: 10px;
      font-weight: 700;
      color: #1b3650;
    }
    .liq-amount-input {
      height: 22px;
      width: 90px;
      padding: 0 6px;
      border: 1px solid #d4dae0;
      border-radius: 4px;
      background: #fff;
      font-size: 11px;
      font-weight: 700;
      color: #1b3650;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .liq-amount-input:focus {
      outline: none;
      border-color: #185FA5;
      box-shadow: 0 0 0 2px rgba(24,95,165,0.15);
    }
    .liq-table tfoot td {
      padding: 10px 6px;
      background: #f6f8fa;
      border-top: 2px solid #1b3650;
      font-weight: 900;
      color: #1b3650;
      font-size: 12px;
    }
    .liq-table tfoot td.num {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .vehicle-cell {
      position: relative;
      display: flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }
    .vehicle-cell select {
      flex: 1;
      min-width: 0;
    }
    /* Celda multi-asignacion: muestra el select principal arriba y chips abajo */
    .assignment-multi-cell {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .assignment-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      background: linear-gradient(90deg, #DCFCE7 0%, #BBF7D0 100%);
      border: 1px solid #16A34A;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      color: #166534;
      white-space: nowrap;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .assignment-chip .chip-num {
      background: #16A34A;
      color: #fff;
      padding: 0 5px;
      border-radius: 999px;
      font-size: 9px;
      font-weight: 900;
    }
    .assignment-chip .chip-pax {
      font-weight: 600;
      color: #4D7C0F;
    }
    .assignments-button {
      width: 26px;
      height: 26px;
      padding: 0;
      margin-left: 4px;
      background: #185FA5;
      color: #fff;
      font-weight: 900;
      font-size: 14px;
      border: 0;
      border-radius: 5px;
      cursor: pointer;
      vertical-align: middle;
    }
    .assignments-button.has-extra {
      background: #16A34A;
      position: relative;
    }
    .assignments-button.has-extra::after {
      content: attr(data-count);
      position: absolute;
      top: -6px;
      right: -6px;
      background: #F59E0B;
      color: #fff;
      border-radius: 999px;
      font-size: 9px;
      min-width: 14px;
      height: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 3px;
      font-weight: 900;
      border: 1px solid #fff;
    }
    .btn-small {
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 700;
    }
    /* Sub-pestanas de Finanzas */
    .finance-subtabs {
      display: flex;
      gap: 4px;
      margin-bottom: 16px;
      border-bottom: 2px solid #e3e7ec;
      padding: 0 4px;
    }
    .finance-subtab {
      padding: 10px 22px;
      border: 0;
      background: transparent;
      color: #6b7c92;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.5px;
      cursor: pointer;
      position: relative;
      border-radius: 8px 8px 0 0;
      transition: all 0.15s;
    }
    .finance-subtab:hover {
      background: #f3f5f8;
      color: #1b3650;
    }
    .finance-subtab.active {
      color: #185FA5;
      background: #fff;
    }
    .finance-subtab.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -2px;
      height: 3px;
      background: #185FA5;
      border-radius: 2px 2px 0 0;
    }
    .finance-subview.hidden { display: none; }

    /* Tabla de conductores */
    .finance-conductor-filters {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .finance-conductor-filters .finance-filter-input {
      min-width: 200px;
    }
    .finance-conductor-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .finance-conductor-table thead th {
      background: #1b3650;
      color: #fff;
      padding: 10px 12px;
      text-align: left;
      font-size: 11px;
      letter-spacing: 1px;
      font-weight: 800;
    }
    .finance-conductor-table tbody td {
      padding: 10px 12px;
      border-bottom: 1px solid #eef1f5;
      vertical-align: middle;
      color: #1b3650;
    }
    .finance-conductor-table tbody tr:hover { background: #f9fbfd; }
    .finance-conductor-table .conductor-name {
      font-weight: 800;
      font-size: 13px;
    }
    .finance-conductor-table .conductor-actions {
      display: flex;
      gap: 6px;
      justify-content: center;
    }
    .conductor-action-btn {
      width: 36px;
      height: 36px;
      border: 1px solid #d4dae0;
      background: #fff;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #185FA5;
      transition: all 0.15s;
      padding: 0;
    }
    .conductor-action-btn:hover {
      background: #185FA5;
      color: #fff;
      border-color: #185FA5;
      transform: translateY(-1px);
    }
    .conductor-action-btn.action-info { color: #185FA5; }
    .conductor-action-btn.action-info:hover { background: #185FA5; color: #fff; }
    .conductor-action-btn.action-money { color: #16A34A; }
    .conductor-action-btn.action-money:hover { background: #16A34A; color: #fff; border-color: #16A34A; }
    .conductor-action-btn.action-rates { color: #B45309; }
    .conductor-action-btn.action-rates:hover { background: #B45309; color: #fff; border-color: #B45309; }
    .conductor-type-pill {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.5px;
    }
    .conductor-type-pill.empleado { background: #DBEAFE; color: #1E40AF; }
    .conductor-type-pill.tercerizado { background: #FEF3C7; color: #92400E; }
    .conductor-empty {
      padding: 40px;
      text-align: center;
      color: #6b7c92;
      font-style: italic;
    }

    /* Detalle de conductor en modal */
    .conductor-info-section {
      margin-bottom: 18px;
    }
    .conductor-info-section h3 {
      margin: 0 0 8px;
      font-size: 12px;
      letter-spacing: 1px;
      color: #185FA5;
      text-transform: uppercase;
      font-weight: 800;
      border-bottom: 2px solid #E6F1FB;
      padding-bottom: 4px;
    }
    .conductor-info-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px 16px;
    }
    .conductor-info-grid .info-item {
      font-size: 13px;
    }
    .conductor-info-grid .info-label {
      font-size: 10px;
      color: #6b7c92;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      font-weight: 700;
    }
    .conductor-info-grid .info-value {
      font-weight: 700;
      color: #1b3650;
    }
    .conductor-vehicles {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 4px;
    }
    .conductor-vehicle-card {
      padding: 8px 12px;
      background: #f6f8fa;
      border: 1px solid #e3e7ec;
      border-radius: 8px;
      font-size: 12px;
    }
    .conductor-vehicle-card .label {
      font-weight: 800;
      color: #1b3650;
    }
    .conductor-vehicle-card .meta {
      font-size: 10px;
      color: #6b7c92;
      margin-top: 2px;
    }

    /* Tabla de tarifas convenio */
    .conductor-tarifas-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .conductor-tarifas-table thead th {
      background: #1b3650;
      color: #fff;
      padding: 10px 12px;
      text-align: left;
      font-size: 11px;
      letter-spacing: 1px;
    }
    .conductor-tarifas-table thead th.num { text-align: right; }
    .conductor-tarifas-table tbody td {
      padding: 8px 12px;
      border-bottom: 1px solid #eef1f5;
    }
    .conductor-tarifas-table tbody td.num {
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-weight: 800;
      color: #185FA5;
    }
    /* Tarifas editable: headers con grupo de color segun tipo de chofer */
    .tarifas-editable thead th.header-empleado {
      background: #1E40AF;
      color: #DBEAFE;
      text-align: center;
      border-left: 1px solid rgba(255,255,255,0.15);
    }
    .tarifas-editable thead th.header-tercero {
      background: #92400E;
      color: #FEF3C7;
      text-align: center;
      border-left: 1px solid rgba(255,255,255,0.15);
    }
    .tarifas-editable tbody tr.tarifa-realized {
      background: #F0F9FF;
    }
    .tarifas-editable tbody tr.tarifa-realized:hover {
      background: #E0F2FE;
    }
    .tarifas-editable .realized-tag {
      display: inline-block;
      margin-left: 6px;
      padding: 1px 6px;
      background: #185FA5;
      color: #fff;
      border-radius: 999px;
      font-size: 9px;
      font-weight: 900;
    }
    /* Empleado: tono azul en las 2 columnas de valor */
    .tarifas-editable.tarifas-empleado tbody td:nth-child(2),
    .tarifas-editable.tarifas-empleado tbody td:nth-child(3) {
      background: rgba(30,64,175,0.04);
    }
    .tarifas-editable.tarifas-empleado tbody tr.tarifa-realized td:nth-child(2),
    .tarifas-editable.tarifas-empleado tbody tr.tarifa-realized td:nth-child(3) {
      background: rgba(30,64,175,0.08);
    }
    /* Tercero: tono ambar en las 2 columnas de valor */
    .tarifas-editable.tarifas-tercero tbody td:nth-child(2),
    .tarifas-editable.tarifas-tercero tbody td:nth-child(3) {
      background: rgba(146,64,14,0.04);
    }
    .tarifas-editable.tarifas-tercero tbody tr.tarifa-realized td:nth-child(2),
    .tarifas-editable.tarifas-tercero tbody tr.tarifa-realized td:nth-child(3) {
      background: rgba(146,64,14,0.08);
    }
    .tarifa-input {
      width: 100px;
      height: 28px;
      padding: 0 6px;
      border: 1px solid #d4dae0;
      border-radius: 4px;
      background: #fff;
      font-size: 12px;
      font-weight: 700;
      color: #1b3650;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .tarifa-input:focus {
      outline: none;
      border-color: #185FA5;
      box-shadow: 0 0 0 2px rgba(24,95,165,0.15);
    }
    .tarifa-input::placeholder { color: #cbd5e1; }
    .tarifa-legend {
      display: flex;
      gap: 16px;
      align-items: center;
      flex-wrap: wrap;
      padding: 8px 0;
      margin-bottom: 8px;
      font-size: 11px;
      color: #6b7c92;
    }
    .tarifa-legend .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
    }
    .tarifa-legend .legend-swatch {
      width: 14px;
      height: 14px;
      border-radius: 3px;
      border: 1px solid rgba(0,0,0,0.1);
    }
    .tarifa-legend .legend-swatch.empleado { background: rgba(30,64,175,0.2); }
    .tarifa-legend .legend-swatch.tercero { background: rgba(146,64,14,0.2); }
    .tarifa-legend .legend-pax { margin-left: auto; color: #1b3650; }
    /* Barra de acciones (Ver estadisticas / Ver estado general) */
    .finance-actions-bar {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      padding: 16px;
      background: #fff;
      border: 1px solid #e3e7ec;
      border-radius: 12px;
      margin-bottom: 16px;
    }
    .finance-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 22px;
      border: 0;
      border-radius: 10px;
      background: linear-gradient(135deg, #185FA5 0%, #2C7BC9 100%);
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.5px;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(24,95,165,0.25);
      transition: transform 0.1s, box-shadow 0.15s;
    }
    .finance-action-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(24,95,165,0.35);
    }
    .finance-action-btn:active { transform: translateY(0); }
    .finance-action-btn.active {
      background: linear-gradient(135deg, #134879 0%, #1C6BBA 100%);
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    }
    .finance-action-btn .icon {
      font-size: 18px;
    }
    .finance-actions-period {
      margin-left: auto;
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .finance-collapsible {
      animation: financeSlideIn 0.25s ease-out;
    }
    @keyframes financeSlideIn {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .finance-report-controls {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .finance-report-summary {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      padding: 12px 16px;
      background: #f6f8fa;
      border-bottom: 1px solid #e3e7ec;
    }
    .finance-report-summary .card {
      padding: 8px 14px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid #e3e7ec;
      min-width: 130px;
    }
    .finance-report-summary .card .label {
      font-size: 10px;
      color: #6b7c92;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin: 0;
    }
    .finance-report-summary .card .value {
      font-size: 18px;
      font-weight: 900;
      color: #1b3650;
      margin: 2px 0 0;
    }
    .finance-report-summary .card .value.red { color: #B91C1C; }
    .finance-report-summary .card .value.green { color: #166534; }
    .finance-report-summary .card .value.blue { color: #1E40AF; }
    .finance-report-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .finance-report-table thead th {
      background: #1b3650;
      color: #fff;
      padding: 10px 12px;
      text-align: left;
      font-size: 11px;
      letter-spacing: 1px;
      font-weight: 800;
    }
    .finance-report-table thead th.num { text-align: right; }
    .finance-report-table tbody td {
      padding: 8px 12px;
      border-bottom: 1px solid #eef1f5;
      vertical-align: middle;
    }
    .finance-report-table tbody td.num {
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
    }
    .finance-report-table tbody tr:hover { background: #f9fbfd; }
    .finance-report-table tbody td.saldo-falta {
      background: #FEE2E2;
      color: #991B1B;
      font-weight: 900;
    }
    .finance-report-table tbody td.saldo-exceso {
      background: #DBEAFE;
      color: #1E40AF;
      font-weight: 900;
    }
    .finance-report-table tbody td.saldo-ok {
      background: #DCFCE7;
      color: #166534;
      font-weight: 900;
    }
    .finance-report-pill {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.5px;
    }
    .finance-report-pill.pill-falta { background: #FEE2E2; color: #991B1B; }
    .finance-report-pill.pill-ok { background: #DCFCE7; color: #166534; }
    .finance-report-pill.pill-exceso { background: #DBEAFE; color: #1E40AF; }
    .finance-report-table tfoot td {
      padding: 12px;
      background: #1b3650;
      color: #fff;
      font-weight: 900;
      font-size: 13px;
    }
    .finance-report-table tfoot td.num {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    /* Grafica de bodegas */
    .finance-report-chart-wrap {
      padding: 20px 16px;
      background: #fff;
      border-top: 1px solid #e3e7ec;
    }
    .finance-report-chart-title {
      font-size: 14px;
      font-weight: 900;
      color: #1b3650;
      margin-bottom: 12px;
      letter-spacing: 1px;
    }
    .finance-report-chart {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .finance-report-bar-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
    }
    .finance-report-bar-label {
      flex: 0 0 180px;
      font-weight: 700;
      color: #1b3650;
      text-align: right;
      padding-right: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .finance-report-bar-track {
      flex: 1;
      height: 22px;
      background: #f1f4f7;
      border-radius: 4px;
      position: relative;
      overflow: hidden;
    }
    .finance-report-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #185FA5 0%, #2C7BC9 100%);
      border-radius: 4px;
      transition: width 0.4s ease;
    }
    .finance-report-bar-value {
      flex: 0 0 80px;
      font-weight: 800;
      color: #185FA5;
      font-variant-numeric: tabular-nums;
    }
    .finance-report-empty {
      padding: 30px;
      text-align: center;
      color: #6b7c92;
      font-style: italic;
    }
    .finance-summary {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .finance-summary-card {
      padding: 8px 14px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid #e3e7ec;
      min-width: 110px;
    }
    .finance-summary-card .label {
      font-size: 10px;
      color: #6b7c92;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin: 0;
    }
    .finance-summary-card .value {
      font-size: 16px;
      font-weight: 900;
      color: #1b3650;
      margin: 2px 0 0;
    }
    .finance-summary-card .value.green { color: #27500A; }
    .finance-summary-card .value.red { color: #B91C1C; }

    .finance-filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding: 12px 16px;
      background: #f6f8fa;
      border-bottom: 1px solid #e3e7ec;
      align-items: center;
    }
    .finance-filter-input {
      height: 32px;
      padding: 0 8px;
      font-size: 12px;
      border: 1px solid #d4dae0;
      border-radius: 6px;
      background: #fff;
      color: #1b3650;
      min-width: 130px;
    }
    .finance-filter-input.finance-filter-search {
      min-width: 220px;
      flex: 1;
    }

    .finance-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }
    /* Columnas finance table */
    /* 1-FECHA: ok */
    .finance-table th:nth-child(2), .finance-table td:nth-child(2) { width: 68px; font-size: 10px; }
    /* 2-ENTIDAD: acortar */
    .finance-table th:nth-child(3), .finance-table td:nth-child(3) { width: 85px; font-size: 10px; }
    /* 3-MEDIO: alargar + letra chica */
    .finance-table th:nth-child(4), .finance-table td:nth-child(4) { width: 95px; font-size: 9px; white-space: nowrap; }
    /* 5-PASAJERO: truncar con max-height para grupos grandes */
    .finance-table th:nth-child(6), .finance-table td:nth-child(6) { max-width: 160px; }
    .finance-table td:nth-child(6) { max-height: 52px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; line-height: 1.3; }
    /* 6-SERVICIO: compactar sin cortar */
    .finance-table th:nth-child(8), .finance-table td:nth-child(8) { width: 100px; font-size: 10px; }
    /* 8-Valores: un poco mas anchos */
    .finance-table th:nth-child(10), .finance-table td:nth-child(10) { width: 72px; } /* VALOR PUB */
    .finance-table th:nth-child(11), .finance-table td:nth-child(11) { width: 78px; } /* TOTAL PUB */
    .finance-table th:nth-child(12), .finance-table td:nth-child(12) { width: 72px; } /* VALOR AGENCIA */
    .finance-table th:nth-child(13), .finance-table td:nth-child(13) { width: 78px; } /* TOTAL GRUPO */
    .finance-table th:nth-child(14), .finance-table td:nth-child(14) { width: 72px; } /* ABONADO */
    .finance-table th:nth-child(15), .finance-table td:nth-child(15) { width: 72px; } /* SALDO */
    .finance-table th:nth-child(16), .finance-table td:nth-child(16) { width: 72px; } /* GANANCIA */
    /* 9-FECHA PAGO: alargar para que no se corte */
    .finance-table th:nth-child(17), .finance-table td:nth-child(17) { width: 78px; font-size: 10px; }
    /* 10-COMPROBANTE: super chico, solo un boton */
    .finance-table th:nth-child(18), .finance-table td:nth-child(18) { width: 36px; max-width: 36px; text-align: center; padding: 2px; }
    .finance-table thead th {
      background: #1b3650;
      color: #fff;
      padding: 8px 6px;
      text-align: left;
      font-size: 9px;
      letter-spacing: 0.5px;
      font-weight: 800;
      white-space: nowrap;
      position: sticky;
      top: 0;
      z-index: 1;
    }
    .finance-table thead th.num { text-align: right; }
    .finance-table tbody td {
      padding: 4px 6px;
      border-bottom: 1px solid #eef1f5;
      vertical-align: middle;
      color: #1b3650;
    }
    .finance-table tbody td.num {
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      font-size: 11px;
    }
    .finance-table tbody tr:hover { background: #f9fbfd; }
    .finance-table tbody tr.paid td.estado-cell {
      background: #DCFCE7;
      color: #166534;
    }
    .finance-table tbody tr.unpaid td.estado-cell {
      background: #FEE2E2;
      color: #991B1B;
    }
    .finance-table tbody td.gain-cell {
      background: #ECFCCB;
      color: #3F6212;
      font-weight: 900;
    }
    .finance-table tbody td.gain-cell.red {
      background: #FEE2E2;
      color: #991B1B;
    }
    .finance-table th.cant-col,
    .finance-table td.cant-col {
      width: 32px;
      max-width: 32px;
      text-align: center;
      padding-left: 4px;
      padding-right: 4px;
    }
    /* Columna N° cliente: bien compacta */
    .finance-table th.num-col,
    .finance-table td.num-col {
      width: 50px;
      max-width: 50px;
      text-align: center;
      padding-left: 4px;
      padding-right: 4px;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
    }
    .finance-tipo-chip {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 999px;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-right: 4px;
      vertical-align: middle;
    }
    .finance-tipo-chip.tipo-cwine { background: #DBEAFE; color: #1E40AF; }
    .finance-tipo-chip.tipo-nowine { background: #F3F4F6; color: #4B5563; }
    .finance-tipo-chip.tipo-minor { background: #FEF3C7; color: #92400E; }
    /* Sub-filas (subgrupos): borde tenue entre filas del mismo servicio */
    .finance-table tbody tr.child-row td {
      border-bottom-color: #f3f5f8;
    }
    .finance-table tbody tr.last-of-service td {
      border-bottom: 1px solid #d4dae0;
    }
    .finance-table tbody td.merged-cell {
      vertical-align: middle;
      background-color: #fafbfc;
    }
    .finance-table tbody tr.paid td.merged-cell.estado-cell,
    .finance-table tbody tr.paid td.merged-cell.saldo-cell {
      /* mantener colores intencionales sobre el gris claro */
    }
    .finance-table tbody td.saldo-cell {
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-weight: 900;
    }
    .finance-table tbody td.saldo-cell.positive {
      background: #DBEAFE;
      color: #1E40AF;
    }
    .finance-table tbody td.saldo-cell.negative {
      background: #FEE2E2;
      color: #991B1B;
    }
    .finance-table tbody td.saldo-cell.zero {
      background: #DCFCE7;
      color: #166534;
    }
    .finance-paid-input,
    .finance-agency-input {
      width: 100%;
      height: 24px;
      padding: 0 4px;
      border: 1px solid #d4dae0;
      border-radius: 4px;
      background: #fff;
      font-size: 11px;
      font-weight: 700;
      color: #1b3650;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .finance-agency-input {
      min-width: 76px;
    }
    .finance-paid-input:focus,
    .finance-agency-input:focus {
      outline: none;
      border-color: #185FA5;
    }
    .finance-receipt-cell {
      text-align: center;
      min-width: 90px;
    }
    .finance-receipt-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border: 1px solid #d4dae0;
      background: #fff;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      color: #185FA5;
      cursor: pointer;
    }
    .finance-receipt-btn:hover {
      background: #E6F1FB;
      border-color: #185FA5;
    }
    .finance-receipt-btn.has-file {
      background: #DCFCE7;
      border-color: #16A34A;
      color: #166534;
    }
    .finance-receipt-remove {
      margin-left: 4px;
      background: transparent;
      border: 0;
      color: #991B1B;
      font-weight: 900;
      cursor: pointer;
      font-size: 13px;
      line-height: 1;
    }
    .finance-receipt-remove:hover { color: #7f1d1d; }
    .finance-table th.check-col,
    .finance-table td.check-col {
      width: 32px;
      max-width: 32px;
      text-align: center;
      padding-left: 6px;
      padding-right: 6px;
    }
    .finance-row-check,
    #financeSelectAll {
      width: 16px;
      height: 16px;
      cursor: pointer;
      accent-color: #185FA5;
    }
    .finance-table tbody tr.selected td {
      background: #FEF9C3 !important;
    }
    .finance-export-btn {
      align-self: center;
      padding: 10px 16px;
      background: #16A34A;
      color: #fff;
      border: 0;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 4px rgba(22,163,74,0.25);
      transition: background 0.15s;
    }
    .finance-export-btn:hover { background: #15803D; }
    .finance-export-btn:active { background: #166534; }
    .finance-medio-select,
    .finance-paydate-input {
      width: 100%;
      height: 24px;
      padding: 0 4px;
      border: 1px solid transparent;
      background: transparent;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      color: inherit;
      cursor: pointer;
    }
    .finance-medio-select:hover,
    .finance-paydate-input:hover {
      border-color: #d4dae0;
      background: #fff;
    }
    .finance-medio-select:focus,
    .finance-paydate-input:focus {
      outline: none;
      border-color: #185FA5;
      background: #fff;
    }
    .finance-empty {
      padding: 40px;
      text-align: center;
      color: #6b7c92;
      font-style: italic;
    }
    /* Encabezado de mes en la tabla principal */
    .finance-table tbody tr.finance-month-header td {
      background: linear-gradient(90deg, #1b3650 0%, #2C5F8C 100%);
      color: #fff;
      padding: 12px 16px;
      border-bottom: 0;
      position: sticky;
      top: 32px;
      z-index: 1;
    }
    .finance-month-header-inner {
      display: flex;
      gap: 24px;
      align-items: center;
      flex-wrap: wrap;
    }
    .finance-month-name {
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
    .finance-month-stat {
      font-size: 11px;
      font-weight: 600;
      opacity: 0.95;
    }
    .finance-month-stat .lbl {
      opacity: 0.7;
      margin-right: 4px;
    }
    .finance-month-stat strong {
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }
    .finance-month-stat strong.green { color: #BBF7D0; }
    .finance-month-stat strong.red { color: #FECACA; }
    .finance-table tfoot td {
      padding: 10px 8px;
      background: #f6f8fa;
      font-weight: 900;
      color: #1b3650;
      border-top: 2px solid #1b3650;
      font-size: 12px;
    }
    .finance-table tfoot td.num {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    /* ===== Panel del Chofer ===== */
    .driver-panel-wrap {
      max-width: 1100px;
      margin: 0 auto;
      padding: 20px;
    }

    .driver-panel-head {
      display: flex;
      align-items: center;
      gap: 16px;
      padding-bottom: 18px;
      margin-bottom: 22px;
      border-bottom: 2px solid #1b3650;
    }

    .driver-panel-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: #1b3650;
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 22px;
      font-weight: 900;
      flex-shrink: 0;
    }

    .driver-panel-id { flex: 1; }
    .driver-panel-name {
      font-size: 20px;
      font-weight: 900;
      color: #1b3650;
    }
    .driver-panel-meta {
      font-size: 13px;
      color: #6b7c92;
      margin-top: 4px;
    }

    .driver-panel-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 22px;
    }

    .driver-panel-stat {
      padding: 14px 16px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid #e3e7ec;
    }
    .driver-panel-stat .label {
      font-size: 11px;
      color: #6b7c92;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 700;
      margin: 0;
    }
    .driver-panel-stat .value {
      font-size: 24px;
      font-weight: 900;
      color: #1b3650;
      margin: 4px 0 0;
    }
    .driver-panel-stat .value.blue { color: #185FA5; }
    .driver-panel-stat .value.green { color: #27500A; }

    .driver-panel-tabs {
      display: flex;
      gap: 4px;
      border-bottom: 1px solid #e3e7ec;
      margin-bottom: 16px;
    }
    .driver-panel-tab {
      padding: 10px 18px;
      background: transparent;
      border: 0;
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      color: #6b7c92;
      border-bottom: 3px solid transparent;
      transition: color 0.15s, border-color 0.15s;
    }
    .driver-panel-tab:hover { color: #1b3650; }
    .driver-panel-tab.active {
      color: #1b3650;
      border-bottom-color: #1b3650;
    }

    .driver-panel-pane.hidden { display: none; }

    .driver-trips-filters {
      display: flex;
      gap: 10px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .driver-trips-filters select,
    .driver-trips-filters input {
      height: 36px;
      padding: 0 10px;
      font-size: 13px;
      font-weight: 600;
    }
    .driver-trips-filters input { flex: 1; min-width: 200px; }

    .driver-trips-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .driver-trip-date-header {
      font-size: 11px;
      color: #6b7c92;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 700;
      margin: 18px 0 6px;
      padding-bottom: 4px;
      border-bottom: 1px solid #e3e7ec;
    }
    .driver-trip-date-header.is-today {
      color: #185FA5;
      border-bottom-color: #185FA5;
    }

    .driver-trip-card {
      padding: 12px 14px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid #e3e7ec;
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .driver-trip-card.is-past { opacity: 0.65; background: #f7f9fb; }
    .driver-trip-card.is-today {
      border-color: #185FA5;
      background: #f5fafe;
    }

    .driver-trip-time {
      flex-shrink: 0;
      padding: 4px 10px;
      border-radius: 999px;
      background: #E6F1FB;
      color: #185FA5;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 1px;
      min-width: 60px;
      text-align: center;
    }

    .driver-trip-main { flex: 1; min-width: 0; }
    .driver-trip-title {
      font-size: 14px;
      font-weight: 800;
      color: #1b3650;
    }
    .driver-trip-meta {
      font-size: 11px;
      color: #6b7c92;
      margin-top: 3px;
      line-height: 1.5;
    }
    .driver-trip-meta-chip {
      display: inline-block;
      margin-right: 10px;
    }

    .driver-trip-status {
      flex-shrink: 0;
      font-size: 10px;
      padding: 3px 8px;
      border-radius: 999px;
      font-weight: 900;
      letter-spacing: 1px;
    }
    .driver-trip-status.confirmado { background: #EAF3DE; color: #27500A; }
    .driver-trip-status.reserva { background: #FAEEDA; color: #633806; }
    .driver-trip-status.pendiente { background: #F1EFE8; color: #444441; }

    .driver-empty-state {
      padding: 40px 20px;
      text-align: center;
      color: #6b7c92;
      font-size: 14px;
      background: #f7f9fb;
      border-radius: 10px;
    }

    .driver-liquidation-summary {
      padding: 16px;
      background: #fff;
      border: 1px solid #e3e7ec;
      border-radius: 12px;
      margin-bottom: 16px;
    }
    .driver-liquidation-summary h3 {
      margin: 0 0 8px;
      font-size: 13px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #6b7c92;
      font-weight: 700;
    }
    .driver-liquidation-summary .total {
      font-size: 28px;
      font-weight: 900;
      color: #27500A;
    }

    .driver-liquidation-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
    }
    .driver-liquidation-table th {
      background: #f4f6f8;
      padding: 10px;
      text-align: left;
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #6b7c92;
      font-weight: 700;
    }
    .driver-liquidation-table td {
      padding: 10px;
      border-top: 1px solid #e3e7ec;
    }

    .driver-profile-card {
      padding: 18px 20px;
      background: #fff;
      border: 1px solid #e3e7ec;
      border-radius: 12px;
      margin-bottom: 14px;
    }
    .driver-profile-card h3 {
      margin: 0 0 14px;
      font-size: 13px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #1b3650;
      font-weight: 900;
      border-bottom: 2px solid #1b3650;
      padding-bottom: 8px;
    }
    .driver-profile-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 22px;
    }
    .driver-profile-field {
      font-size: 12px;
      color: #1b3650;
    }
    .driver-profile-field .label {
      font-size: 10px;
      color: #6b7c92;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 2px;
    }
    .driver-profile-field .value {
      font-size: 13px;
      font-weight: 700;
    }

    .driver-profile-vehicles {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 4px;
    }
    .driver-profile-vehicle {
      padding: 4px 10px;
      border-radius: 6px;
      background: #f4f6f8;
      font-size: 12px;
      font-weight: 700;
      color: #1b3650;
      border: 1px solid #e3e7ec;
    }
    .driver-profile-vehicle.is-default {
      background: #1b3650;
      color: #fff;
      border-color: #1b3650;
    }
    .driver-profile-vehicle.is-default::before { content: "\2605 "; }

    @media (max-width: 720px) {
      .driver-panel-stats { grid-template-columns: 1fr; }
      .driver-profile-grid { grid-template-columns: 1fr; }
    }

    .uvita-panel {
      position: fixed;
      right: 20px;
      top: 60px;
      z-index: 58;
      width: min(390px, calc(100vw - 34px));
      max-height: min(620px, calc(100vh - 120px));
      display: grid;
      grid-template-rows: auto minmax(220px, 1fr) auto;
      overflow: hidden;
      background: white;
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 22px 58px rgba(19, 32, 51, 0.28);
    }

    .uvita-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 14px;
      color: white;
      background: #113a68;
    }

    .uvita-title {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }

    .uvita-mark {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      overflow: hidden;
      background: #f7fafc;
      border-radius: 999px;
    }

    .uvita-mark img {
      width: 120%;
      height: 120%;
      object-fit: contain;
    }

    .uvita-title strong {
      display: block;
      font-size: 14px;
      line-height: 1.1;
    }

    .uvita-title span {
      display: block;
      margin-top: 2px;
      color: #d7e7f7;
      font-size: 11px;
      font-weight: 800;
    }

    .uvita-close {
      width: 30px;
      height: 30px;
      border: 0;
      border-radius: 6px;
      color: #113a68;
      background: #e8f0f7;
      cursor: pointer;
      font-weight: 900;
    }

    .uvita-body {
      display: grid;
      align-content: start;
      gap: 10px;
      overflow: auto;
      padding: 14px;
      background: #f7fafc;
    }

    .uvita-message {
      max-width: 92%;
      padding: 10px 11px;
      border-radius: 8px;
      color: #163a58;
      background: white;
      border: 1px solid var(--line);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.4;
      white-space: pre-line;
    }

    .uvita-user {
      justify-self: end;
      color: white;
      background: var(--green);
      border-color: var(--green);
    }

    .uvita-bot {
      justify-self: start;
    }

    .uvita-chart {
      display: grid;
      gap: 8px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #dde8f2;
    }

    .uvita-bar-row {
      display: grid;
      grid-template-columns: minmax(86px, 112px) 1fr 32px;
      align-items: center;
      gap: 8px;
      min-height: 20px;
      color: #33465c;
      font-size: 11px;
      font-weight: 900;
    }

    .uvita-bar-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .uvita-bar-track {
      height: 12px;
      overflow: hidden;
      background: #e4edf5;
      border-radius: 999px;
    }

    .uvita-bar-fill {
      height: 100%;
      min-width: 4px;
      background: #2f80d8;
      border-radius: 999px;
    }

    .uvita-bar-value {
      text-align: right;
      color: #163a58;
    }

    .uvita-input-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      padding: 12px;
      background: white;
      border-top: 1px solid var(--line);
    }

    .uvita-input-row input {
      min-width: 0;
      height: 36px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 800;
    }

    .uvita-input-row button {
      height: 36px;
      border: 0;
      border-radius: 6px;
      padding: 0 12px;
      color: white;
      background: var(--green);
      cursor: pointer;
      font-weight: 900;
    }

    @media (max-width: 850px) {
      .app-shell {
        grid-template-columns: 1fr;
      }

      .top {
        align-items: stretch;
        flex-direction: column;
      }

      .actions,
      .filters,
      .nav,
      .year-tabs,
      .month-tabs {
        align-items: stretch;
        flex-direction: column;
      }

      .top input,
      .btn,
      .filters input,
      .filters select {
        width: 100%;
      }

      .form-grid {
        grid-template-columns: 1fr;
      }

      .stats-panel {
        grid-template-columns: 1fr;
      }

      .metric-grid,
      .stats-layout,
      .choferes-layout,
      .driver-config,
      .transfer-row-main,
      .transfer-row-price,
      .description-grid,
      .provider-form-row-main,
      .provider-form-row-meta,
      .provider-form-row-prices,
      .itinerary-client-strip,
      .itinerary-form-grid,
      .participant-row,
      .itinerary-totals-grid,
      .discount-row,
      .account-grid,
      .account-form,
      .account-form .password-fields {
        grid-template-columns: 1fr;
      }

      .seller-row {
        grid-template-columns: 92px 1fr 70px;
      }

      .uvita-launcher {
        left: 14px;
        bottom: 14px;
        width: 94px;
        height: 94px;
      }

      .uvita-panel {
        left: 14px;
        bottom: 116px;
      }

      .public-itinerary-page {
        padding: 10px;
      }

      .public-itinerary-head {
        align-items: flex-start;
        padding: 12px;
      }

      .public-itinerary-head h1 {
        font-size: 16px;
      }

      .public-itinerary-head img {
        width: 42px;
        height: 42px;
      }

      .client-preview {
        max-width: none;
        padding: 8px;
        gap: 12px;
      }

      .client-page,
      .client-day,
      .client-transfers-page,
      .client-total-page,
      .client-policies {
        min-height: auto;
      }

      .client-cover {
        min-height: 820px;
        gap: 26px;
        padding: 28px 22px 30px;
      }

      .client-day,
      .client-transfers-page,
      .client-total-page,
      .client-policies {
        padding: 18px;
      }

      .client-cover-badge {
        min-width: 0;
        width: min(100%, 300px);
        gap: 10px;
        padding: 10px 18px;
        font-size: 23px;
      }

      .client-cover-badge img {
        width: 44px;
        height: 44px;
      }

      .client-cover-tagline {
        font-size: 23px;
      }

      .client-cover-name {
        margin: 64px 0 42px;
      }

      .client-cover-first {
        margin-bottom: 8px;
      }

      .client-cover-info-row {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 18px;
        padding: 13px 0;
        border-top-width: 4px;
      }

      .client-cover-info-row:last-child {
        border-bottom-width: 4px;
      }

      .client-cover-info-icon svg {
        width: 78px;
        height: 78px;
      }

      .client-cover-info-text {
        font-size: 20px;
      }

      .client-day-head,
      .client-transfer-grid,
      .client-stop {
        grid-template-columns: 1fr;
      }

      .client-stop-photo {
        min-height: 190px;
      }

      .client-price-table,
      .client-payment-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
      }

      .alta-mountain-page {
        padding: 18px 14px;
      }

      .alta-head {
        gap: 14px;
        margin-bottom: 18px;
      }

      .alta-brand {
        padding: 16px 18px;
        gap: 10px;
      }

      .alta-title-row {
        gap: 10px;
      }

      .alta-mountain-icon {
        width: 48px;
      }

      .alta-brand h3 {
        font-size: clamp(22px, 7vw, 32px);
        letter-spacing: 1px;
        white-space: nowrap;
      }

      .alta-subtitle {
        font-size: 10px;
        letter-spacing: 3px;
        padding-top: 6px;
      }

      /* Info card: keep 3 columns but compact */
      .alta-info-card {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-radius: 16px;
      }

      .alta-info-line {
        padding: 10px 6px;
        font-size: 10px;
        letter-spacing: 1px;
        gap: 4px;
      }

      .alta-info-icon {
        width: 28px;
        height: 28px;
        font-size: 11px;
      }

      .alta-info-line span:last-child strong {
        font-size: 9px !important;
        letter-spacing: 1px !important;
      }

      .alta-stops-hint {
        font-size: 10px;
        letter-spacing: 1px;
        padding: 8px 12px;
      }

      /* Route: vertical column with the green line in the center */
      .alta-route {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 18px;
        padding: 18px 0;
      }

      /* Hide vertical green line on mobile - it doesn't add value in column layout */
      .alta-route::before,
      .alta-route::after {
        display: none;
      }

      .alta-stop[data-stop-pos] {
        grid-column: 1;
        grid-row: auto;
        justify-self: center;
      }

      .alta-stop-label {
        max-width: 260px;
        min-height: auto;
        font-size: 13px;
        letter-spacing: 0.5px;
      }

      .alta-stop-photo {
        width: clamp(140px, 38vw, 170px);
      }

      .alta-stop-number {
        width: 38px;
        height: 38px;
        font-size: 17px;
        top: -8px;
        left: -8px;
      }

      .alta-actions-row {
        gap: 12px;
        margin-top: 22px;
      }

      .alta-video-button,
      .alta-mountain-page .client-daily-values summary {
        width: 100%;
        max-width: 320px;
        min-width: 0;
        font-size: 11px;
        letter-spacing: 1.5px;
        padding: 0 18px;
      }

      .alta-modal-card {
        width: calc(100% - 24px);
        border-radius: 14px;
      }

      .alta-modal-body {
        padding: 22px 20px 24px;
        gap: 12px;
      }

      .alta-modal-body h4 {
        font-size: 18px;
        padding-right: 36px;
      }

      .alta-modal-body p {
        font-size: 14px;
      }
    }

    /* ===== Historial de pagos ===== */
    .payments-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    .payments-icon-button {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      border: none;
      background: #16A34A;
      color: #fff;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transition: filter .15s ease, transform .15s ease;
    }
    .payments-icon-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .payments-icon-button.has-payments { box-shadow: 0 0 0 2px rgba(22,163,74,0.25); }
    .payments-count {
      min-width: 18px;
      height: 18px;
      padding: 0 4px;
      border-radius: 9px;
      background: #0F2A43;
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .payments-cell-empty { color: #9aa7b6; font-size: 12px; }

    .payments-add {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 8px;
      align-items: end;
      background: #f4f7fb;
      border: 1px solid #e1e8f0;
      border-radius: 10px;
      padding: 12px;
      margin-bottom: 14px;
    }
    .payments-add label {
      display: flex;
      flex-direction: column;
      gap: 3px;
      font-size: 11px;
      color: #5a6b7c;
      font-weight: 600;
    }
    .payments-add input,
    .payments-add select {
      height: 34px;
      border: 1px solid #cfd9e4;
      border-radius: 8px;
      padding: 0 8px;
      font-size: 13px;
    }
    .payments-add .pf-date { grid-column: span 3; }
    .payments-add .pf-method { grid-column: span 3; }
    .payments-add .pf-amount { grid-column: span 3; }
    .payments-add .pf-payer { grid-column: span 3; }
    .payments-add .pf-note { grid-column: span 3; }
    .payments-add .pf-pixtype { grid-column: span 3; }
    .payments-add .pf-usd { grid-column: span 3; }
    .payments-add .pf-link { grid-column: span 6; }
    .payments-add .pf-add-wrap { grid-column: span 3; }
    .payments-add .pf-pix { display: none; }
    .payments-add.is-pix .pf-pix { display: flex; }
    .payments-add .pf-kamipay { display: none; }
    .payments-add.is-pix.is-kamipay .pf-kamipay { display: flex; }
    .payments-add .pf-add {
      width: 100%;
      height: 34px;
      border: none;
      border-radius: 8px;
      background: #1D4ED8;
      color: #fff;
      font-weight: 700;
      cursor: pointer;
    }
    .payments-add .pf-add:hover { filter: brightness(1.08); }

    .payments-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px;
    }
    .payments-table th {
      text-align: left;
      background: #eef3f9;
      color: #41506180;
      color: #415061;
      padding: 8px 10px;
      font-size: 11px;
      letter-spacing: .3px;
      text-transform: uppercase;
      border-bottom: 1px solid #dde6f0;
    }
    .payments-table td {
      padding: 8px 10px;
      border-bottom: 1px solid #eef2f7;
      vertical-align: top;
    }
    .payments-table tr:last-child td { border-bottom: none; }
    .payments-method-pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      background: #e8eef6;
      color: #2c3e50;
      white-space: nowrap;
    }
    .payments-method-pill.m-pix { background: #fde8cf; color: #92400e; }
    .payments-method-pill.m-transfer { background: #e0e7ff; color: #3730a3; }
    .payments-method-pill.m-usd { background: #d6f1e0; color: #166534; }
    .payments-amount-main { font-weight: 700; color: #14532d; }
    .payments-amount-sub { font-size: 11px; color: #6b7c92; }
    .payments-row-link { color: #1D4ED8; text-decoration: none; font-size: 11px; }
    .payments-row-link:hover { text-decoration: underline; }
    .payments-meta { font-size: 10.5px; color: #9aa7b6; margin-top: 2px; }
    .payments-del {
      border: none;
      background: #FEE2E2;
      color: #B91C1C;
      border-radius: 7px;
      padding: 4px 9px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }
    .payments-del:hover { background: #fecaca; }
    .payments-empty { text-align: center; color: #9aa7b6; padding: 18px; font-size: 13px; }

    .payments-totals {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }
    .payments-total-card {
      flex: 1 1 140px;
      background: #f4f7fb;
      border: 1px solid #e1e8f0;
      border-radius: 10px;
      padding: 10px 12px;
    }
    .payments-total-card .lbl { font-size: 11px; color: #6b7c92; font-weight: 600; }
    .payments-total-card .val { font-size: 18px; font-weight: 800; color: #14532d; margin-top: 2px; }
    .payments-total-note { width: 100%; font-size: 11px; color: #6b7c92; margin-top: 4px; }