/* EROGLOBAL Mensajería: tema de marca sobre Bootstrap 5 (servido local). Sin estilos inline (CSP).
   Paleta tomada del logo y del sitio eroglobal.com. Texto blanco solo sobre --eg-navy o --eg-accion-oscuro (AA);
   el azul de acción #467ff7 y el celeste #5bc0de se usan en elementos gráficos o con texto azul marino encima. */

@font-face { font-family: "Open Sans"; src: url("../fonts/open-sans-300.woff2") format("woff2"); font-weight: 300 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/open-sans-700.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

:root {
  --eg-navy: #1a1d49;
  --eg-navy-2: #1c2448;
  --eg-navy-hover: #2b3070;
  --eg-navy-50: #eceef6;
  --eg-navy-100: #d9dcec;
  --eg-gris-logo: #575756;
  --eg-gris-logo-2: #706f6f;
  --eg-celeste: #5bc0de;
  --eg-celeste-50: #e6f5fa;
  --eg-accion: #467ff7;
  --eg-accion-oscuro: #2f62d6;
  --eg-accion-hover: #244fb5;
  --eg-texto-2: #69727d;
  --eg-gris-claro: #d5d8dc;
  --eg-fondo: #f9fafa;
  --eg-texto: #1f2124;
  --eg-ok: #2f7a14;
  --eg-ok-50: #eaf6e4;
  --eg-libre: #2f9e44;
  --font-display: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bs-primary: #1a1d49;
  --bs-primary-rgb: 26, 29, 73;
  --bs-success: #2f7a14;
  --bs-success-rgb: 47, 122, 20;
  --bs-body-font-family: var(--font-body);
  --bs-body-bg: var(--eg-fondo);
  --bs-body-color: var(--eg-texto);
  --bs-link-color: #2f62d6;
  --bs-link-color-rgb: 47, 98, 214;
  --bs-link-hover-color: #1a1d49;
  --bs-link-hover-color-rgb: 26, 29, 73;
  --bs-border-color: var(--eg-gris-claro);
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1rem;
  --bs-secondary-color: var(--eg-texto-2);
}

body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .font-display { font-family: var(--font-display); font-weight: 700; color: var(--eg-navy); letter-spacing: -.01em; }
.text-muted, .form-text { color: var(--eg-texto-2) !important; }

.icon { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-lg { width: 1.6em; height: 1.6em; }

/* Botones: primario azul marino; CTA (btn-success) en azul de acción oscurecido para texto blanco AA. */
.btn-primary { --bs-btn-bg: #1a1d49; --bs-btn-border-color: #1a1d49; --bs-btn-hover-bg: #2b3070; --bs-btn-hover-border-color: #2b3070; --bs-btn-active-bg: #12143a; --bs-btn-active-border-color: #12143a; --bs-btn-disabled-bg: #1a1d49; --bs-btn-disabled-border-color: #1a1d49; }
.btn-success { --bs-btn-bg: #2f62d6; --bs-btn-border-color: #2f62d6; --bs-btn-hover-bg: #244fb5; --bs-btn-hover-border-color: #244fb5; --bs-btn-active-bg: #1f449c; --bs-btn-active-border-color: #1f449c; --bs-btn-disabled-bg: #2f62d6; --bs-btn-disabled-border-color: #2f62d6; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.btn-outline-primary { --bs-btn-color: #1a1d49; --bs-btn-border-color: #1a1d49; --bs-btn-hover-bg: #1a1d49; --bs-btn-hover-border-color: #1a1d49; --bs-btn-active-bg: #1a1d49; --bs-btn-active-border-color: #1a1d49; }
.btn { font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
/* Bordes de campos con contraste 3:1 sobre blanco (WCAG 1.4.11); el gris claro de marca queda para separadores. */
.form-control, .form-select, .form-check-input { border-color: #858b93; }
.form-control::placeholder { color: #6c737c; }
.form-control:focus, .form-select:focus, .btn:focus-visible { border-color: #467ff7; box-shadow: 0 0 0 .2rem rgba(70, 127, 247, .3); }
.form-check-input:checked { background-color: #1a1d49; border-color: #1a1d49; }
.alert-primary { --bs-alert-bg: var(--eg-celeste-50); --bs-alert-border-color: #b5e2ef; --bs-alert-color: var(--eg-navy); }

/* Barra superior */
.navbar-marca { background: var(--eg-navy); border-bottom: 4px solid var(--eg-celeste); }
.navbar-marca .navbar-brand { gap: .75rem; }
.navbar-marca .navbar-brand img { height: 32px; width: auto; }
.navbar-marca .navbar-brand span { font-family: var(--font-display); color: #fff; font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; padding-left: .75rem; border-left: 1px solid rgba(255, 255, 255, .35); line-height: 1.6; }
.navbar-marca .nav-link { color: rgba(255, 255, 255, .85); display: flex; align-items: center; gap: .4rem; font-weight: 600; white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1399.98px) { .navbar-marca .navbar-nav .nav-link { padding-left: .45rem; padding-right: .45rem; font-size: .92rem; } }
.navbar-marca .nav-link:hover, .navbar-marca .nav-link:focus { color: #fff; }
.navbar-marca .nav-link.active { color: #fff; box-shadow: inset 0 -3px 0 var(--eg-celeste); }
.navbar-marca .navbar-toggler { border-color: rgba(255, 255, 255, .4); color: #fff; }
.navbar-marca .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.navbar-marca .usuario { color: #fff; font-size: .85rem; line-height: 1.2; }
.navbar-marca .usuario small { color: #c6cae4; display: block; }
.avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--eg-celeste); color: var(--eg-navy); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }

.pie { color: var(--eg-texto-2); font-size: .8rem; text-align: center; padding: 1.25rem 0; letter-spacing: .02em; }

/* Tarjetas */
.card { border: 1px solid var(--eg-gris-claro); box-shadow: 0 1px 2px rgba(26, 29, 73, .05), 0 1px 3px rgba(26, 29, 73, .08); }
.card-header { background: #fff; font-family: var(--font-display); color: var(--eg-navy); font-weight: 700; }
.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.encabezado .eyebrow { color: var(--eg-accion-oscuro); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.encabezado h1 { margin: 0; font-size: 1.6rem; }

.kpi { background: #fff; border: 1px solid var(--eg-gris-claro); border-radius: .75rem; padding: 1rem; height: 100%; }
.kpi .valor { font-family: var(--font-display); font-size: 1.75rem; color: var(--eg-navy); line-height: 1.1; }
.kpi .etiqueta { color: var(--eg-texto-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.kpi .detalle { color: var(--eg-texto-2); font-size: .8rem; }

/* Estados del envío */
.estado { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .2rem .65rem; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.estado-solicitado { background: #fef3c7; color: #92400e; }
.estado-asignado, .estado-hacia_origen, .estado-recogido, .estado-hacia_destino { background: var(--eg-navy-50); color: var(--eg-navy); }
.estado-entregado { background: var(--eg-ok-50); color: var(--eg-ok); }
.estado-cancelado { background: #eef0f2; color: var(--eg-texto-2); }
.estado-fallido { background: #fdecea; color: #b42318; }
.estado-sin_asignar { background: #fdecea; color: #b42318; }
.urgente { background: #b42318; color: #fff; }

/* Mapas */
.mapa { width: 100%; height: 420px; border-radius: .75rem; border: 1px solid var(--eg-gris-claro); background: #eceef1; z-index: 0; }
.mapa-alto { height: calc(100vh - 210px); min-height: 460px; }
.mapa-medio { height: 320px; }
.mapa-chico { height: 260px; }
.mk { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); color: #fff; font: 700 11px/1 "Open Sans", sans-serif; }
.mk-libre { background: var(--eg-libre); }
.mk-ocupado { background: var(--eg-accion); }
.mk-desconectado { background: #9aa3b2; }
.mk-a { background: var(--eg-accion-oscuro); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.mk-b { background: var(--eg-navy); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.mk-a span, .mk-b span { transform: rotate(45deg); font-size: 12px; }
.mk-yo { background: var(--eg-accion); }

/* Despacho */
.despacho { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 992px) { .despacho { grid-template-columns: minmax(0, 1fr) 420px; } }
.lista-envios { max-height: calc(100vh - 210px); overflow-y: auto; }
.envio-item { border-left: 4px solid transparent; }
.envio-item.sin-asignar { border-left-color: #b42318; background: #fff8f7; }
.envio-item.urgente-item { border-left-color: #e0a526; }
.envio-item .ruta { font-size: .85rem; color: var(--eg-texto-2); }
.leyenda span { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; font-size: .8rem; color: var(--eg-texto-2); }
.punto { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.punto-libre { background: var(--eg-libre); } .punto-ocupado { background: var(--eg-accion); } .punto-desconectado { background: #9aa3b2; }

/* Línea de tiempo */
.linea { list-style: none; padding: 0; margin: 0; }
.linea li { position: relative; padding: 0 0 1rem 1.6rem; }
.linea li::before { content: ""; position: absolute; left: .35rem; top: .35rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--eg-navy); }
.linea li::after { content: ""; position: absolute; left: .66rem; top: 1.1rem; bottom: 0; width: 2px; background: var(--eg-gris-claro); }
.linea li:last-child::after { display: none; }
.linea .cuando { color: var(--eg-texto-2); font-size: .8rem; }

/* Vista del solicitante (móvil primero) */
.contenedor-movil { max-width: 720px; margin: 0 auto; }
.tarjeta-envio { display: block; text-decoration: none; color: inherit; }
.tarjeta-envio:hover { border-color: var(--eg-accion); }
.tipo-opcion .btn { flex: 1; padding: .85rem; }
.btn-check:checked + .btn-outline-primary { background: var(--eg-navy); color: #fff; }
.pin-grande { font-family: var(--font-display); font-size: 2.6rem; letter-spacing: .4em; color: var(--eg-navy); text-align: center; padding-left: .4em; }
.estrellas .btn { padding: .4rem .7rem; }

/* Login */
.auth { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth .card { width: 100%; max-width: 420px; border-radius: 1rem; }
.auth .logo { height: 52px; width: auto; margin: 0 auto 1rem; display: block; }

/* Barras de análisis */
.barra { height: .6rem; background: var(--eg-navy-50); border-radius: 999px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--eg-navy); }
.barra.verde > span { background: var(--eg-celeste); }
.tabla-compacta td, .tabla-compacta th { padding: .45rem .6rem; font-size: .875rem; vertical-align: middle; }
.table thead th { color: var(--eg-navy); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; background: var(--eg-navy-50); }
.horas { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 120px; }
.horas div { background: var(--eg-accion); border-radius: 2px 2px 0 0; min-height: 2px; }
.horas-eje { display: grid; grid-template-columns: repeat(24, 1fr); font-size: .65rem; color: var(--eg-texto-2); text-align: center; }

.foto-envio { width: 100%; max-width: 260px; border-radius: .5rem; border: 1px solid var(--eg-gris-claro); }
[hidden] { display: none !important; }
/* Anchos y altos en porcentaje para barras (sin style inline por la CSP). */
.an-0{width:0%} .an-1{width:1%} .an-2{width:2%} .an-3{width:3%} .an-4{width:4%} .an-5{width:5%} .an-6{width:6%} .an-7{width:7%} .an-8{width:8%} .an-9{width:9%} .an-10{width:10%} .an-11{width:11%} .an-12{width:12%} .an-13{width:13%} .an-14{width:14%} .an-15{width:15%} .an-16{width:16%} .an-17{width:17%} .an-18{width:18%} .an-19{width:19%} .an-20{width:20%} .an-21{width:21%} .an-22{width:22%} .an-23{width:23%} .an-24{width:24%} .an-25{width:25%} .an-26{width:26%} .an-27{width:27%} .an-28{width:28%} .an-29{width:29%} .an-30{width:30%} .an-31{width:31%} .an-32{width:32%} .an-33{width:33%} .an-34{width:34%} .an-35{width:35%} .an-36{width:36%} .an-37{width:37%} .an-38{width:38%} .an-39{width:39%} .an-40{width:40%} .an-41{width:41%} .an-42{width:42%} .an-43{width:43%} .an-44{width:44%} .an-45{width:45%} .an-46{width:46%} .an-47{width:47%} .an-48{width:48%} .an-49{width:49%} .an-50{width:50%} .an-51{width:51%} .an-52{width:52%} .an-53{width:53%} .an-54{width:54%} .an-55{width:55%} .an-56{width:56%} .an-57{width:57%} .an-58{width:58%} .an-59{width:59%} .an-60{width:60%} .an-61{width:61%} .an-62{width:62%} .an-63{width:63%} .an-64{width:64%} .an-65{width:65%} .an-66{width:66%} .an-67{width:67%} .an-68{width:68%} .an-69{width:69%} .an-70{width:70%} .an-71{width:71%} .an-72{width:72%} .an-73{width:73%} .an-74{width:74%} .an-75{width:75%} .an-76{width:76%} .an-77{width:77%} .an-78{width:78%} .an-79{width:79%} .an-80{width:80%} .an-81{width:81%} .an-82{width:82%} .an-83{width:83%} .an-84{width:84%} .an-85{width:85%} .an-86{width:86%} .an-87{width:87%} .an-88{width:88%} .an-89{width:89%} .an-90{width:90%} .an-91{width:91%} .an-92{width:92%} .an-93{width:93%} .an-94{width:94%} .an-95{width:95%} .an-96{width:96%} .an-97{width:97%} .an-98{width:98%} .an-99{width:99%} .an-100{width:100%}
.al-0{height:0%} .al-1{height:1%} .al-2{height:2%} .al-3{height:3%} .al-4{height:4%} .al-5{height:5%} .al-6{height:6%} .al-7{height:7%} .al-8{height:8%} .al-9{height:9%} .al-10{height:10%} .al-11{height:11%} .al-12{height:12%} .al-13{height:13%} .al-14{height:14%} .al-15{height:15%} .al-16{height:16%} .al-17{height:17%} .al-18{height:18%} .al-19{height:19%} .al-20{height:20%} .al-21{height:21%} .al-22{height:22%} .al-23{height:23%} .al-24{height:24%} .al-25{height:25%} .al-26{height:26%} .al-27{height:27%} .al-28{height:28%} .al-29{height:29%} .al-30{height:30%} .al-31{height:31%} .al-32{height:32%} .al-33{height:33%} .al-34{height:34%} .al-35{height:35%} .al-36{height:36%} .al-37{height:37%} .al-38{height:38%} .al-39{height:39%} .al-40{height:40%} .al-41{height:41%} .al-42{height:42%} .al-43{height:43%} .al-44{height:44%} .al-45{height:45%} .al-46{height:46%} .al-47{height:47%} .al-48{height:48%} .al-49{height:49%} .al-50{height:50%} .al-51{height:51%} .al-52{height:52%} .al-53{height:53%} .al-54{height:54%} .al-55{height:55%} .al-56{height:56%} .al-57{height:57%} .al-58{height:58%} .al-59{height:59%} .al-60{height:60%} .al-61{height:61%} .al-62{height:62%} .al-63{height:63%} .al-64{height:64%} .al-65{height:65%} .al-66{height:66%} .al-67{height:67%} .al-68{height:68%} .al-69{height:69%} .al-70{height:70%} .al-71{height:71%} .al-72{height:72%} .al-73{height:73%} .al-74{height:74%} .al-75{height:75%} .al-76{height:76%} .al-77{height:77%} .al-78{height:78%} .al-79{height:79%} .al-80{height:80%} .al-81{height:81%} .al-82{height:82%} .al-83{height:83%} .al-84{height:84%} .al-85{height:85%} .al-86{height:86%} .al-87{height:87%} .al-88{height:88%} .al-89{height:89%} .al-90{height:90%} .al-91{height:91%} .al-92{height:92%} .al-93{height:93%} .al-94{height:94%} .al-95{height:95%} .al-96{height:96%} .al-97{height:97%} .al-98{height:98%} .al-99{height:99%} .al-100{height:100%}