* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Sen', sans-serif;
    }

    html {
      width: 100%;
      overflow-x: hidden;
    }

    body {
      background-color: #fff;
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow-x: hidden;
    }

    #dashboard {
      overflow-x: hidden;
      margin-bottom: 60px;
    }

    .hidden { display: none !important; }

    header {
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    header .logo {
      background-color: #1f1f1f;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-image: url('../../assets/img/logo.png');
      background-size: cover;
      background-position: center;
    }

    header .title {
      flex-grow: 1;
      text-align: left;
      font-weight: 700;
      margin-left: 15px;
      color: #999;
    }

    header .title span {
      color: #B0013B;
    }

    header .user-photo {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #ccc;
      background-image: url('../../assets/img/nouser.jpg');
      background-size: cover;
      background-position: center;
    }

    #imgAvatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
    }

    #img_driver {
      width: 60px;
      height: 50px;
      border-radius: 50%;
      background-image: url('../../assets/img/nouser.jpg');
      background-size: cover;
      background-position: center;
    }

    .tabs {
      display: flex;
      justify-content: space-evenly;
      background-color: #fff;
      border-bottom: 2px solid #ddd;
      margin-top: 40px;
    }

    .tab {
      flex: 1;
      text-align: center;
      padding: 10px;
      cursor: pointer;
      position: relative;
    }

    .tab.active {
      color: #B0013B;
      font-weight: 700;
    }

    .tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: #B0013B;
    }

    .tab.inactive {
      color: transparent;
      cursor: default;
      pointer-events: none;
    }

    .trip-checkbox {
      width: 18px;
      height: 18px;
      accent-color: var(--upload-btn-bg, #dc3545);
      cursor: pointer;
    }

    .swipe-item .trip-checkbox {
      width: 22px;
      height: 22px;
      appearance: none;
      -webkit-appearance: none;
      border: 2px solid #d0d0d0;
      border-radius: 50%;
      background: #fff;
      position: relative;
      transition: all .15s ease;
      opacity: 0;
      pointer-events: none;
    }

    .swipe-item .trip-checkbox::after {
      content: "";
      position: absolute;
      width: 5px;
      height: 10px;
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      top: 2px;
      left: 7px;
      transform: rotate(45deg) scale(0.8);
      opacity: 0;
    }

    .swipe-item .trip-checkbox:checked {
      background: #B0013B;
      border-color: #B0013B;
    }

    .swipe-item .trip-checkbox:checked::after {
      opacity: 1;
    }

    body.selection-mode .swipe-item .trip-checkbox {
      opacity: 1;
      pointer-events: auto;
    }

    .list-container {
      flex-grow: 1;
      overflow-y: auto;
      padding: 20px 10px;
      background-color: #fff;
      margin-bottom: 80px;
    }

    .list-date {
      font-weight: 500;
      margin: 20px 0 10px;
      color: #999;
    }

    .list-item {
      position: relative;
      overflow: hidden; /* evita que la ola se salga */
      background: white;
      border-bottom: 1px solid #ddd;
      cursor: pointer;
    }

    .swipe-content {
      position: relative;
      z-index: 2;
      background: #fff;
      padding: 15px 0;
      touch-action: pan-y;
      will-change: transform;
    }

    .swipe-content.row {
      margin-left: 0;
      margin-right: 0;
    }

    .swipe-item .swipe-content > .col,
    .swipe-item .swipe-content > .col-auto {
      padding-left: 8px;
      padding-right: 8px;
    }

    .swipe-action {
      display: none;
    }

    .swipe-action i {
      font-size: 20px;
    }

    .swipe-action-select { left: 0; }

    .swipe-action-delete { right: 0; }

    .swipe-delete-btn {
      border: 0;
      background: transparent;
      color: #fff;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .swipe-delete-btn i {
      font-size: 24px;
    }

    .swipe-item.item-selected .swipe-content {
      background: #fff7fa;
    }

    .swipe-item .trip-check-col {
      flex: 0 0 0;
      max-width: 0;
      padding-left: 0;
      padding-right: 0;
      overflow: hidden;
      transition: flex-basis .18s ease, max-width .18s ease, padding .18s ease;
    }

    body.selection-mode .swipe-item .trip-check-col {
      flex: 0 0 38px;
      max-width: 38px;
      padding-left: 6px;
      padding-right: 8px;
    }

    .swipe-item .trip-check-col + .col {
      padding-left: 4px;
    }

    /* .Ripple al hacer clic */
    .ripple-container {
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    .ripple {
      position: absolute;
      border-radius: 50%;
      background: rgba(0,0,0,0.15);
      transform: scale(0);
      animation: ripple-effect 0.6s linear;
      pointer-events: none;
    }

    @keyframes ripple-effect {
      to {
        transform: scale(4);
        opacity: 0;
      }
    }


    .name {
      font-weight: 700;
    }

    .addr {
      font-size: 0.9em;
      color: #999;
      pointer-events: none; /* evita clics */
      user-select: text; /* permite seleccionar el texto */
    }

    .price {
      font-size: 0.9em;
      color: #999;
    }

    .badge {
      display: inline-block;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 5px;
      text-transform: uppercase;
      border: 1px solid transparent;
    }

    /* --- Existing badges --- */
    .badge-done {
      background-color: #d4edda;
      color: #155724;
      border-color: #c3e6cb;
    }

    .badge-pending {
      background-color: #fff3cd;
      color: #856404;
      border-color: #ffeeba;
    }

    .badge-cancelled {
      background-color: #ccc;
      color: #000;
      border-color: #ccc;
    }

    /* --- Updated suggested --- */
    .badge-suggested {
      background-color: #b22222; /* Dark red */
      color: #fff;
      border-color: #8b0000; /* Slightly darker border */
    }

    /* --- New badges --- */
    .badge-pickup {
      background-color: #ffeb3b; /* Bright yellow */
      color: #000;
      border-color: #fdd835; /* Slightly darker yellow border */
    }

    .badge-dropoff {
      background-color: #ffeb3b; /* Same yellow for consistency */
      color: #000;
      border-color: #fdd835;
    }


    .bottom-menu {
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #fff;
      padding: 10px 0;
      position: fixed;
      bottom: 0;
      width: 100%;
      box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
      height: 90px;
      z-index: 10;
    }

    .bottom-menu .icon {
      width: 24px;
      height: 24px;
      background-color: #fff;
      color: #999;
      font-size: 20px;
      margin-top:-20px;
    }

    .bottom-menu .icon.active {
      color: #B0013B;
      font-weight: 700;
    }

    .search-button {
      position: fixed;
      right: 20px;
      bottom: 90px;
      width: 50px;
      height: 50px;
      background-color: #B0013B;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      color: #fff;
      z-index: 20;
    }

    /* Ride Details */ 
    :root {
      --accent: #B0013B;
      --muted: #999;
      --sheet-radius: 16px;
    }

    .bottom-sheet {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      max-height: 92vh;
      background: #fff;
      border-top-left-radius: var(--sheet-radius);
      border-top-right-radius: var(--sheet-radius);
      box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
      transform: translateY(100%);
      transition: transform .28s ease;
      z-index: 2000;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .bottom-sheet.active {
      transform: translateY(0);
    }

    .sheet-top {
      display:flex;
      align-items:center;
      padding: 12px 16px;
      border-bottom: 1px solid #eee;
    }

    #backBtn {
      width:40px;
      height:40px;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background: #eee;
      border:1px solid #eee;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      cursor:pointer;
      margin-right:12px;
      font-weight:700;
      outline: none;       /* Quita borde por defecto */
      box-shadow: none;    /* Quita posibles sombras de enfoque */
    }

    .backBtn {
      width:40px;
      height:40px;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background: #eee;
      border:1px solid #eee;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      cursor:pointer;
      margin-right:12px;
      font-weight:700;
      outline: none;       /* Quita borde por defecto */
      box-shadow: none;    /* Quita posibles sombras de enfoque */
    }

    .backBtn:focus {
      outline: none;
      box-shadow: none;
    }

    #closeBtn,
    #closeBtn-lgn,
    .closeBtn {
      width:40px;
      height:40px;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background: #eee;
      border:1px solid #eee;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      cursor:pointer;
      margin-right:12px;
      font-weight:700;
      outline: none;       /* Quita borde por defecto */
      box-shadow: none;    /* Quita posibles sombras de enfoque */
    }

    .closeBtn:focus {
      outline: none;
      box-shadow: none;
    }

    .sheet-title {
      flex:1;
      font-weight:700;
      font-size: 1rem;
      color: #222;
    }

    .sheet-message {
      background: #fff7cc;
      border-radius:8px;
      padding:10px 14px;
      /* margin: 12px 16px; */
      color: #5a4300;
      font-weight:600;
    }

    .sheet-body {
      padding: 0 16px 84px; /* evita tapar por los botones flotantes */
      overflow-y: auto;
    }

    .rider-info {
      display:flex;
      gap:12px;
      align-items:center;
      padding: 12px 0;
    }

    .rider-avatar {
      width:56px;
      height:56px;
      border-radius:50%;
      background:#ddd;
      background-size:cover;
      background-position:center;
      flex:0 0 56px;
    }

    .rider-meta strong { display:block; font-weight:700; }
    .rider-meta small { color:var(--muted); }

    .custom-accordion .acc-row {
      border-bottom: 1px solid #eee;
    }

    .acc-toggle {
      width:100%;
      text-align:left;
      padding:12px 0;
      background:transparent;
      border:0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      cursor:pointer !important;
      font-weight:700;

      /* 👇 quita halo/borde de enfoque */
      outline: none !important;
      box-shadow: none !important;
      -webkit-tap-highlight-color: transparent;
    }
    .acc-toggle:focus,
    .acc-toggle:active,
    .acc-toggle:focus-visible {
      outline: none !important;
      box-shadow: none !important;
    }
    /* Firefox */
    .acc-toggle::-moz-focus-inner { border: 0; }

    .acc-toggle .acc-title { color:#333; font-size:0.98rem; flex: 1; }
    .acc-toggle .acc-caret { color:var(--muted); margin-left:12px; }

    .acc-toggle img {
      margin-right: 10px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
      object-position: center;
      margin-right: 10px; /* separa la imagen del texto */
    }

    .acc-content {
      display:none;
      padding:10px;
      color:#333;
      font-size:0.95rem;
      margin-top: -10px;
    }

    /* Admin orders list: reduce side gutters inside accordion rows */
    #ongoing .acc-content,
    #unassigned .acc-content {
      padding-left: 0;
      padding-right: 0;
    }

    .acc-content .list-item:last-child {
      border-bottom: none;
    }

    /* Primer item */
    .cust-info .list-item:first-child {
      margin-top: -15px;
    }

    /* Último item */
    .cust-info .list-item:last-child {
      border-bottom: none;
    }

    /* Contenedor principal con línea vertical centrada */
    .trajectory {
      position: relative;
      padding-left: 28px; /* espacio para la línea y los círculos */
    }

    /* Línea que une los puntos */
    .trajectory::before {
      content: "";
      position: absolute;
      left: 21px; /* centrado con respecto a los puntos */
      top: 10px;
      bottom: 10px;
      width: 2px;
      background: #bbb; /* gris claro */
    }

    /* Cada fila de punto */
    .trajectory-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      position: relative;
      padding: 8px 0;
    }

    /* Puntos */
    .place-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #444; /* gris oscuro */
      position: relative;
      z-index: 1;
      flex: 0 0 14px;
      margin-left: -13px;
    }

    /* Opcional: colores distintos para pickup/dropoff */
    .place-thumb.start { background: #444; } /* gris oscuro */
    .place-thumb.end { background: #444; }   /* gris oscuro */

    .place-meta small { color:var(--muted); display:block; }

    .info-grid { display:flex; flex-direction:column; gap:8px; }
    .info-grid .row { display:flex; justify-content:space-between; border-bottom: 1px solid #e0e0e0; height: 35px;}
    .info-grid .row.head { margin-top: 15px;}

    .delivery-note { color:var(--muted); padding:6px 0; }

    .floating-actions {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 20;
      padding: 10px 16px;
      background: linear-gradient(to top, rgba(255,255,255,0.96), rgba(255,255,255,0.6));
      border-top-left-radius: var(--sheet-radius);
      border-top-right-radius: var(--sheet-radius);
      box-shadow: 0 -6px 18px rgba(0,0,0,0.06);
    }

    .floating-actions .btn {
      height:48px;
      font-weight:700;
      border-radius:10px;
    }

    .form-actions-inline {
      position: static !important;
      left: auto;
      right: auto;
      bottom: auto;
      z-index: auto;
      margin-top: 16px;
    }

    .btn-accept { background: var(--accent); border-color: var(--accent); color:#fff; }
    .btn-reject { background:#e9e9ea; border-color:#e9e9ea; color:#444; }

    .btn-accept,
    .btn-accept:not(:disabled) {
      color: #fff;
    }


    .muted { color:var(--muted); font-size:0.94rem; }

    /* Account page */
    .profile-container {
      padding: 20px;
    }

    .profile-name {
      font-weight: 700;
      font-size: 1.2rem;
      margin-bottom: 2px;
    }

    .profile-city {
      font-size: 0.9rem;
      color: #999;
      margin-bottom: 20px;
    }

    /* Menu Cards */
    .menu-section {
      margin-bottom: 20px;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 2px 5px rgba(0,0,0,0.06);
      overflow: hidden;
    }

    .menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid #f1f1f1;
      text-decoration: none;
      color: inherit;
      transition: background 0.2s;
      outline: none; /* quita el outline por defecto */
      -webkit-tap-highlight-color: transparent; /* Safari/Chrome móvil */
    }

    .menu-item:focus,
    .menu-item:active,
    .menu-item:visited {
      outline: none;
      box-shadow: none;
      text-decoration: none; /* asegura que no aparezca subrayado */
      -webkit-tap-highlight-color: transparent; /* Safari/Chrome móvil */
    }

    .menu-item:focus,
    .menu-item:active {
      color: #B0013B;   /* tu color */
      outline: none;
      box-shadow: none;
    }

    .menu-item:last-child {
      border-bottom: none;
    }

    .menu-item:hover {
      background: #f9f9f9;
    }

    .menu-icon {
      display: flex;
      align-items: center;
      font-size: 20px;
      margin-right: 12px;
      color: #B0013B;
    }

    .menu-label {
      flex-grow: 1;
      font-weight: 500;
    }

    .menu-caret {
      font-size: 18px;
      color: #ccc;
    }

    .logout-section {
      margin-top: 20px;
    }

    /* Create Order Editable Items */
    .create-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #eee;
      cursor: pointer !important;
      margin-left: 8px;
    }

    .item-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      border-color: #999;
      border-width: 2px;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .item-content {
      flex-grow: 1;
    }

    .edit-icon {
      font-size: 0.88rem;
      color: #B0013B;
      font-weight: 600;
    }

    .edit-icon i {
      margin-right: 6px;
      vertical-align: middle;
    }

    .item-value {
      font-size: 0.95rem;
      color: #222;
      font-weight: 600;
      margin-top: 2px;
    }

    /* Inputs */
    .ride-form .form-group {
      margin-bottom: 16px;
    }

    /* Inputs - general */
    .custom-input {
      border: none;
      border-radius: 12px;
      padding: 16px 18px;
      font-size: 0.95rem;
      width: 100%;
      transition: border 0.2s;
      box-shadow: none;
      background-color: #F5F7FA; /* fondo gris claro */
      color: #222;
      height: 56px;
    }

    .custom-input:focus {
      outline: none;
      border: 1px solid #B0013B;
      background-color: #fff;
    }

    /* Drag handle (tres puntos) */
    .drag-handle {
      color: #999;
      font-size: 1.2rem;
      margin-right: 8px;
      display: flex;
      align-items: center;
      padding-left: 6px;
      cursor: grab;
    }

    input.with-drag {
      padding-left: 6px; /* Reduce padding por el espacio del ícono */
    }

    .form-check-input {
      appearance: none; /* eliminamos el estilo nativo */
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 20px;
      height: 20px;
      border: 2px solid #ccc;
      border-radius: 50%;
      background-color: #F5F7FA;
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      margin-left: 10px;
      position: relative;
    }

    .form-check-input:checked {
      border-color: #B0013B;
      background-color: #fff;
    }

    .form-check-input:checked::after {
      content: "";
      position: absolute;
      top: 4px;
      left: 4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #B0013B;
    }

    /* ---- Checkboxes ---- */
    .form-check-checkbox {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 20px;
      height: 20px;
      border: 2px solid #ccc;
      border-radius: 4px; /* cuadrado */
      background-color: #F5F7FA;
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      margin-left: 10px;
      position: relative;
    }

    .form-check-checkbox:checked {
      border-color: #B0013B;
      background-color: #fff;
    }

    .form-check-checkbox:checked::after {
      content: "✔";
      position: absolute;
      top: -2px;
      left: 2px;
      font-size: 16px;
      color: #B0013B;
      font-weight: bold;
    }

    /* Estilo para el contenedor */
    .form-check {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #e0e0e0; /* línea gris tenue */
    }

    /* Etiquetas */
    .form-check-label {
      font-size: 0.95rem;
      color: #222;
      cursor: pointer;
      margin-left: 10px;
      margin-top: 5px;
    }

    /* Botón de ícono (+ / -) */
    .btn-icon {
      background: #f4f4f4;
      border: none;
      border-radius: 12px;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #B0013B;
      font-size: 1.2rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      cursor: pointer;
      outline: none;
      flex-shrink: 0;
    }

    .btn-icon:focus {
      outline: none;
      box-shadow: none;
    }

    .btn-get-quote {
      background-color: #B0013B;
      color: #fff;
      font-weight: 700;
      border: none;
      border-radius: 12px;
      padding: 16px 0;
      font-size: 1rem;
      box-shadow: 0 4px 10px rgba(176, 1, 59, 0.2);
      transition: background-color 0.3s ease;
      margin-top: 20px;
    }

    .btn-get-quote:hover {
      background-color: #950034;
    }

    .btn-get-quote:focus {
      outline: none;
      box-shadow: none;
    }

    /* Dashboard */
    #revChart {
      height: 240px !important;
      max-height: 280px;
    }

    /* ===== Revenue Accordion ===== */
    .rows-accordion {
      background:#fff;
      border:1px solid #eee;
      border-radius:12px;
      overflow:hidden;
    }

    /* Header igual al thead de la tabla */
    .rows-accordion .ra-header {
      display:grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap:8px;
      padding:.75rem 12px;
      color:#9aa0a6;          /* como tus <th class="text-muted"> */
      font-size:.9rem;        /* como tus th */
      font-weight:700;
      border-bottom:1px solid #eee;
    }

    /* Fila = pestaña del acordeón */
    .rows-accordion .ra-row {
      border-bottom:1px solid #eee;
      background:#fff;
    }
    .rows-accordion .ra-row:last-child { border-bottom:0; }

    /* Botón de la fila: sin estilos Bootstrap (para que luzca como la tabla) */
    .rows-accordion .ra-toggle {
      width:100%;
      padding:.9rem 12px;
      background:transparent;
      border:0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      cursor:pointer;
      outline:none !important;
      box-shadow:none !important;
      -webkit-tap-highlight-color: transparent;
    }

    /* Grilla de 4 columnas como la tabla */
    .rows-accordion .ra-grid {
      display:grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap:8px;
      align-items:center;
      width:100%;
    }
    .rows-accordion .ra-cell { font-size:.8rem; color:#222; } /* como tus td */
    .rows-accordion .text-right { text-align:right; }

    /* caret */
    .rows-accordion .ra-caret {
      font-size:18px; color:#999; margin-left:10px; transition:transform .18s ease;
    }
    .rows-accordion .ra-toggle[aria-expanded="true"] .ra-caret { transform: rotate(180deg); }

    /* Contenido expandible */
    .rows-accordion .ra-content { display:none; padding:0 8px 12px; }

    /* Reuso de tu estilo de tabla interna */
    .rows-accordion .rev-inner-table { margin:0; }
    .rows-accordion .rev-inner-table thead th {
      font-size:.82rem; color:#999; border-top:0; border-bottom:1px solid #eee;
    }
    .rows-accordion .rev-inner-table tbody td { padding:.5rem .5rem; vertical-align:middle; }
    .rows-accordion .rev-inner-table tbody tr:last-child td { border-bottom:0; }
    .rows-accordion .rev-inner-table .is-total td { font-weight:700; }

    .rev-inner-table th {
      font-weight: 600;
      font-size: 14px;
      color: #333;
    }
    .rev-inner-table td {
      font-size: 14px;
      color: #555;
    }
    .rev-inner-table .is-total td {
      font-weight: bold;
      border-top: 2px solid #dee2e6;
    }

    /* Autocomplete */
 
    .ui-autocomplete {
      z-index: 99999 !important;
      border: 1px solid #ddd;
      background: #fff;
      font-size: 14px;
    }

    .ui-menu-item {
      border-bottom: 1px solid #e6e6e6; /* línea gris tenue */
      padding: 5px 10px; /* padding interno */
    }

    .ui-menu-item:last-child {
      border-bottom: none; /* quitar línea en el último */
    }

    .ui-menu-item:hover {
      background: #f2f2f2; /* fondo al pasar mouse */
    }

    .pac-container {
      z-index: 99999 !important;
    }

    /* Create Order */
    .list-input {
      width: 60px;                 
      padding: 5px 2px;            /* espacio interno */
      border: none;                /* quitamos todos los bordes */
      border-bottom: 1px solid #ddd; /* solo línea inferior */
      background-color: #fff;      
      color: #222;                 
      text-align: left;
      border-radius: 0;            /* sin esquinas redondeadas */
    }

    /* Focus → línea inferior roja */
    .list-input:focus {
      outline: none;
      border-bottom: 2px solid #B0013B;
    }

    /* Estado deshabilitado */
    .list-input:disabled {
      background-color: #fff !important;
      color: #222;
      border-bottom: 1px solid #ddd;
      opacity: 1;
    }


    /* Estilo de pasos bloqueados */
    .disabled-step {
      pointer-events: none;    /* no se puede hacer clic */
      opacity: 0.4;            /* se ve apagado */
      cursor: not-allowed;     /* cursor deshabilitado */
    }

    /* Bottom sheets */
    #tripSheet {
      height: 800px;
      display: flex;
      flex-direction: column;
    }

    /* El cuerpo se expande y hace scroll */
    #tripSheet .sheet-body {
      flex: 1;                  /* ocupa todo el espacio disponible */
      overflow-y: auto;         /* scroll solo en el cuerpo */
      scrollbar-width: none;    /* oculta scroll en Firefox */
      -ms-overflow-style: none; /* IE/Edge */
    }
    #tripSheet .sheet-body::-webkit-scrollbar {
      display: none;            /* oculta scroll en Chrome/Safari */
    }

    /* Floating actions fijo abajo */
    #tripSheet .floating-actions {
      position: sticky;
      bottom: 0;
      background: #fff;       /* fondo para que no se mezcle con el scroll */
      padding: 10px;
      border-top: 1px solid #ddd;
      z-index: 10;
    }

    /* Skeleton */
    .skeleton-loader {
      padding: 12px 15px;
    }

    .skeleton-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #eee;
    }

    .skeleton-left {
      flex: 1;
    }

    .skeleton-line {
      height: 12px;
      background: linear-gradient(90deg, #f2f2f2 25%, #e8e8e8 37%, #f2f2f2 63%);
      background-size: 400% 100%;
      animation: shimmer 1.4s ease infinite;
      border-radius: 6px;
      margin-bottom: 8px;
    }

    .skeleton-line.short { width: 40%; }
    .skeleton-line.medium { width: 70%; }
    .skeleton-line.long { width: 90%; }

    .skeleton-badge {
      width: 50px;
      height: 18px;
      border-radius: 10px;
      background: #f0f0f0;
      animation: shimmer 1.4s ease infinite;
    }

    @keyframes shimmer {
      0% { background-position: -400px 0; }
      100% { background-position: 400px 0; }
    }

    /* FAB container: Botones flotantes de accion */
    .fab-container {
        position: fixed;
        right: 20px;
        bottom: 90px;
        width: 60px;
        height: 60px;
        z-index: 30;
        pointer-events: none; /* desactivado por default */
    }

    /* Botón principal */
    .fab-button {
        position: absolute;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #B0013B;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transform: scale(0);
        opacity: 0;
        transition: transform .25s ease, opacity .25s ease;
    }

    .fab-button.main {
        transform: scale(0);
        opacity: 0;
        pointer-events: none;
    }

    /* Botones secundarios escondidos inicialmente */
    .fab-button.option {
        bottom: 0;
        right: 0;
        pointer-events: auto;
    }

    /* Cuando está activo el menú */
    .fab-container.open .option:nth-child(2) {
        transform: translateY(-70px) scale(1);
        opacity: 1;
    }

    .fab-container.open .option:nth-child(3) {
        transform: translateY(-140px) scale(1);
        opacity: 1;
    }

    .fab-container.open .option:nth-child(4) {
        transform: translateY(-210px) scale(1);
        opacity: 1;
    }

    /* Mostrar fab-container (cuando hay selección) */
    .fab-container.visible {
        pointer-events: auto;
    }

    .fab-container.visible .fab-button.main {
        transform: scale(1);
        opacity: 1;
        pointer-events: auto;
    }

    /* Form Controls */
    .form-control-group {
      width: 100%;
      margin-top: 15px;
      font-family: 'Sen', sans-serif;
    }

    .form-label {
      display: block;
      font-size: 14px;
      margin-bottom: 6px;
      color: #555;
      font-weight: 600;
    }

    .form-control {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 10px;
      padding: 6px 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      border: 1px solid #eee;
      width: 100%;
      box-sizing: border-box;
    }

    .form-control i {
      font-size: 18px;
      color: #666;
      margin-right: 8px;
      flex: 0 0 auto;
    }

    .form-control select,
    .form-control input {
      border: none !important;
      outline: none !important;
      background: transparent !important;
      width: 100%;
      font-size: 15px;
      font-family: 'Sen', sans-serif;
      padding: 6px 0;
    }

    /* ===== TEXTAREA DEFINITIVO ===== */

    .form-control.textarea-control {
      display: block;
      background: #fff;
      border-radius: 10px;
      padding: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      border: 1px solid #eee;
      width: 100%;
      box-sizing: border-box;
    }

    .form-control.textarea-control i {
      display: block;
      margin-bottom: 6px;
      font-size: 18px;
      color: #666;
    }

    .form-control.textarea-control textarea {
      width: 100%;
      display: block;

      /* 🔑 CLAVE ABSOLUTA */
      height: auto;
      min-height: 4.5em; /* 3 rows reales (1.5 * 3) */

      line-height: 1.5;
      font-size: 15px;
      font-family: 'Sen', sans-serif;

      padding: 6px 0;
      resize: vertical;

      border: none;
      outline: none;
      background: transparent;

      box-sizing: border-box;
    }



    /* Datepicker bar */
    .date-picker-bar {
      display: flex;
      align-items: center;
      padding: 12px 12px;
      font-family: 'Sen', sans-serif;
      color: #333;
      background: transparent;
      box-sizing: border-box;
      width: 100%;
      margin: 0;
    }

    .date-picker-bar-stacked {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }

    .date-input {
      display: inline-flex;
      align-items: center;
      background: #fff;
      border-radius: 10px;
      padding: 6px 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      border: 1px solid #eee;
      width: 100%;
      max-width: none;
      min-width: 0; /* allow flex shrinking on small screens */
      box-sizing: border-box;
    }

    .date-controls-divider {
      width: 100%;
      height: 1px;
      background: #dcdcdc;
      margin: 8px 0;
    }

    .date-input i {
      font-size: 18px;
      color: #666;
      margin-right: 8px;
      flex: 0 0 auto;
    }

    .date-input input[type="text"],
    .date-input input[type="date"] {
        border: none !important;
        outline: none !important;
        background: transparent !important;
        width: 100%;
    }


    #adminDatePicker {
      border: 0;
      outline: none;
      font-size: 16px;
      font-family: inherit;
      color: #333;
      background: transparent;
      -webkit-appearance: none;
      appearance: none;
      flex: 1 1 auto;
      min-width: 0;
      width: 100%;
    }

    /* small visual tweak for the native calendar icon in WebKit */
    #adminDatePicker::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0.9;
      filter: none;
    }

    #driverDatePicker {
      border: 0;
      outline: none;
      font-size: 16px;
      font-family: inherit;
      color: #333;
      background: transparent;
      -webkit-appearance: none;
      appearance: none;
      flex: 1 1 auto;
      min-width: 0;
      width: 100%;
    }

    /* small visual tweak for the native calendar icon in WebKit */
    #driverDatePicker::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0.9;
      filter: none;
    }

    /* keep styling consistent on small screens */
    @media (max-width: 420px) {
      .date-picker-bar { padding: 8px 8px; }
      .date-input { padding: 6px 8px; }
      #driverDatePicker { font-size: 14px; }
      #adminDatePicker { font-size: 14px; }
    }

    /* Contenedor izquierdo:: RIDE, ROUTE */
    .ride-type-container {
      display: flex;
      /* flex-direction: column; */
      align-items: center;
      justify-content: center;
      margin-right: -12px;
      margin-left: -10px;
      min-width: 40px; /* ancho fijo para alineación */
    }

    /* Texto vertical */
    .ride-type-label {
      writing-mode: vertical-rl;
      transform: rotate(180deg); /* para que se lea de arriba hacia abajo */
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      padding: 4px 0;
    }

    /* Colores según tipo */
    .ride-type-label.route {
      color: #555;
    }

    .ride-type-label.ride {
      color: #B0013B; /* tu color principal de ride */
    }

    /* Línea divisoria gris */
    .ride-type-divider {
      width: 1px;
      height: 40px;
      background-color: #ccc;
      margin-top: 6px;
    }

    /* Contenedor del switch */
    .shapp-switch {
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      font-family: 'Sen', sans-serif;
      font-size: 15px;
      color: #222;
      user-select: none;
    }

    /* Ocultar el checkbox real */
    .shapp-switch input {
      display: none;
    }

    /* Slider visual */
    .shapp-switch .slider {
      position: relative;
      width: 46px;
      height: 24px;
      background: #ddd;
      border-radius: 24px;
      transition: 0.25s ease;
    }

    /* Circulito del switch */
    .shapp-switch .slider::before {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      background: white;
      border-radius: 50%;
      transition: 0.25s ease;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* Estado activo */
    .shapp-switch input:checked + .slider {
      background: #B0013B;  /* color de tu botón flotante */
    }

    .shapp-switch input:checked + .slider::before {
      transform: translateX(22px);
    }

    .shapp-icon-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #B0013B; /* tono SHAPP */
      color: white;
      border: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      cursor: pointer;
      transition: 0.25s ease;
      box-shadow: 0 4px 10px rgba(0,0,0,0.16);
    }

    /* Hover suave */
    .shapp-icon-btn:hover {
      background: #9a0035;
    }

    /* Efecto al presionar */
    .shapp-icon-btn:active {
      transform: scale(0.94);
    }

    #profilePicWrapper:hover #profilePicOverlay {
      opacity:1;
    }

    /* Overlay */
    .file-preview-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    /* Hidden state */
    .file-preview-overlay.hidden {
      display: none;
    }

    /* Preview container */
    .file-preview-container {
      position: relative;
      width: 92%;
      height: 92%;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);

      display: flex;
      flex-direction: column;
    }

    #filePreviewContent {
      flex: 1;
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Close button */
    .file-preview-close {
      position: absolute;
      top: 12px;
      right: 14px;
      background: rgba(0,0,0,0.6);
      color: #fff;
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 22px;
      cursor: pointer;
      z-index: 10;
    }

    /* Content */
    #filePreviewContent iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    #filePreviewContent img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      display: block;
    }

    .preview-toolbar {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-bottom: 1px solid #eee;
      background: #fff;
    }

    .preview-toolbar button {
      background: transparent;
      border: none;
      font-size: 20px;
      cursor: pointer;
      color: #555;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .preview-toolbar button:hover {
      color: #B0013B;
    }

    .file-preview-content {
      flex: 1;
      overflow: auto;
    }

    /* Nueva solucion */
    .file-preview-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.75);
      z-index: 9999;
    }

    .file-preview-container {
      position: relative;
      width: 95%;
      height: 95%;
      margin: auto;
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .preview-toolbar {
      height: 48px;
      background: #fff;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 12px;
      border-bottom: 1px solid #eee;
      gap: 20px;
    }

    .toolbar-btn {
      font-size: 26px;
      padding: 8px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .close-btn {
      font-size: 20px !important;
    }

    .preview-content {
      flex: 1;
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Autocomplete */
    .autocomplete-wrapper {
      position: relative;
      overflow: visible !important;
    }

    /* Dropdown */
    .autocomplete-list {
      position: absolute;
      background: #fff;
      border-radius: 8px;
      border: 1px solid #ddd;
      max-height: 260px;
      overflow-y: auto;
      z-index: 99999;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }

    /* Cada opción */
    .autocomplete-item {
      padding: 10px 12px;
      cursor: pointer;
      border-bottom: 1px solid #f0f0f0;
    }

    .autocomplete-item:last-child {
      border-bottom: none;
    }

    .autocomplete-item:hover {
      background: #f6f6f6;
    }

    .list-container {
      overflow: visible !important;
    }

    /* Google Maps */
    #map {
      height: 220px; /* ajusta si quieres más alto */
    }

    #map .card {
      overflow: hidden;
    }

    #map .card-body {
      padding: 0;
      height: 220px;
    }

    #mapCanvas {
      width: 100%;
      height: 100%;
      background: #f2f2f2; /* fallback */
    }

    /* Full-screen bottom sheet */

    .full-sheet {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;

      background: #ffffff;
      z-index: 9999;

      transform: translate3d(0, 100%, 0);
      transition: transform 0.35s cubic-bezier(.25,.8,.25,1);

      display: flex;
      flex-direction: column;
    }

    /* Visible */
    .full-sheet.active {
      transform: translate3d(0, 0, 0);
    }

    /* Header */
    .sheet-header {
      height: 56px;
      display: flex;
      align-items: center;
      gap: 12px;

      padding: 0 16px;
      border-bottom: 1px solid #eee;

      flex-shrink: 0;
      font-weight: 600;
    }

    /* Close button */
    .close-btn {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
    }

    /* Content */
    #loginBody {
      flex: 1;
      padding: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }

    .login-body-full {
      height: 100%;
    }

    .login-sheet {
      background: #B0013B;
    }

    .login-close {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 5;
      margin: 0;
      box-shadow: 0 6px 18px rgba(0,0,0,0.18);
      font-size: 20px;
    }

    #loginSheet .log-in-empty {
      width: 100%;
      min-height: 100%;
      background: #B0013B;
    }

    #loginSheet .log-in-empty .overlap-wrapper {
      width: 375px;
      max-width: 100%;
      height: 812px;
      max-height: 100%;
      margin-top: -150px;
      background: #B0013B;
      overflow: visible;
    }

    #loginSheet .log-in-empty .overlap {
      width: 556px;
      height: 906px;
      top: -94px;
      left: -83px;
    }

    #loginSheet .log-in-empty .white-BG {
      width: 100vw;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 24px 24px 0 0;
    }

    /* Session styles for login.html rendered inside full-sheet */
    #loginSheet .login-page-body {
      margin: 0;
      min-height: 100%;
      height: 100%;
      font-family: "Sen", Helvetica, sans-serif;
      background: #b0013b;
    }

    #loginSheet .login-page-body .login-page {
      min-height: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: linear-gradient(to bottom, #b0013b 0 34%, #ffffff 34% 100%);
    }

    #loginSheet .login-page-body .login-hero {
      position: relative;
      padding: 56px 24px 34px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #loginSheet .login-page-body .login-back-btn {
      position: absolute;
      top: 18px;
      left: 20px;
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 50%;
      background: #ffffff;
      color: #4f5463;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      line-height: 1;
      font-weight: 700;
      padding: 0;
      cursor: pointer;
    }

    #loginSheet .login-page-body .login-brand-logo {
      width: min(55vw, 210px);
      height: auto;
    }

    #loginSheet .login-page-body .login-sheet {
      flex: 1;
      width: 100%;
      background: #ffffff;
      border-radius: 22px 22px 0 0;
    }

    #loginSheet .login-page-body .login-sheet-inner {
      max-width: 420px;
      margin: 0 auto;
      padding: 24px 22px 36px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    #loginSheet .login-page-body .login-alert {
      width: 100%;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 13px;
      line-height: 1.35;
    }

    #loginSheet .login-page-body .login-alert-error {
      background: #fbe4e7;
      border: 1px solid #f4c7cd;
      color: #7a1026;
    }

    #loginSheet .login-page-body .login-alert-success {
      background: #fff6dc;
      border: 1px solid #f4e2a7;
      color: #6f5600;
    }

    #loginSheet .login-page-body .login-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    #loginSheet .login-page-body .login-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    #loginSheet .login-page-body .login-label {
      font-size: 13px;
      font-weight: 600;
      color: #31343d;
      letter-spacing: 0.01em;
    }

    #loginSheet .login-page-body .login-input-wrap {
      display: flex;
      align-items: center;
      width: 100%;
      border: 1px solid #e2e5ec;
      border-radius: 12px;
      background: #ffffff;
      padding: 0 14px;
      min-height: 54px;
    }

    #loginSheet .login-page-body .login-input {
      width: 100%;
      border: 0;
      outline: 0;
      padding: 14px 0;
      color: #222222;
      font-size: 16px;
      font-family: inherit;
      background: transparent;
    }

    #loginSheet .login-page-body .login-input::placeholder {
      color: #a0a5ba;
    }

    #loginSheet .login-page-body .login-input-password {
      letter-spacing: 0.2em;
    }

    #loginSheet .login-page-body .login-input-wrap-password {
      justify-content: space-between;
      gap: 10px;
    }

    #loginSheet .login-page-body .password-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      background: transparent;
      padding: 4px;
      margin: 0;
      cursor: pointer;
    }

    #loginSheet .login-page-body .password-toggle img {
      width: 18px;
      height: 18px;
    }

    #loginSheet .login-page-body .login-error {
      min-height: 16px;
      font-size: 12px;
      color: #b0013b;
    }

    #loginSheet .login-page-body .login-forgot {
      text-align: right;
      font-size: 14px;
      color: #b0013b;
      margin-top: 2px;
    }

    #loginSheet .login-page-body .login-submit {
      border: 0;
      width: 100%;
      min-height: 54px;
      border-radius: 12px;
      background: #b0013b;
      color: #ffffff;
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 0.02em;
      cursor: pointer;
    }

    #loginSheet .login-page-body .social-login {
      position: static;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 2px;
    }

    #loginSheet .login-page-body .social-btn {
      width: 100%;
      min-height: 50px;
    }

    #loginSheet .login-page-body .social-btn .label {
      color: #787878;
      font-weight: 500;
      text-align: left;
    }

    #loginSheet .login-page-body .loading-icon {
      width: 28px;
      height: 28px;
      margin: 4px auto 0;
      display: none;
      position: static;
      top: auto;
      left: auto;
    }

    #loginSheet .login-page-body .signup-section {
      margin-top: 8px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      font-size: 17px;
      line-height: 1.3;
    }

    #loginSheet .login-page-body .signup-copy {
      color: #646982;
    }

    #loginSheet .login-page-body .sign-up {
      color: #b0013b;
      font-weight: 700;
    }