/*
 * Rediseño 1.91 — lenguaje visual de Apple (iOS en el teléfono, macOS en la computadora). Se carga al final: ajusta los
 * componentes de todas las pantallas sin cambiar su estructura. Colores, esquinas, letra y resortes en tokens.css.
 *   1. Letra: interletrado según el tamaño (negativo en títulos grandes, casi cero en texto)
 *   2. Respuesta al toque: se marca al presionar (no al soltar) y regresa con un resorte; se puede interrumpir
 *   3. Botones, campos, interruptores, control segmentado y chips
 *   4. Tarjetas y listas agrupadas (sin borde; separadores finos con sangría)
 *   5. Hojas y hojas de acción (material translúcido, salen y regresan por el mismo camino)
 *   6. Avisos (toasts), buscador global y transiciones de pantalla
 *   7. Barra inferior flotante del teléfono (cristal) y menú lateral de la computadora (estilo macOS)
 *   8. Accesibilidad: menos movimiento, menos transparencia y más contraste
 *   9. Pantallas principales: Inicio, Operación, Administración, Logística, Órdenes, Operadores y Unidades
 *  10. Módulos especiales: acceso, Monitoreo GPS, Taller y Combustible (mapa y portal en maps.css y portal.css)
 */

/* ===== 1. Letra ===== */
body{letter-spacing:-.008em;font-optical-sizing:auto}
.title,.greet{font-size:var(--fs-large);line-height:1.08;font-weight:700;letter-spacing:-.022em}
.bsheet-title,.wiz-title b,.card-h h4{letter-spacing:-.015em}
.page-lead{color:var(--muted);font-size:var(--fs-subhead);line-height:1.4;letter-spacing:-.004em}
small,.fhint,.row-l3,.st,.tag,.count{letter-spacing:0}
@media (min-width:1024px){:root{--fs-large:30px}}

/* ===== 2. Respuesta al toque =====
   Al presionar, el control se encoge al instante (100 ms); al soltar regresa con el resorte (--spring), desde donde
   esté: una transición de CSS sobre transform parte del valor actual, así que el gesto se puede repetir a medias. */
.btn-primary,.btn-secondary,.btn-ghost,.btn-danger,.btn-wa,.icon-btn,.chip,.seg-b,.add-btn,.mod-card,.nav-act,.tab-plus,.as-btn,.pk-row{
  transition:transform var(--dur-spring) var(--spring),background-color .2s ease,color .2s ease,box-shadow .2s ease,opacity .2s ease}
.btn-primary:active,.btn-secondary:active,.btn-ghost:active,.btn-danger:active,.btn-wa:active,.chip:active,.add-btn:active,.mod-card:active{
  transform:scale(.97);transition-duration:.1s;transition-timing-function:ease-out}
.icon-btn:active,.nav-act:active{transform:scale(.9);transition-duration:.1s;transition-timing-function:ease-out}
/* Los renglones se resaltan al instante y se apagan suavemente */
.row,.row-btn,.pk-row,.gs-opt{transition:background-color .3s ease}
.row:active:not(.static),.row-btn:active,.pk-row:active{transition-duration:0s}
:focus-visible{outline:3px solid color-mix(in srgb,var(--focus) 60%,transparent);outline-offset:2px}

/* ===== 3. Controles ===== */
/* Botones: rectángulos de esquinas amplias; los secundarios en relleno tenue del color de interacción (sin borde) */
.btn-primary,.btn-secondary,.btn-ghost,.btn-danger,.btn-wa{border-radius:14px;font-weight:600;letter-spacing:-.01em}
.btn-primary{box-shadow:none}
.btn-secondary{background:color-mix(in srgb,var(--tint) 11%,transparent);color:var(--tint);border:0}
.btn-secondary .ic{color:var(--tint)}
.btn-ghost{color:var(--tint)}
.btn-danger{background:color-mix(in srgb,var(--danger) 11%,transparent);color:var(--danger)}
.sm{border-radius:var(--r-pill)}
.icon-btn{border-radius:50%}
.nav-act{border-radius:50%}
.nav-back{font-weight:400;letter-spacing:-.01em}
.add-btn{border:0;background:color-mix(in srgb,var(--tint) 9%,transparent);border-radius:var(--r-sm);font-weight:600}
.link-danger{font-weight:400}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--cta-d)}
  .btn-secondary:hover{background:color-mix(in srgb,var(--tint) 17%,transparent);border-color:transparent}
  .btn-ghost:hover{background:color-mix(in srgb,var(--tint) 9%,transparent)}
  .btn-danger:hover{background:color-mix(in srgb,var(--danger) 16%,transparent)}
  .icon-btn:hover,.nav-act:hover{background:var(--fill-t);color:var(--ink)}
  .chip:hover:not(.on){background:color-mix(in srgb,var(--ink) 11%,transparent);border-color:transparent}
  .add-btn:hover{background:color-mix(in srgb,var(--tint) 14%,transparent)}
}

/* Campos: relleno translúcido sin borde visible (el borde transparente se conserva para el modo de alto contraste) */
.fl{font-size:var(--fs-footnote);font-weight:500;color:var(--muted);margin-left:4px;letter-spacing:0}
.in{border-color:transparent;background:var(--fill-t);border-radius:var(--r-sm)}
.in:focus{background:var(--surface);border-color:color-mix(in srgb,var(--tint) 70%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--tint) 18%,transparent)}
.in[readonly]{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
.in.out{background:transparent;border:1px dashed var(--line-2)}
.pick:active{background:color-mix(in srgb,var(--ink) 11%,transparent)}
.fld:has(.in:focus)>.fl{color:var(--tint)}

/* Interruptor: verde de iOS */
.sw{accent-color:var(--switch)}
.sw-fallback .sw{background:var(--fill-t);border-radius:var(--r-pill);transition:background-color .25s ease}
.sw-fallback .sw::before{box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform var(--dur-spring) var(--spring)}
.sw-fallback .sw:checked{background:var(--switch)}
.sw-row{border-bottom-color:var(--line)}

/* Control segmentado: carril translúcido y opción elegida como una pieza blanca que flota */
.seg{background:var(--fill-t);border-radius:var(--r-sm);padding:3px;gap:3px}
.seg-b{border-radius:9px;color:var(--ink);font-weight:500}
.seg-b.on{background:var(--surface);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);font-weight:600}
:root[data-theme="dark"] .seg-b.on{background:#636366}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seg-b.on{background:#636366}}
.seg.big .seg-b.on{background:var(--tint);color:var(--on-color)}

/* Chips: píldoras con relleno translúcido; el elegido, sólido del color de interacción */
.chip{border:0;border-radius:var(--r-pill);background:var(--fill-t);color:var(--ink);font-weight:500}
@media (max-width:1023px){.chip{min-height:40px}}
.chip.on{background:var(--tint);color:var(--on-color);font-weight:600}
:root[data-theme="dark"] .chip.on{background:var(--sel)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip.on{background:var(--sel)}}

/* Buscador de cada pantalla */
.search-in{background:var(--fill-t);border:0;border-radius:var(--r-sm)}
.search-in:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--tint) 18%,transparent)}

/* Estados y etiquetas: píldoras */
.st,.lg-st{border-radius:var(--r-pill)}
.tag,.count{border-radius:var(--r-pill);background:var(--fill-t)}

/* ===== 4. Tarjetas y listas agrupadas ===== */
.grp-b,.card,.list,.empty,.mod-card,.draft-card{border-color:transparent;box-shadow:var(--shadow-1)}
.grp-b{border-radius:var(--r)}
.card{border-radius:var(--r)}
.list{border-radius:var(--r)}
.empty{border-radius:var(--r)}
.draft-card{border-left:0;position:relative;overflow:hidden}
.draft-card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--orange)}
/* Encabezado de sección como en las listas agrupadas de iOS: sobre el grupo, en gris y negrita (sin pasar a mayúsculas:
   el texto que se lee y se copia es el mismo que el escrito) */
.grp-h{margin:0 16px 7px}
.grp-h h3{font-size:var(--fs-subhead);font-weight:600;letter-spacing:-.01em;color:var(--muted)}
.sec-h{font-size:var(--fs-title3);font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.grp-note{margin:7px 16px 16px;font-size:var(--fs-footnote);color:var(--muted)}
.grp-b>.grp-note{margin:0 0 12px}
/* Separadores finos (medio píxel en pantallas de alta densidad) con sangría hasta el texto */
.row+.row::before,.row-btn+.row-btn::before,.row-btn+.row-info::before,.row-info+.row-btn::before,.row-info+.row-info::before,label.row-btn+.row-btn::before{background:var(--line-2);height:.5px}
@media (max-resolution:1.5dppx){.row+.row::before,.row-btn+.row-btn::before,.row-btn+.row-info::before,.row-info+.row-btn::before,.row-info+.row-info::before,label.row-btn+.row-btn::before{background:var(--line);height:1px}}
.row:active:not(.static),.row-btn:active{background:color-mix(in srgb,var(--ink) 8%,transparent)}
@media (hover:hover) and (pointer:fine){
  .list a.row:hover,.list button.row:hover,.row-btn:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
  .card:has(>a:only-child):hover,.mod-card:hover{border-color:transparent;box-shadow:var(--shadow-2)}
}
/* Íconos de los renglones: mosaicos de color sólido con el dibujo en blanco, como en Ajustes */
.row-ic{width:36px;height:36px;border-radius:10px;background:var(--tint);color:var(--on-color)}
.row-ic .ic{width:20px;height:20px}
.row-ic.campo{background:var(--orange);color:var(--on-color)}
.row-ic.draft{background:#8E8E93;color:var(--on-color)}
.row-ic.big{width:48px;height:48px;border-radius:13px}
.row-ic.big .ic{width:26px;height:26px}
:root[data-theme="dark"] .row-ic:not(.campo):not(.draft){background:var(--sel)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .row-ic:not(.campo):not(.draft){background:var(--sel)}}
.row+.row::before{left:62px}
.list .row:not(:has(.row-ic))+.row::before,.row.static+.row::before{left:16px}
.chev{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.row-l2{color:var(--muted)}

/* ===== 5. Hojas =====
   Suben desde el borde con el resorte y bajan por el mismo camino; el fondo se oscurece a la par. En computadora la
   hoja es un cuadro centrado que se materializa (escala + opacidad) y se va igual. */
.sheet-backdrop{background:var(--scrim);transition:opacity .4s ease}
.sheet-wrap.out .sheet-backdrop{transition-duration:.24s}
.bsheet{border-radius:24px 24px 0 0;transition:transform var(--dur-spring) var(--spring);box-shadow:var(--shadow-up)}
.sheet-wrap.out .bsheet{transition:transform .24s cubic-bezier(.4,0,1,1)}
.bsheet-grab{width:36px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--muted) 45%,transparent);margin-top:6px}
.bsheet-title{font-size:var(--fs-title3);font-weight:700}
@media (min-width:700px){
  .bsheet{border-radius:22px;box-shadow:var(--shadow-3);opacity:0;transform:translate(-50%,24px) scale(.96);
    transition:transform var(--dur-spring) var(--spring),opacity .22s ease}
  .sheet-wrap.is-open .bsheet{opacity:1;transform:translate(-50%,0)}
  .sheet-wrap.out .bsheet{opacity:0;transform:translate(-50%,24px) scale(.96);transition:transform .24s cubic-bezier(.4,0,1,1),opacity .2s ease}
}
/* Hoja de acciones de iOS: material translúcido, opciones de 57 px y «Cancelar» sólido aparte */
.asheet{transition:transform var(--dur-spring) var(--spring)}
.sheet-wrap.out .asheet{transition:transform .24s cubic-bezier(.4,0,1,1)}
.as-group{background:var(--mat-thick);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);border-radius:14px;box-shadow:none}
.as-head{border-bottom:.5px solid var(--line-2)}
.as-head h2{font-size:var(--fs-footnote);font-weight:600;color:var(--muted)}
.as-head p{font-size:var(--fs-footnote);color:var(--muted)}
.as-btn{background:transparent;min-height:57px;font-size:var(--fs-title3);letter-spacing:-.015em}
.as-btn+.as-btn{border-top:.5px solid var(--line-2)}
.as-btn:active{background:color-mix(in srgb,var(--ink) 8%,transparent);transition-duration:0s}
.as-cancel{background:var(--surface);border-radius:14px;box-shadow:none;font-weight:600}
@media (min-width:700px){.as-btn{font-size:var(--fs-body);min-height:50px}}
/* Selector con buscador */
.pk-row{border-radius:10px}
.pk-row.sel{background:color-mix(in srgb,var(--tint) 11%,transparent)}
.pk-row:active{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.pk-plus{border-radius:50%;background:var(--cta);color:var(--on-color)}

/* ===== 6. Avisos, buscador global y transiciones ===== */
/* Aviso como el «HUD» de iOS: cápsula de material oscuro que aparece desde abajo con el resorte */
.toast{border-radius:18px;background:rgba(30,30,32,.86);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);
  box-shadow:0 10px 30px rgba(0,0,0,.22);transform:translateY(16px) scale(.96);transition:opacity .2s ease,transform var(--dur-spring) var(--spring)}
:root[data-theme="dark"] .toast{background:rgba(58,58,60,.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .toast{background:rgba(58,58,60,.9)}}
.toast-act{border-radius:var(--r-pill);background:rgba(255,255,255,.16)}
.t-ok .toast-ic{color:#30D158}.t-warn .toast-ic{color:#FF9F0A}.t-info .toast-ic{color:#64A0FF}

/* Buscador global: campo de búsqueda de iOS (cápsula con relleno translúcido) y menú de resultados de material */
.gs-field{border:0;background:var(--fill-t);height:40px}
.gs-field:focus-within{border-color:transparent;background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--tint) 18%,transparent),var(--shadow-1)}
.gs-pop{border:0;border-radius:16px;background:var(--mat-thick);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);box-shadow:var(--shadow-3);
  transform-origin:top center;animation:gsIn .4s var(--spring) backwards}
@keyframes gsIn{from{opacity:0;transform:scale(.97) translateY(-4px)}}
.gs-opt{border-radius:10px}
.gs-opt:hover,.gs-opt[aria-selected="true"]{background:var(--tint);color:var(--on-color)}
.gs-opt:hover small,.gs-opt[aria-selected="true"] small{color:rgba(255,255,255,.82)}
.gs-oic{border-radius:8px;background:var(--tint);color:var(--on-color)}
.gs-opt:hover .gs-oic,.gs-opt[aria-selected="true"] .gs-oic{background:rgba(255,255,255,.2);color:var(--on-color)}
:root[data-theme="dark"] .gs-opt:hover,:root[data-theme="dark"] .gs-opt[aria-selected="true"],:root[data-theme="dark"] .gs-oic{background:var(--sel)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gs-opt:hover,:root:not([data-theme="light"]) .gs-opt[aria-selected="true"],:root:not([data-theme="light"]) .gs-oic{background:var(--sel)}}
.gs-gt{text-transform:none;letter-spacing:0;font-weight:600}

/* Transición entre pantallas: la nueva entra desde la derecha con el resorte (desde la izquierda al regresar) y se
   aclara rápido; mismo camino de ida y de vuelta. */
#view>.enter:not(.wiz),#view>.wiz.enter>.wiz-body{animation:scrSlide var(--dur-spring) var(--spring) backwards,scrFade .2s ease backwards}
#view>.enter-back:not(.wiz),#view>.wiz.enter-back>.wiz-body{animation:scrSlideBack var(--dur-spring) var(--spring) backwards,scrFade .2s ease backwards}
@keyframes scrSlide{from{transform:translateX(28px)}to{transform:none}}
@keyframes scrSlideBack{from{transform:translateX(-28px)}to{transform:none}}
@keyframes scrFade{from{opacity:0}}

/* Barras del asistente y de acciones: material translúcido con el contenido pasando debajo */
.wiz-top{background:var(--mat);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur)}
.actionbar{background:var(--mat);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);border-top:.5px solid var(--line-2)}
.wiz-progress{height:3px;border-radius:2px}
.wiz-progress i{background:var(--tint);transition:width var(--dur-spring) var(--spring)}

/* ===== 7a. Barra inferior flotante (teléfono y tableta) =====
   Una cápsula de cristal separada del borde; el contenido se desplaza por debajo. La sección activa lleva una píldora
   tenue que aparece con el resorte, además del color (no solo el color). */
@media (max-width:1023px){
  .tabbar{left:0;right:0;bottom:max(10px,calc(var(--sab) - 12px));width:min(calc(100% - 24px - var(--sal) - var(--sar)),560px);margin:0 auto;
    height:62px;padding:0 6px;border:0;border-radius:var(--r-pill);background:var(--mat);
    -webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);
    box-shadow:inset 0 0 0 .5px var(--mat-edge),0 0 0 .5px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.14)}
  .tabbar a,.tabbar button{position:relative;gap:1px;font-size:var(--fs-caption);font-weight:500;color:var(--ink-2);letter-spacing:0}
  .tabbar a>.ic{width:26px;height:26px;padding:0;border-radius:0;background:none!important;position:relative;z-index:1}
  .tabbar a>span,.tabbar button>span{position:relative;z-index:1}
  .tabbar a::before{content:"";position:absolute;inset:5px 1px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--tint) 13%,transparent);
    opacity:0;transform:scale(.82);transition:opacity .2s ease,transform var(--dur-b) var(--spring-b)}
  .tabbar a.on{color:var(--tint);font-weight:600}
  .tabbar a.on::before{opacity:1;transform:none}
  .tabbar a:active,.tabbar button:active{opacity:1}
  .tabbar a:active>.ic{transform:scale(.88);transition:transform .1s ease-out}
  .tabbar a>.ic{transition:transform var(--dur-spring) var(--spring)}
  .tab-plus{width:44px;height:30px;border-radius:var(--r-pill);background:var(--cta);box-shadow:0 2px 8px color-mix(in srgb,var(--cta) 40%,transparent)}
  .tab-new:active .tab-plus{transform:scale(.9);transition-duration:.1s}
  .tab-new{color:var(--ink-2)!important}
  html.ro .tabbar{grid-template-columns:repeat(var(--tb-ro,4),1fr)}
}

/* ===== 7b. Menú lateral y barra superior (computadora): como la barra lateral de macOS ===== */
@media (min-width:1024px){
  .tabbar{background:color-mix(in srgb,var(--canvas) 55%,var(--surface));border-right:.5px solid var(--line-2);padding-left:calc(var(--sal) + 12px);padding-right:12px}
  .tb-cat{margin:16px 10px 4px;font-size:var(--fs-caption);font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
  .tabbar a,.tabbar button{min-height:34px;padding:0 10px;border-radius:8px;font-weight:500;color:var(--ink);gap:10px}
  .tabbar a>.ic{width:19px;height:19px;color:var(--tint)}
  .tabbar a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
  .tabbar a:hover>.ic{color:var(--tint)}
  .tabbar a.cur,.opx-tabs a.on{background:var(--sel);color:var(--on-color);font-weight:600}
  .tabbar a.cur>.ic,.opx-tabs a.on>.ic{color:var(--on-color)}
  .tabbar a.cur::before,.opx-tabs a.on::before{display:none}
  .tabbar a.cur:hover{background:var(--sel);color:var(--on-color)}
  .tabbar .tab-new{border-radius:10px;box-shadow:none;margin-bottom:10px}
  .tabbar .tab-new:active{transform:scale(.97)}
  .tp-t{font-weight:700;letter-spacing:-.02em}
  .tp-t b{font-weight:700}
  .tp-bell,.tp-user{transition:background-color .2s ease,transform var(--dur-spring) var(--spring)}
  .tp-bell:hover,.tp-user:hover{background:var(--fill-t)}
  .tp-bell:active,.tp-user:active{transform:scale(.95);transition-duration:.1s}
  .tp-av{background:linear-gradient(180deg,#3E6BDA,#0B2F80);box-shadow:none}
  .tp-dot{border-color:var(--canvas)}
  .tp-when{border-left-color:var(--line-2)}
  .tp-search{flex-basis:320px}
}

/* ===== 8. Accesibilidad ===== */
/* Menos transparencia: materiales sólidos */
@media (prefers-reduced-transparency:reduce){
  .tabbar,.wiz-top,.actionbar,.as-group,.gs-pop,.toast{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .tabbar,.wiz-top,.actionbar,.as-group,.gs-pop{background:var(--surface)!important}
  .toast{background:#1C1C1E}
}
/* Más contraste: bordes definidos en campos, tarjetas y barras */
@media (prefers-contrast:more){
  .in,.search-in,.gs-field,.chip:not(.on),.seg{border:1px solid var(--ink-2)}
  .grp-b,.card,.list,.empty,.mod-card,.tabbar,.as-group{box-shadow:0 0 0 1px var(--ink-2)}
  .tabbar,.wiz-top,.actionbar{background:var(--surface)}
  .muted,.page-lead,.fl,.grp-h h3,.row-l2,.row-l3{color:var(--ink-2)}
}
/* Menos movimiento: sin desplazamientos ni rebotes; solo cambios de opacidad breves */
@media (prefers-reduced-motion:reduce){
  #view>.enter:not(.wiz),#view>.wiz.enter>.wiz-body,#view>.enter-back:not(.wiz),#view>.wiz.enter-back>.wiz-body{animation:scrFade .2s ease backwards!important;animation-duration:.2s!important}
  .bsheet,.sheet-wrap.is-open .bsheet,.sheet-wrap.out .bsheet,.asheet,.sheet-wrap.is-open .asheet,.sheet-wrap.out .asheet{transform:none!important}
  @media (min-width:700px){.bsheet,.sheet-wrap.is-open .bsheet,.sheet-wrap.out .bsheet{transform:translate(-50%,0)!important}}
  .bsheet,.asheet{opacity:0;transition:opacity .2s ease!important}
  .sheet-wrap.is-open .bsheet,.sheet-wrap.is-open .asheet{opacity:1}
  .sheet-wrap.out .bsheet,.sheet-wrap.out .asheet{opacity:0}
  .toast{transform:none!important}
  .tabbar a::before{transform:none!important}
}

/* ===== 9. Pantallas principales (parte 2): Inicio, Operación, Administración, Logística, Órdenes, Operadores y
   Unidades =====
   Tarjetas sin borde (las separa el fondo agrupado). La franja de color del estado deja de ser un borde que se dobla
   en la esquina: es una barra recta dentro de la tarjeta. Íconos de las tarjetas en mosaico de color sólido con el
   dibujo en blanco (como Ajustes de iOS); cifras grandes con la variante redondeada de la letra del sistema. */
.home .so-home,.home .home-recent,.home .lg-home,.home .tm-home,.lgh-card,.lg-idle,.lg-hero,.lg-opr,.lg-sum,.lg-log,.gps-card,.fc-month,
.ec-entry,.fc-entry,.rp-entry,.mon-entry,.trip-card,.imp-row,.bal-card,.tile,.total-line,.profile,.unit-meta,.perf-card,.chart-box,.fisc,
.un-card,.uf-doc,.un-notice{border-color:transparent;box-shadow:var(--shadow-1)}
.lg-card,.ec-card,.fc-card,.so-card,.so-tile,.uf-cp{border-color:transparent;border-left-width:0;padding-left:18px;box-shadow:var(--shadow-1);
  background:linear-gradient(var(--lg-dot,var(--uc,var(--tint))),var(--lg-dot,var(--uc,var(--tint)))) 0 14px/4px calc(100% - 28px) no-repeat,var(--surface)}
.uf-cp{background-image:linear-gradient(var(--uc),var(--uc))}
.lg-card:active,.ec-card:active,.fc-card:active,.so-card:active{background-color:var(--fill);transform:scale(.98)}
.so-tile.on,.un-kpi.on{border-color:transparent;box-shadow:0 0 0 2px var(--tint)}
.tm-home-leg{border:0;background:var(--fill-t)}
.home .home-recent .empty{background:var(--fill-t)}
@media (hover:hover) and (pointer:fine){
  .home .tm-home:hover,a.kpi:hover,.mon-entry:hover,.ec-entry:hover,.fc-entry:hover,.rp-entry:hover,.lg-card:hover,.so-card:hover,.trip-card:hover{border-color:transparent;box-shadow:var(--shadow-2)}
}

/* Mosaicos de íconos (módulos, accesos, encabezados y tabla de órdenes) */
.mod-ic,.new-ic,.so-hh-ic,.so-tf-ic{background:var(--ti,var(--tint));color:var(--on-color);border-radius:12px}
/* Un color por módulo (como las filas de Ajustes de iOS); todos con el dibujo blanco a 3:1 o más */
a[href="#/operacion/logistica"],a[href="#/unidades"]{--ti:#5856D6}
a[href="#/operacion/logistica/ruta"],a[href="#/tarifas"],.rp-entry{--ti:#0A7EA4}
a[href="#/operacion/mapa"],a[href="#/cobranza"],.mon-entry{--ti:#248A3D}
a[href="#/operacion/combustible"],a[href="#/calculadora-comisiones"],.ec-entry{--ti:#C4500F}
a[href="#/documentos-corporativos"],.fc-entry{--ti:#8944AB}
a[href="#/operacion/taller"],a[href="#/documentos"]{--ti:#636366}
a[href="#/catalogos"]{--ti:#A2662D}
.mod-ic{width:44px;height:44px}
.mod-ic .ic{width:24px;height:24px}
.new-ic{width:44px;height:44px}
.new-ic .ic{width:24px;height:24px}
.new-opt:nth-child(2) .new-ic{background:var(--orange);color:var(--on-color)}
.so-tf-ic{border-radius:8px}
:root[data-theme="dark"] :is(.mod-ic,.new-ic,.so-hh-ic,.so-tf-ic){background:var(--ti,var(--sel))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.mod-ic,.new-ic,.so-hh-ic,.so-tf-ic){background:var(--ti,var(--sel))}}
:root[data-theme="dark"] .new-opt:nth-child(2) .new-ic{background:var(--orange-d)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .new-opt:nth-child(2) .new-ic{background:var(--orange-d)}}
.mod-card{border-color:transparent;gap:14px}
.mod-tx b{font-weight:600;letter-spacing:-.015em}
.mod-tx small{color:var(--muted)}
/* Opciones de las hojas («Nuevo documento», empresas): renglones con relleno tenue y sin borde */
.new-opt,.co-opt{border-color:transparent;background:color-mix(in srgb,var(--ink) 4%,var(--surface));transition:transform var(--dur-spring) var(--spring),background-color .3s ease}
.new-opt:active,.co-opt:active{background:color-mix(in srgb,var(--ink) 10%,var(--surface));transform:scale(.98);transition-duration:.1s,0s}
.new-tx small,.co-tx small{color:var(--muted)}
/* Tipo de operación (formulario de órdenes): opciones con relleno; la elegida con anillo azul */
.so-type{border-color:transparent;background:var(--fill-t);border-radius:14px;transition:box-shadow .2s ease,background-color .2s ease,transform var(--dur-spring) var(--spring)}
.so-type:active{transform:scale(.98);transition-duration:.1s}
.so-type.on{border-color:transparent;background:color-mix(in srgb,var(--tint) 10%,var(--surface));box-shadow:0 0 0 2px var(--tint)}

/* Avatares como en Contactos: degradado gris con las iniciales en blanco (la foto los reemplaza) */
.av{background-color:#8E939E;background-image:linear-gradient(180deg,#A6ABB6,#848995);color:var(--on-color);letter-spacing:.01em}
:root[data-theme="dark"] .av{background-image:linear-gradient(180deg,#6E727C,#53565E)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .av{background-image:linear-gradient(180deg,#6E727C,#53565E)}}
.av.loaded{background-image:none}

/* Indicadores de Inicio, como los resúmenes de Salud: ícono redondo y nombre en el color del indicador, cifra grande
   redondeada y una barra fina */
.kpi{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i l" "n n" "b b";gap:0 8px;padding:14px 16px 16px;border:0;box-shadow:var(--shadow-1);
  transition:transform var(--dur-spring) var(--spring),box-shadow .2s ease}
.kpi-ic{width:24px;height:24px;border-radius:50%;background:var(--k);color:var(--on-color)}
.kpi-ic .ic{width:14px;height:14px}
.kpi-l{align-self:center;margin:0;font-size:var(--fs-subhead);font-weight:600;line-height:1.2;color:var(--ki);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kpi-ic{align-self:start}
.kpi-n{margin-top:12px;font-family:ui-rounded,"SF Pro Rounded",var(--font);font-size:34px;line-height:1;font-weight:700;letter-spacing:-.02em}
.kpi-bar{height:4px;margin-top:12px;background:var(--fill-t)}
.kpi-bar i{transition:width .8s var(--spring)}
a.kpi:active{transform:scale(.97);transition-duration:.1s}
:root[data-theme="dark"] .kpi-ic{color:var(--on-color)}
:root[data-theme="dark"] .kpi-l{color:color-mix(in srgb,var(--k) 65%,#FFFFFF)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kpi-ic{color:var(--on-color)}:root:not([data-theme="light"]) .kpi-l{color:color-mix(in srgb,var(--k) 65%,#FFFFFF)}}
@media (min-width:1280px){.kpi{padding:14px 14px 16px}.kpi-l{font-size:var(--fs-footnote)}.kpi-n{font-size:32px}}
/* Cifras de los mosaicos de Órdenes, Operadores y Unidades */
.tile b{font-family:ui-rounded,"SF Pro Rounded",var(--font);letter-spacing:-.01em}

/* Divisiones: esquinas más amplias y el botón de la flecha como un círculo translúcido sobre el color */
.div-card{border-radius:22px}
/* Sin desenfoque ni transform en el botón: lo volverían el contenedor de su ::after y la tarjeta dejaría de responder completa */
.div-act{background:rgba(255,255,255,.22);color:var(--on-color);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.45)}
.div-campo .div-act{color:var(--on-color);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.45)}
.div-act::after{border-radius:22px}
.div-ic{border-radius:14px}
.div-tx h2{letter-spacing:-.02em}

/* Encabezados del tablero y tabla de órdenes de Inicio */
.home .sec-h{font-size:var(--fs-title3);letter-spacing:-.02em}
.so-htab{background:var(--fill-t);color:var(--ink);font-weight:500;transition:background-color .2s ease,color .2s ease}
.so-htab.on{background:var(--tint);color:var(--on-color);font-weight:600}
:root[data-theme="dark"] .so-htab.on{background:var(--sel)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .so-htab.on{background:var(--sel)}}
.so-hfilter{border:0;background:var(--fill-t);border-radius:50%}
.so-hnone{background:var(--fill-t)}
.so-tr{border-top-color:var(--line)}
@container (min-width:600px){.so-th{background:transparent;font-size:var(--fs-footnote);color:var(--muted);border-bottom:.5px solid var(--line-2);border-radius:0}}
@media (hover:hover) and (pointer:fine){.so-tr:not(.so-th):hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}}

/* Unidades en operación (Inicio y Logística): flechas del carril como círculos de cristal */
.lg-rnav{border:0;background:var(--mat-thick);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);box-shadow:var(--shadow-2)}
.home .lgh-foot{border-top-color:var(--line)}
.lg-idle{background:var(--fill-t);box-shadow:none}

/* Unidades: número económico en cápsula y foto con las esquinas de la tarjeta */
.un-card{overflow:hidden}
/* Separador con sangría hasta el texto en las listas con avatar */
.list .row:has(>.av)+.row::before{left:68px}

/* ===== 10. Módulos especiales (parte 3): acceso, Monitoreo GPS, Taller, Combustible y Documentos =====
   Los controles del mapa y el portal de clientes están en maps.css y portal.css (el portal no carga esta hoja). */
/* Acceso: la tarjeta del formulario es un material translúcido sobre el encabezado azul; campos de esquinas amplias
   (no píldora) como el resto de la app y el aviso institucional con la barra recta dentro */
.login-card{border-color:transparent;box-shadow:0 2px 8px rgba(0,0,0,.05),0 24px 60px rgba(11,47,128,.18)}
@media (max-width:1023.98px){
  .login-card{background:var(--mat-thick);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);border-radius:28px;box-shadow:inset 0 0 0 .5px var(--mat-edge),0 20px 50px rgba(11,47,128,.2)}
  .login-card .in{border-radius:14px}
  .login-card .in-act{border-radius:10px}
  .lh-t{letter-spacing:-.025em}
}
@media (min-width:1024px){
  .login-card{border-radius:24px}
  .login-card .in{border-radius:12px}

}
.login-card .login-title{letter-spacing:-.02em}
.login-card .login-sub{color:var(--muted)}
.login-card .btn-primary{border-radius:var(--r-pill)}
.login-notice{border-color:transparent;border-left-width:0;padding-left:20px;box-shadow:var(--shadow-1);border-radius:var(--r);
  background:linear-gradient(var(--tint),var(--tint)) 0 14px/3px calc(100% - 28px) no-repeat,var(--surface)}
.ln-ic{background:var(--tint);color:var(--on-color)}
:root[data-theme="dark"] .ln-ic{background:var(--sel)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ln-ic{background:var(--sel)}}
.login-who{border-color:transparent;background:var(--fill-t)}
.login-who .login-role{background:var(--tint);color:var(--on-color)}

/* Monitoreo GPS: barra superior de material sobre el mapa, indicadores con relleno, panel inferior con esquinas de
   hoja de iOS que se acomoda con el resorte y unidades con la franja de estado como barra recta */
.mon-top{background:var(--mat-thick);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);border-bottom:.5px solid var(--line-2)}
.mon-kh{letter-spacing:0;text-transform:none;font-size:var(--fs-footnote);font-weight:600}
.mon-k{border-color:transparent;background:var(--fill-t);border-radius:14px;transition:transform var(--dur-spring) var(--spring),background-color .2s ease,box-shadow .2s ease}
.mon-k:active{transform:scale(.96);transition-duration:.1s}
.mon-k b{font-family:ui-rounded,"SF Pro Rounded",var(--font);font-weight:700}
.mon-k.on{background:color-mix(in srgb,var(--tint) 12%,var(--surface));box-shadow:0 0 0 2px var(--tint)}
.mon-panel{border-radius:24px 24px 0 0;transition:transform var(--dur-spring) var(--spring)}
.mon-row{border-color:transparent;border-left-width:0;padding-left:16px;box-shadow:var(--shadow-1);
  background:linear-gradient(var(--lg-dot),var(--lg-dot)) 0 12px/4px calc(100% - 24px) no-repeat,var(--surface);transition:transform var(--dur-spring) var(--spring),box-shadow .2s ease}
.mon-row:active{transform:scale(.98);transition-duration:.1s}
.mon-dcard{border-color:transparent;background:var(--fill-t)}
.mon-dhead{background:var(--surface)}
.mon-pick{border:0;background:var(--mat-thick);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);box-shadow:var(--shadow-2);border-radius:var(--r-pill)}
.st-list li{border-color:transparent;background:var(--fill-t)}
@media (min-width:1024px){.mon-panel{border-radius:0}}

/* Taller y Combustible: mosaicos, menús, alertas y tarjetas sin borde; cifras redondeadas */
.mt-tile,.mt-menu,.mt-alert,.mt-hero,.mt-list{border-color:transparent;box-shadow:var(--shadow-1)}
.mt-card{border-color:transparent;border-left-width:0;padding-left:18px;box-shadow:var(--shadow-1);
  background:linear-gradient(var(--lg-dot,var(--line-2)),var(--lg-dot,var(--line-2))) 0 14px/4px calc(100% - 28px) no-repeat,var(--surface)}
.mt-tile b{font-family:ui-rounded,"SF Pro Rounded",var(--font);font-size:var(--fs-title2);letter-spacing:-.01em}
.mt-tile small{line-height:1.25}
.dg-bar .icon-btn{border:0;background:var(--mat-thick);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);box-shadow:var(--shadow-2)}
.mph-th{border:0}