:root {
      --bg: #0a0d13;
      --bg-2: #111824;
      --panel: linear-gradient(180deg, rgba(16,20,29,.97), rgba(11,15,23,.98));
      --sidebar: linear-gradient(180deg, #12253a 0%, #0d1725 100%);
      --card: linear-gradient(180deg, rgba(24,28,39,.96), rgba(12,16,24,.98));
      --card-soft: rgba(16, 27, 42, 0.75);
      --border: rgba(102, 145, 197, 0.18);
      --text: #f4f7fb;
      --muted: #a5b0c2;
      --accent: #ff123f;
      --accent-2: #d20f34;
      --blue: #17324c;
      --green: #79b75b;
      --short-bg: rgba(55, 125, 214, 0.10);
      --short-border: rgba(94, 158, 255, 0.35);
      --long-bg: rgba(255, 18, 63, 0.08);
      --long-border: rgba(255, 100, 127, 0.35);
      --radius: 22px;
      --font-scale: 1;
      --shadow: 0 18px 40px rgba(0,0,0,.35);
    }

    body.light {
      --bg: #eef2f7;
      --bg-2: #ffffff;
      --panel: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,252,.98));
      --sidebar: linear-gradient(180deg, #17324c 0%, #102134 100%);
      --card: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,253,.98));
      --card-soft: rgba(236, 241, 248, 0.92);
      --border: rgba(22, 50, 76, 0.12);
      --text: #111723;
      --muted: #556176;
      --shadow: 0 18px 40px rgba(20,27,40,.08);
      --short-bg: rgba(55, 125, 214, 0.08);
      --long-bg: rgba(255, 18, 63, 0.06);
    }

    * { box-sizing: border-box; }
    html { font-size: calc(16px * var(--font-scale)); }
    body {
      margin: 0;
      font-family: var(--font-family, Inter, Segoe UI, Arial, sans-serif);
      color: var(--menu-text, var(--text));
      background:
        radial-gradient(circle at top left, rgba(255,18,63,.14), transparent 26%),
        radial-gradient(circle at top right, rgba(59,119,255,.10), transparent 20%),
        var(--bg);
      min-height: 100vh;
    }

    .app {
      display: grid;
      grid-template-columns: 280px 1fr;
      min-height: 100vh;
      gap: 18px;
      padding: 18px;
    }

    .sidebar {
      background: var(--sidebar);
      border: 1px solid var(--border);
      border-radius: 28px;
      padding: 18px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 18px;
      position: sticky;
      top: 18px;
      height: calc(100vh - 36px);
    }
    .brand-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 999px;
      font-weight: 800;
      letter-spacing: .02em;
      width: fit-content;
    }
    .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px rgba(255,18,63,.6); }
    .sidebar h1 { margin: 0; font-size: 2.1rem; }
    .sidebar p { margin: 0; color: var(--muted); line-height: 1.5; }
    .divider { height: 1px; background: rgba(255,255,255,.08); margin: 2px 0; }

    .menu {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 4px;
    }
    .menu button {
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--text);
      font: inherit;
      text-align: left;
      border-radius: 18px;
      padding: 15px 16px;
      cursor: pointer;
      font-weight: 700;
      transition: .18s ease;
      transform-origin: center;
    }
    .menu button.active,
    .menu button:hover {
      background: linear-gradient(90deg, rgba(255,18,63,.18), rgba(255,18,63,.08));
      box-shadow: inset 0 0 0 1px rgba(255,18,63,.18);
      color: var(--active-text, #fff);
      transform: scale(var(--hover-scale, 1.02));
    }

    .user-card {
      margin-top: auto;
      padding: 18px;
      border-radius: 22px;
      background: rgba(255,255,255,.05);
      border: 1px solid var(--border);
    }
    .role-pill, .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      font-weight: 700;
      font-size: .9rem;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.08);
    }
    .role-pill.admin { background: rgba(255,255,255,.10); }
    .logout {
      margin-top: 14px;
      width: 100%;
      padding: 13px 16px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: var(--text);
      font-weight: 800;
      cursor: pointer;
    }

    .content {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .topbar {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 28px;
      min-height: 108px;
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 24px;
      gap: 18px;
    }
    .logo-wrap {
      display: flex;
      align-items: center;
      gap: 22px;
    }
    .logo-ir {
      font-size: 4.1rem;
      font-weight: 900;
      line-height: 1;
      font-style: italic;
      letter-spacing: -.06em;
      color: transparent;
      background: linear-gradient(180deg, #ff6c6c 0%, var(--accent) 45%, #990b26 100%);
      -webkit-background-clip: text;
      background-clip: text;
      text-shadow: 0 2px 18px rgba(255,18,63,.18);
    }
    .legend { display: flex; gap: 14px; flex-wrap: wrap; }
    .legend .pill { background: transparent; }
    .tag-short::before,.tag-long::before,.tag-rural::before {
      content: '';
      width: 14px; height: 14px; border-radius: 5px; display: inline-block;
    }
    .tag-short::before { background: var(--short-bg); border: 1px solid var(--short-border); }
    .tag-long::before { background: var(--long-bg); border: 1px solid var(--long-border); }
    .tag-rural::before { background: rgba(121,183,91,.18); border: 1px solid rgba(121,183,91,.5); }

    .panel {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 26px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .panel-header {
      padding: 18px 22px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(90deg, rgba(15,43,66,.86), rgba(15,43,66,.6));
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
    }
    .panel-header h2, .panel-header h3 { margin: 0; font-size: 1.45rem; }
    .panel-body { padding: 20px 22px 24px; }

    .section { display: none; }
    .section.active { display: block; }

    .summary-red {
      background: linear-gradient(180deg, #e01030 0%, #b20b28 100%);
      color: white;
      border-radius: 30px;
      padding: 20px;
      box-shadow: 0 22px 48px rgba(224,16,48,.26);
      margin-bottom: 18px;
    }
    .summary-red h2 { margin: 0 0 8px; font-size: 2.1rem; }
    .summary-red .top {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: flex-start;
      flex-wrap: wrap;
    }
    .summary-red .actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }

    .btn, .input, select, textarea {
      border-radius: 16px;
      border: 1px solid var(--border);
      padding: 12px 14px;
      font: inherit;
    }
    .btn {
      background: rgba(255,255,255,.08);
      color: inherit;
      cursor: pointer;
      font-weight: 800;
      transition: .18s ease;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn-primary {
      color: var(--button-text, #fff);
      background: var(--accent);
      color: white;
      border-color: rgba(255,255,255,.12);
    }
    .btn-ghost { background: transparent; }
    .btn.danger { background: rgba(255,18,63,.14); border-color: rgba(255,18,63,.22); color: white; }
    .btn-dark { background: rgba(0,0,0,.22); color: white; }
    .input, select, textarea {
      width: 100%;
      background: rgba(255,255,255,.05);
      color: var(--text);
    }
    textarea { min-height: 90px; resize: vertical; }

    .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
    .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
    .stat-card {
      padding: 20px;
      border-radius: 24px;
      background: var(--card);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }
    .stat-card .k { font-size: 3rem; font-weight: 900; margin: 8px 0 6px; }
    .muted { color: var(--muted); }

    .route-list, .history-list, .simple-list {
      display: flex; flex-direction: column; gap: 12px;
    }
    .route-item, .history-item, .simple-item {
      padding: 16px 18px;
      border-radius: 18px;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--border);
    }
    .route-item { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

    .calendar-wrap {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }
    .calendar-toolbar {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 16px;
    }
    .month-pill {
      background: var(--accent);
      color: white;
      font-weight: 900;
      padding: 14px 18px;
      border-radius: 18px;
      min-width: 160px;
      text-align: center;
    }
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0,1fr));
      gap: 10px;
    }
    .day-head {
      text-align: center;
      padding: 14px 10px;
      font-weight: 900;
      border-radius: 18px;
      background: #0a0a0d;
      color: white;
    }
    .day-cell {
      min-height: 138px;
      padding: 14px;
      border-radius: 20px;
      border: 1px solid var(--border);
      cursor: pointer;
      transition: .18s ease;
      background: rgba(255,255,255,.03);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .day-cell:hover { transform: translateY(-2px); }
    .day-cell.short { background: var(--short-bg); border-color: var(--short-border); }
    .day-cell.long { background: var(--long-bg); border-color: var(--long-border); }
    .day-cell.weekend { opacity: .72; }
    .day-cell.other { opacity: .42; }
    .day-cell.selected { box-shadow: inset 0 0 0 2px var(--accent); }
    .day-num { font-size: 1.55rem; font-weight: 900; }
    .mini-badges { display: flex; gap: 8px; flex-wrap: wrap; }
    .badge {
      display: inline-flex;
      padding: 6px 10px;
      border-radius: 999px;
      font-weight: 800;
      font-size: .82rem;
      width: fit-content;
    }
    .badge.short { background: rgba(114,170,255,.18); color: #8eb9ff; }
    .badge.long { background: rgba(255,129,153,.16); color: #ff8ca0; }
    .badge.rural { background: rgba(121,183,91,.16); color: #92ce73; }
    .badge.weekend { background: rgba(255,255,255,.08); color: var(--muted); }

    table { width: 100%; border-collapse: collapse; }
    th, td {
      text-align: left;
      padding: 14px 12px;
      border-bottom: 1px solid var(--border);
    }
    th { color: var(--muted); font-size: .95rem; }

    .toolbar-row {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }
    .toolbar-row > * { flex: 0 0 auto; }

    .modal-backdrop {
      position: fixed; inset: 0;
      background: rgba(4,8,14,.66);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center; justify-content: center;
      padding: 24px;
      z-index: 1000;
    }
    .modal-backdrop.show { display: flex; }
    .modal {
      width: min(1180px, 100%);
      max-height: calc(100vh - 48px);
      overflow: auto;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 28px;
      box-shadow: 0 30px 80px rgba(0,0,0,.45);
    }
    .modal-head {
      padding: 18px 22px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      position: sticky;
      top: 0;
      background: linear-gradient(180deg, rgba(18,24,35,.98), rgba(18,24,35,.95));
      z-index: 1;
    }
    .icon-btn {
      width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--border);
      background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; font-size: 1.2rem;
    }
    .modal-body { padding: 22px; }
    .route-summary-list { display:grid; gap:12px; }
    .route-summary-item {
      display:grid;
      grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.1fr) auto;
      gap:14px;
      align-items:center;
      padding:16px 18px;
      border:1px solid rgba(120,150,210,.18);
      border-radius:20px;
      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    }
    .route-summary-item .route-name { font-size:1.08rem; font-weight:900; }
    .route-summary-meta { color: var(--muted); line-height:1.45; }
    .route-summary-meta strong { color: var(--text); }
    .summary-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
    .compact-box {
      border:1px solid rgba(120,150,210,.16);
      border-radius:18px;
      padding:14px 16px;
      background: rgba(255,255,255,.02);
    }
    .compact-box h4 { margin:0 0 10px; font-size:1rem; }
    .mini-line { color: var(--muted); margin:4px 0; }
    .mini-line strong { color: var(--text); }
    .subtle-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
    .modal.slim { width:min(760px,100%); }


    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    .field { display: flex; flex-direction: column; gap: 8px; }
    .field label { font-weight: 800; }

    .route-form-row {
      padding: 16px;
      border-radius: 18px;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--border);
      display: grid;
      grid-template-columns: 180px minmax(180px,1fr) 120px repeat(4, minmax(120px,1fr)) minmax(180px,1.1fr);
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
    }
    .route-form-row.route-head { background: rgba(255,255,255,.02); font-size:.88rem; font-weight:800; color: var(--muted); }
    .route-form-row .route-name { font-weight:900; }
    .mini-label { font-size:.78rem; color: var(--muted); margin-bottom:4px; display:block; }
    .weekly-summary-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; margin-top:14px; }
    .summary-driver-card { padding:16px; border-radius:18px; background: rgba(255,255,255,.04); border: 1px solid var(--border); }
    .schedule-card {
      padding: 16px;
      border-radius: 18px;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--border);
    }

    .hidden { display: none !important; }

    @media (max-width: 1180px) {
      .app { grid-template-columns: 1fr; }
      .sidebar { position: static; height: auto; }
      .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .grid-2 { grid-template-columns: 1fr; }
      .route-form-row { grid-template-columns: 1fr; }
    }
    @media (max-width: 760px) {
      .topbar { flex-direction: column; align-items: flex-start; }
      .grid-4 { grid-template-columns: 1fr; }
      .calendar-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .day-head:nth-child(n+3) { display: none; }
      .form-grid { grid-template-columns: 1fr; }
    }
html body.ir-despacho-public-page { margin:0; background:#0a0d13; }
.ir-public-page { min-height:100vh; background: radial-gradient(circle at top left, rgba(255,18,63,.14), transparent 26%), radial-gradient(circle at top right, rgba(59,119,255,.10), transparent 20%), #0a0d13; }
.ir-login-wrap { min-height:100vh; display:grid; place-items:center; padding:30px 18px; background: radial-gradient(circle at top left, rgba(255,18,63,.14), transparent 24%), radial-gradient(circle at top right, rgba(59,119,255,.10), transparent 20%), #0a0d13; }
.ir-login-card { width:min(460px,100%); background: linear-gradient(180deg, rgba(16,20,29,.97), rgba(11,15,23,.98)); border:1px solid rgba(102,145,197,.18); border-radius:28px; box-shadow:0 18px 40px rgba(0,0,0,.35); overflow:hidden; color:#f4f7fb; }
.ir-login-head { padding:28px 28px 16px; background:linear-gradient(180deg,rgba(20,42,68,.92),rgba(13,20,31,.92)); border-bottom:1px solid rgba(102,145,197,.18); }
.ir-login-body { padding:28px; }
.ir-login-body label { display:block; font-weight:800; margin-bottom:8px; color:#f4f7fb; }
.ir-login-body input[type=text], .ir-login-body input[type=password] { width:100%; border:1px solid rgba(92,129,180,.25); background:rgba(255,255,255,.04); color:#f4f7fb; border-radius:16px; padding:16px 14px; font-size:1rem; outline:none; margin-bottom:16px; }
.ir-login-body input[type=submit] { width:100%; border:0; border-radius:16px; padding:16px 18px; background:linear-gradient(180deg,#ff234e,#d20f34); color:#fff; font-weight:900; cursor:pointer; }
.ir-admin-card { background:#fff; border:1px solid #dcdcde; border-radius:14px; padding:20px; margin-top:18px; }
.ir-admin-grid { display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.ir-admin-grid input, .ir-admin-grid select { width:100%; }
@media (max-width: 980px) { .ir-admin-grid { grid-template-columns: 1fr; } }

:root{
  --accent: var(--accent, #ff123f);
  --bg: var(--bg, #0a0d13);
  --sidebar: var(--sidebar, #0d2237);
  --panel-solid: var(--panel-solid, #10141d);
  --text: var(--text, #f4f7fb);
  --muted: var(--muted, #a5b0c2);
  --header: var(--header, #14324a);
  --card: var(--card, #0d1522);
}
body,.ir-public-page{background:var(--bg)!important;}
.sidebar{background:linear-gradient(180deg,var(--sidebar), var(--sidebar))!important;}
.topbar,.panel,.schedule-card,.user-card,.modal,.route-summary-item,.compact-box{background:linear-gradient(180deg, var(--panel-solid), var(--card))!important;}
.panel-header,.topbar{border-color:rgba(120,150,210,.18)!important;}
.panel-header{background:linear-gradient(90deg, var(--header), var(--header))!important;}
body,.content,.sidebar,h1,h2,h3,h4,.route-name,.btn,table,td,th{color:var(--text);}
.muted,.sidebar p,.mini-line,.route-summary-meta,.month-pill+.muted{color:var(--muted)!important;}
.btn-primary,.month-pill,.summary-red,.menu button.active{background:linear-gradient(180deg, var(--accent), var(--accent))!important;}

#routesCheckboxList input[type="checkbox"]{
  width:18px;
  height:18px;
  margin-top:2px;
}

#routesCheckboxList input[type="checkbox"]{
  width:18px;
  height:18px;
  margin-top:2px;
}


/* Fix tema claro: modales y fondo sólido */
body.light-theme .modal-backdrop,
.app-shell.light .modal-backdrop,
body[data-theme="light"] .modal-backdrop {
  background: rgba(245, 247, 251, 0.72) !important;
  backdrop-filter: blur(10px);
}

body.light-theme .modal,
.app-shell.light .modal,
body[data-theme="light"] .modal {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12) !important;
}

body.light-theme .modal .modal-head,
.app-shell.light .modal .modal-head,
body[data-theme="light"] .modal .modal-head {
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

body.light-theme .modal .schedule-card,
body.light-theme .modal .route-summary-item,
body.light-theme .modal .summary-grid > *,
.app-shell.light .modal .schedule-card,
.app-shell.light .modal .route-summary-item,
.app-shell.light .modal .summary-grid > *,
body[data-theme="light"] .modal .schedule-card,
body[data-theme="light"] .modal .route-summary-item,
body[data-theme="light"] .modal .summary-grid > * {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

body.light-theme .modal textarea,
body.light-theme .modal input,
body.light-theme .modal select,
.app-shell.light .modal textarea,
.app-shell.light .modal input,
.app-shell.light .modal select,
body[data-theme="light"] .modal textarea,
body[data-theme="light"] .modal input,
body[data-theme="light"] .modal select {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
}

body.light-theme .modal .muted,
.app-shell.light .modal .muted,
body[data-theme="light"] .modal .muted {
  color: #6b7280 !important;
}


/* Popup totalmente sólido en tema claro */
body.light-theme .modal,
.app-shell.light .modal,
body[data-theme="light"] .modal,
body.light-theme .modal .modal-body,
body.light-theme .modal .schedule-card,
body.light-theme .modal .route-summary-item,
body.light-theme .modal .summary-grid > *,
.app-shell.light .modal .modal-body,
.app-shell.light .modal .schedule-card,
.app-shell.light .modal .route-summary-item,
.app-shell.light .modal .summary-grid > *,
body[data-theme="light"] .modal .modal-body,
body[data-theme="light"] .modal .schedule-card,
body[data-theme="light"] .modal .route-summary-item,
body[data-theme="light"] .modal .summary-grid > * {
  background: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
}

body.light-theme .modal .btn,
.app-shell.light .modal .btn,
body[data-theme="light"] .modal .btn {
  background-image: none !important;
}


/* Tema claro: popup totalmente sólido blanco */
body.light-theme .modal-backdrop,
.app-shell.light .modal-backdrop,
body[data-theme="light"] .modal-backdrop {
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(8px);
}

body.light-theme .modal,
body.light-theme .modal .modal-head,
body.light-theme .modal .modal-body,
body.light-theme .modal .schedule-card,
body.light-theme .modal .route-summary-item,
body.light-theme .modal .summary-grid > *,
.app-shell.light .modal,
.app-shell.light .modal .modal-head,
.app-shell.light .modal .modal-body,
.app-shell.light .modal .schedule-card,
.app-shell.light .modal .route-summary-item,
.app-shell.light .modal .summary-grid > *,
body[data-theme="light"] .modal,
body[data-theme="light"] .modal .modal-head,
body[data-theme="light"] .modal .modal-body,
body[data-theme="light"] .modal .schedule-card,
body[data-theme="light"] .modal .route-summary-item,
body[data-theme="light"] .modal .summary-grid > * {
  background: #ffffff !important;
  background-image: none !important;
  color: #111827 !important;
  opacity: 1 !important;
}

body.light-theme .modal textarea,
body.light-theme .modal input,
body.light-theme .modal select,
.app-shell.light .modal textarea,
.app-shell.light .modal input,
.app-shell.light .modal select,
body[data-theme="light"] .modal textarea,
body[data-theme="light"] .modal input,
body[data-theme="light"] .modal select {
  background:#ffffff !important;
  color:#111827 !important;
}


/* FIX definitivo: popup sólido en todos los equipos/navegadores */
.modal-backdrop {
  background: rgba(7, 12, 20, 0.58) !important;
  backdrop-filter: blur(8px);
}

.modal {
  background: #0f1724 !important;
  background-image: none !important;
  opacity: 1 !important;
  color: #f4f7fb !important;
  border: 1px solid rgba(90, 120, 170, 0.22) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42) !important;
}

.modal .modal-head,
.modal .modal-body,
.modal .schedule-card,
.modal .route-summary-item,
.modal .summary-grid > * {
  background: #0f1724 !important;
  background-image: none !important;
  opacity: 1 !important;
  color: inherit !important;
}

.modal input,
.modal textarea,
.modal select {
  background: #121c2b !important;
  color: #f4f7fb !important;
  opacity: 1 !important;
}

.modal .muted {
  color: #aab6c8 !important;
}

/* Tema claro: popup blanco sólido real */
body.light-theme .modal-backdrop,
.app-shell.light .modal-backdrop,
body[data-theme="light"] .modal-backdrop {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(8px);
}

body.light-theme .modal,
body.light-theme .modal .modal-head,
body.light-theme .modal .modal-body,
body.light-theme .modal .schedule-card,
body.light-theme .modal .route-summary-item,
body.light-theme .modal .summary-grid > *,
.app-shell.light .modal,
.app-shell.light .modal .modal-head,
.app-shell.light .modal .modal-body,
.app-shell.light .modal .schedule-card,
.app-shell.light .modal .route-summary-item,
.app-shell.light .modal .summary-grid > *,
body[data-theme="light"] .modal,
body[data-theme="light"] .modal .modal-head,
body[data-theme="light"] .modal .modal-body,
body[data-theme="light"] .modal .schedule-card,
body[data-theme="light"] .modal .route-summary-item,
body[data-theme="light"] .modal .summary-grid > * {
  background: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
  color: #111827 !important;
}

body.light-theme .modal input,
body.light-theme .modal textarea,
body.light-theme .modal select,
.app-shell.light .modal input,
.app-shell.light .modal textarea,
.app-shell.light .modal select,
body[data-theme="light"] .modal input,
body[data-theme="light"] .modal textarea,
body[data-theme="light"] .modal select {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
}

body.light-theme .modal .muted,
.app-shell.light .modal .muted,
body[data-theme="light"] .modal .muted {
  color: #6b7280 !important;
}


/* fix custom: modales sólidos */
.modal-backdrop{
  background: rgba(10, 14, 24, 0.62) !important;
  backdrop-filter: blur(8px);
}
.modal,
.modal .modal-head,
.modal .modal-body,
.modal .schedule-card,
.modal .route-summary-item,
.modal .summary-grid > *{
  background: #0f1724 !important;
  background-image: none !important;
  opacity: 1 !important;
}
.modal input,
.modal textarea,
.modal select{
  background:#121c2b !important;
  color:#f4f7fb !important;
  opacity:1 !important;
}
.modal .muted{
  color:#aab6c8 !important;
}

/* modo claro */
body.light-theme .modal-backdrop,
.app-shell.light .modal-backdrop,
body[data-theme="light"] .modal-backdrop{
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(8px);
}
body.light-theme .modal,
body.light-theme .modal .modal-head,
body.light-theme .modal .modal-body,
body.light-theme .modal .schedule-card,
body.light-theme .modal .route-summary-item,
body.light-theme .modal .summary-grid > *,
.app-shell.light .modal,
.app-shell.light .modal .modal-head,
.app-shell.light .modal .modal-body,
.app-shell.light .modal .schedule-card,
.app-shell.light .modal .route-summary-item,
.app-shell.light .modal .summary-grid > *,
body[data-theme="light"] .modal,
body[data-theme="light"] .modal .modal-head,
body[data-theme="light"] .modal .modal-body,
body[data-theme="light"] .modal .schedule-card,
body[data-theme="light"] .modal .route-summary-item,
body[data-theme="light"] .modal .summary-grid > *{
  background:#ffffff !important;
  background-image:none !important;
  color:#111827 !important;
  opacity:1 !important;
}
body.light-theme .modal input,
body.light-theme .modal textarea,
body.light-theme .modal select,
.app-shell.light .modal input,
.app-shell.light .modal textarea,
.app-shell.light .modal select,
body[data-theme="light"] .modal input,
body[data-theme="light"] .modal textarea,
body[data-theme="light"] .modal select{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid rgba(15,23,42,.12) !important;
}
body.light-theme .modal .muted,
.app-shell.light .modal .muted,
body[data-theme="light"] .modal .muted{
  color:#6b7280 !important;
}