/* CMB Seguimiento · colores de marca CMB */
:root {
  --marino: #0a1d3c;
  --marino-2: #132c55;
  --azul: #0a75f0;
  --azul-claro: #eaf2ff;
  --fondo: #f1f5fa;
  --tarjeta: #fff;
  --borde: #dfe6f0;
  --texto: #1f2d44;
  --suave: #66758c;
  --verde: #16a34a;
  --verde-claro: #e8f7ee;
  --ambar: #d97706;
  --ambar-claro: #fff4e0;
  --rojo: #dc2626;
  --rojo-claro: #fdecec;
  --radio: 10px;
  --sombra: 0 1px 3px rgba(10, 29, 60, .08), 0 4px 14px rgba(10, 29, 60, .05);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; background: var(--fondo); color: var(--texto); font-size: 14px; line-height: 1.45; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--marino); margin: 0; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
[hidden] { display: none !important; }
.oculto-movil { }

/* ---------- estructura del panel ---------- */
.marco { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.lateral { background: var(--marino); color: #c9d5e8; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.lateral .logo { padding: 18px 20px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.lateral .logo img { height: 46px; display: block; }
.lateral .logo small { display: block; color: #8ea2c3; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }
.lateral nav { padding: 10px 10px; flex: 1; overflow-y: auto; }
.lateral nav a { display: flex; align-items: center; gap: 10px; color: #c9d5e8; padding: 9px 12px; border-radius: 8px; margin-bottom: 2px; font-weight: 500; }
.lateral nav a:hover { background: rgba(255,255,255,.06); text-decoration: none; color: #fff; }
.lateral nav a.activo { background: var(--azul); color: #fff; }
.lateral nav a svg { width: 18px; height: 18px; flex: none; }
.lateral nav .cuenta { margin-left: auto; background: rgba(255,255,255,.15); color: #fff; border-radius: 20px; font-size: 11px; padding: 1px 7px; }
.lateral nav a.activo .cuenta { background: rgba(255,255,255,.25); }
.lateral .pie { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.lateral .pie b { color: #fff; display: block; }
.lateral .pie button { margin-top: 8px; }
.principal { min-width: 0; }
.barra-sup { display: none; }
.contenido { padding: 24px 28px 60px; max-width: 1280px; }

.encabezado { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.encabezado .sub { color: var(--suave); margin-top: 3px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- componentes ---------- */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px; margin-bottom: 16px; }
.tarjeta > h2, .tarjeta > .titulo { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rejilla { display: grid; gap: 16px; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cifra { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra); border-left: 4px solid var(--azul); }
.cifra b { display: block; font-size: 28px; color: var(--marino); line-height: 1.1; }
.cifra span { color: var(--suave); font-size: 13px; }
.cifra.ambar { border-left-color: var(--ambar); }
.cifra.verde { border-left-color: var(--verde); }
.cifra.marino { border-left-color: var(--marino); }
a.cifra:hover { text-decoration: none; border-color: var(--azul); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--borde); background: #fff; color: var(--marino); padding: 8px 14px; border-radius: 7px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--azul); color: var(--azul); text-decoration: none; }
.btn.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn.primario:hover { background: #0862cc; color: #fff; }
.btn.marino { background: var(--marino); border-color: var(--marino); color: #fff; }
.btn.verde { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.peligro { color: var(--rojo); }
.btn.peligro:hover { border-color: var(--rojo); }
.btn.chico { padding: 4px 10px; font-size: 12px; }
.btn.fantasma { background: transparent; border-color: transparent; }
.btn:disabled { opacity: .55; cursor: default; }
.btn svg { width: 16px; height: 16px; }
.lateral .btn { background: transparent; color: #c9d5e8; border-color: rgba(255,255,255,.2); }

label.campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--suave); }
input, select, textarea { font: inherit; color: var(--texto); border: 1px solid var(--borde); border-radius: 7px; padding: 8px 10px; background: #fff; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(10,117,240,.25); border-color: var(--azul); }
textarea { resize: vertical; min-height: 70px; }
input[type=checkbox] { width: auto; }
.formulario { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formulario .ancho { grid-column: 1 / -1; }
.formulario .doble { grid-column: span 2; }
.contacto-fila { display: grid; gap: 8px; grid-template-columns: 1.3fr 1fr 1.4fr 1fr 1.3fr auto; align-items: end;
  padding: 10px; margin-bottom: 8px; background: var(--fondo); border-radius: 8px; }
.contacto-fila [data-quitar-contacto] { margin-bottom: 4px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--texto); font-size: 14px; }

.tabla-envoltura { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); padding: 8px 10px; border-bottom: 2px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr.clic { cursor: pointer; }
.tabla tr.clic:hover td { background: #f6f9fd; }
.tabla .n { text-align: right; white-space: nowrap; }
.tabla .min { width: 1%; white-space: nowrap; }

.chip { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; background: #eef2f7; color: var(--suave); white-space: nowrap; }
.chip.azul { background: var(--azul-claro); color: var(--azul); }
.chip.verde { background: var(--verde-claro); color: var(--verde); }
.chip.ambar { background: var(--ambar-claro); color: var(--ambar); }
.chip.rojo { background: var(--rojo-claro); color: var(--rojo); }
.chip.marino { background: var(--marino); color: #fff; }

.progreso { height: 8px; border-radius: 8px; background: #e6ecf4; overflow: hidden; min-width: 80px; }
.progreso i { display: block; height: 100%; background: linear-gradient(90deg, var(--azul), #3d95ff); border-radius: 8px; }
.vacio { text-align: center; color: var(--suave); padding: 28px 10px; }
.vacio svg { width: 40px; height: 40px; opacity: .35; display: block; margin: 0 auto 8px; }
.suave { color: var(--suave); }
.chico { font-size: 12px; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.filtros { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.filtros input, .filtros select { width: auto; min-width: 160px; }
.filtros input[type=search] { flex: 1; min-width: 200px; }

/* pestañas */
.pestanas { display: flex; gap: 4px; border-bottom: 2px solid var(--borde); margin-bottom: 16px; overflow-x: auto; }
.pestanas a { padding: 9px 14px; color: var(--suave); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.pestanas a:hover { color: var(--marino); text-decoration: none; }
.pestanas a.activo { color: var(--azul); border-color: var(--azul); }

/* ficha de datos */
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 18px; }
.datos div span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.datos div b { color: var(--marino); font-weight: 600; word-break: break-word; }

/* línea de etapas */
.etapas { list-style: none; margin: 0; padding: 0; position: relative; }
.etapa { position: relative; padding: 0 0 22px 42px; }
.etapa::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--borde); }
.etapa:last-child::before { display: none; }
.etapa.completada::before { background: var(--azul); }
.etapa .punto { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--borde); color: var(--suave); font-weight: 700; font-size: 12px; }
.etapa.completada .punto { background: var(--azul); border-color: var(--azul); color: #fff; }
.etapa.en_proceso .punto { border-color: var(--azul); color: var(--azul); box-shadow: 0 0 0 4px rgba(10,117,240,.15); }
.etapa .cab { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; min-height: 28px; }
.etapa .cab b { color: var(--marino); font-size: 15px; }
.etapa.pendiente .cab b { color: var(--suave); font-weight: 500; }
.etapa .nota { margin-top: 4px; color: var(--texto); white-space: pre-wrap; background: #f6f9fd; border-radius: 6px; padding: 6px 10px; font-size: 13px; }
.etapa .fotos { margin-top: 8px; }

/* fotos */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.foto { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #e6ecf4; cursor: zoom-in; border: 1px solid var(--borde); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto .quitar { position: absolute; top: 4px; right: 4px; background: rgba(10,29,60,.75); color: #fff; border: 0; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; display: none; }
.foto:hover .quitar { display: block; }
.foto .pie { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(10,29,60,.8)); color: #fff; font-size: 11px; padding: 14px 6px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor { position: fixed; inset: 0; background: rgba(5,14,30,.92); z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.visor img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 6px; }
.visor .txt { color: #dfe7f3; margin-top: 10px; text-align: center; }
.visor button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; cursor: pointer; }
.visor .cerrar { top: 16px; right: 16px; }
.visor .ant { left: 16px; top: 50%; }
.visor .sig { right: 16px; top: 50%; }

/* lista de archivos */
.archivos { list-style: none; margin: 0; padding: 0; }
.archivos li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--borde); }
.archivos li:last-child { border-bottom: 0; }
.archivos .icono { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: var(--azul-claro); color: var(--azul); font-size: 10px; font-weight: 800; flex: none; text-transform: uppercase; }
.archivos .icono.pdf { background: var(--rojo-claro); color: var(--rojo); }
.archivos .icono.img { background: var(--verde-claro); color: var(--verde); }
.archivos .nombre { flex: 1; min-width: 0; }
.archivos .nombre b { display: block; color: var(--marino); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* carpetas */
.carpetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.carpeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; cursor: pointer; display: flex; gap: 12px; align-items: center; color: var(--texto); }
.carpeta:hover { border-color: var(--azul); text-decoration: none; box-shadow: var(--sombra); }
.carpeta svg { width: 36px; height: 36px; color: var(--azul); flex: none; }
.carpeta b { display: block; color: var(--marino); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carpeta div { min-width: 0; }
.zona-subida { border: 2px dashed #b9c8de; border-radius: var(--radio); padding: 22px; text-align: center; color: var(--suave); background: #f8fafd; cursor: pointer; transition: .15s; }
.zona-subida.encima, .zona-subida:hover { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); }
.zona-subida svg { width: 30px; height: 30px; display: block; margin: 0 auto 6px; }

/* alertas */
.alertas { list-style: none; margin: 0; padding: 0; }
.alerta { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--borde); }
.alerta:last-child { border-bottom: 0; }
.alerta .marca { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--azul-claro); color: var(--azul); }
.alerta.aviso .marca { background: var(--ambar-claro); color: var(--ambar); }
.alerta.urgente .marca { background: var(--rojo-claro); color: var(--rojo); }
.alerta .marca svg { width: 18px; height: 18px; }
.alerta .cuerpo { flex: 1; min-width: 0; }
.alerta .cuerpo b { color: var(--marino); }
.alerta .cuerpo p { margin: 3px 0 0; white-space: pre-wrap; color: var(--texto); }
.alerta.nueva { background: linear-gradient(90deg, rgba(10,117,240,.06), transparent); }
.alerta.nueva .cuerpo b::after { content: "Nueva"; margin-left: 8px; font-size: 10px; background: var(--azul); color: #fff; padding: 1px 6px; border-radius: 10px; vertical-align: middle; }

/* modal */
.capa { position: fixed; inset: 0; background: rgba(10,29,60,.5); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 640px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal.ancho { max-width: 920px; }
.modal header { padding: 16px 20px; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; align-items: center; }
.modal header button { background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--suave); }
.modal .cuerpo { padding: 18px 20px; }
.modal footer { padding: 14px 20px; border-top: 1px solid var(--borde); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.aviso-flotante { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--marino); color: #fff; padding: 11px 18px; border-radius: 8px; z-index: 80; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: calc(100% - 32px); }
.aviso-flotante.error { background: var(--rojo); }
.cargando { padding: 40px; text-align: center; color: var(--suave); }

/* líneas de cotización */
.lineas td { padding: 4px; border: 0; }
.lineas input { padding: 6px 8px; }
.total-cot { font-size: 20px; font-weight: 700; color: var(--marino); }

/* tarjetas de embarque (portal) */
.embarques { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.emb { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; color: var(--texto); display: flex; flex-direction: column; box-shadow: var(--sombra); }
.emb:hover { border-color: var(--azul); text-decoration: none; }
.emb .portada { height: 120px; background: linear-gradient(135deg, var(--marino), var(--marino-2)); position: relative; display: grid; place-items: center; color: rgba(255,255,255,.3); }
.emb .portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.emb .portada svg { width: 54px; height: 54px; }
.emb .portada .chip { position: absolute; top: 10px; left: 10px; }
.emb .info { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.emb .info b { color: var(--marino); font-size: 15px; }
.ruta { display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: 13px; }
.ruta svg { width: 14px; height: 14px; flex: none; }

/* login */
.entrada { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.entrada .marca { background: radial-gradient(circle at 20% 20%, #17386c, var(--marino) 60%); color: #c9d5e8; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.entrada .marca img { height: 82px; align-self: flex-start; }
.entrada .marca h1 { color: #fff; font-size: 34px; line-height: 1.15; margin: 0 0 14px; }
.entrada .marca ul { padding: 0; list-style: none; margin: 22px 0 0; display: grid; gap: 10px; }
.entrada .marca li { display: flex; gap: 10px; align-items: center; }
.entrada .marca li svg { width: 20px; height: 20px; color: #3d95ff; flex: none; }
.entrada .forma { display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.entrada form { width: 100%; max-width: 380px; display: grid; gap: 14px; }
.entrada form .logo-movil { display: none; }

/* portal: barra superior */
.portal-barra { background: var(--marino); color: #fff; position: sticky; top: 0; z-index: 20; }
.portal-barra .dentro { max-width: 1180px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 20px; height: 64px; }
.portal-barra img { height: 40px; }
.portal-barra nav { display: flex; gap: 2px; flex: 1; }
.portal-barra nav a { color: #c9d5e8; padding: 8px 12px; border-radius: 7px; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.portal-barra nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.portal-barra nav a.activo { background: var(--azul); color: #fff; }
.portal-barra nav a svg { width: 17px; height: 17px; }
.portal-barra .usuario { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.portal-barra .campana { position: relative; color: #fff; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
.portal-barra .campana:hover { background: rgba(255,255,255,.08); }
.portal-barra .campana svg { width: 21px; height: 21px; }
.portal-barra .campana i { position: absolute; top: 3px; right: 2px; background: var(--rojo); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 0 5px; }
.portal-contenido { max-width: 1180px; margin: 0 auto; padding: 24px 20px 90px; }
.portal-menu-movil { display: none; }
.bienvenida { background: linear-gradient(120deg, var(--marino), #17386c); color: #c9d5e8; border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.bienvenida h1 { color: #fff; }

/* ---------- celulares ---------- */
@media (max-width: 960px) {
  .contacto-fila { grid-template-columns: 1fr 1fr; }
  .contacto-fila [data-quitar-contacto] { justify-self: end; }
  .marco { grid-template-columns: 1fr; }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
  .lateral.abierto { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .barra-sup { display: flex; align-items: center; gap: 12px; background: var(--marino); padding: 10px 16px; position: sticky; top: 0; z-index: 30; }
  .barra-sup img { height: 34px; }
  .barra-sup button { background: none; border: 0; color: #fff; padding: 4px; cursor: pointer; }
  .barra-sup button svg { width: 26px; height: 26px; }
  .contenido { padding: 18px 16px 60px; }
  .r3, .r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r2 { grid-template-columns: 1fr; }
  .formulario { grid-template-columns: 1fr 1fr; }
  .entrada { grid-template-columns: 1fr; }
  .entrada .marca { display: none; }
  .entrada form .logo-movil { display: block; height: 70px; margin: 0 auto 10px; }
  .portal-barra nav, .portal-barra .usuario .nombre { display: none; }
  .portal-barra .dentro { height: 58px; justify-content: space-between; padding: 0 16px; }
  .portal-barra img { height: 34px; }
  .portal-menu-movil { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--borde); z-index: 30; padding-bottom: env(safe-area-inset-bottom); }
  .portal-menu-movil a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; font-size: 11px; color: var(--suave); font-weight: 600; }
  .portal-menu-movil a svg { width: 22px; height: 22px; }
  .portal-menu-movil a.activo { color: var(--azul); }
  .portal-menu-movil a:hover { text-decoration: none; }
  .portal-contenido { padding: 16px 16px 90px; }
  .oculto-movil { display: none; }
}
@media (max-width: 560px) {
  .r3, .r4 { grid-template-columns: 1fr 1fr; }
  .formulario { grid-template-columns: 1fr; }
  .formulario .doble { grid-column: auto; }
  .cifra b { font-size: 22px; }
  .filtros input, .filtros select { min-width: 0; flex: 1 1 140px; }
  .tabla .oculto-chico { display: none; }
  .capa { padding: 0; }
  .modal { border-radius: 0; min-height: 100vh; }
  h1 { font-size: 19px; }
}
@media print {
  .lateral, .barra-sup, .portal-barra, .portal-menu-movil, .acciones { display: none !important; }
  .marco { display: block; }
  body { background: #fff; }
}