* { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f2f5;
            color: #1c1e21;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            transition: background-color 0.2s, color 0.2s;
        }
        body.dark-mode {
            background-color: #18191a;
            color: #e4e6eb;
        }
        body.dark-mode .top-bar,
        body.dark-mode .filters-card,
        body.dark-mode .unit-card,
        body.dark-mode .settings-panel,
        body.dark-mode .empty-message,
        body.dark-mode .admin-card,
        body.dark-mode .footer-disclaimer {
            background-color: #242526;
            border-color: #3e4042;
        }
        body.dark-mode .card-header { background-color: #3a3b3c; border-bottom-color: #4e4f50; }
        body.dark-mode .tab-btn { color: #b0b3b8; }
        body.dark-mode .tab-btn.active { background-color: #3a3b3c; color: white; }
        body.dark-mode .status-chip { background-color: #3a3b3c; color: #e4e6eb; }
        body.dark-mode .status-chip.active-status { background-color: #ffffff; color: #18191a; }
        body.dark-mode .info-row i { color: #ffffff; }
        body.dark-mode .btn-reset { background-color: #3a3b3c; color: white; border: none; }
        body.dark-mode .filter-group select, body.dark-mode .filter-group input,
        body.dark-mode .admin-card select, body.dark-mode .admin-card input {
            background-color: #3a3b3c; border-color: #4e4f50; color: white;
        }
        body.dark-mode .form-agregar { background-color: #3a3b3c; }
        body.dark-mode .admin-panel table, body.dark-mode .admin-card table { color: #e4e6eb; }
        body.dark-mode .admin-panel td, body.dark-mode .admin-card td { border-bottom-color: #4e4f50; }
        body.dark-mode .footer-disclaimer { background-color: #1e1f22; border-top-color: #3e4042; }
        body.dark-mode .route-badge { box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
        body.dark-mode .admin-tab-btn { color: #e4e6eb; }
        body.dark-mode .admin-tab-btn.active { background: white; color: black; }
        body.dark-mode .user-item { border-bottom-color: #4e4f50; }
        body.dark-mode .settings-link { color: #4dabf7 !important; }

        :root { --primary-green: #78BE20; --primary-dark: #5a9216; --primary-light: #e2f3cc; --orange-warning: #f39c12; }

        .top-bar {
            background-color: #ffffff;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
            position: sticky;
            top: 0;
            z-index: 100;
            padding: 0.6rem 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            border-bottom: 1px solid #dddfe2;
        }
        .nav-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; }
        .tab-btn {
            background: transparent; border: none; font-size: 0.9rem; font-weight: 600;
            padding: 0.6rem 1rem; border-radius: 30px; color: #65676b; cursor: pointer;
            transition: all 0.2s; font-family: inherit; display: flex; align-items: center; gap: 8px;
        }
        .tab-btn:hover { background-color: #f0f2f5; color: var(--primary-green); }
        .tab-btn.active { background-color: var(--primary-light); color: var(--primary-dark); }
        .app-brand {
            font-weight: 700; font-size: 1.2rem;
            background: linear-gradient(135deg, var(--primary-green), var(--primary-dark));
            -webkit-background-clip: text; background-clip: text; color: transparent;
            display: flex; align-items: center; gap: 8px;
        }
        .app-logo {
            width: 34px;
            height: 34px;
            object-fit: contain;
            flex-shrink: 0;
        }
        body.dark-mode .app-brand { background: linear-gradient(135deg, #ffffff, #cccccc); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .live-clock {
            background: #f0f2f5; padding: 0.4rem 0.8rem; border-radius: 40px; font-weight: 600;
            font-size: 0.85rem; font-family: monospace; color: #1c1e21; box-shadow: inset 0 0 0 1px #e4e6eb;
        }
        body.dark-mode .live-clock { background: #3a3b3c; color: white; box-shadow: inset 0 0 0 1px #4e4f50; }
        .admin-login-btn {
            background: var(--primary-green); color: white; border: none; padding: 0.4rem 1rem;
            border-radius: 40px; font-weight: 600; cursor: pointer; font-size: 0.85rem;
        }
        .admin-login-btn:hover { background: var(--primary-dark); }
        body.dark-mode .admin-login-btn { background: #ffffff; color: #18191a; }
        .main-container { max-width: 1300px; margin: 1.5rem auto; padding: 0 1rem; flex: 1; }
        .footer-disclaimer {
            text-align: center;
            padding: 1.4rem clamp(0.8rem, 3vw, 2rem);
            background: #e9ecef;
            color: #5a6268;
            font-size: 0.75rem;
            border-top: 1px solid #ddd;
            margin-top: 2rem;
            overflow: hidden;
        }
        .footer-pattern-strip {
            width: 100%;
            min-height: 86px;
            margin: 0 0 1rem 0;
            background-image: url("footer-light.png");
            background-repeat: repeat-x;
            background-position: center;
            background-size: auto 86px;
        }
        .footer-warning {
            max-width: 920px;
            margin: 0 auto;
            line-height: 1.45;
        }
        .footer-links {
            margin-top: 15px;
            font-size: 0.9rem;
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            align-items: center;
        }
        .footer-links a {
            color: #1DA1F2;
            text-decoration: none;
            font-weight: 600;
        }
        .footer-links span {
            color: inherit;
        }
        body.dark-mode .footer-disclaimer {
            color: #cfd3da;
        }
        body.dark-mode .footer-pattern-strip {
            background-image: url("footer-dark.png");
        }
        @media (max-width: 600px) {
            .footer-disclaimer { padding: 1rem 0; }
            .footer-pattern-strip {
                min-height: 68px;
                background-size: auto 68px;
                margin-bottom: 0.8rem;
            }
            .footer-warning,
            .footer-links { padding-left: 0.75rem; padding-right: 0.75rem; }
            .footer-links { flex-direction: column; gap: 8px; font-size: 0.82rem; }
        }
        .units-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1rem; }
        @media (max-width: 900px) { .units-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .units-grid { grid-template-columns: 1fr; } }
        .route-badge { display: inline-block; padding: 4px 12px; border-radius: 30px; font-weight: 700; font-size: 0.8rem; color: white; text-shadow: 0 0 1px rgba(0,0,0,0.2); background-color: #6c757d; }
        .admin-modal { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); z-index:1000; justify-content: center; align-items: center; }
        .admin-modal.active { display: flex; }
        .admin-card { background: white; width: 90%; max-width: 1200px; max-height: 85vh; border-radius: 28px; overflow: auto; padding: 1.5rem; box-shadow: 0 20px 35px rgba(0,0,0,0.2); }
        .admin-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid #ddd; padding-bottom: 0.5rem; flex-wrap: wrap; }
        .admin-tab-btn { background: transparent; border: none; padding: 8px 16px; border-radius: 40px; cursor: pointer; font-weight: 500; }
        .admin-tab-btn.active { background: var(--primary-green); color: white; }
        .user-list { margin-top: 1rem; }
        .user-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #eee; }
        .filters-card { background: white; border-radius: 20px; padding: 1.2rem 1.5rem; margin-bottom: 1.8rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
        .coverage-notices {
            display: grid;
            gap: 0.75rem;
            margin-bottom: 1.2rem;
        }
        .coverage-notice {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            background: #fff8e8;
            border: 1px solid #f2d18a;
            border-left: 5px solid var(--orange-warning);
            color: #5c4800;
            padding: 0.9rem 1rem;
            border-radius: 18px;
            font-size: 0.88rem;
            line-height: 1.45;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        }
        .coverage-notice i {
            color: var(--orange-warning);
            margin-top: 2px;
            font-size: 1rem;
            flex-shrink: 0;
        }
        .coverage-notice.weekend {
            background: #eef6ff;
            border-color: #b9d9ff;
            border-left-color: #3498db;
            color: #173b5f;
        }
        .coverage-notice.weekend i { color: #3498db; }
        body.dark-mode .coverage-notice {
            background: #332b1d;
            border-color: #6f5728;
            color: #f2df9b;
            box-shadow: none;
        }
        body.dark-mode .coverage-notice.weekend {
            background: #1f2d3d;
            border-color: #315477;
            border-left-color: #4dabf7;
            color: #d8ecff;
        }
        body.dark-mode .coverage-notice.weekend i { color: #4dabf7; }
        @media (max-width: 600px) {
            .coverage-notice {
                font-size: 0.82rem;
                border-radius: 14px;
                padding: 0.8rem 0.85rem;
            }
        }

        .top-scrolling-notice {
            width: 100%;
            overflow: hidden;
            border-radius: 18px;
            margin-bottom: 1rem;
            background: #78BE20;
            color: #ffffff;
            border: 1px solid #5a9216;
            box-shadow: 0 1px 4px rgba(0,0,0,0.12);
        }
        .top-scrolling-notice-inner {
            display: inline-block;
            white-space: nowrap;
            padding: 0.75rem 0;
            font-weight: 800;
            letter-spacing: 0.04em;
            animation: topNoticeScroll 18s linear infinite;
        }
        .top-scrolling-notice-inner span {
            display: inline-block;
            padding-right: 4rem;
        }
        @keyframes topNoticeScroll {
            from { transform: translateX(100%); }
            to { transform: translateX(-100%); }
        }
        body.dark-mode .top-scrolling-notice {
            background: #ffffff;
            color: #000000;
            border-color: #ffffff;
        }
        .admin-notice-panel {
            display: grid;
            gap: 12px;
            padding: 14px;
            margin-bottom: 16px;
            background: #f0f2f5;
            border: 1px solid #e4e6eb;
            border-radius: 16px;
        }
        .admin-notice-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .admin-notice-btn {
            border: none;
            border-radius: 40px;
            padding: 8px 14px;
            cursor: pointer;
            font-weight: 700;
            color: #ffffff;
        }
        .admin-notice-maintenance { background: #111827; }
        .admin-notice-custom { background: var(--primary-green); }
        .admin-notice-clear { background: #e74c3c; }
        .admin-notice-preview {
            font-size: 0.85rem;
            color: #4e5969;
            line-height: 1.45;
        }
        body.dark-mode .admin-notice-panel {
            background: #323438;
            border-color: #4e4f50;
        }
        body.dark-mode .admin-notice-preview { color: #d8dde6; }

        .status-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 1px solid #e4e6eb; padding-bottom: 0.8rem; }
        .status-chip { background: #f0f2f5; padding: 6px 14px; border-radius: 30px; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
        .status-chip.active-status { background: var(--primary-green); color: white; }
        .btn-reset { background: #e4e6eb; border: none; padding: 6px 18px; border-radius: 40px; cursor: pointer; }
        .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }
        .filter-group { flex: 1; min-width: 160px; }
        .filter-group label { font-size: 0.7rem; font-weight: 600; color: #65676b; text-transform: uppercase; }
        .filter-group select, .filter-group input { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid #ccd0d5; background: white; }
        .unit-card { background: white; border-radius: 20px; overflow: hidden; border: 1px solid #e4e6eb; transition: opacity 0.2s; }
        .unit-card.finalizada { opacity: 0.7; background-color: #f9f9f9; }
        body.dark-mode .unit-card.finalizada { background-color: #2c2e33; }
        .card-header { background: #f7f8fa; padding: 0.9rem 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e9ebee; }
        .tipo-badge { font-weight: 700; background: var(--primary-light); color: var(--primary-dark); padding: 4px 12px; border-radius: 30px; font-size: 0.7rem; }
        .card-body { padding: 1rem; }
        .info-row { display: flex; gap: 12px; margin-bottom: 12px; font-size: 0.9rem; align-items: center; }
        .info-row i { width: 22px; color: var(--primary-green); }
        .info-label { font-weight: 500; color: #4e5969; min-width: 85px; }
        .status-tag { display: inline-block; padding: 3px 12px; border-radius: 50px; font-size: 0.7rem; background: #e9f5e9; color: #2e7d32; }
        .status-tag.paso { background: #fff3e0; color: #e67e22; }
        .finalized-tag { background: #95a5a6; color: white; margin-left: 6px; }
        .issue-tag { background: #34495e; color: white; margin-left: 6px; }
        .issue-tag.desincorporo_modulo { background: #7f8c8d; color: white; }
        .issue-tag.descompuesta { background: #c0392b; color: white; }
        .issue-tag.desviacion { background: #8e44ad; color: white; }
        .auto-finalized-tag { background: #566573; color: white; margin-left: 6px; }
        .pending-departure-tag { background: #f1c40f; color: #2c3e50; margin-left: 6px; font-weight: 800; }
        .paso-info, .hora-info { margin-top: 8px; padding: 8px; border-radius: 12px; font-size: 0.75rem; }
        .paso-info { background: #fff9e6; border-left: 3px solid var(--primary-green); color: #5c4800; }
        .hora-info { background: #f5f5f5; border-left: 3px solid #aaa; color: #4e5969; }
        body.dark-mode .info-label { color: #b8c0cc; }
        body.dark-mode .paso-info { background: #2d2a1f; border-left-color: var(--primary-green); color: #f2df9b; }
        body.dark-mode .hora-info { background: #323438; border-left-color: #8b949e; color: #e4e6eb; }
        body.dark-mode .hora-info i, body.dark-mode .paso-info i { color: #e4e6eb; }
        body.dark-mode .status-tag { background: #273d2a; color: #b9f6c7; }
        body.dark-mode .status-tag.paso { background: #3d311f; color: #ffd199; }
        body.dark-mode .finalized-tag { background: #6c757d; color: #ffffff; }
        body.dark-mode .issue-tag { color: #ffffff; }
        body.dark-mode .issue-tag.desincorporo_modulo { background: #5f6a6a; }
        body.dark-mode .issue-tag.descompuesta { background: #922b21; }
        body.dark-mode .issue-tag.desviacion { background: #6c3483; }
        body.dark-mode .auto-finalized-tag { background: #566573; color: #ffffff; }
        body.dark-mode .pending-departure-tag { background: #b7950b; color: #ffffff; }
        .empty-message { text-align: center; padding: 3rem; background: white; border-radius: 24px; }
        .local-warning { background: #fef5e7; border-left: 3px solid var(--orange-warning); padding: 6px 10px; border-radius: 12px; font-size: 0.7rem; margin-top: 8px; display: flex; align-items: center; gap: 6px; }
        .btn-finalize { background: #e67e22; color: white; border: none; border-radius: 20px; padding: 2px 8px; margin-left: 4px; cursor: pointer; }
        .btn-danger { background: #e74c3c; color: white; border: none; border-radius: 20px; padding: 2px 8px; cursor: pointer; }
        .admin-action-grid { display:flex; flex-wrap:wrap; gap:4px; min-width:240px; }
        .btn-issue { color:white; border:none; border-radius:20px; padding:2px 8px; cursor:pointer; }
        .btn-desincorporo { background:#7f8c8d; }
        .btn-descompuesta { background:#c0392b; }
        .btn-desviacion { background:#8e44ad; }
        .btn-reset-day { background: #e67e22; color: white; border: none; padding: 6px 12px; border-radius: 40px; cursor: pointer; margin-bottom: 10px; }
        
        body.dark-mode .form-routes-admin { background: #242526; }
        .form-routes-admin input, .form-routes-admin select { border: 1px solid #ccc; padding: 8px; border-radius: 6px; }

        .admin-search-panel {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin: 14px 0 16px;
            padding: 12px;
            background: #f0f2f5;
            border-radius: 14px;
            border: 1px solid #e4e6eb;
        }
        .admin-search-panel label {
            font-weight: 700;
            color: #4e5969;
        }
        .admin-search-panel input {
            flex: 1;
            min-width: 220px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid #ccd0d5;
            font-family: inherit;
        }
        .admin-search-count {
            font-size: 0.82rem;
            color: #65676b;
            font-weight: 600;
        }
        .admin-units-table {
            width: 100%;
            min-width: 980px;
            border-collapse: collapse;
            font-size: 0.9rem;
        }
        .admin-units-table th,
        .admin-units-table td {
            padding: 7px 8px;
            border-bottom: 1px solid #e4e6eb;
            vertical-align: middle;
        }
        .admin-units-table th { text-align: left; }
        body.dark-mode .admin-search-panel {
            background: #323438;
            border-color: #4e4f50;
        }
        body.dark-mode .admin-search-panel label,
        body.dark-mode .admin-search-count { color: #d8dde6; }
        body.dark-mode .admin-units-table th,
        body.dark-mode .admin-units-table td {
            border-bottom-color: #4e4f50;
        }

        .settings-panel { background: white; }
        body.dark-mode .settings-panel h4 { color: #d8dde6 !important; }
        body.dark-mode .settings-panel li span { color: #cfd3da !important; }
        body.dark-mode .settings-panel div[style*="background: #f0f2f5"] {
            background: #323438 !important;
            color: #e4e6eb !important;
        }
        body.dark-mode .settings-panel div[style*="background: #f0f2f5"] p {
            color: #d8dde6 !important;
        }


        body[data-service="EXPRESO"] .tab-btn.active { background-color: rgba(4, 145, 214, 0.16); color: #0491d6; }
        body[data-service="EXPRESO"] .status-chip.active-status { background-color: #0491d6; color: #ffffff; }
        body[data-service="EXPRESO"] .filters-card { border-top: 4px solid #0491d6; }
        body[data-service="ECOBUS"] .tab-btn.active { background-color: rgba(0, 170, 78, 0.16); color: #00aa4e; }
        body[data-service="ECOBUS"] .status-chip.active-status { background-color: #00aa4e; color: #ffffff; }
        body[data-service="ECOBUS"] .filters-card { border-top: 4px solid #00aa4e; }
        .tipo-badge.tipo-expreso { background: rgba(4, 145, 214, 0.14); color: #0491d6; }
        .tipo-badge.tipo-ecobus { background: rgba(0, 170, 78, 0.14); color: #00aa4e; }
        body.dark-mode .tipo-badge.tipo-expreso { background: #0491d6; color: #ffffff; }
        body.dark-mode .tipo-badge.tipo-ecobus { background: #00aa4e; color: #ffffff; }
        .admin-add-card {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 20px;
            align-items: flex-end;
            padding: 16px;
            border-radius: 18px;
            background: #f8f9fb;
            border: 1px solid #e4e6eb;
        }
        .admin-add-card label {
            display: block;
            font-size: 0.75rem;
            font-weight: 700;
            color: #4e5969;
            margin-bottom: 4px;
        }
        .admin-list-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }
        .admin-list-header p {
            margin-top: 6px;
            color: #65676b;
            font-size: 0.88rem;
        }
        body.dark-mode .admin-add-card {
            background: #323438;
            border-color: #4e4f50;
        }
        body.dark-mode .admin-add-card label,
        body.dark-mode .admin-list-header p { color: #d8dde6; }