:root { --navy:#082c5c; --blue:#0677cf; --blue-soft:#e8f3ff; --ink:#13233a; --muted:#64748b; --line:#dce3eb; --canvas:#f4f7fa; --panel:#fff; --green:#118560; --amber:#bd7210; --danger:#b64949; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font:14px "DM Sans",sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.topbar { height:64px; display:flex; align-items:center; gap:16px; padding:0 24px; background:var(--navy); color:#fff; }
.brand { display:flex; align-items:center; gap:10px; color:#fff; font:700 18px "Space Grotesk",sans-serif; text-decoration:none; }.brand small { display:block; color:#93c5fd; font:600 9px "DM Sans",sans-serif; letter-spacing:1.4px; }.brand-mark { display:grid; place-items:center; width:30px; height:30px; border:2px solid #fff; border-radius:5px; }.topbar-spacer { flex:1; }.environment { display:flex; align-items:center; gap:6px; padding:6px 10px; color:#8de5bd; border:1px solid #246746; border-radius:99px; font-size:12px; text-transform:uppercase; letter-spacing:.7px; }.environment svg { width:14px; }.avatar { width:34px; height:34px; border:0; border-radius:50%; background:#ed5a27; color:#fff; font-weight:700; }
.icon-button { display:inline-grid; place-items:center; width:36px; height:36px; border:0; border-radius:5px; background:transparent; color:inherit; }.icon-button:hover { background:rgba(255,255,255,.12); }.icon-button svg { width:19px; }.mobile-menu { display:none; }
.app-shell { display:flex; min-height:calc(100vh - 64px); }.sidebar { width:246px; flex:0 0 246px; padding:28px 12px 16px; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; }.nav-label { margin:0 10px 10px; color:#748196; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }.nav-item { display:flex; align-items:center; width:100%; gap:12px; padding:12px 14px; border:0; border-radius:5px; color:#46546a; background:transparent; text-align:left; }.nav-item svg { width:18px; }.nav-item:hover,.nav-item.active { color:var(--blue); background:var(--blue-soft); font-weight:600; }.nav-label-bottom { margin-top:32px; }.sidebar-footer { margin-top:auto; padding:14px 10px 2px; border-top:1px solid var(--line); color:#40506a; font-weight:700; }.sidebar-footer span { color:var(--muted); font-size:12px; font-weight:400; }
.content { width:calc(100% - 246px); padding:34px 40px 48px; }.view { display:none; max-width:1420px; margin:auto; }.view.active { display:block; }.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }.eyebrow { margin:0 0 6px; color:var(--blue); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }h1,h2 { margin:0; font-family:"Space Grotesk",sans-serif; }h1 { font-size:29px; letter-spacing:0; }h2 { font-size:17px; }.page-heading p:not(.eyebrow),.panel-header p,.catalog-card p,.empty-state p { margin:7px 0 0; color:var(--muted); }
.primary-button,.secondary-button,.text-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; border-radius:5px; padding:0 14px; font-weight:600; }.primary-button { border:1px solid var(--blue); background:var(--blue); color:#fff; }.primary-button:hover { background:#0565af; }.secondary-button { border:1px solid #bdc9d7; background:#fff; color:#38506d; }.secondary-button:hover { background:#f5f8fb; }.text-button { border:0; background:transparent; padding:0; color:var(--blue); }.text-button svg { width:16px; }.text-button.muted { color:#94a3b8; cursor:default; }
.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:24px; }.metric-card,.panel,.catalog-card { background:var(--panel); border:1px solid var(--line); border-radius:7px; }.metric-card { display:flex; gap:15px; padding:21px; }.metric-card p { margin:0; color:var(--muted); }.metric-card strong { display:block; margin:2px 0; font:700 30px "Space Grotesk",sans-serif; }.metric-card small { color:var(--muted); }.metric-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:6px; }.metric-icon svg { width:21px; }.metric-icon.blue { color:var(--blue); background:var(--blue-soft); }.metric-icon.green { color:var(--green); background:#e5f6ee; }.metric-icon.amber { color:var(--amber); background:#fff3da; }
.panel-header { display:flex; justify-content:space-between; align-items:center; padding:20px 22px; border-bottom:1px solid var(--line); }.recent-list { padding:0 22px; }.recent-row { display:grid; grid-template-columns:1.2fr 1.2fr 1fr 1fr; gap:20px; align-items:center; min-height:61px; border-bottom:1px solid #edf1f5; }.recent-row:last-child { border:0; }.recent-route { font-weight:600; }.recent-cell { color:var(--muted); }.recent-price { color:var(--ink); font-weight:700; text-align:right; }
.toolbar { display:flex; gap:10px; padding:18px; border-bottom:1px solid var(--line); }.route-searches { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); flex:1; min-width:0; gap:10px; }.search-field { position:relative; flex:1; max-width:430px; }.route-searches .search-field { max-width:none; }.search-field svg { position:absolute; top:10px; left:11px; width:17px; color:var(--muted); }.search-field input,.toolbar select, .form-grid input,.form-grid select { height:38px; width:100%; border:1px solid #bcc8d5; border-radius:4px; outline:0; background:#fff; color:var(--ink); }.search-field input { padding:0 12px 0 37px; }.toolbar select { width:160px; padding:0 10px; }.search-field input:focus,.toolbar select:focus,.form-grid input:focus,.form-grid select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(6,119,207,.12); }.tariff-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }.table-wrap { overflow-x:auto; }table { width:100%; min-width:1330px; border-collapse:collapse; }th { padding:13px 18px; background:#f8fafc; color:#64748b; font-size:11px; letter-spacing:.3px; text-align:left; text-transform:uppercase; }td { padding:15px 18px; border-top:1px solid #edf1f5; white-space:nowrap; }.selection-column { width:1%; padding-right:0; text-align:center; }.selection-column input { width:16px; height:16px; accent-color:var(--blue); }.tariff-panel tbody tr + tr td { border-top:2px solid rgba(8,44,92,.18); }td.route { font-weight:600; }td.money { font-variant-numeric:tabular-nums; font-weight:700; }.status { display:inline-block; padding:4px 9px; border-radius:99px; font-size:12px; font-weight:600; }.status.vigente { color:#087052; background:#dff6ed; }.status.borrador { color:#9a620a; background:#fff1d8; }.row-action { width:30px; height:30px; padding:0; border:0; border-radius:4px; background:transparent; color:#4a617b; }.row-action:hover { background:var(--blue-soft); color:var(--blue); }.row-action svg { width:17px; }.table-footer { display:flex; justify-content:space-between; padding:14px 18px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.catalog-card { padding:24px; }.catalog-card > span { display:grid; place-items:center; width:42px; height:42px; border-radius:6px; background:var(--blue-soft); color:var(--blue); margin-bottom:18px; }.catalog-card > span svg { width:21px; }.catalog-card h2 { margin-bottom:8px; }.catalog-card .text-button { margin-top:20px; }.active-catalog { border-top:3px solid var(--blue); }.empty-state { display:grid; place-items:center; min-height:260px; padding:35px; text-align:center; background:#fff; border:1px dashed #b9c7d5; border-radius:7px; }.empty-state > svg { width:35px; height:35px; margin-bottom:12px; color:var(--blue); }.empty-state h2 { font-size:18px; }
dialog { width:min(650px,calc(100% - 32px)); padding:0; border:0; border-radius:8px; box-shadow:0 25px 60px rgba(15,23,42,.28); }dialog::backdrop { background:rgba(6,25,52,.55); }.modal-header { display:flex; justify-content:space-between; align-items:flex-start; padding:22px 24px 18px; border-bottom:1px solid var(--line); }.modal-header .icon-button { color:#536276; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; padding:22px 24px; }.form-grid label { display:grid; gap:7px; color:#40516a; font-size:13px; font-weight:600; }.form-grid input,.form-grid select { padding:0 10px; font-weight:400; }.full-width { grid-column:1 / -1; }.modal-actions { display:flex; justify-content:flex-end; gap:10px; padding:17px 24px; border-top:1px solid var(--line); }.toast { position:fixed; right:24px; bottom:24px; transform:translateY(100px); opacity:0; z-index:5; padding:12px 16px; border-radius:5px; background:#12365e; color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.18); transition:.2s ease; }.toast.visible { transform:translateY(0); opacity:1; }
@media (max-width:850px) { .topbar { padding:0 14px; }.mobile-menu { display:grid; }.sidebar { position:fixed; z-index:4; top:64px; bottom:0; transform:translateX(-100%); transition:transform .2s; box-shadow:8px 0 18px rgba(0,0,0,.12); }.sidebar.open { transform:translateX(0); }.content { width:100%; padding:26px 18px; }.metric-grid,.catalog-grid { grid-template-columns:1fr; }.page-heading { align-items:flex-start; flex-direction:column; }.recent-row { grid-template-columns:1fr 1fr; gap:5px; padding:12px 0; }.recent-price { text-align:left; }.toolbar { flex-wrap:wrap; }.route-searches { flex-basis:100%; grid-template-columns:1fr; }.search-field { flex-basis:100%; max-width:none; }.toolbar select { flex:1; }.table-footer { gap:8px; flex-direction:column; }.environment { display:none; } }
@media (max-width:480px) { .brand { font-size:16px; }.form-grid { grid-template-columns:1fr; }.full-width { grid-column:auto; }.page-heading h1 { font-size:25px; }.metric-card { padding:17px; } }.comparison-help { padding:0 18px; color:var(--muted); line-height:1.8; }
.legend-green,.legend-yellow { padding:3px 7px; border-radius:4px; }
.legend-green,tr.cheapest { background:#e7f5eb; }
.legend-yellow,tr.alternative { background:#fff8df; }
.price-label { display:block; margin-top:5px; font-size:11px; font-weight:500; color:#52644f; }
tr[data-tariff-id] { cursor:pointer; }
tr[data-tariff-id]:hover { outline:1px solid #99b4c8; outline-offset:-1px; }
#detail-modal { width:min(920px,calc(100% - 32px)); max-height:90vh; }
.detail-content { padding:22px 24px; }
.detail-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:0 0 24px; }
.detail-fields dt { color:var(--muted); font-size:12px; }
.detail-fields dd { margin:5px 0 0; font-weight:600; overflow-wrap:anywhere; }
.detail-content section { border-top:1px solid var(--line); padding:20px 0; }
.detail-content section > p { color:var(--muted); }
#document-form { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
#document-preview { width:100%; height:420px; margin-top:14px; border:1px solid var(--line); border-radius:5px; }
#document-link { color:var(--blue); }
#note-form { display:grid; gap:12px; margin:18px 0; }
#note-form label { display:grid; gap:7px; font-weight:600; }
#note-form input,#note-form textarea { width:100%; border:1px solid #bcc8d5; border-radius:5px; padding:10px; font:inherit; }
#note-form button { justify-self:start; }
.note { border:1px solid var(--line); border-radius:6px; padding:14px; margin:10px 0; background:#f8fafc; }
.note > div { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.note time { font-size:12px; color:var(--muted); }
.note p { white-space:pre-wrap; overflow-wrap:anywhere; margin-bottom:0; }
button:disabled { opacity:.6; cursor:wait; }
[hidden] { display:none !important; }
@media(max-width:600px) { .detail-fields { grid-template-columns:1fr 1fr; } .detail-content { padding:16px; } }
.module-toggle { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 10px; border:1px solid rgba(255,255,255,.3); border-radius:5px; background:transparent; color:#fff; font-weight:600; white-space:nowrap; }
.module-toggle:hover { background:rgba(255,255,255,.12); }
.module-toggle svg { width:18px; }
.modules-hidden .sidebar { display:none; }
.modules-hidden .content { width:100%; }
.detail-actions { display:flex; align-items:center; gap:8px; }
.change-entry { margin:12px 0; padding:14px; border:1px solid var(--line); border-radius:6px; background:#f8fafc; }
.change-entry-header { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.change-entry time { color:var(--muted); font-size:12px; }
.change-entry ul { display:grid; gap:10px; margin:14px 0 0; padding:0; list-style:none; }
.change-entry li { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding-top:9px; border-top:1px solid var(--line); }
.change-entry li > strong { color:#40516a; }
.change-entry li small { display:block; color:var(--muted); font-size:11px; }
@media(max-width:600px) { .module-toggle { width:36px; justify-content:center; padding:0; }.module-toggle span { display:none; }.module-toggle svg { width:16px; }.detail-actions { gap:4px; }.detail-actions .secondary-button { min-height:34px; padding:0 8px; font-size:12px; }.change-entry li { grid-template-columns:1fr; gap:5px; } }
.excel-import-panel { margin-top:24px; scroll-margin-top:20px; }
#excel-import-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:22px; }
#excel-import-form label { display:grid; gap:7px; color:#40516a; font-size:13px; font-weight:600; }
#excel-import-form input,#excel-import-form select { min-width:0; height:38px; width:100%; padding:0 10px; border:1px solid #bcc8d5; border-radius:4px; background:#fff; color:var(--ink); font:inherit; }
#excel-import-form input[type=file] { padding:7px; }
#excel-import-form input:focus,#excel-import-form select:focus { outline:0; border-color:var(--blue); box-shadow:0 0 0 3px rgba(6,119,207,.12); }
.excel-import-help,.excel-import-result { grid-column:1/-1; margin:0; color:var(--muted); line-height:1.6; }
.excel-import-result:not(:empty) { padding:12px; border-radius:5px; background:#f3f7fb; }
@media(max-width:700px) { #excel-import-form { grid-template-columns:1fr; padding:16px; }.excel-import-help,.excel-import-result { grid-column:auto; } }
.account-controls { display:flex; align-items:center; gap:12px; color:#fff; }
.account-controls > span { display:grid; gap:2px; }
.account-controls small { color:#c4d8ef; font-size:11px; }
.account-controls .secondary-button { min-height:34px; padding:0 10px; font-size:12px; }
.portal-page,.public-routes-page,.login-page { width:calc(100% - 40px); padding:52px 0; }
.portal-page > h1,.public-routes-page h1,.login-page h1 { margin-bottom:8px; }
.portal-intro { margin:0; color:var(--muted); }
.portal-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:28px; }
.portal-card { display:flex; flex-direction:column; align-items:flex-start; min-height:275px; padding:28px; background:#fff; border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:8px; box-shadow:0 8px 24px rgba(15,23,42,.04); }
.portal-card > span { display:grid; place-items:center; width:44px; height:44px; margin-bottom:20px; border-radius:7px; background:var(--blue-soft); color:var(--blue); }
.portal-card > span svg { width:22px; }
.portal-card h2 { margin-bottom:8px; font-size:21px; }
.portal-card > p:not(.eyebrow) { flex:1; max-width:520px; margin:0 0 20px; color:var(--muted); line-height:1.6; }
.private-card { border-top-color:#718096; }
.private-card > span { color:#42536a; background:#edf1f5; }
.public-route-table { min-width:520px; }
.login-page { justify-items:center; gap:14px; }
.view.login-page { display:none; }
.view.login-page.active { display:grid; }
.auth-card { display:grid; gap:14px; width:min(440px,100%); padding:28px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(15,23,42,.05); }
.auth-card h1 { font-size:25px; }
.auth-card > p:not(.eyebrow):not(.form-message) { margin:0; color:var(--muted); }
.auth-card label,.user-create-form label { display:grid; gap:7px; color:#40516a; font-size:13px; font-weight:600; }
.auth-card input,.user-create-form input,.user-create-form select,.users-table input,.users-table select { min-width:0; height:38px; padding:0 10px; border:1px solid #bcc8d5; border-radius:4px; background:#fff; color:var(--ink); font:inherit; }
.auth-card input:focus,.user-create-form input:focus,.user-create-form select:focus,.users-table input:focus,.users-table select:focus { outline:0; border-color:var(--blue); box-shadow:0 0 0 3px rgba(6,119,207,.12); }
.form-message { margin:0; color:var(--danger); line-height:1.5; }
.setup-link { justify-self:center; }
.user-management { margin-top:20px; }
.user-create-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:end; padding:20px 22px; }
.user-create-form button { grid-column:1/-1; justify-self:start; }
.users-table { min-width:960px; }
.users-table td { white-space:normal; }
.users-table td:nth-child(1),.users-table td:nth-child(2) { white-space:nowrap; }
.users-table input,.users-table select { width:100%; }
.users-table small { color:var(--muted); }
.read-only .write-permission { display:none !important; }
@media(max-width:850px) { .account-controls { gap:6px; }.account-controls > span { display:none; }.portal-page,.public-routes-page,.login-page { width:calc(100% - 32px); padding:30px 0; }.user-create-form { grid-template-columns:1fr 1fr; } }
@media(max-width:600px) { .portal-cards { grid-template-columns:1fr; }.portal-card { min-height:230px; padding:22px; }.account-controls .secondary-button { padding:0 7px; font-size:11px; }.user-create-form { grid-template-columns:1fr; padding:16px; } }

.login-page {
  width:100%;
  max-width:none;
  min-height:calc(100vh - 64px);
  padding:clamp(24px, 5vw, 72px);
  place-items:center;
  background:
    linear-gradient(100deg, rgba(4, 25, 51, .91) 0%, rgba(5, 42, 82, .76) 48%, rgba(5, 31, 59, .58) 100%),
    url("assets/container-loader.jpg") center / cover no-repeat;
}
.login-shell {
  display:grid;
  grid-template-columns:minmax(280px, 1fr) minmax(360px, 440px);
  align-items:center;
  width:min(1120px, 100%);
  min-height:540px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  border-radius:16px;
  box-shadow:0 28px 80px rgba(3, 18, 38, .35);
}
.login-intro {
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(32px, 6vw, 72px);
  color:#fff;
  background:linear-gradient(180deg, rgba(5, 31, 59, .04), rgba(5, 31, 59, .76));
}
.login-intro .eyebrow { color:#a9dbff; }
.login-intro h1 { max-width:520px; font-size:clamp(32px, 4vw, 52px); line-height:1.04; }
.login-intro > p:not(.eyebrow) { max-width:440px; margin:20px 0 0; color:#d8e8f5; font-size:16px; line-height:1.65; }
.login-intro .login-quote-author { margin-top:12px; color:#a9dbff; font-size:13px; font-weight:600; }
.login-panel {
  display:grid;
  align-content:center;
  gap:18px;
  min-height:540px;
  padding:34px;
  background:rgba(255,255,255,.97);
}
.login-brand {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.login-brand > img:first-child { width:min(205px, calc(100% - 82px)); height:auto; }
.login-brand .certification-logo { width:62px; height:62px; object-fit:contain; }
.login-panel .auth-card { width:100%; padding:0; border:0; border-radius:0; box-shadow:none; }
.login-panel .auth-card .primary-button { width:100%; margin-top:2px; min-height:42px; }
.login-panel .setup-link { justify-self:start; }

/* Keep the tariff table's horizontal scrollbar in the visible work area. */
#tarifas { max-width:none; }
.content { padding-left:12px; padding-right:12px; }
.tariff-panel .table-wrap {
  height:calc(100vh - 340px);
  min-height:260px;
  overflow-x:scroll;
  overflow-y:auto;
  scrollbar-gutter:stable both-edges;
  scrollbar-color:#8fa2b8 #edf1f5;
  scrollbar-width:auto;
}
.tariff-panel .table-wrap::-webkit-scrollbar { width:12px; height:12px; }
.tariff-panel .table-wrap::-webkit-scrollbar-track { background:#edf1f5; }
.tariff-panel .table-wrap::-webkit-scrollbar-thumb { background:#8fa2b8; border:3px solid #edf1f5; border-radius:8px; }
.tariff-panel thead th { position:sticky; top:0; z-index:1; }
@media(max-width:760px) {
  .login-page { padding:20px; align-items:start; }
  .login-shell { grid-template-columns:1fr; min-height:0; }
  .login-intro { min-height:235px; padding:32px; }
  .login-intro h1 { font-size:34px; }
  .login-panel { min-height:0; padding:28px 24px; }
}
@media(max-width:420px) {
  .login-page { padding:0; }
  .login-shell { border:0; border-radius:0; }
  .login-intro { min-height:210px; padding:28px 22px; }
  .login-panel { padding:24px 20px; }
}