/* ═══════════════════════════════════════════════════════════
   TRANSPORTE MATECULA — Mateu e Hijos
   Sistema visual: sobrio, profesional y fácil de leer
   ═══════════════════════════════════════════════════════════ */
:root {
  --rojo: #d71920;
  --rojo-osc: #b0141a;
  --rojo-suave: #fbeceb;
  --tinta: #16181d;
  --tinta-2: #1f2228;
  --tinta-3: #2a2e36;
  --fondo: #f5f4f1;
  --superficie: #ffffff;
  --borde: #e6e3dd;
  --borde-2: #d5d1c9;
  --texto: #1b1d22;
  --muted: #6b6f78;
  --suave: #f7f6f3;
  --verde: #17703f;
  --verde-suave: #e8f3ec;
  --ambar: #9a5b00;
  --ambar-suave: #fdf3e1;
  --radio: 14px;
  --radio-s: 10px;
  --sombra: 0 1px 2px rgba(20, 22, 28, .05), 0 4px 16px rgba(20, 22, 28, .05);
  --sombra-alta: 0 24px 64px rgba(10, 12, 16, .28);
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --marca: "Archivo", var(--ui);
}
* { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--ui); color: var(--texto); background: var(--fondo); line-height: 1.5; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--rojo-osc); }
.muted { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nw { white-space: nowrap; }
.centro { text-align: center; }

/* ── ÍCONOS (línea) ─────────────────────────────── */
[class^="i-"], [class*=" i-"] { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

/* ── INTRO ───────────────────────────────────────── */
.intro { position: fixed; inset: 0; z-index: 100; color: #fff; overflow: hidden; cursor: pointer;
  background: radial-gradient(1200px 600px at 50% 38%, #1d1f24 0%, #0b0c0e 62%, #050506 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.intro::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.05) 50%, transparent 60%);
  transform: translateX(-100%); animation: barrido 3.2s ease-in-out .6s forwards; }
@keyframes barrido { to { transform: translateX(100%); } }
.intro.salida { animation: introSale .7s ease forwards; }
@keyframes introSale { to { opacity: 0; } }
.intro-logo { width: min(36vw, 190px); border-radius: 50%; opacity: 0; filter: blur(8px); transform: scale(.94);
  animation: logoEntra 1.4s cubic-bezier(.2,.7,.2,1) .25s forwards; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 60px rgba(215,25,32,.18); }
@keyframes logoEntra { to { opacity: 1; filter: none; transform: none; } }
.intro-linea { width: 0; height: 1px; margin: 34px 0 26px; background: linear-gradient(90deg, transparent, var(--rojo), transparent); animation: linea 1.2s ease 1.2s forwards; }
@keyframes linea { to { width: min(70vw, 420px); } }
.intro-familia { text-align: center; opacity: 0; animation: aparece 1.1s ease 1.5s forwards; }
.intro-mateu { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 6vw, 54px); letter-spacing: .26em; text-transform: uppercase; line-height: 1.05; padding-left: .26em; }
.intro-mateu em { font-style: italic; text-transform: none; letter-spacing: 0; color: #e8c9c8; padding: 0 .12em; }
.intro-sub { font-size: 12px; letter-spacing: .55em; text-transform: uppercase; color: #8d9098; margin-top: 12px; padding-left: .55em; }
.intro-marca { margin-top: 30px; text-align: center; opacity: 0; animation: aparece 1s ease 2.2s forwards; }
.intro-marca span { display: block; }
.intro-transporte { font-size: 12px; font-weight: 600; letter-spacing: .62em; color: var(--rojo); padding-left: .62em; }
.intro-matecula { font-family: var(--marca); font-style: italic; font-weight: 800; font-size: clamp(26px, 4.6vw, 40px); letter-spacing: .14em; margin-top: 4px; padding-left: .14em; }
.intro-lugar { position: absolute; bottom: 30px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: #6c6f77; opacity: 0; animation: aparece 1s ease 2.6s forwards; }
@keyframes aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.intro-saltar { position: absolute; right: 22px; top: 22px; background: transparent; border: 1px solid rgba(255,255,255,.18); color: #c9cbd0; border-radius: 999px; padding: 7px 18px; cursor: pointer; font-size: 14px; letter-spacing: .08em; }
.intro-saltar:hover { border-color: rgba(255,255,255,.4); color: #fff; }
@media (prefers-reduced-motion: reduce) { .intro, .intro * , .intro::before { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* ── LOGIN ───────────────────────────────────────── */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--superficie); }
.login-marca { position: relative; background: radial-gradient(900px 500px at 30% 20%, #23262d 0%, #121317 70%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px 24px; overflow: hidden; }
.login-marca::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--rojo), transparent); }
.login-marca img { width: min(46%, 230px); border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 50px rgba(0,0,0,.45); }
.login-familia { font-family: var(--serif); font-weight: 500; font-size: 34px; letter-spacing: .24em; text-transform: uppercase; margin-top: 10px; padding-left: .24em; }
.login-familia em { font-style: italic; text-transform: none; letter-spacing: 0; color: #e8c9c8; }
.login-sub { color: #8d9098; letter-spacing: .5em; text-transform: uppercase; font-size: 11px; padding-left: .5em; }
.login-caja { align-self: center; justify-self: center; width: min(420px, 100%); padding: 40px 28px; display: grid; gap: 18px; }
.login-caja h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.login-caja p { margin: -10px 0 6px; }
.login-caja label { display: grid; gap: 7px; font-weight: 600; font-size: 15px; }
.login-caja input { font-size: 19px; padding: 13px 15px; border: 1px solid var(--borde-2); border-radius: 12px; width: 100%; background: #fff; min-height: 54px; }
.login-caja input:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(215,25,32,.10); }
.clave-wrap { position: relative; display: block; }
.ver-clave { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: var(--suave); border-radius: 8px; padding: 7px 12px; cursor: pointer; font-weight: 600; font-size: 14px; }
.login-error { color: var(--rojo-osc); font-weight: 600; min-height: 1.3em; font-size: 15px; }
.login-pie { text-align: center; color: var(--muted); font-size: 13px; letter-spacing: .04em; margin-top: 6px; }
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-marca { padding: 30px 16px 26px; }
  .login-marca img { width: 120px; }
  .login-familia { font-size: 24px; }
  .login-caja { padding: 26px 16px 40px; }
}

/* ── BOTONES ─────────────────────────────────────── */
.btn { border: 1px solid transparent; border-radius: var(--radio-s); padding: 10px 18px; font-weight: 600; cursor: pointer; background: var(--suave); color: var(--texto);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; line-height: 1.2; min-height: 46px; transition: background .15s, border-color .15s, box-shadow .15s; font-size: 16px; }
.btn:hover { background: #efede8; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(215,25,32,.25); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-rojo { background: var(--rojo); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.btn-rojo:hover { background: var(--rojo-osc); }
.btn-negro { background: var(--tinta); color: #fff; }
.btn-negro:hover { background: var(--tinta-3); }
.btn-verde { background: var(--verde); color: #fff; }
.btn-verde:hover { background: #125a32; }
.btn-borde { background: #fff; border-color: var(--borde-2); }
.btn-borde:hover { background: var(--suave); border-color: #c4bfb5; }
.btn-borde-claro { background: transparent; border-color: rgba(255,255,255,.16); color: #d6d8dc; min-height: 38px; padding: 6px 14px; font-size: 14px; }
.btn-borde-claro:hover { background: rgba(255,255,255,.06); }
.btn-xl { font-size: 18px; padding: 14px 24px; min-height: 56px; border-radius: 12px; }
.btn-chico { min-height: 38px; padding: 6px 12px; font-size: 14px; border-radius: 8px; }
.btn-link { background: none; border: 0; color: var(--rojo-osc); font-weight: 600; cursor: pointer; padding: 4px; text-decoration: underline; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acciones.derecha { justify-content: flex-end; }

/* ── APP / MENÚ ──────────────────────────────────── */
.app { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
.menu { background: var(--tinta); color: #c9ccd2; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid #0c0d10; }
.menu-marca { display: flex; gap: 12px; align-items: center; padding: 20px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.menu-marca img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.menu-marca b { display: block; font-family: var(--marca); font-weight: 800; font-style: italic; font-size: 20px; letter-spacing: .08em; color: #fff; }
.menu-marca small { color: #8d9098; letter-spacing: .2em; text-transform: uppercase; font-size: 10.5px; }
#nav { padding: 12px 12px 20px; flex: 1; }
.nav-cat { margin-top: 6px; }
.nav-cat > button { width: 100%; display: flex; justify-content: space-between; align-items: center; background: transparent; border: 0; color: #e7e8eb;
  border-radius: 10px; padding: 12px 12px; font-weight: 600; letter-spacing: .12em; font-size: 12.5px; text-transform: uppercase; cursor: pointer; text-align: left; }
.nav-cat > button:hover { background: rgba(255,255,255,.05); }
.nav-cat > button::after { content: ""; width: 9px; height: 9px; border-right: 2px solid #8d9098; border-bottom: 2px solid #8d9098; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.nav-cat.cerrada > button::after { transform: rotate(-45deg); }
.nav-cat:not(.cerrada) > button { color: #fff; }
.nav-cat.con-activo > button { color: #fff; box-shadow: inset 3px 0 0 var(--rojo); }
.nav-cat.cerrada .nav-items { display: none; }
.nav-items { display: grid; gap: 2px; padding: 2px 0 8px; }
.nav-item { display: flex; gap: 12px; align-items: center; color: #b9bcc3; text-decoration: none; padding: 10px 12px 10px 14px; border-radius: 10px; font-size: 16px; font-weight: 500; position: relative; }
.nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-item.activo { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.activo::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--rojo); }
.nav-item [class^="i-"] { width: 20px; height: 20px; opacity: .85; }
.nav-sep { height: 1px; background: rgba(255,255,255,.06); margin: 12px 4px; }
.menu-usuario { border-top: 1px solid rgba(255,255,255,.06); padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; color: #a9acb3; }
.menu-usuario b { color: #fff; font-weight: 600; }
.contenido { min-width: 0; display: flex; flex-direction: column; }
.barra { display: flex; align-items: center; gap: 14px; padding: 18px 32px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 5; }
.barra h1 { margin: 0; font-size: 24px; font-weight: 700; flex: 1; letter-spacing: -.01em; }
.barra-fecha { color: var(--muted); font-size: 15px; }
.btn-menu { display: none; border: 0; background: var(--tinta); color: #fff; width: 46px; height: 46px; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; }
.vista { padding: 28px 32px 64px; max-width: 1400px; width: 100%; }
.menu-fondo { display: none; }
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .menu { position: fixed; left: 0; top: 0; bottom: 0; width: 290px; z-index: 40; transform: translateX(-105%); transition: transform .25s; }
  .app.menu-abierto .menu { transform: none; }
  .app.menu-abierto .menu-fondo { display: block; position: fixed; inset: 0; background: rgba(10,12,16,.5); z-index: 30; }
  .btn-menu { display: inline-flex; }
  .barra { padding: 10px 16px; }
  .barra h1 { font-size: 20px; }
  .barra-fecha { display: none; }
  .vista { padding: 18px 16px 50px; }
}

/* ── TARJETAS / BLOQUES ──────────────────────────── */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 22px 24px; margin-bottom: 20px; }
.tarjeta > h2, .tarjeta-tit { margin: 0 0 16px; font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; letter-spacing: -.005em; }
.tarjeta > h2 [class^="i-"], .tarjeta-tit [class^="i-"] { color: var(--rojo); }
.tarjeta-tit .acciones { margin-left: auto; }
.grilla { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.dato { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px 20px; min-width: 0; position: relative; overflow: hidden; }
.dato::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--borde-2); }
.dato small { display: block; color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.dato b { display: block; font-size: clamp(20px, 2vw, 26px); font-weight: 700; margin-top: 6px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dato.rojo::before { background: var(--rojo); }
.dato.verde::before { background: var(--verde); }
.dato.verde b { color: var(--verde); }
b.neg, .neg { color: var(--rojo-osc); }
.accesos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 26px; }
@media (max-width: 1100px) { .accesos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) {
  .accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .acceso { min-height: 0; padding: 14px; gap: 2px; }
  .acceso .ico { width: 38px; height: 38px; margin-bottom: 6px; }
  .acceso b { font-size: 16px; }
  .acceso span:not(.ico) { font-size: 13px; }
  .grilla.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dato { padding: 12px 14px; }
  .dato b { font-size: 18px; }
}
.acceso { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: 16px; padding: 22px 22px 20px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; min-height: 150px;
  box-shadow: var(--sombra); transition: border-color .15s, transform .15s, box-shadow .15s; cursor: pointer; }
.acceso:hover { border-color: rgba(215,25,32,.45); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20,22,28,.08); }
.acceso .ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--rojo-suave); color: var(--rojo); margin-bottom: 8px; }
.acceso .ico [class^="i-"] { width: 24px; height: 24px; }
.acceso b { font-size: 18px; font-weight: 700; }
.acceso span:not(.ico) { color: var(--muted); font-size: 15px; }
.saludo { font-size: 26px; font-weight: 700; margin: 0 0 2px; letter-spacing: -.015em; }

/* ── FORMULARIOS ─────────────────────────────────── */
.campos { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.campo { display: grid; gap: 6px; min-width: 0; align-content: start; }
.campo > span { font-weight: 600; font-size: 15px; color: #33363d; }
.campo.ancho { grid-column: 1 / -1; }
.campo.doble { grid-column: span 2; }
@media (max-width: 560px) { .campo.doble { grid-column: 1 / -1; } }
input, select, textarea { border: 1px solid var(--borde-2); border-radius: var(--radio-s); padding: 10px 12px; background: #fff; font-size: 17px; width: 100%; min-height: 48px; transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(215,25,32,.09); }
input[readonly] { background: var(--suave); }
.check { display: inline-flex; gap: 10px; align-items: center; font-weight: 500; cursor: pointer; min-height: 44px; }
.check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--rojo); }
.ayuda { font-size: 14px; color: var(--muted); }
.con-boton { display: flex; gap: 8px; }
.con-boton input { flex: 1; min-width: 0; }
.con-boton .btn { flex: none; }
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 18px; }
.filtros .campo { min-width: 170px; flex: 1 1 170px; max-width: 280px; }
.filtros .campo.buscar { max-width: 420px; flex-basis: 260px; }
.segmentos { display: inline-flex; background: var(--suave); border: 1px solid var(--borde); border-radius: 12px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.segmentos button { border: 0; background: transparent; border-radius: 9px; padding: 8px 15px; font-weight: 600; cursor: pointer; min-height: 42px; color: #3b3e46; display: inline-flex; gap: 8px; align-items: center; }
.segmentos button:hover { background: rgba(0,0,0,.04); }
.segmentos button.activo { background: #fff; color: var(--texto); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ── TABLAS ──────────────────────────────────────── */
.tabla-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--borde); background: #fff; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabla th { background: var(--suave); color: #575b64; text-align: left; padding: 12px 14px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; border-bottom: 1px solid var(--borde); position: sticky; top: 0; }
.tabla td { padding: 13px 14px; border-top: 1px solid #efede8; vertical-align: middle; }
.tabla tbody tr:first-child td { border-top: 0; }
.tabla tbody tr.clic { cursor: pointer; }
.tabla tbody tr:hover td { background: #fbfaf8; }
.tabla tbody tr.clic:hover td { background: var(--rojo-suave); }
.tabla tfoot td { background: var(--suave); font-weight: 700; border-top: 1px solid var(--borde-2); }
.tabla .acc { text-align: right; min-width: 150px; }
.tabla .acc .btn { margin: 3px 0 3px 4px; }
.vacio { text-align: center; color: var(--muted); padding: 34px 10px !important; }
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 600; background: #efede8; color: #4a4d55; white-space: nowrap; }
.chip.verde { background: var(--verde-suave); color: var(--verde); }
.chip.rojo { background: var(--rojo-suave); color: var(--rojo-osc); }
.chip.amarillo { background: var(--ambar-suave); color: var(--ambar); }
.chip.negro { background: var(--tinta); color: #fff; }

/* ── AVISOS ──────────────────────────────────────── */
.aviso { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 13px 16px; border-radius: 12px; margin-bottom: 10px; background: var(--ambar-suave); border: 1px solid #f1dfb8; }
.aviso > [class^="i-"] { width: 22px; height: 22px; color: var(--ambar); }
.aviso.vencido, .aviso.urgente { background: var(--rojo-suave); border-color: #f2cfcd; }
.aviso.vencido > [class^="i-"], .aviso.urgente > [class^="i-"] { color: var(--rojo); }
.aviso.ok { background: var(--verde-suave); border-color: #cfe5d7; }
.aviso.ok > [class^="i-"] { color: var(--verde); }
.aviso b { font-weight: 700; }
.aviso > div { min-width: min(190px, 100%); }
.nota { background: var(--suave); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; font-size: 15px; }
.nota ol, .nota ul { margin: 6px 0 0; padding-left: 22px; }
.nota li { margin: 4px 0; }
.link-caja { display: flex; gap: 8px; align-items: center; background: var(--suave); border: 1px dashed var(--borde-2); border-radius: 10px; padding: 8px 8px 8px 14px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; overflow-wrap: anywhere; }
.link-caja span { flex: 1; min-width: 0; }

/* ── COMPROBANTE (estilo ARCA) ──────────────────── */
.paso { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: 18px; overflow: hidden; }
.paso-tit { background: var(--suave); padding: 12px 20px; font-weight: 700; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--borde); font-size: 16px; }
.paso-tit .n { background: var(--tinta); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; flex: none; }
.paso-cuerpo { padding: 18px 20px; }
.letra-box { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.letra { width: 72px; height: 72px; border: 2px solid var(--tinta); display: grid; place-items: center; font-size: 42px; font-weight: 700; border-radius: 8px; background: #fff; flex: none; line-height: 1; }
.letra-desc b { font-size: 22px; font-weight: 700; display: block; }
.items-tabla { min-width: 980px; }
.items-tabla th { font-size: 11.5px; padding: 10px 6px; }
.items-tabla td { padding: 6px; }
.items-tabla input, .items-tabla select { min-height: 44px; padding: 8px; font-size: 16px; }
.items-tabla .c-cod { width: 78px; }
.items-tabla .c-desc { min-width: 240px; }
.items-tabla .c-cant { width: 82px; }
.items-tabla .c-um { width: 110px; }
.items-tabla .c-pre { width: 140px; }
.items-tabla .c-bon { width: 70px; }
.items-tabla .c-iva { width: 112px; }
.items-tabla .c-sub { width: 140px; }
.items-tabla .c-x { width: 48px; }
.btn-x { border: 1px solid transparent; background: transparent; color: #8a8e97; width: 38px; height: 38px; border-radius: 9px; cursor: pointer; display: inline-grid; place-items: center; }
.btn-x:hover { background: var(--rojo-suave); color: var(--rojo-osc); border-color: #f2cfcd; }
.totales-arca { margin-left: auto; width: min(460px, 100%); border: 1px solid var(--borde-2); border-radius: 12px; padding: 14px 18px; background: #fff; }
.totales-arca div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; font-weight: 500; }
.totales-arca .total { font-size: 22px; font-weight: 700; border-top: 1px solid var(--tinta); margin-top: 8px; padding-top: 10px; }
.transparencia { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; font-size: 14px; max-width: 460px; background: var(--suave); }
.buscador { position: relative; }
.buscador-lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #fff; border: 1px solid var(--borde-2); border-radius: 12px; margin-top: 6px; max-height: 320px; overflow-y: auto; box-shadow: 0 14px 40px rgba(20,22,28,.14); }
.buscador-lista button { display: block; width: 100%; text-align: left; border: 0; background: #fff; padding: 12px 14px; border-bottom: 1px solid #f0eee9; cursor: pointer; font-size: 16px; }
.buscador-lista button:hover, .buscador-lista button.sel { background: var(--rojo-suave); }
.buscador-lista small { color: var(--muted); display: block; }

/* ── MODALES / TOAST ─────────────────────────────── */
.modal-fondo { position: fixed; inset: 0; background: rgba(12,14,18,.55); backdrop-filter: blur(2px); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 34px 12px; overflow-y: auto; }
.modal { background: #fff; border-radius: 18px; width: min(760px, 100%); box-shadow: var(--sombra-alta); animation: modalIn .2s ease; }
.modal.grande { width: min(1100px, 100%); }
.modal.chico { width: min(480px, 100%); }
@keyframes modalIn { from { transform: translateY(8px); opacity: 0; } }
.modal-cab { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--borde); }
.modal-cab h3 { margin: 0; font-size: 20px; font-weight: 700; flex: 1; }
.modal-cerrar { border: 0; background: var(--suave); width: 40px; height: 40px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; color: #555; }
.modal-cerrar:hover { background: #ebe8e2; }
.modal-cuerpo { padding: 20px 22px; }
.modal-pie { padding: 14px 22px; border-top: 1px solid var(--borde); display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; background: var(--suave); border-radius: 0 0 18px 18px; }
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: grid; gap: 10px; max-width: calc(100vw - 36px); }
.toast { background: var(--tinta); color: #fff; padding: 13px 18px 13px 16px; border-radius: 12px; font-weight: 500; box-shadow: 0 12px 32px rgba(0,0,0,.25); display: flex; gap: 10px; align-items: center; animation: modalIn .2s ease; max-width: 460px; }
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex: none; }
.toast.error::before { background: #f87171; }
.cargando { padding: 44px; text-align: center; color: var(--muted); }
.exito { text-align: center; padding: 8px 0; }
.exito .ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 10px; background: var(--verde-suave); color: var(--verde); }
.exito .ico [class^="i-"] { width: 32px; height: 32px; }
.exito h4 { font-size: 22px; margin: 4px 0; font-weight: 700; }

/* ── INICIO ─────────────────────────────────────── */
.inicio-cab { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; }
.frase { margin: 0; max-width: 520px; padding: 14px 20px 14px 22px; border-left: 3px solid var(--rojo); background: var(--superficie); border-radius: 0 12px 12px 0; box-shadow: var(--sombra); }
.frase span { display: block; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.3; color: #2a2c31; }
.frase small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.inicio-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .inicio-grid { grid-template-columns: 1fr; } }
.viaje-curso { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #efede8; cursor: pointer; }
.viaje-curso:first-of-type { border-top: 0; padding-top: 0; }
.viaje-curso:hover b { color: var(--rojo-osc); }

/* ── CALENDARIO ──────────────────────────────────── */
.cal { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.cal-sem, .cal-grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-sem span { background: var(--suave); padding: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #575b64; text-align: center; border-bottom: 1px solid var(--borde); }
.cal-dia { min-height: 98px; border: 0; border-right: 1px solid #efede8; border-bottom: 1px solid #efede8; background: #fff; padding: 6px; text-align: left; display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; font-size: 13px; }
.cal-dia:nth-child(7n) { border-right: 0; }
.cal-dia:hover { background: #fbfaf8; }
.cal-dia.fuera { background: #fafaf8; }
.cal-dia.fuera .cal-n { color: #b5b2ab; }
.cal-n { font-weight: 600; font-size: 14px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.cal-dia.hoy .cal-n { background: var(--rojo); color: #fff; }
.cal-ev { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 5px; padding: 2px 6px; font-size: 12px; font-weight: 500; background: #efede8; color: #3b3e46; border-left: 3px solid #9a9da5; }
.cal-mas { font-size: 12px; color: var(--muted); padding-left: 4px; }
.cal-puntos { display: none; gap: 3px; }
.cal-puntos i, .cal-ref i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #9a9da5; }
.cal-ref { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.cal-ref span { display: inline-flex; gap: 6px; align-items: center; }
.t-viaje { --c: #d71920; } .t-ruta { --c: #16181d; } .t-nota { --c: #b07d00; } .t-reunion { --c: #2f5fb3; } .t-recordatorio { --c: #17703f; } .t-otro { --c: #7a7d85; } .t-vencimiento { --c: #c2410c; }
.cal-ev[class*="t-"] { border-left-color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); }
.cal-puntos i[class*="t-"], .cal-ref i[class*="t-"] { background: var(--c); }
.ev-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 12px 14px; border: 1px solid var(--borde); border-left: 4px solid #9a9da5; border-radius: 10px; margin-bottom: 8px; }
.t-borde-viaje { border-left-color: #d71920; } .t-borde-ruta { border-left-color: #16181d; } .t-borde-nota { border-left-color: #b07d00; } .t-borde-reunion { border-left-color: #2f5fb3; } .t-borde-recordatorio { border-left-color: #17703f; } .t-borde-vencimiento { border-left-color: #c2410c; }
@media (max-width: 700px) {
  .cal-dia { min-height: 56px; padding: 4px; align-items: center; }
  .cal-ev, .cal-mas { display: none; }
  .cal-puntos { display: flex; }
  .frase span { font-size: 19px; }
}

/* ── VIAJES EN RUTA ─────────────────────────────── */
.ruta-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
.ruta-mapa { position: sticky; top: 88px; }
.mapa { height: calc(100vh - 150px); min-height: 420px; border-radius: var(--radio); border: 1px solid var(--borde); overflow: hidden; background: #e8e6e1; box-shadow: var(--sombra); }
.ruta-lista { max-height: calc(100vh - 150px); overflow-y: auto; padding-right: 4px; }
.ruta-sec { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 4px 2px 10px; }
.ruta-sec + .ruta-card, .ruta-card + .ruta-sec { margin-top: 0; }
.ruta-card + .ruta-sec { margin-top: 18px; }
.ruta-card { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; box-shadow: var(--sombra); display: grid; gap: 10px; transition: border-color .15s; }
.ruta-card:hover { border-color: #c4bfb5; }
.ruta-card.sel { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(215,25,32,.12); }
.ruta-card-cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ruta-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 14px; font-weight: 600; }
.ruta-datos small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.ruta-hechos { font-style: normal; font-weight: 500; color: var(--muted); font-size: 12px; }
.ruta-pie { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: #4a4d55; }
.ruta-pie span { display: inline-flex; gap: 5px; align-items: center; }
.ruta-vacio { margin: 0 2px 14px; }
.barra-viaje { height: 8px; background: #ece9e3; border-radius: 999px; overflow: hidden; }
.barra-viaje span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rojo-osc), var(--rojo)); border-radius: 999px; transition: width .6s; }
@media (max-width: 1100px) {
  .ruta-grid { grid-template-columns: 1fr; }
  .ruta-mapa { position: static; }
  .mapa { height: 55vh; min-height: 320px; }
  .ruta-lista { max-height: none; overflow: visible; }
}

/* ── DOCUMENTOS ─────────────────────────────────── */
.docs-grid { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .docs-grid { grid-template-columns: 1fr; } }

/* ── VEHÍCULOS ───────────────────────────────────── */
.vehiculos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.vehiculo { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px; display: grid; gap: 10px; }
.vehiculo h3 { margin: 0; font-size: 20px; font-weight: 700; }
.patente { display: inline-block; border: 1.5px solid var(--tinta); border-radius: 6px; padding: 1px 10px; font-weight: 700; letter-spacing: .1em; background: #fff; font-size: 14px; }
.vto { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; padding: 4px 0; border-bottom: 1px dashed #ece9e3; }

@media print {
  .menu, .barra, .filtros, .acciones, .btn, .toasts { display: none !important; }
  .app { display: block; }
  .vista { padding: 0; }
  .tarjeta, .dato { box-shadow: none; }
}

/* ── ÍCONOS: definiciones (trazos estilo línea, 24×24) ── */
.i-casa{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E")}
.i-factura{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14v18l-3-2-2 2-2-2-2 2-2-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E")}
.i-doc{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
.i-paquete{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8M7.5 5.5l9 5'/%3E%3C/svg%3E")}
.i-archivo{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='5' rx='1'/%3E%3Cpath d='M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4'/%3E%3C/svg%3E")}
.i-plata{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 9.5v.01M18 14.5v.01'/%3E%3C/svg%3E")}
.i-clientes{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.4 3.2-5.5 6.5-5.5s5.9 2.1 6.5 5.5'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.8c2 .7 3.2 2.6 3.5 5.2'/%3E%3C/svg%3E")}
.i-usuario{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c.8-4 4-6.5 8-6.5s7.2 2.5 8 6.5'/%3E%3C/svg%3E")}
.i-etiqueta{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4a1 1 0 0 1 1-1h8l9 9-9 9z'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/svg%3E")}
.i-camion{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v11H2zM14 10h4l4 4v3h-8z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17.5' cy='18' r='2'/%3E%3C/svg%3E")}
.i-vehiculo{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h10v12H3zM13 9h5l3 4v4h-8'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Cpath d='M15.5 9v4H21'/%3E%3C/svg%3E")}
.i-chofer{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2.2'/%3E%3Cpath d='M5.8 16c.5-1.6 1.7-2.4 3.2-2.4s2.7.8 3.2 2.4M15 10h3M15 13h3'/%3E%3C/svg%3E")}
.i-llave{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94z'/%3E%3C/svg%3E")}
.i-tienda{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16l1 5a3 3 0 0 1-6 0 3 3 0 0 1-6 0 3 3 0 0 1-6 0z'/%3E%3Cpath d='M5 11v9h14v-9M10 20v-5h4v5'/%3E%3C/svg%3E")}
.i-edificio{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v17M15 9h4a1 1 0 0 1 1 1v11M2 21h20'/%3E%3Cpath d='M8 7h3M8 11h3M8 15h3'/%3E%3C/svg%3E")}
.i-clave{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 9-9M17 6l3 3M15 8l2 2'/%3E%3C/svg%3E")}
.i-candado{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.i-imprimir{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6M6 18H4a1 1 0 0 1-1-1v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a1 1 0 0 1-1 1h-2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E")}
.i-mas{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.i-menos{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.i-x{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}
.i-ok{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.7 2.7L16 9.8'/%3E%3C/svg%3E")}
.i-error{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E")}
.i-alerta{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20z'/%3E%3Cpath d='M12 10v4M12 17v.01'/%3E%3C/svg%3E")}
.i-reloj{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.i-campana{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E")}
.i-bajar{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M4 20h16'/%3E%3C/svg%3E")}
.i-clip{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 11.5-8.2 8.2a5 5 0 0 1-7-7L13 4.5a3.3 3.3 0 0 1 4.7 4.7l-8.2 8.2a1.7 1.7 0 0 1-2.4-2.4L14.5 7.6'/%3E%3C/svg%3E")}
.i-editar{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E")}
.i-borrar{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E")}
.i-traer{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E")}
.i-lista{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E")}
.i-buscar{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
.i-combustible{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16M3 21h12M4 10h10'/%3E%3Cpath d='M14 8h2a2 2 0 0 1 2 2v6a1.5 1.5 0 0 0 3 0V8l-3-3'/%3E%3C/svg%3E")}
.i-peaje{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M3 21h4M5 8h16v4H5z'/%3E%3Cpath d='m9 8-2 4M13 8l-2 4M17 8l-2 4'/%3E%3C/svg%3E")}
.i-viatico{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v7a2 2 0 0 0 2 2v9M10 3v7a2 2 0 0 1-2 2M8 3v6M17 21V3c-2 1.5-3 4-3 7v3h3'/%3E%3C/svg%3E")}
.i-neumatico{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 3v5.5M12 15.5V21M3 12h5.5M15.5 12H21'/%3E%3C/svg%3E")}
.i-salir{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 17l-5-5 5-5M5 12h11'/%3E%3C/svg%3E")}
.i-menu{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")}
.i-link{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1 1'/%3E%3Cpath d='M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1-1'/%3E%3C/svg%3E")}
.i-copiar{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E")}
.i-whatsapp{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.3-3.9A8 8 0 1 1 8 19z'/%3E%3Cpath d='M9 9.5c0 3 2.5 5.5 5.5 5.5l1-1.5-2-1-1 .8a4 4 0 0 1-1.8-1.8l.8-1-1-2z'/%3E%3C/svg%3E")}
.i-camara{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E")}
.i-calendario{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.i-flecha{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.i-mapa{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
.i-volver{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E")}