/* ══════════════════════════════════════════════════════════════════════════
   ERP — Inicio, páginas de módulo y el cajón "Módulos" de todas las pantallas
   Prefijo .erp- para no pisar el CSS de ninguna pantalla existente.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Botón flotante y cajón (en todas las pantallas) ───────────────────── */
#erpBoton {
    position: fixed; left: 14px; bottom: 76px; z-index: 8000;
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; cursor: pointer;
    background: #0f172a; color: #fff; border: 0; font-family: inherit; font-size: .84rem; font-weight: 700;
    box-shadow: 0 8px 24px rgba(15,23,42,.35); transition: transform .15s, background .15s;
}
#erpBoton:hover { background: #0091d8; transform: translateY(-2px); }
#erpBoton i { font-size: 1rem; }
@media (max-width: 640px) { #erpBoton span { display: none; } #erpBoton { padding: 12px; left: 10px; bottom: 70px; } }
body.erp-cajon-abierto { overflow: hidden; }

#erpCajon { position: fixed; inset: 0; z-index: 9000; }
#erpCajon[hidden] { display: none !important; }
.erp-cajon__fondo { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
.erp-cajon__caja {
    position: absolute; top: 0; left: 0; bottom: 0; width: min(420px, 100%); background: #fff; display: flex; flex-direction: column;
    box-shadow: 12px 0 40px rgba(0,0,0,.25); animation: erpEntra .24s cubic-bezier(.2,.8,.3,1); font-family: 'Segoe UI', system-ui, sans-serif;
}
@keyframes erpEntra { from { transform: translateX(-100%); } to { transform: none; } }
.erp-cajon__cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #e2e8f0; }
.erp-cajon__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #0f172a; font-weight: 700; font-size: .95rem; }
.erp-cajon__logo img { height: 30px; border-radius: 6px; }
.erp-cajon__cerrar { background: none; border: 0; font-size: 1.8rem; line-height: 1; color: #94a3b8; cursor: pointer; }
.erp-cajon__buscar { position: relative; padding: 12px 16px; border-bottom: 1px solid #e2e8f0; }
.erp-cajon__buscar > i { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .85rem; }
.erp-cajon__buscar input { width: 100%; box-sizing: border-box; padding: 10px 12px 10px 36px; border: 1px solid #cbd5e1; border-radius: 9px; font-family: inherit; font-size: .88rem; }
.erp-cajon__buscar input:focus { outline: none; border-color: #0091d8; box-shadow: 0 0 0 3px rgba(0,145,216,.14); }
.erp-cajon__resultados { position: absolute; left: 16px; right: 16px; top: calc(100% - 6px); z-index: 5; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 12px 30px rgba(15,23,42,.16); max-height: 320px; overflow-y: auto; }
.erp-cajon__resultados[hidden] { display: none !important; }
.erp-cajon__res { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-bottom: 1px solid #f1f5f9; text-decoration: none; color: #0f172a; font-size: .86rem; }
.erp-cajon__res:hover { background: #f0f9ff; }
.erp-cajon__res i { color: #0091d8; margin-top: 3px; width: 16px; text-align: center; }
.erp-cajon__res small { display: block; color: #94a3b8; font-size: .74rem; }
.erp-cajon__actual { padding: 10px 16px; background: #f0f9ff; font-size: .82rem; color: #0c4a6e; border-bottom: 1px solid #e0f2fe; }
.erp-cajon__actual small { display: block; color: #64748b; font-size: .74rem; margin-top: 2px; }
.erp-cajon__modulos { flex: 1; overflow-y: auto; padding: 6px 0; }
.erp-cajon__modulo summary { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; font-weight: 700; font-size: .9rem; color: #0f172a; list-style: none; }
.erp-cajon__modulo summary::-webkit-details-marker { display: none; }
.erp-cajon__modulo summary:hover { background: #f8fafc; }
.erp-cajon__modulo summary i { width: 20px; text-align: center; }
.erp-cajon__ver { margin-left: auto; color: #94a3b8; text-decoration: none; font-size: 1.1rem; padding: 0 6px; border-radius: 6px; }
.erp-cajon__ver:hover { background: #e2e8f0; color: #0f172a; }
.erp-cajon__modulo[open] summary { background: #f8fafc; }
.erp-cajon__pantalla { display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 46px; font-size: .85rem; color: #334155; text-decoration: none; }
.erp-cajon__pantalla i { width: 16px; text-align: center; color: #94a3b8; font-size: .8rem; }
.erp-cajon__pantalla:hover { background: #f0f9ff; color: #0f172a; }
.erp-cajon__pantalla--actual { background: #e0f2fe; color: #0c4a6e; font-weight: 600; }
.erp-cajon__pantalla--pend { color: #94a3b8; cursor: default; }
.erp-cajon__pantalla--pend em { font-size: .7rem; font-style: normal; background: #f1f5f9; border-radius: 999px; padding: 1px 7px; }
.erp-cajon__pie { display: flex; justify-content: space-between; padding: 10px 16px; border-top: 1px solid #e2e8f0; background: #f8fafc; }
.erp-cajon__pie a { font-size: .84rem; color: #475569; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.erp-cajon__pie a:hover { color: #0091d8; }
.erp-globo { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #dc2626; color: #fff; font-size: .68rem; font-weight: 700; margin-left: 6px; }

/* ── Inicio y módulos ───────────────────────────────────────────────────── */
.erp-pagina { max-width: 1240px; margin: 0 auto; padding: 22px 22px 90px; font-family: 'Segoe UI', system-ui, sans-serif; color: #0f172a; }
.erp-pagina h2 { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: #334155; margin: 26px 0 12px; text-transform: uppercase; letter-spacing: .05em; }
.erp-pagina h2 i { color: #0091d8; }

.erp-bienvenida { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.erp-bienvenida h1 { margin: 0; font-size: 1.6rem; }
.erp-bienvenida p { margin: 4px 0 0; color: #64748b; text-transform: capitalize; }
.erp-buscar-grande { position: relative; flex: 1 1 380px; max-width: 640px; }
.erp-buscar-grande > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.erp-buscar-grande input { width: 100%; box-sizing: border-box; padding: 14px 16px 14px 44px; border: 1px solid #cbd5e1; border-radius: 12px; font-family: inherit; font-size: 1rem; box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.erp-buscar-grande input:focus { outline: none; border-color: #0091d8; box-shadow: 0 0 0 3px rgba(0,145,216,.14); }
.erp-buscar-grande__res { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 14px 36px rgba(15,23,42,.16); max-height: 360px; overflow-y: auto; }
.erp-buscar-grande__res[hidden] { display: none !important; }
.erp-buscar-grande__res a, .erp-buscar-grande__res div { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid #f1f5f9; text-decoration: none; color: #0f172a; font-size: .9rem; }
.erp-buscar-grande__res a:hover { background: #f0f9ff; }
.erp-buscar-grande__res i { color: #0091d8; margin-top: 3px; width: 18px; text-align: center; }
.erp-buscar-grande__res small { display: block; color: #94a3b8; font-size: .76rem; }

.erp-hoy__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.erp-cifra { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; border-top: 4px solid var(--color, #0091d8); text-decoration: none; color: #0f172a; transition: transform .12s, box-shadow .15s; }
.erp-cifra:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,23,42,.08); }
.erp-cifra i { color: var(--color, #0091d8); font-size: 1.1rem; }
.erp-cifra strong { font-size: 1.7rem; line-height: 1.1; margin-top: 4px; }
.erp-cifra span { font-size: .8rem; color: #475569; }
.erp-cifra small { font-size: .72rem; color: #94a3b8; }

.erp-rejilla-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.erp-modulo { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid #e2e8f0; text-decoration: none; color: #0f172a; transition: transform .12s, box-shadow .15s, border-color .15s; }
.erp-modulo:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,23,42,.1); border-color: var(--color); }
.erp-modulo__icono { position: relative; flex: none; width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--color, #0091d8) 14%, #fff); color: var(--color, #0091d8); font-size: 1.3rem; }
.erp-modulo__icono .erp-globo { position: absolute; top: -6px; right: -8px; margin: 0; }
.erp-modulo__texto strong { display: block; font-size: 1.02rem; }
.erp-modulo__texto small { display: block; color: #64748b; font-size: .82rem; margin: 2px 0 6px; line-height: 1.4; }
.erp-modulo__texto em { display: block; font-style: normal; font-size: .74rem; color: #94a3b8; line-height: 1.4; }

.erp-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.erp-rejilla--compacta { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.erp-tarjeta { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 13px 40px 13px 14px; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; text-decoration: none; color: #0f172a; transition: transform .12s, box-shadow .15s; }
.erp-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,23,42,.08); }
.erp-tarjeta--pend { opacity: .6; background: #f8fafc; border-style: dashed; padding-right: 14px; }
.erp-tarjeta__icono { position: relative; flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #f0f9ff; color: #0091d8; font-size: 1.05rem; }
.erp-tarjeta__icono .erp-globo { position: absolute; top: -6px; right: -8px; margin: 0; }
.erp-tarjeta__texto strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .93rem; }
.erp-tarjeta__texto small { display: block; color: #64748b; font-size: .8rem; line-height: 1.4; margin-top: 3px; }
.erp-tarjeta__texto em { display: block; font-style: normal; font-size: .72rem; color: #94a3b8; margin-top: 4px; }
.erp-etq { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; background: #f1f5f9; color: #64748b; }
.erp-etq--nuevo { background: #dcfce7; color: #166534; }
.erp-etq--pend { background: #fef3c7; color: #92400e; }
.erp-fav { position: absolute; top: 10px; right: 10px; background: none; border: 0; cursor: pointer; color: #cbd5e1; font-size: .95rem; padding: 4px; }
.erp-fav:hover, .erp-fav--si { color: #f59e0b; }

.erp-miga { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: #64748b; margin-bottom: 14px; }
.erp-miga a { color: #0091d8; text-decoration: none; }
.erp-modulo-cab { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.erp-modulo-cab .erp-modulo__icono { width: 58px; height: 58px; font-size: 1.5rem; }
.erp-modulo-cab h1 { margin: 0; font-size: 1.5rem; }
.erp-modulo-cab p { margin: 3px 0 0; color: #64748b; }
.erp-otros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 28px; font-size: .82rem; color: #94a3b8; }
.erp-otros a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0; color: #334155; text-decoration: none; }
.erp-otros a:hover { border-color: #0091d8; color: #0091d8; }

/* ── Menú lateral FIJO (pantallas anchas) ──────────────────────────────────
   El cajón se queda abierto a la izquierda y el contenido se desplaza, en
   todas las pantallas. Se pliega con la chincheta; en ventanas de menos de
   1.000 píxeles (móvil) sigue siendo un cajón. */
/* Por debajo de las ventanas emergentes de las pantallas (casi todas usan
   z-index de 50 en adelante): al abrir una, la tapa como al resto de la
   página en vez de esconder su parte izquierda. Nada de la página cae
   debajo del menú, porque el contenido empieza a su derecha. */
#erpCajon.erp-cajon--fijo { inset: 0 auto 0 0; width: 264px; z-index: 45; }
#erpCajon.erp-cajon--fijo .erp-cajon__fondo { display: none; }
#erpCajon.erp-cajon--fijo .erp-cajon__caja { width: 264px; box-shadow: none; border-right: 1px solid #e2e8f0; animation: none; }
#erpCajon.erp-cajon--fijo .erp-cajon__logo span { font-size: .88rem; }
#erpCajon.erp-cajon--fijo .erp-cajon__buscar input { font-size: .82rem; padding: 8px 10px 8px 32px; }
#erpCajon.erp-cajon--fijo .erp-cajon__buscar > i { left: 26px; }
#erpCajon.erp-cajon--fijo .erp-cajon__modulo summary { padding: 8px 14px; font-size: .86rem; }
#erpCajon.erp-cajon--fijo .erp-cajon__pantalla { padding: 6px 12px 6px 40px; font-size: .82rem; }
body.erp-fijo { margin-left: 264px !important; }
body.erp-fijo .navigation-bar { left: 264px !important; }
/* Las barras inferiores propias (aplicación del conductor, trabajadores) */
body.erp-fijo .bottom-nav { left: 264px !important; right: 0 !important; width: auto !important; }
/* Gestión de rutas: los botones que flotan sobre el mapa se colocan a
   partir del ancho de su panel de pedidos (--sidebar-width) contando desde
   el borde de la ventana; con el menú fijo hay que sumarle sus 264 px. Los
   centrados van al centro del mapa, no al de la ventana. */
body.erp-fijo .view-controls { left: calc(var(--sidebar-width, 350px) + 20px + 264px) !important; }
body.erp-fijo .pr-barra-busqueda { left: calc((100vw + 264px + var(--sidebar-width, 350px)) / 2) !important; }
body.erp-fijo .pr-barra-busqueda { width: min(560px, calc(100vw - 264px - var(--sidebar-width, 350px) - 90px)) !important; }
body.erp-fijo #erpBoton { display: none; }
body.erp-fijo header { margin-left: 0; }
.erp-chincheta { background: none; border: 0; cursor: pointer; color: #94a3b8; font-size: 1rem; padding: 4px 6px; border-radius: 6px; }
.erp-chincheta:hover { color: #0091d8; background: #f0f9ff; }
.erp-chincheta--fija { color: #0091d8; }
.erp-cajon__cab-botones { display: flex; align-items: center; gap: 2px; }

/* ── Barra inferior única (todas las pantallas) ─────────────────────────────
   Antes cada pantalla llevaba una barra distinta (unas a Contenedores, otras
   a Entradas, otras a Precios). Ahora es la misma en todas y se pinta igual
   pase lo que pase con el CSS de la pantalla. */
.navigation-bar.erp-barra {
    position: fixed !important; bottom: 0 !important; left: 0; right: 0 !important; height: 58px !important;
    display: flex !important; justify-content: center !important; align-items: center !important; gap: clamp(18px, 6vw, 56px) !important;
    background: rgba(255,255,255,.96) !important; backdrop-filter: blur(10px); border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 16px rgba(15,23,42,.08) !important; z-index: 6500 !important; padding: 0 !important; margin: 0 !important;
    font-family: 'Segoe UI', system-ui, sans-serif;
}
.navigation-bar.erp-barra .nav-item {
    display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important;
    color: #64748b !important; text-decoration: none !important; font-size: .72rem !important; font-weight: 600 !important;
    padding: 6px 10px !important; border-radius: 10px !important; background: none !important; border: 0 !important; transition: color .15s, background .15s;
}
.navigation-bar.erp-barra .nav-item i { font-size: 1.15rem !important; }
.navigation-bar.erp-barra .nav-item:hover { color: #0091d8 !important; background: #f0f9ff !important; }
.navigation-bar.erp-barra .nav-item.active { color: #0091d8 !important; }
body:has(.navigation-bar.erp-barra) { padding-bottom: 64px; }
@media (max-width: 480px) { .navigation-bar.erp-barra .nav-item span { font-size: .64rem; } }

/* ── El buscador de la cabecera busca pantallas (antes no hacía nada) ───── */
header .search-bar { position: relative; }
.erp-cab-res {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 7500; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 14px 36px rgba(15,23,42,.18); max-height: 360px; overflow-y: auto; text-align: left; font-family: 'Segoe UI', system-ui, sans-serif;
}
.erp-cab-res[hidden] { display: none !important; }
.erp-cab-res a, .erp-cab-res div { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-bottom: 1px solid #f1f5f9; text-decoration: none; color: #0f172a; font-size: .86rem; }
.erp-cab-res a:hover { background: #f0f9ff; }
.erp-cab-res i { color: #0091d8; margin-top: 3px; width: 16px; text-align: center; }
.erp-cab-res small { display: block; color: #94a3b8; font-size: .74rem; }

/* El contador junto al título de algunas pantallas (GIAHSA, Proveedores):
   se perdió al unificar las cabeceras y el código lo seguía rellenando. */
header .logo .logo-conteo, header .logo .pro-conteo { font-size: .78rem; font-weight: 600; color: #64748b; margin-left: .5rem; letter-spacing: 0; }
header .logo .logo-conteo:empty, header .logo .pro-conteo:empty { display: none; }

/* Gestión de rutas: aviso de pedidos de GIAHSA apartados de la lista */
.giahsa-apartados { margin: 8px 10px; padding: 8px 10px; border-radius: 8px; background: #ecfeff; border: 1px solid #a5f3fc; color: #0e7490; font-size: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.giahsa-apartados a { color: #0e7490; font-weight: 600; }
.giahsa-apartados button { border: 1px solid #67e8f9; background: #fff; color: #0e7490; border-radius: 999px; padding: 2px 8px; font-size: 11.5px; cursor: pointer; }

/* Con una ventana o un panel abierto, la barra de abajo se aparta (5/10/2026).
   Está fija y por encima de todo (z-index 6500): en el móvil, las ventanas
   ocupan la pantalla entera y sus botones de abajo quedaban debajo de la
   barra, sin poder pulsarlos («Abrir incidencia» de Flota). En el móvil se
   apartan también la burbuja de FLORE y la pestaña de Notas. */
html.modal-abierta .navigation-bar.erp-barra,
body:has(.modal-backdrop[style*="flex"]) .navigation-bar.erp-barra,
body:has(.fv-panel.abierto) .navigation-bar.erp-barra,
body:has(.sk-panel.abierto) .navigation-bar.erp-barra,
body:has(.sk-modal-fondo.abierto) .navigation-bar.erp-barra { display: none !important; }
@media (max-width: 700px) {
    html.modal-abierta #floraRaiz, body:has(.modal-backdrop[style*="flex"]) #floraRaiz, body:has(.fv-panel.abierto) #floraRaiz,
    body:has(.sk-panel.abierto) #floraRaiz, body:has(.sk-modal-fondo.abierto) #floraRaiz,
    html.modal-abierta #notasRaiz, body:has(.modal-backdrop[style*="flex"]) #notasRaiz, body:has(.fv-panel.abierto) #notasRaiz,
    body:has(.sk-panel.abierto) #notasRaiz, body:has(.sk-modal-fondo.abierto) #notasRaiz { display: none !important; }
    /* Y el pie de la ventana respeta la zona del gesto de inicio del iPhone */
    .modal-foot { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important; }
}