/* ==========================================================================
   1. BASE y TOKENS
   Reset global y tokens de diseno (:root, variables --c-*).
   Orden del archivo: Base/Tokens > Layout > Modales > Componentes > Utilidades.
   Los @media (max-width:400px, min-width:768/992px) viven junto al componente que
   modifican: NO se agruparon al final para no alterar la cascada.
   ========================================================================== */

*{box-sizing: border-box;font-family: "Montserrat", sans-serif;}
body, html{margin:0}

:root {
  --c-primary: #111C4E;
  --c-primary-dark: #0C1437;
  --c-primary-alt: #14205A;
  --c-primary-tint: #EEF1FB;
  --c-gold: #C9A892;
  --c-gold-alt: #CDB09B;
  --c-info: #4285F4;
  --c-info-dark: #357ae8;
  --c-success: #28a745;
  --c-success-dark: #1e7e34;
  --c-warning: #ffc107;
  --c-danger: #e74c3c;
  --c-danger-dark: #c0392b;
  --c-danger-strong: #b3261e;
  --c-route: #1565C0;
  --c-white: #fff;
  --c-bg: #efefef;
  --c-highlight: #f0f7ff;
  --c-gray-50: #f8f9fa;
  --c-gray-100: #f0f0f0;
  --c-gray-200: #e9ecef;
  --c-gray-250: #e3e3e3;
  --c-gray-300: #e2e8f0;
  --c-gray-350: #ddd;
  --c-gray-400: #ccc;
  --c-gray-500: #999;
  --c-gray-550: #888;
  --c-gray-600: #666;
  --c-gray-700: #555;
  --c-secondary: #6c757d;
  --c-gray-800: #333;
  --c-switch-bg: rgb(135, 150, 165);
}

/* ==========================================================================
   2. LAYOUT
   Splash, mapa, panel de info de bus (#infoPanel) y barra de busqueda.
   ========================================================================== */

    #splashScreen {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: var(--c-white);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      transition: opacity 0.5s;
    }
    #splashScreen.fade-out {
      opacity: 0;
      pointer-events: none;
    }
    .splash-spinner {
      width: 36px; height: 36px;
      border: 4px solid var(--c-gray-300);
      border-top-color: var(--c-primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin-top: 20px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    #map { width: 100%; height: 100vh; }
    #infoPanel {

      position: fixed;
      left: 50%;
      transform:translate(-50%);
      bottom: -50vh;
      width: 100%;
      max-width: 400px;
      height: 40vh;
      background: var(--c-white);
      box-shadow: -2px 0 5px rgba(0,0,0,0.2);
      padding: 15px;
      transition: bottom 0.3s;
      z-index: 999;
      overflow-y: auto;
    }
    #infoPanel.active { bottom: 0; }
    #infoPanel img {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 10px;
    }
    #closePanel {
      position: absolute;
      top: 10px;
      right: 10px;
      background: var(--c-danger);
      color: var(--c-white);
      border: none;
      padding: 5px 10px;
      border-radius: 5px;
      cursor: pointer;
    }
    #busNextStop{text-transform: capitalize;}
    #monitorBus{
      width:100%;
      padding:10px;
      margin-top:10px;
      background:var(--c-primary);
      color:var(--c-white);
      border:none;
      border-radius:50px;
      font-weight:600;
      cursor:pointer;
      transition:background 0.2s;
    }
    #monitorBus:active{background:var(--c-primary-dark);transform:scale(0.98);}
    #monitorBus.monitoring{background:var(--c-success);}
    #monitorBus.monitoring:active{background:var(--c-success-dark);}
    #searchContainer {
      position: absolute;
      top:0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1000;
      background: var(--c-bg);
      width: 100%;
      padding: 21px 12px 13px;
      text-align: center;
      box-shadow: 0 3px 6px rgba(0,0,0,.2);
      user-select: none;
    }
    #destinationInput{
      width: 100%;
      padding: 12px;
      padding-right: 32px;
      border: 1px solid var(--c-gray-400);
      border-radius: 50px 0 0 50px;
    }
    #searchDestination{
      padding: 12px;
      white-space: nowrap;
      flex-shrink: 0;
      margin-left: -5px;
      border: 1px solid var(--c-primary);
      background: var(--c-primary);
      color: var(--c-white);
      font-weight: 700;
      border-radius: 0 50px 50px 0;
    }

/* ==========================================================================
   3. MODALES
   #messageBox, overlay, barra minimizada y animaciones. Contenido .modal-* mas abajo.
   ========================================================================== */

    /* ========== MESSAGEBOX MEJORADO ========== */
    #messageBox {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--c-white);
      padding: 20px;
      padding-top: 12px;
      border-radius: 12px;
      box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 24px;
      z-index: 2000;
      display: none;
      text-align: center;
      width: 92%;
      max-width: 500px;
      border-top: 48px solid var(--c-gold-alt);
      /* Animación de entrada */
      animation: slideIn 0.3s ease-out;
    }

    /* Desktop: la modal ocupa ~1/3 del ancho del navegador en vez de un ancho fijo.
       Techo en px (no solo vw) para no crecer sin límite en monitores ultra-wide. */
    @media (min-width: 992px) {
      #messageBox {
        width: 33vw;
        min-width: 380px;
        max-width: 640px;
      }
    }

    /* Barra de botones minimizar/cerrar */
    #messageBoxBar{
      position: absolute;
      top: -32px;
      right: 8px;
      display: flex;
      gap: 6px;
    }
    #messageBoxBar button{
      background: transparent;
      border: none;
      color: var(--c-white);
      font-size: 16px;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: background 0.2s;
      margin: 0;
    }
    #messageBoxBar button:hover{background:rgba(255,255,255,0.25);}

    /* Barra minimizada */
    #msgMinBar{
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--c-white);
      color: var(--c-gray-800);
      border: none;
      border-radius: 50px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.2);
      cursor: pointer;
      z-index: 2001;
      font-size: 13px;
      font-weight: 600;
      display: none;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      transition: box-shadow 0.2s;
    }
    #msgMinBar:hover{box-shadow: 0 4px 18px rgba(0,0,0,0.3);}
    #msgMinBar i:first-child{color:var(--c-success);}
    #msgMinBar i:last-child{color:var(--c-gray-500);font-size:11px;margin-left:4px;}

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translate(-50%, -60%);
      }
      to {
        opacity: 1;
        transform: translate(-50%, -50%);
      }
    }

    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
        opacity: 1;
      }
      50% {
        transform: scale(1.1);
        opacity: 0.8;
      }
    }

    #messageBox h3 {
      color: var(--c-primary);
      margin: 10px 0;
    }

    #messageBox p {
      color: var(--c-gray-800);
      line-height: 1.6;
      margin: 10px 0;
    }

    #messageBox > button {
      background:var(--c-primary);
      color:var(--c-white);
      padding:10px 32px;
      margin-top:15px;
      border-radius: 50px;
      border:none;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.3s;
    }

    #messageBox > button:active {
      background: var(--c-primary-dark);
      transform: scale(0.98);
    }

    /* Overlay para el fondo */
    #messageOverlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1999;
      display: none;
    }

    @media (min-width: 992px) {
      #searchDestination {
        padding: 0 28px;
        font-size: 16px;
        height: 40.8px;
      }
    }

    /* Responsive para pantallas muy pequeñas */
    @media (max-width: 400px) {
      #messageBox {
        width: 95%;
        padding: 15px;
        border-top-width: 36px;
      }

      #searchDestination {
        font-size: 13px;
        padding: 12px 10px;
      }
    }

/* ==========================================================================
   4. COMPONENTES
   Botones flotantes (ubicacion, reporte, planning), sidebar, switches, animo (#moods), aviso legal.
   ========================================================================== */

    /* Botón flotante de ubicación */
    #locationBtn {
      position: fixed;
      bottom: 80px;
      right: 15px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--c-info);
      color: var(--c-white);
      border: none;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      cursor: pointer;
      z-index: 998;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
    }

    #locationBtn:hover {
      background: var(--c-info-dark);
      transform: scale(1.1);
    }

    #locationBtn:active {
      transform: scale(0.95);
    }

    #locationBtn.active {
      background: var(--c-success);
    }

    #locationBtn.searching {
      animation: pulse 1.5s infinite;
    }

    #reportBusBtn {
      position: fixed;
      bottom: 145px;
      right: 15px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--c-danger);
      color: var(--c-white);
      border: none;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      cursor: pointer;
      z-index: 998;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s, background 0.2s;
    }
    #reportBusBtn:hover {
      background: var(--c-danger-dark);
      transform: scale(1.1);
    }
    #reportBusBtn:active {
      transform: scale(0.95);
    }

    /* Botón flotante de modo planning */
    #planningModeBtn {
      position: fixed;
      bottom: 210px;
      right: 15px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--c-primary);
      color: var(--c-white);
      border: none;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      cursor: pointer;
      z-index: 998;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s, background 0.2s;
    }
    #planningModeBtn:hover {
      background: var(--c-primary-dark);
      transform: scale(1.1);
    }
    #planningModeBtn:active {
      transform: scale(0.95);
    }
    #planningModeBtn.active {
      background: var(--c-primary-dark);
    }

    /* Mientras el modo planning está activo, ocultar los otros botones flotantes
       para que no choquen visualmente con el banner/lista de paradas que crece
       desde abajo. No toca el display inline que maneja la lógica de monitoreo. */
    body.planning-active #locationBtn,
    body.planning-active #reportBusBtn {
      display: none !important;
    }
    #planningBadge {
      position: absolute;
      right: 65px;
      bottom: 16px;
      background: var(--c-danger);
      color: var(--c-white);
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }
    #planningBadge::after {
      content: "";
      position: absolute;
      right: -6px;
      top: 50%;
      transform: translateY(-50%);
      border-width: 6px 0 6px 6px;
      border-style: solid;
      border-color: transparent transparent transparent var(--c-danger);
    }

    .barToggle {font-size: 2em;margin-right:21px; vertical-align: middle;user-select: none;width:28px;}
    /* fixed + top/bottom: el alto es el del viewport restante, así la ventana
       no scrollea y solo el contenido del menú lo hace (webview móvil). */
    #sideBar{position: fixed;
    top: 125px;
    bottom: 0;
    width: 350px;
    background: var(--c-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 999;
    padding: 21px;
    padding-bottom: calc(21px + env(safe-area-inset-bottom, 0px));
    left: -400px;
    box-shadow: 4px 0 5px #3333;
transition: left 0.3s ease;}
    #sideBar.active {
  left: 0;
}

    #sideBar select{
        width:100%;padding:8px 12px;margin: 5px auto;
    }

    .spacer{display: block; width:100%; height:26px;}

    .midspacer{display: block; width:100%; height:20px;}

    #showMood {
      display: inline-block;
      padding: 8px 18px;
      border-radius: 50px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: background 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    #showMood:hover { background: rgba(0,0,0,0.06); }
    #showMood:active { background: rgba(0,0,0,0.12); }
    #showMood .ripple {
      position: absolute;
      border-radius: 50%;
      background: rgba(0,0,0,0.15);
      transform: scale(0);
      animation: rippleEffect 0.5s ease-out;
      pointer-events: none;
    }
    @keyframes rippleEffect {
      to { transform: scale(4); opacity: 0; }
    }

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

    /* switch settings 👇 */

.ui-switch {
  /* switch */
  --switch-bg: var(--c-switch-bg);
  --switch-width: 48px;
  --switch-height: 20px;
  /* circle */
  --circle-diameter: 32px;
  --circle-bg: var(--c-primary-alt);
  --circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);
}

.ui-switch input {
  display: none;
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
}

.slider .circle {
  top: calc(var(--circle-inset) * -1);
  left: 0;
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  position: absolute;
  background: var(--circle-bg);
  border-radius: inherit;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  -o-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
  ;
}

.slider .circle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  border-radius: inherit;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
  opacity: 0;
}

/* actions */

.ui-switch input:checked+.slider .circle {
  left: calc(100% - var(--circle-diameter));
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=");
}

.ui-switch input:active+.slider .circle::before {
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
  opacity: 1;
  width: 0;
  height: 0;
}

.float{position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 650px;
    max-height: 70vh;
    background: var(--c-bg);
    padding: 21px;
    border-radius: 12px;
    box-shadow: 0 0 50vh 75vh #3336;
    z-index: 1500; /* sobre header (1000), sidebar (999) y botones (998); bajo #messageBox (2000) */
    transform: translate(-50%, -50%);
    overflow:auto;
display:none;}

.float i.fa-times{float:right;margin-left:21px;margin-bottom:21px;font-size:1.5em}

/* FAQ (Soporte): grupos de preguntas con acordeón nativo <details> */
.faq-group{margin:18px 0 8px;color:var(--c-primary);font-size:1.05em;clear:both}
.faq-item{background:var(--c-white);border:1px solid #d9dce6;border-radius:8px;margin-bottom:8px;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:12px 40px 12px 14px;font-weight:600;position:relative;line-height:1.35}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:1.4em;font-weight:400;color:var(--c-primary)}
.faq-item[open] summary{background:var(--c-primary-tint);color:var(--c-primary)}
.faq-item[open] summary::after{content:"\2212"}
.faq-answer{padding:12px 14px 14px;line-height:1.55}
.emergency-item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 14px;margin-bottom:8px;background:var(--c-white);border:1px solid #d9dce6;border-radius:8px;color:inherit;text-decoration:none;line-height:1.35}
.emergency-item strong{flex:none;color:var(--c-primary);font-size:1.15em;white-space:nowrap}
.emergency-item--main{border-color:var(--c-primary);background:var(--c-primary-tint)}
.emergency-item--main strong{font-size:1.5em}

/* Aviso cuando un texto legal se muestra en otro idioma del elegido (fallback) */
.legal-fallback-notice{background:var(--c-primary-tint);border-left:4px solid var(--c-primary);color:var(--c-primary);padding:10px 12px;border-radius:6px;font-size:.9em;margin:0 0 14px}

.flex{display: flex; align-items: center;}

#moods{
    position: absolute;
    z-index: 90;
    top: -100vh;
    background: var(--c-bg);
    width: 100%;
    padding: 21px 12px;
    transition: top 1s;
}
#moods.active{top: 128px;}
.moodFilter{padding:4px 8px;background:var(--c-gray-500);color:var(--c-gray-800);border-radius:50px;border:none;margin:5px;cursor:pointer;transition:background 0.2s, color 0.2s;}
.moodFilter.active{background:var(--c-primary);color:var(--c-white);}

#moodResults{
    max-height: 40vh;
    overflow-y: auto;
    padding: 8px 0;
}
.mood-item{
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--c-white);
    margin: 4px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.mood-item:hover{background:var(--c-gray-250);}
.mood-item i{margin-right:10px;color:var(--c-primary);font-size:1.2em;}
.mood-item .mood-info{flex:1;}
.mood-item .mood-name{font-weight:600;font-size:14px;display:block;}
.mood-item .mood-source{font-size:11px;color:var(--c-gray-500);}
.mood-item .mood-distance{font-size:12px;color:var(--c-gray-600);margin-left:8px;white-space:nowrap;}

.messageBoxMinimize, .messageBoxClose{margin:0 5px;}
.messageBoxClose{font-size:2em;}
.messageBoxMinimize{font-size:1.5em}

/* ==========================================================================
   5. MODALES: CONTENIDO (.modal-*)
   Sistema de clases para el interior de #messageBox. Reutilizar antes de crear estilos nuevos.
   ========================================================================== */

    /* ========== MODAL CONTENT CLASSES ========== */

    /* Icons */
    .modal-icon { font-size: 48px; margin-bottom: 10px; }
    .modal-icon--warning { color: var(--c-warning); }
    .modal-icon--error { color: var(--c-danger); }
    .modal-icon--success { color: var(--c-success); }
    .modal-icon--primary { color: var(--c-primary); }
    .modal-icon--info { color: var(--c-info); }
    .modal-icon--pulse { animation: pulse 1s infinite; }
    .modal-icon--pulse-slow { animation: pulse 2s infinite; }

    /* Typography */
    .modal-title { margin: 10px 0; }
    #messageBox .modal-title--success { color: var(--c-success); } /* con ID: vence a #messageBox h3 */
    .modal-subtitle { font-size: 13px; color: var(--c-gray-600); }
    .modal-hint { font-size: 12px; color: var(--c-gray-600); margin-top: 10px; }
    .modal-error-text { color: var(--c-danger); font-weight: 600; }
    .modal-success-text { color: var(--c-success); font-weight: 600; }
    .modal-warning-text { color: var(--c-warning); font-weight: 600; }
    .modal-label { font-weight: 600; font-size: 14px; display: block; margin-bottom: 4px; }

    /* Layout */
    .modal-highlight-box { background: var(--c-highlight); padding: 8px; border-radius: 8px; margin: 8px 0; }
    .modal-section-left { text-align: left; padding: 0 10px; }
    .modal-divider { margin: 12px 0; border: none; border-top: 1px solid var(--c-gray-350); }
    .modal-icon-col { color: var(--c-gray-600); width: 20px; display: inline-block; }
    /* Placa de la unidad que se va a monitorear (guía de ruta) */
    .modal-plate { font-family: ui-monospace, Consolas, monospace; font-size: 15px; letter-spacing: .06em; background: var(--c-gray-100); border: 1px solid var(--c-gray-300); border-radius: 4px; padding: 1px 8px; }
    .modal-info-box { font-size: 12px; color: var(--c-gray-600); background: var(--c-gray-50); padding: 8px; border-radius: 6px; margin-bottom: 12px; }
    .modal-center-pad { text-align: center; padding: 24px 12px; }
    .modal-detail { font-size: 13px; color: var(--c-gray-600); }
    .modal-detail i { width: 18px; display: inline-block; }
    .modal-mt { margin-top: 12px; }
    .modal-mb { margin-bottom: 12px; }

    /* Buttons */
    .modal-btn { width: 100%; padding: 10px; border: none; border-radius: 50px; font-weight: 600; cursor: pointer; margin-top: 12px; }
    .modal-btn--primary { background: var(--c-primary); color: var(--c-white); }
    .modal-btn--success { background: var(--c-success); color: var(--c-white); }
    .modal-btn--danger { background: var(--c-danger); color: var(--c-white); }
    .modal-btn--muted { background: var(--c-gray-600); color: var(--c-white); }
    .modal-btn--disabled { background: var(--c-gray-400); color: var(--c-white); cursor: not-allowed; }
    .modal-btn-row { display: flex; gap: 10px; margin-top: 15px; justify-content: center; }
    .modal-btn-row .modal-btn { flex: 1; margin-top: 0; }

    /* Icon-only buttons (favoritos, quitar de listas) */
    .modal-icon-btn { background: none; border: none; cursor: pointer; padding: 6px; font-size: 16px; line-height: 1; }
    .modal-icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }
    .modal-heart-btn { background: none; border: none; cursor: pointer; padding: 4px 8px; font-size: 18px; color: var(--c-danger); }
    .modal-heart-btn:disabled { opacity: 0.3; cursor: not-allowed; }
    .modal-heart-btn.is-favorited i { font-weight: 900; }

    /* Form elements */
    .modal-input { width: 100%; padding: 10px; border: 1px solid var(--c-gray-400); border-radius: 8px; font-size: 14px; box-sizing: border-box; margin-bottom: 8px; }
    .modal-textarea { width: 100%; padding: 10px; border: 1px solid var(--c-gray-400); border-radius: 8px; font-size: 14px; box-sizing: border-box; resize: vertical; }
    .modal-checkbox-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; cursor: pointer; }

    /* Star rating */
    .modal-star { font-size: 32px; color: var(--c-gray-400); cursor: pointer; transition: color 0.2s; }
    .modal-star.active { color: var(--c-warning); }
    .modal-star-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }

    /* Login tabs */
    .modal-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid var(--c-gray-300); }
    .modal-tab { flex: 1; padding: 8px; border: none; background: none; font-weight: 600; cursor: pointer; color: var(--c-gray-600); margin-bottom: -2px; }
    .modal-tab.active { border-bottom: 2px solid var(--c-primary); color: var(--c-primary); }
    .modal-link { display: block; margin: 12px auto 0; padding: 4px 8px; border: none; background: none; color: var(--c-primary); font-size: 0.9em; text-decoration: underline; cursor: pointer; }
    .modal-link:disabled { color: var(--c-gray-600); text-decoration: none; cursor: default; }
    .modal-or-divider { text-align: center; color: var(--c-gray-500); font-size: 13px; margin-bottom: 12px; }
    /* Login social: mismo ancho que el botón de Google (280px). Colores de marca fijos, no dependen del tema. */
    .modal-social-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 280px; max-width: 100%; height: 40px; margin: 0 auto 12px; border: none; border-radius: 50px; font-size: 14px; font-weight: 600; cursor: pointer; }
    .modal-social-btn i { font-size: 18px; }
    .modal-social-btn--facebook { background: #1877F2; color: #fff; }
    .modal-social-btn--apple { background: #000; color: #fff; }

    /* Transfer badge */
    .modal-transfer-badge { font-size: 12px; color: var(--c-primary); margin-top: 8px; background: var(--c-highlight); padding: 6px 10px; border-radius: 6px; }

    /* ========== END MODAL CONTENT CLASSES ========== */

/* ==========================================================================
   6. COMPONENTES: PARADAS CERCANAS, BANNERS Y PLANNING
   ========================================================================== */

    /* ========== PANEL PARADAS CERCANAS ========== */
    #nearbyPanel {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 996;
      background: var(--c-white);
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
      display: flex;
      flex-direction: column;
      transition: height 0.3s ease;
      overflow: hidden;
    }
    #nearbyPanel.nearby-collapsed {
      height: 48px;
    }
    #nearbyPanel.nearby-expanded {
      height: 45vh;
      max-height: 350px;
    }
    #nearbyPanel.nearby-hidden {
      display: none;
    }

    #nearbyHandle {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 10px 16px 8px;
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    .navSheet-pill {
      width: 40px;
      height: 5px;
      border-radius: 3px;
      background: var(--c-gray-400);
      flex-shrink: 0;
    }
    .nearbyHandle-row {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
    }
    #nearbyTitle {
      font-size: 14px;
      font-weight: 600;
      color: var(--c-gray-800);
      flex: 1;
    }
    .nearby-badge {
      background: var(--c-primary);
      color: var(--c-white);
      font-size: 12px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 12px;
    }

    #nearbyList {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0 12px 12px;
    }

    .nearby-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 8px;
      border-bottom: 1px solid var(--c-gray-100);
      cursor: pointer;
      transition: background 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .nearby-item:hover { background: var(--c-gray-50); }
    .nearby-item:active { background: var(--c-gray-200); }

    .nearby-item-info {
      flex: 1;
      min-width: 0;
    }
    .nearby-item-info strong {
      display: block;
      font-size: 13px;
      color: var(--c-gray-800);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .nearby-distance {
      font-size: 12px;
      color: var(--c-gray-550);
    }

    .nearby-routes {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      margin-left: 8px;
      flex-shrink: 0;
      max-width: 120px;
      justify-content: flex-end;
    }
    .route-badge {
      display: inline-block;
      background: var(--c-route);
      color: var(--c-white);
      border-radius: 4px;
      padding: 2px 6px;
      font-size: 11px;
      font-weight: 700;
    }

    .nearby-nav-btn {
      display: inline-block;
      margin-top: 6px;
      padding: 4px 12px;
      background: var(--c-primary);
      color: var(--c-white);
      border: none;
      border-radius: 50px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
    .nearby-nav-btn:active { background: var(--c-primary-dark); }
    /* ========== END PANEL PARADAS CERCANAS ========== */

    /* Banner fijo de monitoreo */
    #monitorBar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: var(--c-primary);
      color: var(--c-white);
      text-align: center;
      padding: 10px;
      font-size: 13px;
      font-weight: 600;
      z-index: 997;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      animation: slideUp 0.3s ease-out;
    }
    #monitorBar i { animation: pulse 1.5s infinite; }
    #monitorBar .monitor-toggle {
      margin-left: 6px;
      padding: 4px 10px;
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 999px;
      background: transparent;
      color: inherit;
      font: inherit;
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap;
    }
    #monitorBar .monitor-toggle:hover { background: rgba(255,255,255,.15); }
    #monitorBar .monitor-toggle i { animation: none; margin-right: 4px; }
    #monitorBar .monitor-toggle .t-hide { display: none; }
    #monitorBar .monitor-toggle.others-shown .t-show { display: none; }
    #monitorBar .monitor-toggle.others-shown .t-hide { display: inline; }
    #monitorBar .monitor-toggle.others-shown i::before { content: "\f070"; }
    @keyframes slideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }

    /* Banner fijo de modo planning */
    #planningBar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: var(--c-primary);
      color: var(--c-white);
      z-index: 997;
      display: none;
      flex-direction: column;
      animation: slideUp 0.3s ease-out;
    }
    #planningPointsList {
      max-height: 160px;
      overflow-y: auto;
    }
    #planningPointsList:empty { display: none; }
    .planning-point-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.15);
      font-size: 13px;
    }
    .planning-point-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--c-gold);
      color: var(--c-white);
      font-size: 11px;
      font-weight: 700;
      flex-shrink: 0;
    }
    .planning-point-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .planning-point-remove {
      background: none;
      border: none;
      color: var(--c-white);
      opacity: 0.8;
      cursor: pointer;
      font-size: 14px;
      padding: 4px;
    }
    .planning-point-remove:hover { opacity: 1; }
    #planningBarRow {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      font-size: 13px;
    }
    #planningBarInfo {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      flex: 1 1 auto;
    }
    #planningBarInfo i { animation: pulse 1.5s infinite; }
    #planningDateWrap {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
    }
    #planningDateInput {
      border-radius: 6px;
      border: none;
      padding: 4px 6px;
      font-size: 12px;
    }
    #planningBarActions {
      display: flex;
      gap: 6px;
    }
    #planningBarActions button {
      border: none;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
    #btnSavePlanning { background: var(--c-success); color: var(--c-white); }
    #btnSavePlanning:active { background: var(--c-success-dark); }
    #btnClearPlanning { background: var(--c-danger); color: var(--c-white); }
    #btnClearPlanning:active { background: var(--c-danger-dark); }
    #btnExitPlanning { background: rgba(255,255,255,0.2); color: var(--c-white); }

    /* Botón X para limpiar input */
    .search-wrapper {
      position: relative;
      flex: 1;
    }
    .search-wrapper input {
      width: 100%;
      padding-right: 32px;
    }
    #clearSearch {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--c-gray-500);
      font-size: 16px;
      cursor: pointer;
      padding: 4px;
      display: none;
      line-height: 1;
    }
    #clearSearch:hover { color: var(--c-gray-800); }

/* ==========================================================================
   7. RESPONSIVE (tablet/desktop)
   Reubica #infoPanel en pantallas anchas. Otros @media estan junto a su componente (ver seccion 1).
   ========================================================================== */

@media only screen and (min-width:768px){
  #infoPanel{right:-90vh;top: 111px;height:90vh;left:auto;bottom:auto;transition:right 1s;padding-top:53px}
  #infoPanel.active {bottom: auto;top: 111px;right: -200px;}
}

/* ==========================================================================
   8. COMPONENTES: NOTIFICACIONES (pre-permiso)
   ========================================================================== */

/* ── Notificaciones: modal de pre-permiso (bottom sheet) ─────────── */
#notifPermOverlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end;
  z-index: 9999;
}
#notifPermBox {
  background: var(--c-white); border-radius: 16px 16px 0 0;
  padding: 28px 24px; width: 100%; text-align: center;
}
#notifPermBox i { font-size: 2.2rem; color: var(--c-primary); }
#notifPermBox h3 { margin: 12px 0 8px; font-size: 1.1rem; }
#notifPermBox p  { color: var(--c-gray-600); font-size: .9rem; margin-bottom: 20px; }
#notifPermBox button {
  display: block; width: 100%; padding: 14px;
  border: none; border-radius: 10px; font-size: 1rem;
  cursor: pointer; margin-bottom: 8px; font-weight: 600;
}
#btnAllowNotif { background: var(--c-primary); color: var(--c-white); }
#btnDenyNotif  { background: var(--c-gray-100); color: var(--c-gray-700); font-weight: 400; }

#notifToggle+.slider .circle,
#notifToggle:checked+.slider .circle {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTIgMjJjMS4xIDAgMi0uOSAyLTJoLTRjMCAxLjEuOSAyIDIgMnptNi02di01YzAtMy4wNy0xLjY0LTUuNjQtNC41LTYuMzJWNGMwLS44My0uNjctMS41LTEuNS0xLjVzLTEuNS42Ny0xLjUgMS41di42OEM3LjYzIDUuMzYgNiA3LjkyIDYgMTF2NWwtMiAydjFoMTZ2LTFsLTItMnoiLz48L3N2Zz4=");
}

/* ==========================================================================
   9. COMPONENTES SUELTOS (antes con estilo inline)
   ========================================================================== */
/* Chip de numero de ruta (InfoWindow de paradas cercanas) */
.route-badge {
  display: inline-block;
  background: var(--c-route);
  color: var(--c-white);
  border-radius: 4px;
  padding: 2px 7px;
  margin: 2px;
  font-size: 12px;
  font-weight: bold;
}
/* Aviso cuando el bus no tiene foto (#infoPanel). display:none va inline: el JS lo alterna. */
.info-photo-fallback {
  color: var(--c-gray-500);
  font-size: 13px;
  text-align: center;
  padding: 8px;
  background: var(--c-gray-50);
  border-radius: 6px;
}
/* Fila de listas dentro de modales (historial, favoritos) */
.modal-list-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--c-gray-100);
}

/* ==========================================================================
   10. BOTONES (.btn) — botones genericos fuera del sistema .modal-btn
   Uso: <button class="btn btn--primary">. Modificadores: --primary, --muted,
   --danger-outline, --lg. Con utilidades para margen (.u-mb-8).
   ========================================================================== */
.btn {
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 8px;
  color: var(--c-white);
  font-size: 13px;
  cursor: pointer;
}
.btn--primary { background: var(--c-primary); }
.btn--muted { background: var(--c-gray-600); }
.btn--lg { padding: 10px; font-size: 14px; font-weight: 600; }
.btn--danger-outline {
  background: transparent;
  color: var(--c-danger-strong);
  border: 1px solid var(--c-danger-strong);
}

/* ==========================================================================
   11. UTILIDADES
   Clases de un solo proposito para reemplazar estilos inline repetidos.
   Van al final del archivo: a igual especificidad ganan sobre las reglas
   de componente. Sin !important: no vencen a reglas con selector de ID.
   ========================================================================== */
.u-hidden { display: none; }
.u-m0 { margin: 0; }
.u-mt-0 { margin-top: 0; }
.u-mt-4 { margin-top: 4px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mb-8 { margin-bottom: 8px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-12 { margin-bottom: 12px; }
.u-text-primary { color: var(--c-primary); }
.u-text-success { color: var(--c-success); }
.u-text-danger { color: var(--c-danger); }
.u-text-white { color: var(--c-white); }
.u-text-muted { color: var(--c-gray-600); }
.u-text-subtle { color: var(--c-gray-550); }
.u-text-secondary { color: var(--c-secondary); }
.u-p-12 { padding: 12px; }
.u-text-center { text-align: center; }
.u-fs-12 { font-size: 12px; }
.u-flex-center { display: flex; justify-content: center; }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; }