/* ==========================================================
   RB · tema "Carretera" (oct-2026)
   Letra muy legible, botones del tamaño de un dedo, colores que
   significan estado, sin adornos. Se carga el último.
   ========================================================== */

:root {
  --rb-ink: #17212b;        /* asfalto: texto */
  --rb-ink-2: #44515e;      /* texto secundario */
  --rb-ink-3: #6b7785;      /* texto terciario (AA sobre blanco) */
  --rb-road: #e9edf1;       /* fondo general */
  --rb-paper: #ffffff;
  --rb-line: #d3dae2;
  --rb-blue: #1f55d0;       /* azul RB: acción */
  --rb-blue-ink: #163f9e;
  --rb-blue-wash: #e8eefc;
  --rb-go: #1b7f3b;   --rb-go-wash: #e3f4e8;
  --rb-warn: #9a5b00; --rb-warn-wash: #fff2d3; --rb-warn-mark: #f2a900;
  --rb-stop: #c62828; --rb-stop-wash: #fde8e8;
  --rb-radius: 12px;
  --rb-tap: 48px;

  /* Tokens del sistema existente → tema RB */
  --brand: var(--rb-blue); --brand-hover: var(--rb-blue-ink); --brand-dark: var(--rb-blue-ink);
  --brand-light: var(--rb-blue-wash); --brand-subtle: rgba(31,85,208,.08);
  --surface: var(--rb-paper); --surface-2: #f4f6f8; --surface-3: #e9edf1;
  --border: var(--rb-line); --border-light: #e3e8ee; --border-focus: #7ea0ea;
  --text-primary: var(--rb-ink); --text-secondary: var(--rb-ink-2); --text-muted: var(--rb-ink-3);
  --success: var(--rb-go); --success-bg: var(--rb-go-wash); --success-border: #b9e0c5;
  --warning: var(--rb-warn); --warning-bg: var(--rb-warn-wash); --warning-border: #f5d58a;
  --danger: var(--rb-stop); --danger-bg: var(--rb-stop-wash); --danger-border: #f4b9b9;
  --shadow-xs: none; --shadow-sm: none; --shadow-md: 0 1px 2px rgba(23,33,43,.08);
  --shadow-lg: 0 8px 24px rgba(23,33,43,.14); --shadow-xl: 0 16px 40px rgba(23,33,43,.18);
  --shadow-brand: none;
  --r-sm: 8px; --r-md: 12px; --r-lg: 14px; --r-xl: 18px;
}
html.dark {
  --rb-ink: #e8edf2; --rb-ink-2: #b8c3ce; --rb-ink-3: #8e9aa7;
  --rb-road: #10171e; --rb-paper: #18222c; --rb-line: #2c3a47;
  --rb-blue: #5b8cff; --rb-blue-ink: #8fb0ff; --rb-blue-wash: #1c2d52;
  --rb-go: #4cc07a; --rb-go-wash: #123222; --rb-warn: #f2b84b; --rb-warn-wash: #3a2c0c; --rb-stop: #ff7070; --rb-stop-wash: #3d1717;
  --surface-2: #1d2833; --surface-3: #24313d;
}

/* ── Letra ───────────────────────────────────────────── */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
@media (max-width: 767px) { html { font-size: 17px; } }
body, button, input, select, textarea {
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
body { color: var(--rb-ink); background: var(--rb-road); line-height: 1.5; }
.text-xs { font-size: .8125rem !important; line-height: 1.35 !important; }
.text-\[10px\], .text-\[11px\], .text-\[9px\] { font-size: .75rem !important; }
.text-sm { font-size: .9375rem !important; }
.text-gray-400 { color: var(--rb-ink-3) !important; }
.text-gray-500 { color: var(--rb-ink-3) !important; }
.text-gray-600, .text-gray-700 { color: var(--rb-ink-2) !important; }
.text-gray-800, .text-gray-900, .text-slate-800, .text-slate-900 { color: var(--rb-ink) !important; }
h1, h2, h3, .font-semibold, .font-bold { letter-spacing: -0.005em; }

/* Rótulos en mayúsculas espaciadas → frase normal (se leen mejor) */
.uppercase.tracking-wide, .uppercase.tracking-wider, .uppercase.tracking-widest { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; }

/* ── Fondo, tarjetas y estructura plana ──────────────── */
#main-content, .bg-gray-50 { background: var(--rb-road) !important; }
.card, .stat-card, .bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg.shadow, .bg-white.rounded-lg.shadow-sm {
  border: 1px solid var(--rb-line) !important; box-shadow: none !important; border-radius: var(--rb-radius) !important;
}
.stat-card:hover, .card:hover { transform: none !important; box-shadow: none !important; }
.shadow, .shadow-sm, .shadow-md { box-shadow: none !important; }
.shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: var(--shadow-lg) !important; }
/* Degradados decorativos → color plano del primer tono */
[class*="bg-gradient-to-"] { --tw-gradient-to: var(--tw-gradient-from) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-from) !important; }
.page.active > * { animation: none !important; }

/* ── Botones y campos: tamaño de dedo ────────────────── */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-success, button.bg-blue-600, button.bg-blue-700 {
  min-height: 44px; border-radius: 10px !important; font-weight: 700 !important; box-shadow: none !important;
}
.btn-primary, .bg-blue-600, .bg-blue-700, .hover\:bg-blue-700:hover { background-color: var(--rb-blue) !important; }
.btn-primary:hover, .bg-blue-600:hover { background-color: var(--rb-blue-ink) !important; }
.text-blue-600, .text-blue-700 { color: var(--rb-blue) !important; }
.btn-sm { min-height: 38px; }
.form-input, .form-select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel], select, textarea {
  font-size: 16px !important; border: 1.5px solid #b9c3ce !important; border-radius: 10px !important; background: var(--rb-paper); color: var(--rb-ink);
}
.form-input, .form-select, select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel] { min-height: 46px; }
.form-input:focus, select:focus, textarea:focus, input:focus { border-color: var(--rb-blue) !important; box-shadow: 0 0 0 3px rgba(31,85,208,.18) !important; outline: none; }
.form-label { font-size: .9375rem !important; font-weight: 700 !important; color: var(--rb-ink) !important; margin-bottom: 6px; }
:focus-visible { outline: 3px solid var(--rb-blue) !important; outline-offset: 2px; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--rb-blue); }

/* ── Estados: verde / ámbar / rojo, siempre con texto ── */
.bg-green-100 { background: var(--rb-go-wash) !important; } .text-green-700, .text-green-800, .text-green-600 { color: var(--rb-go) !important; }
.bg-amber-100, .bg-yellow-100 { background: var(--rb-warn-wash) !important; } .text-amber-700, .text-amber-800, .text-yellow-800, .text-amber-600 { color: var(--rb-warn) !important; }
.bg-red-100, .bg-red-50 { background: var(--rb-stop-wash) !important; } .text-red-600, .text-red-700, .text-red-800 { color: var(--rb-stop) !important; }

/* ── Tablas legibles ─────────────────────────────────── */
table { border-collapse: separate; border-spacing: 0; }
thead th { font-size: .8125rem !important; font-weight: 700 !important; color: var(--rb-ink-2) !important; text-transform: none !important; letter-spacing: 0 !important; background: var(--surface-2) !important; }
tbody td { padding-top: .7rem !important; padding-bottom: .7rem !important; }
tbody tr:hover td { background: var(--rb-blue-wash); }

/* ── Pestañas ───────────────────────────────────────── */
.tab-btn { font-size: .9375rem !important; padding: .7rem 1rem !important; min-height: 44px; }

/* ── Barra lateral: asfalto, grupos en frase normal ──── */
#sidebar { background: #17212b !important; box-shadow: none !important; }
#sidebar .sidebar-link, #sidebar .sg-header { min-height: 44px; font-size: .9375rem !important; border-radius: 10px; }
#sidebar .sg-header, #sidebar .sg-header * { text-transform: none !important; letter-spacing: 0 !important; color: #c9d3dd !important; font-weight: 700 !important; }
#sidebar .sidebar-link { color: #dbe3eb !important; }
#sidebar .sidebar-link.active { background: var(--rb-blue) !important; color: #fff !important; }
#sidebar .sidebar-link:hover:not(.active) { background: rgba(255,255,255,.07) !important; }
#sidebar-logo-text .text-white { font-size: 1rem !important; letter-spacing: 0 !important; }

/* ── Cabecera ───────────────────────────────────────── */
#topbar { min-height: 60px; border-bottom: 1px solid var(--rb-line) !important; }
#page-title { font-size: 1.2rem !important; font-weight: 700 !important; }
#topbar button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
#topbar button i { font-size: 1.05rem !important; }
#realtime-indicator, .realtime-indicator { display: none !important; }
#voice-btn { color: var(--rb-blue) !important; background: var(--rb-blue-wash) !important; border-radius: 999px !important; }

/* ── Móvil ──────────────────────────────────────────── */
@media (max-width: 767px) {
  #main-content { padding: 14px 14px 104px !important; }
  #mobile-bottom-nav { height: 68px !important; box-shadow: none !important; border-top: 1px solid var(--rb-line) !important; background: var(--rb-paper) !important; }
  .bn-item { font-size: .75rem !important; font-weight: 700 !important; color: var(--rb-ink-3) !important; gap: 4px !important; }
  .bn-item i { font-size: 1.3rem !important; }
  .bn-item.active, .bn-item.active i { color: var(--rb-blue) !important; }
  .bn-new { flex: 0 0 auto !important; }
  .bn-new .bn-new-disc { width: 54px; height: 54px; border-radius: 50%; background: var(--rb-blue); color: #fff; display: flex; align-items: center; justify-content: center; margin-top: -22px; border: 4px solid var(--rb-paper); }
  .bn-new .bn-new-disc i { color: #fff !important; font-size: 1.4rem !important; }
  .bn-new span.bn-lbl { color: var(--rb-blue) !important; }
}

/* ── Asistente IA flotante: discreto, del color de la marca ── */

/* ── Matrícula: seña de identidad para códigos de vehículo ── */
.rb-plate {
  display: inline-flex; align-items: stretch; height: 1.7em; border: 1.5px solid #17212b; border-radius: 5px; overflow: hidden;
  background: #fff; color: #17212b; font-family: 'Barlow Semi Condensed', 'Atkinson Hyperlegible', sans-serif; font-weight: 600;
  font-size: 1em; line-height: 1; vertical-align: middle; white-space: nowrap;
}
.rb-plate::before { content: ''; width: .55em; background: #1f55d0; flex: 0 0 auto; }
.rb-plate b { display: flex; align-items: center; padding: 0 .45em; letter-spacing: .04em; font-weight: 600; }
.rb-plate.is-trailer::before { background: #f2a900; }

/* ── Hoja de acciones "+ Nuevo" ─────────────────────── */
.rb-sheet-back { position: fixed; inset: 0; background: rgba(23,33,43,.55); z-index: 9990; display: flex; align-items: flex-end; justify-content: center; }
.rb-sheet { background: var(--rb-paper); width: 100%; max-width: 520px; border-radius: 20px 20px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.rb-sheet h3 { font-size: 1.15rem; font-weight: 700; margin: 6px 4px 12px; color: var(--rb-ink); }
.rb-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rb-sheet-grid button { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px; border: 1.5px solid var(--rb-line); border-radius: 14px; background: var(--rb-paper); color: var(--rb-ink); font-weight: 700; font-size: 1rem; text-align: left; }
.rb-sheet-grid button i { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--rb-blue-wash); color: var(--rb-blue); font-size: 1.05rem; flex: 0 0 auto; }
.rb-sheet-grid button:active { background: var(--rb-blue-wash); }
.rb-sheet .rb-sheet-close { width: 100%; min-height: 52px; margin-top: 12px; border-radius: 14px; border: 0; background: var(--surface-3); color: var(--rb-ink); font-weight: 700; font-size: 1rem; }
@media (min-width: 768px) { .rb-sheet-back { align-items: center; } .rb-sheet { border-radius: 20px; } }

/* ── Pantalla de entrada ───────────────────────────── */
#login-screen.rb-entry { background: var(--rb-road) !important; color: var(--rb-ink); overflow-y: auto; }
.rb-entry-top { background: #17212b; color: #fff; padding: 22px 18px 26px; }
.rb-entry-top .rb-entry-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 560px; margin: 0 auto; }
.rb-entry-top img { height: 40px; width: auto; background: #fff; border-radius: 8px; padding: 4px 8px; }
.rb-lang { display: flex; gap: 6px; }
.rb-lang button { min-width: 44px; min-height: 40px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.35); background: transparent; color: #fff; font-weight: 700; font-size: .875rem; }
.rb-lang button.is-on { background: #fff; color: #17212b; border-color: #fff; }
.rb-entry-top h1 { max-width: 560px; margin: 22px auto 0; font-size: 1.75rem; line-height: 1.15; font-weight: 700; }
.rb-entry-top p { max-width: 560px; margin: 6px auto 0; color: #c9d3dd; font-size: 1rem; }
.rb-entry-body { max-width: 560px; margin: 0 auto; padding: 18px 16px 28px; }
.rb-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rb-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 128px; padding: 16px; border-radius: 16px; border: 1.5px solid var(--rb-line); background: var(--rb-paper); color: var(--rb-ink); text-align: left; }
.rb-tile:active { transform: scale(.98); background: var(--rb-blue-wash); }
.rb-tile .rb-tile-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; background: var(--rb-blue); }
.rb-tile .rb-tile-t { font-size: 1.0625rem; font-weight: 700; line-height: 1.2; }
.rb-tile .rb-tile-s { font-size: .875rem; color: var(--rb-ink-3); margin-top: 2px; line-height: 1.3; }
.rb-tile.is-main { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 96px; border-color: var(--rb-stop); }
.rb-tile.is-main .rb-tile-ico { background: var(--rb-stop); width: 54px; height: 54px; font-size: 1.5rem; }
.rb-tile.is-main .rb-tile-t { font-size: 1.25rem; }
.rb-tile.t-amber .rb-tile-ico { background: #b86e00; }
.rb-tile.t-green .rb-tile-ico { background: var(--rb-go); }
.rb-tile.t-ink .rb-tile-ico { background: #17212b; }
.rb-entry-account { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rb-line); }
.rb-entry-account .rb-signin { width: 100%; min-height: 56px; border-radius: 14px; border: 0; background: var(--rb-blue); color: #fff; font-size: 1.0625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; }
.rb-entry-account p { text-align: center; color: var(--rb-ink-3); font-size: .875rem; margin-top: 10px; }
.rb-section-t { font-size: .9375rem; font-weight: 700; color: var(--rb-ink-2); margin: 0 2px 10px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }