:root {
  --fondo: #f6f0e7;
  --tinta: #102a43;
  --acento: #d56736;
  --acento-hover: #ae4823;
  --aviso: #f5e2ae;
  --ok: #d9eadf;
  --error: #f5d9d2;
  --linea: #d8cfc0;
  --muted: #536574;
  --superficie: #fffaf2;
  --azul-claro: #dcebf0;
  --tinta-suave: #173f5f;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  background: linear-gradient(90deg, transparent 49.8%, rgba(16, 42, 67, 0.035) 50%, transparent 50.2%), var(--fondo);
  color: var(--tinta);
  line-height: 1.55;
}
a { text-underline-offset: 0.16em; }
a { color: var(--acento); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}
.saltar {
  position: absolute;
  left: -999px;
}
.saltar:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 20;
  background: #fff;
  padding: 0.5rem 0.75rem;
}
.top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: var(--tinta);
  border-bottom: 4px solid var(--acento);
}
.marca { color: #fffaf2; font-family: "DM Serif Display", Georgia, serif; font-size: 1.55rem; line-height: 1; text-decoration: none; }
.marca span { color: #f4b489; }
nav { display: flex; flex-wrap: wrap; gap: 0.35rem 0.25rem; }
nav a {
  color: #f6f0e7;
  font-size: 0.92rem;
  text-decoration: none;
  padding: 0.45rem 0.7rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
nav a[aria-current="page"] {
  background: #f6f0e7;
  color: var(--tinta);
  font-weight: 600;
}
.salida { margin-left: auto; }
.cuenta { color: #f6f0e7; display: grid; font-size: 0.9rem; line-height: 1.1; text-align: right; text-decoration: none; }
.cuenta small { color: #f4b489; font-size: 0.72rem; text-transform: uppercase; }
main { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
main.ancho { max-width: 1400px; }
h1, h2 { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; }
h1 { font-size: clamp(2.1rem, 4vw, 3.45rem); line-height: 0.98; letter-spacing: -0.035em; margin: 0; text-wrap: pretty; }
h2 { text-wrap: pretty; }
.eyebrow { color: var(--acento); font-size: 0.75rem; font-weight: 750; letter-spacing: 0.12em; margin: 0 0 0.55rem; text-transform: uppercase; }
.encabezado-pagina { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; margin-bottom: 1.5rem; }
.encabezado-pagina .lead { font-size: 1.05rem; margin-bottom: 0; }
.enlace-accion { align-self: center; font-weight: 700; white-space: nowrap; }
.lead { max-width: 42rem; }
.aviso {
  background: var(--aviso);
  border: 1px solid #e0c56e;
  padding: 0.75rem 0.9rem;
  color: var(--tinta);
}
.aviso-ok { background: var(--ok); border-color: #8fbfa0; }
.aviso-error { background: var(--error); border-color: #c97a6c; }
.caja, .fila {
  background: var(--superficie);
  border: 1px solid var(--linea);
  padding: 1.25rem;
  margin: 1rem 0;
}
.login-caja { max-width: 26rem; margin: 3rem auto; }
.form { display: grid; gap: 0.85rem; max-width: 32rem; }
.form.compacto { max-width: none; }
label { display: grid; gap: 0.25rem; font-weight: 600; }
input, button, select {
  font: inherit;
  padding: 0.55rem 0.7rem;
  min-height: 44px;
}
input[type="file"] { min-height: auto; padding: 0.4rem 0; }
button, .boton {
  background: var(--acento);
  color: #fff;
  border: 0;
  cursor: pointer;
  width: fit-content;
  min-height: 44px;
  padding: 0.55rem 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button:active, .boton:active { transform: translateY(1px); }
button:hover, .boton:hover { background: var(--acento-hover); }
button:disabled { opacity: 0.6; cursor: not-allowed; }
.secundario { background: var(--muted); }
.secundario:hover { background: #44403c; }
.peligro { background: #7f1d1d; }
.peligro:hover { background: #641616; }
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}
.tarjetas a {
  display: block;
  background: var(--superficie);
  border: 1px solid var(--linea);
  padding: 1rem;
  text-decoration: none;
  color: var(--tinta);
  min-height: 5.5rem;
}
.tarjetas-operacion { grid-template-columns: 1.15fr 0.9fr 0.95fr; }
.tarjetas-operacion a { border: 1px solid var(--linea); border-top: 5px solid var(--tinta); display: grid; gap: 0.3rem; min-height: 13rem; padding: 1.3rem; position: relative; transition: transform 160ms ease, box-shadow 160ms ease; }
.tarjetas-operacion li:nth-child(2) a { border-top-color: var(--acento); margin-top: 1.25rem; }
.tarjetas-operacion li:nth-child(3) a { border-top-color: #44727e; }
.tarjetas-operacion a:hover { box-shadow: 0 0.7rem 0 var(--tinta); transform: translate(-0.2rem, -0.2rem); }
.tarjetas-operacion b { color: var(--acento-hover); font-size: 0.86rem; margin-top: auto; }
.tarjeta-etiqueta { color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.tarjetas-operacion strong { font-size: 2.3rem; line-height: 1; margin: 0.2rem 0; }
.contexto-operacion { border-top: 1px solid var(--linea); color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 2rem; padding-top: 1rem; }
.contexto-operacion p { margin: 0; }
.tarjetas a:hover { border-color: var(--acento); }
.tarjetas strong { display: block; font-size: 1.6rem; color: var(--acento); }
.vacio {
  background: #fff;
  border: 1px dashed var(--linea);
  padding: 1.5rem;
}
table { width: 100%; border-collapse: collapse; background: var(--superficie); }
th, td { border-bottom: 1px solid var(--linea); padding: 0.5rem 0.45rem; text-align: left; vertical-align: middle; }
.tabla-wrap { overflow-x: auto; margin: 1rem 0; }
.barra-tabla { align-items: end; background: var(--superficie); border: 1px solid var(--linea); display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; margin: 1rem 0 0; padding: 0.8rem; }
.barra-tabla label { min-width: 11rem; }
.barra-tabla input { flex: 1 1 15rem; }
.barra-tabla span { color: var(--muted); font-size: 0.9rem; }
.tabla-articulos {
  font-size: 1rem;
  line-height: 1.4;
}
.tabla-articulos tbody tr:hover { background: #faf8f5; }
.tabla-articulos th {
  position: sticky;
  top: 0;
  background: #faf8f5;
  z-index: 10;
  box-shadow: 0 1px 0 var(--linea);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.tabla-articulos td, .tabla-articulos th { vertical-align: middle; }
.tabla-articulos input:not([type="file"]) {
  width: 100%;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
}
.tabla-articulos input.costo { min-width: 4.5rem; max-width: 6.5rem; }
.tabla-articulos button { padding: 0.4rem 0.75rem; }
.celda-foto { width: 7.5rem; }
.celda-cod { width: 8.5rem; }
.celda-nombre { min-width: 12rem; max-width: 22rem; }
.celda-desc { min-width: 12rem; }
.foto-catalogo {
  width: 96px;
  height: 72px;
  object-fit: contain;
  object-position: center;
  background: var(--fondo);
  display: block;
}
.foto-cambiar { margin-top: 0.25rem; font-size: 0.85rem; }
.foto-cambiar summary {
  cursor: pointer;
  color: var(--acento);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.foto-cambiar[open] summary { margin-bottom: 0.25rem; }
.sin-foto {
  width: 96px;
  height: 72px;
  background: #e7e5e4;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.8rem;
}
.fila { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; }
.fila img, .mini { max-width: 140px; height: auto; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.parcial { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.4rem; }
.parcial input { width: 6rem; }
.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: #e7e5e4;
  font-size: 0.9rem;
  font-weight: 600;
}
.badge-ok { background: var(--ok); }
.badge-no { background: var(--error); }
.badge-wait { background: var(--aviso); }
.meta { color: var(--muted); font-weight: 400; margin: 0 0 0.5rem; }
.nota { color: var(--muted); max-width: 40rem; }
.bloque { margin: 1.75rem 0; }
.bloque { background: color-mix(in srgb, var(--superficie) 78%, transparent); border-top: 2px solid var(--linea); padding: 1.1rem 0; }
.bloque h2 { font-size: 1.2rem; margin: 0 0 0.5rem; }
.pasos { counter-reset: paso; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; margin: 0 0 1.7rem; padding: 0; }
.pasos li { color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.pasos li.activo { color: var(--acento); }
.pasos li.activo::before { background: var(--acento); border-radius: 50%; color: #fff; content: counter(paso); display: inline-grid; height: 1.45rem; margin-right: 0.35rem; place-items: center; width: 1.45rem; }
.pasos li::before { border: 1px solid currentColor; border-radius: 50%; content: counter(paso); counter-increment: paso; display: inline-grid; height: 1.35rem; margin-right: 0.35rem; place-items: center; width: 1.35rem; }
.total-final { align-items: baseline; background: var(--azul-claro); display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0; padding: 0.85rem; }
.total-final strong { color: var(--acento-hover); font-size: 1.45rem; }
dialog { background: var(--superficie); border: 1px solid var(--linea); box-shadow: 0 1rem 3rem rgba(28, 25, 23, 0.25); color: var(--tinta); max-width: min(34rem, calc(100vw - 2rem)); padding: 0; }
dialog::backdrop { background: rgba(28, 25, 23, 0.45); }
.dialogo { padding: 1.25rem; }
.dialogo h2 { font-size: 1.25rem; margin-top: 0; }
.inicio-hero { background: var(--tinta); color: #fffaf2; display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 0.75fr); margin: -2rem -1.25rem 3rem; min-height: 25rem; overflow: hidden; padding: clamp(1.75rem, 6vw, 5rem) max(1.25rem, calc((100vw - 1050px) / 2)); position: relative; }
.inicio-hero::after { background: repeating-linear-gradient(90deg, transparent 0 2.25rem, rgba(246, 240, 231, 0.12) 2.3rem 2.36rem), repeating-linear-gradient(0deg, transparent 0 2.25rem, rgba(246, 240, 231, 0.12) 2.3rem 2.36rem); content: ""; height: 18rem; opacity: 0.65; position: absolute; right: -3rem; top: -6rem; transform: rotate(15deg); width: 22rem; }
.inicio-hero-texto { max-width: 42rem; position: relative; z-index: 1; }
.inicio-hero .eyebrow { color: #f4b489; }
.inicio-hero h1 { font-size: clamp(3.4rem, 7vw, 6.2rem); }
.inicio-hero-texto > p:not(.eyebrow) { color: #d8e2e5; font-size: 1.1rem; line-height: 1.55; max-width: 34rem; }
.boton-cobre { background: var(--acento); color: #fffaf2; margin-top: 1rem; }
.regla-viva { align-self: end; background: #fffaf2; color: var(--tinta); display: grid; gap: 0.75rem; grid-template-columns: auto 1fr; padding: 1.25rem; position: relative; z-index: 1; }
.regla-viva p { color: var(--muted); margin: 0.45rem 0 0; }
.regla-numero { color: var(--acento); font-family: "DM Serif Display", Georgia, serif; font-size: 3.2rem; line-height: 1; }
.cola-editorial { margin-top: 1rem; }
.seccion-titulo { align-items: end; display: flex; justify-content: space-between; margin-bottom: 0.65rem; }
.seccion-titulo h2 { font-size: clamp(1.85rem, 3vw, 2.4rem); margin: 0; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
@media (max-width: 700px) {
  .top { align-items: flex-start; }
  .top nav { order: 3; width: 100%; }
  .salida { margin-left: 0; }
  .cuenta { align-self: center; }
  main { padding: 1.25rem 1rem 3rem; }
  .encabezado-pagina { gap: 0.65rem; }
  .encabezado-pagina .boton { width: 100%; }
  .fila { grid-template-columns: 1fr; }
  table { font-size: 0.95rem; }
  .barra-tabla { align-items: stretch; }
  .barra-tabla label, .barra-tabla input, .barra-tabla button { width: 100%; }
  .pasos { gap: 0.4rem 0.75rem; }
  .inicio-hero { grid-template-columns: 1fr; margin: -1.25rem -1rem 2rem; min-height: auto; padding: 3rem 1rem 1rem; }
  .inicio-hero h1 { font-size: clamp(3.2rem, 16vw, 4.8rem); }
  .regla-viva { margin-top: 1rem; }
  .tarjetas-operacion { grid-template-columns: 1fr; }
  .tarjetas-operacion li:nth-child(2) a { margin-top: 0; }
}

/* Lean workspace — contenido primero, chrome discreto. */
:root {
  --fondo: #ffffff;
  --tinta: #37352f;
  --acento: #2383e2;
  --acento-hover: #0b6ec9;
  --aviso: #fdf5d4;
  --ok: #e8f4ea;
  --error: #fbe4e4;
  --linea: #e9e9e7;
  --muted: #787774;
  --superficie: #ffffff;
  --azul-claro: #edf5fd;
}
body { background: var(--fondo); color: var(--tinta); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.5; }
a { color: var(--acento); }
.espacio-trabajo { min-height: 100vh; padding-left: 232px; }
.top { background: #f7f7f5; border: 0; bottom: 0; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; left: 0; padding: 14px 8px; position: fixed; top: 0; width: 232px; z-index: 10; }
.marca { align-items: center; color: var(--tinta); display: flex; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; font-weight: 650; min-height: 36px; padding: 0 8px; }
.marca::before { background: var(--tinta); border-radius: 3px; color: #fff; content: "M"; display: inline-grid; font-size: 12px; font-weight: 700; height: 20px; margin-right: 8px; place-items: center; width: 20px; }
.marca span { color: inherit; }
nav { display: grid; gap: 1px; margin-top: 10px; width: 100%; }
nav a { border-radius: 4px; color: #4d4d49; font-size: 14px; min-height: 34px; padding: 6px 8px; }
nav a:hover { background: #ececea; color: var(--tinta); }
nav a[aria-current="page"] { background: #e9e9e7; color: var(--tinta); font-weight: 600; }
.pie-navegacion { border-top: 1px solid var(--linea); display: grid; gap: 4px; margin-top: auto; padding: 10px 0 0; width: 100%; }
.cuenta { border-radius: 4px; color: #4d4d49; display: grid; font-size: 13px; padding: 6px 8px; text-align: left; }
.cuenta:hover { background: #ececea; }
.cuenta small { color: var(--muted); font-size: 11px; letter-spacing: 0; text-transform: capitalize; }
.salida { margin: 0; }
.salida button { background: transparent; color: #4d4d49; font-size: 13px; justify-content: flex-start; min-height: 32px; padding: 5px 8px; width: 100%; }
.salida button:hover { background: #ececea; color: var(--tinta); }
main { margin: 0; max-width: 1080px; padding: 56px 64px 96px; }
main.ancho { max-width: none; }
h1, h2 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 700; letter-spacing: -0.025em; }
h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 19px; line-height: 1.35; }
.eyebrow { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.pagina-cabecera, .encabezado-pagina { align-items: flex-start; border-bottom: 1px solid var(--linea); display: flex; gap: 24px; justify-content: space-between; margin: 0 0 28px; padding: 0 0 24px; }
.pagina-cabecera h1 { margin: 2px 0 8px; }
.ruta { color: var(--muted); font-size: 13px; margin: 0; }
.lead, .encabezado-pagina .lead { color: var(--muted); font-size: 15px; margin: 0; max-width: 620px; }
button, .boton { background: var(--acento); border-radius: 4px; box-shadow: none; font-size: 14px; min-height: 34px; padding: 6px 12px; }
button:hover, .boton:hover { background: var(--acento-hover); }
input, select { border: 1px solid #d9d9d7; border-radius: 4px; min-height: 34px; padding: 5px 8px; }
textarea { border: 1px solid #d9d9d7; border-radius: 4px; font: inherit; min-height: 76px; padding: 7px 8px; resize: vertical; }
.caja, .fila { border-color: var(--linea); box-shadow: none; padding: 16px; }
.form { gap: 12px; }
.regla-operativa { background: #f7f7f5; border-radius: 4px; color: #4d4d49; display: grid; gap: 4px; margin: 0 0 32px; padding: 12px 14px; }
.regla-operativa strong { color: var(--tinta); font-size: 13px; }
.regla-operativa span { font-size: 13px; }
.seccion-titulo { align-items: baseline; border-bottom: 1px solid var(--linea); margin-bottom: 0; padding: 0 0 8px; }
.seccion-titulo h2 { margin: 0; }
.seccion-titulo span { color: var(--muted); font-size: 12px; text-transform: capitalize; }
.lista-trabajo ul { list-style: none; margin: 0; padding: 0; }
.lista-trabajo li { border-bottom: 1px solid var(--linea); }
.lista-trabajo a { align-items: center; color: var(--tinta); display: grid; gap: 16px; grid-template-columns: minmax(180px, 1fr) 1.5fr auto; padding: 14px 8px; text-decoration: none; }
.lista-trabajo a:hover { background: #f7f7f5; }
.item-titulo { font-weight: 600; }
.item-detalle { color: var(--muted); font-size: 13px; }
.item-accion { color: var(--acento); font-size: 13px; }
.propiedades { display: flex; flex-wrap: wrap; gap: 0; margin-top: 32px; }
.propiedades p { border-right: 1px solid var(--linea); display: grid; gap: 2px; margin: 0; min-width: 150px; padding: 0 28px; }
.propiedades p:first-child { padding-left: 0; }
.propiedades p:last-child { border: 0; }
.propiedades span { color: var(--muted); font-size: 12px; }
.propiedades strong { font-size: 14px; font-weight: 600; text-transform: capitalize; }
.tarjetas-operacion { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.tarjetas-operacion a, .tarjetas-operacion li:nth-child(2) a { border: 1px solid var(--linea); box-shadow: none; margin-top: 0; min-height: auto; padding: 14px; transform: none; }
.tarjetas-operacion a:hover { box-shadow: none; transform: none; }
.tarjetas-operacion li:nth-child(2) a, .tarjetas-operacion li:nth-child(3) a { border-top-color: var(--linea); }
.tarjetas-operacion strong, .tarjetas strong { color: var(--tinta); font-size: 24px; }
.bloque { background: transparent; border-top: 1px solid var(--linea); padding: 18px 0; }
.tabla-articulos tbody tr:hover { background: #f7f7f5; }
.tabla-articulos th { background: #fff; color: var(--muted); font-size: 12px; font-weight: 500; }
.barra-tabla { background: transparent; border-color: var(--linea); padding: 10px; }
.seleccionar-resultados { align-items: center; display: flex; font-size: 13px; font-weight: 500; gap: 6px; white-space: nowrap; }
.seleccionar-resultados input { min-height: auto; }
.operacion-critica { border: 1px solid #efd1d1; border-left: 3px solid #a33a3a; margin: 12px 0 0; padding: 10px 12px; }
.operacion-critica summary { color: #7f1d1d; cursor: pointer; font-size: 14px; font-weight: 600; min-height: 28px; }
.operacion-critica p { color: var(--muted); font-size: 13px; margin: 8px 0; max-width: 680px; }
.operacion-critica label { font-size: 13px; margin-top: 8px; max-width: 680px; }
.operacion-critica textarea { display: block; max-width: 680px; width: 100%; }
.operacion-critica button { margin-top: 10px; }
.operacion-critica-secundaria { margin-top: 16px; }
.panel-accion { border-top: 1px solid var(--linea); margin: 18px 0 0; padding: 16px 0 4px; }
.panel-accion-cabecera h2 { font-size: 16px; font-weight: 650; margin: 0 0 4px; }
.panel-accion-cabecera p { color: var(--muted); font-size: 13px; margin: 0 0 12px; max-width: 52rem; }
.panel-visibilidad { border-top: 1px solid #efd1d1; }
.panel-visibilidad .panel-accion-cabecera h2 { color: #7f1d1d; }
.pasos-visibilidad { color: var(--tinta); font-size: 14px; margin: 0 0 14px; max-width: 40rem; padding-left: 1.25rem; }
.pasos-visibilidad li { margin: 4px 0; }
.panel-visibilidad > label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.panel-visibilidad > textarea { display: block; margin: 0 0 14px; max-width: 40rem; min-height: 72px; width: 100%; }
.acciones-visibilidad { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; }
.accion-bloque { border: 1px solid var(--linea); padding: 14px; }
.accion-bloque h3 { font-size: 15px; font-weight: 650; margin: 0 0 6px; }
.accion-bloque p { color: var(--muted); font-size: 13px; margin: 0 0 12px; min-height: 2.6em; }
.accion-bloque button { min-height: 44px; width: 100%; }
.accion-suspender { border-left: 3px solid #a33a3a; }
.accion-reactivar { border-left: 3px solid #2383e2; }
.panel-visibilidad-lote { margin-top: 8px; }
.form-lote { margin-top: 4px; max-width: 40rem; }
.form-lote label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 6px; }
.form-lote textarea { display: block; width: 100%; }
.form-lote button { margin-top: 12px; min-height: 44px; }
@media (max-width: 760px) {
  .acciones-visibilidad { grid-template-columns: 1fr; }
}
.requerido { color: #a33a3a; font-size: 12px; font-weight: 500; }
.lead-ayuda { color: var(--muted); font-size: 15px; margin: 0 0 20px; max-width: 46rem; }
.mapas-ayuda { background: linear-gradient(135deg, #f7fbff 0%, #fff 58%, #fffaf2 100%); border: 1px solid #dfe8f2; margin: 0 0 28px; max-width: 960px; padding: 22px; }
.mapas-ayuda-cabecera { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }
.mapas-ayuda-cabecera h2 { color: var(--tinta); font-size: 21px; margin: 1px 0 5px; }
.mapas-ayuda-cabecera p:not(.eyebrow) { color: var(--muted); font-size: 14px; margin: 0; max-width: 620px; }
.mapas-ayuda-insignia { background: #e8f4ea; border: 1px solid #cce5d1; color: #23643a; font-size: 12px; font-weight: 650; padding: 5px 9px; white-space: nowrap; }
.mapas-ayuda-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.mapa-ayuda-card { align-items: flex-start; background: rgba(255,255,255,.86); border: 1px solid var(--linea); display: flex; gap: 14px; min-height: 188px; padding: 16px; }
.mapa-ayuda-card-principal { border-top: 3px solid var(--marca-orange); }
.mapa-ayuda-card-icon { align-items: center; background: #fff3db; color: #b76c00; display: inline-flex; flex: 0 0 34px; font-size: 22px; height: 34px; justify-content: center; }
.mapa-ayuda-card-icon-blue { background: #e6f1fb; color: #1266ae; }
.mapa-ayuda-card h3 { font-size: 16px; margin: 1px 0 5px; }
.mapa-ayuda-card p:not(.eyebrow) { color: var(--muted); font-size: 13px; margin: 0; }
.mini-flujo-ayuda { align-items: center; color: var(--tinta); display: flex; flex-wrap: wrap; font-size: 11px; font-weight: 650; gap: 5px; margin: 14px 0 15px; }
.mini-flujo-ayuda span { background: #f7f7f5; border: 1px solid var(--linea); padding: 4px 6px; }
.mini-flujo-ayuda i { color: var(--marca-orange); font-style: normal; }
.mapa-ayuda-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 15px; }
.mapa-ayuda-pills span { background: #f7f7f5; border: 1px solid var(--linea); color: var(--muted); font-size: 11px; padding: 4px 7px; }
.mapa-ayuda-link { color: var(--acento); display: inline-flex; font-size: 13px; font-weight: 650; gap: 5px; text-decoration: none; }
.mapa-ayuda-link:hover { text-decoration: underline; }
.mapas-ayuda-nota { border-top: 1px solid #dfe8f2; color: var(--muted); font-size: 13px; margin: 18px 0 0; padding-top: 12px; }
.mapas-ayuda-nota strong { color: var(--tinta); }
@media (max-width: 760px) {
  .mapas-ayuda { padding: 16px; }
  .mapas-ayuda-cabecera { display: block; }
  .mapas-ayuda-insignia { display: inline-block; margin-top: 10px; }
  .mapas-ayuda-grid { grid-template-columns: 1fr; }
}
.faq { border-top: 1px solid var(--linea); margin: 20px 0 0; padding: 16px 0 0; }
.faq h2 { font-size: 16px; font-weight: 650; margin: 0 0 12px; }
.pasos-ayuda { font-size: 14px; margin: 0; max-width: 46rem; padding-left: 1.25rem; }
.pasos-ayuda li { margin: 8px 0; }
.faq details { border: 1px solid var(--linea); margin: 0 0 8px; max-width: 46rem; padding: 10px 12px; }
.faq summary { cursor: pointer; font-size: 14px; font-weight: 600; min-height: 28px; }
.faq details p, .faq details ul { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.faq details ul { padding-left: 1.2rem; }
.lista-estados { font-size: 14px; margin: 0; max-width: 46rem; padding-left: 1.2rem; }
.lista-estados li { margin: 6px 0; }
.panel-digestiones { border-top: 1px solid var(--linea); margin: 0 0 20px; padding: 16px 0 8px; }
.lista-digestiones { display: grid; gap: 12px; }
.digestion-archivo { border: 1px solid var(--linea); padding: 12px 14px; }
.digestion-cabecera { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; }
.digestion-cabecera strong { font-size: 14px; font-weight: 650; }
.digestion-etapa { color: var(--muted); font-size: 13px; margin: 6px 0 10px; }
.barra-progreso { background: #ecece8; border: 1px solid var(--linea); height: 10px; overflow: hidden; width: 100%; }
.barra-progreso-lleno { background: #2383e2; display: block; height: 100%; min-width: 0; transition: width 0.35s ease; }
.digestion-archivo[data-estado="extraido"] .barra-progreso-lleno { background: #2f6f3e; }
.digestion-archivo[data-estado="error"] .barra-progreso-lleno { background: #a33a3a; }
.digestion-meta { color: var(--muted); display: flex; font-size: 12px; justify-content: space-between; margin-top: 6px; }
.mini-grafica { margin-top: 12px; }
.mini-grafica-barra { background: #ecece8; border: 1px solid var(--linea); display: flex; height: 14px; overflow: hidden; width: 100%; }
.mini-grafica-barra .seg-ok { background: #2f6f3e; display: block; height: 100%; }
.mini-grafica-barra .seg-error { background: #c45c26; display: block; height: 100%; }
.mini-grafica-leyenda { display: flex; flex-wrap: wrap; gap: 10px 16px; list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.mini-grafica-leyenda .punto { border-radius: 50%; display: inline-block; height: 8px; margin-right: 4px; width: 8px; }
.mini-grafica-leyenda .punto.ok { background: #2f6f3e; }
.mini-grafica-leyenda .punto.error { background: #c45c26; }
.panel-historicas { border-top: 1px solid var(--linea); margin: 0 0 20px; padding: 16px 0 8px; }
.tabla-historicas { font-size: 14px; max-width: 52rem; }
.tabla-historicas th { color: var(--muted); font-size: 12px; font-weight: 500; }
.modulos-articulos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.modulos-articulos a { border: 1px solid var(--linea); color: var(--tinta); font-size: 14px; font-weight: 600; min-height: 40px; padding: 8px 12px; text-decoration: none; }
.modulos-articulos a:hover { border-color: #2383e2; }
.modulos-articulos a[aria-current="page"] { background: #f0f7ff; border-color: #2383e2; }
.cuenta-modulo { color: var(--muted); font-size: 12px; font-weight: 500; margin-left: 4px; }
.barra-acciones-sticky {
  background: #fff;
  border: 1px solid var(--linea);
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px;
  position: sticky;
  top: 0;
  z-index: 8;
}
.barra-sticky-filtros {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.barra-sticky-filtros label { font-size: 12px; font-weight: 600; }
.barra-sticky-filtros input[type="search"] { min-width: 12rem; }
.barra-sticky-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros-estado { display: flex; flex-wrap: wrap; gap: 6px; }
.filtros-estado button {
  background: #fff;
  border: 1px solid var(--linea);
  color: var(--tinta);
  font-size: 13px;
  font-weight: 500;
  min-height: 36px;
  padding: 6px 10px;
}
.filtros-estado button[aria-pressed="true"] {
  background: #f0f7ff;
  border-color: #2383e2;
  font-weight: 650;
}
.overlay-carga {
  align-items: center;
  background: rgba(255, 255, 255, 0.88);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 40;
}
.overlay-carga[hidden] { display: none; }
.overlay-carga-caja {
  align-items: center;
  background: #fff;
  border: 1px solid var(--linea);
  display: grid;
  gap: 12px;
  justify-items: center;
  max-width: 22rem;
  padding: 24px 20px;
  text-align: center;
}
.overlay-carga-caja p { color: var(--tinta); font-size: 15px; font-weight: 600; margin: 0; }
.overlay-spinner {
  animation: girar 0.9s linear infinite;
  border: 3px solid #ecece8;
  border-radius: 50%;
  border-top-color: #2383e2;
  display: block;
  height: 36px;
  width: 36px;
}
@keyframes girar { to { transform: rotate(360deg); } }
body.cargando { overflow: hidden; }
.enlace-editar { font-size: 12px; font-weight: 500; }
.ficha-producto { max-width: 680px; }
.campos-dobles { display: grid; gap: 6px 14px; grid-template-columns: 1fr 1fr; }
.campos-dobles label { font-size: 13px; }
.foto-editar { background: #f7f7f5; max-height: 240px; max-width: 340px; object-fit: contain; }
@media (max-width: 760px) { .campos-dobles { grid-template-columns: 1fr; } }
.badge { border-radius: 3px; font-size: 12px; font-weight: 500; }
dialog { border-color: var(--linea); box-shadow: 0 12px 36px rgba(15, 15, 15, 0.14); }
@media (max-width: 760px) {
  .espacio-trabajo { padding-left: 0; }
  .top { align-items: center; border-bottom: 1px solid var(--linea); bottom: auto; flex-direction: row; gap: 8px; padding: 8px 12px; position: sticky; width: 100%; }
  .marca { padding: 0; }
  nav { display: flex; margin: 0; overflow-x: auto; width: auto; }
  nav a { flex: 0 0 auto; }
  .pie-navegacion { border: 0; display: flex; margin: 0 0 0 auto; padding: 0; width: auto; }
  .cuenta { display: none; }
  .salida button { min-height: 32px; width: auto; }
  main { padding: 32px 20px 64px; }
  .pagina-cabecera, .encabezado-pagina { gap: 14px; }
  .lista-trabajo a { align-items: start; gap: 4px; grid-template-columns: 1fr auto; }
  .item-detalle { grid-column: 1; }
  .item-accion { grid-column: 2; grid-row: 1 / span 2; }
  .propiedades p { border-bottom: 1px solid var(--linea); border-right: 0; min-width: 100%; padding: 10px 0; }
}

/* MegaTrade brand pass — identidad del logo + señales de flujo. */
:root {
  --marca-navy: #12306b;
  --marca-green: #16a34a;
  --marca-orange: #f59e0b;
  --marca-magenta: #e5005a;
  --marca-blue: #0877d1;
  --canvas: #f8fafc;
  --surface: #ffffff;
  --fondo: var(--canvas);
  --tinta: #17233f;
  --acento: var(--marca-green);
  --acento-hover: #12833d;
  --linea: #e4e8ef;
  --muted: #68738a;
  --superficie: var(--surface);
  --azul-claro: #eef6ff;
}
body { background: var(--canvas); color: var(--tinta); }
.top { background: #f3f7f4; border-right: 1px solid #dfe9e2; }
.marca { gap: 8px; color: var(--marca-navy); }
.marca::before { display: none; }
.marca-emblema { background: #fff; border: 1px solid #dfe9e2; border-radius: 8px; display: grid; height: 28px; overflow: hidden; place-items: center; width: 28px; }
.marca-emblema img { height: 54px; max-width: none; object-fit: cover; object-position: 50% 18%; width: 54px; }
.marca-texto { color: var(--marca-navy); font-size: 15px; font-weight: 750; letter-spacing: -0.02em; }
.marca .marca-texto span { color: var(--marca-green); }
nav a { border-left: 3px solid transparent; }
nav a:hover { background: #e8f3eb; }
nav a[aria-current="page"] { background: #e3f1e7; border-left-color: var(--marca-green); color: var(--marca-navy); }
.cuenta small { color: var(--marca-green); }
.salida button:hover { background: #fff3df; color: var(--marca-navy); }
a { color: var(--marca-blue); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: var(--marca-orange); }
button, .boton { background: var(--marca-green); }
button:hover, .boton:hover { background: var(--acento-hover); }
.secundario { background: var(--marca-navy); }
.secundario:hover { background: #0d2454; }
.peligro { background: var(--marca-magenta); }
.peligro:hover { background: #bd004a; }
input, select, textarea { background: #fff; border-color: #d8dee8; }
input:focus, select:focus, textarea:focus { border-color: var(--marca-blue); box-shadow: 0 0 0 3px rgba(8, 119, 209, 0.12); outline: 0; }
.logo-login { display: block; margin: -0.75rem auto 1.25rem; max-height: 190px; max-width: 100%; object-fit: contain; width: 230px; }
.login-caja { background: #fff; border: 1px solid var(--linea); border-top: 4px solid var(--marca-green); }
.login-caja h1 { color: var(--marca-navy); }
.administracion-tarjetas a { display: grid; gap: 6px; min-height: 150px; }
.administracion-tarjetas a span:last-child { color: var(--muted); font-size: 13px; }
.pantalla-login main {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 20px 48px;
}
.pantalla-login .login-caja {
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(16, 42, 67, 0.12);
  margin: 0;
  max-width: 420px;
  padding: 30px 34px 34px;
  width: 100%;
}
.pantalla-login .logo-login {
  margin: 0 auto 20px;
  max-height: 150px;
  width: 180px;
}
.pantalla-login .login-caja h1,
.pantalla-login .login-caja > p {
  text-align: center;
}
.pantalla-login .login-caja > p {
  color: var(--muted);
  margin: 8px auto 24px;
  max-width: 330px;
}
.pantalla-login .form {
  gap: 10px;
  max-width: none;
}
.pantalla-login .form label {
  gap: 6px;
}
.pantalla-login .form input,
.pantalla-login .form button {
  width: 100%;
}
.pantalla-login .form button {
  margin-top: 8px;
}
.encabezado-flujo { margin-bottom: 18px; }
.encabezado-flujo h1 { color: var(--marca-navy); }
.flujo-pasos { align-items: stretch; display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0 0 24px; max-width: 760px; padding: 0; }
.flujo-pasos li { background: #fff; border: 1px solid var(--linea); display: grid; gap: 2px; grid-template-columns: auto 1fr; padding: 10px 12px; position: relative; }
.flujo-pasos li + li::before { color: var(--muted); content: ""; height: 1px; left: -8px; position: absolute; top: 50%; width: 8px; }
.flujo-pasos li.activo { background: #eaf7ee; border-color: #a9d8b6; }
.flujo-pasos li span { align-self: start; background: #e8edf5; border-radius: 50%; color: var(--marca-navy); display: grid; font-size: 12px; font-weight: 750; height: 24px; margin-right: 7px; place-items: center; width: 24px; }
.flujo-pasos li.activo span { background: var(--marca-green); color: #fff; }
.flujo-pasos strong { font-size: 13px; line-height: 1.2; }
.flujo-pasos small { color: var(--muted); font-size: 12px; grid-column: 2; }
.carga-layout { align-items: start; display: grid; gap: 28px; grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr); max-width: 980px; }
.carga-panel { background: #fff; border: 1px solid var(--linea); border-top: 3px solid var(--marca-green); padding: 20px; }
.carga-panel .panel-accion-cabecera { margin-bottom: 18px; }
.carga-panel .panel-accion-cabecera h2 { color: var(--marca-navy); font-size: 18px; }
.form-carga { max-width: none; }
.form-carga label { color: var(--tinta); font-size: 13px; }
.campo-ayuda { color: var(--muted); font-size: 12px; font-weight: 500; margin-left: 5px; }
.archivo-bloque { border: 1px dashed #b9c7d7; padding: 12px; }
.archivo-bloque:focus-within { background: #f7fbff; border-color: var(--marca-blue); }
.archivo-bloque input[type="file"] { background: transparent; border: 0; padding: 7px 0 2px; width: 100%; }
.archivo-opcional { border-color: #c8d9cd; }
.archivo-ayuda { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.boton-principal { box-shadow: 0 4px 0 #0d7e3a; font-weight: 700; margin-top: 5px; }
.boton-principal:active { box-shadow: none; }
.flujo-ayuda { border-left: 3px solid var(--marca-orange); padding: 10px 0 10px 18px; }
.flujo-ayuda h2 { color: var(--marca-navy); font-size: 20px; margin: 0 0 8px; }
.flujo-ayuda p:not(.eyebrow) { color: var(--muted); font-size: 14px; }
.flujo-regla { background: #fff8e8; border: 1px solid #f4d798; display: grid; gap: 4px; margin-top: 18px; padding: 12px; }
.flujo-regla strong { color: #895b00; font-size: 13px; }
.flujo-regla span:last-child { color: #765f2b; font-size: 13px; }
.flujo-regla-punto { background: var(--marca-orange); border-radius: 50%; height: 8px; width: 8px; }
.modulo-flujo { background: #fff; border: 1px solid var(--linea); margin: 20px 0; }
.modulo-extraccion { border-top: 3px solid var(--marca-orange); }
.modulo-revision { border-top: 3px solid var(--marca-green); }
.modulo-resumen { align-items: center; cursor: pointer; display: grid; gap: 12px; grid-template-columns: auto minmax(0, 1fr) auto; list-style: none; padding: 15px 18px; }
.modulo-resumen::-webkit-details-marker { display: none; }
.modulo-resumen::after { border-bottom: 2px solid var(--muted); border-right: 2px solid var(--muted); content: ""; height: 7px; transform: rotate(45deg); transition: transform 160ms ease; width: 7px; }
.modulo-extraccion[open] .modulo-resumen::after { transform: rotate(225deg); }
.modulo-resumen > span:nth-child(2) { display: grid; gap: 2px; }
.modulo-resumen strong { color: var(--marca-navy); font-size: 15px; }
.modulo-resumen small { color: var(--muted); font-size: 13px; }
.modulo-orden { color: var(--marca-orange); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; }
.modulo-toggle, .modulo-enlace { color: var(--marca-blue); font-size: 12px; font-weight: 650; }
.modulo-contenido { border-top: 1px solid var(--linea); padding: 0 18px 18px; }
.modulo-contenido .panel-digestiones, .modulo-contenido .panel-historicas { border-top: 0; margin: 0; padding: 16px 0 4px; }
.modulo-resumen-fijo { cursor: default; }
.modulo-resumen-fijo::after { display: none; }
.modulo-revision .modulo-contenido { padding-top: 4px; }
.modulo-revision .operacion-critica { margin-top: 16px; }
.badge-ok { background: #e4f5e8; color: #176b31; }
.badge-wait { background: #fff4d8; color: #895b00; }
.badge-no { background: #ffe5ef; color: #a30045; }
.barra-progreso-lleno { background: var(--marca-green); }
.mini-grafica-barra .seg-error { background: var(--marca-orange); }
@media (max-width: 760px) {
  .flujo-pasos { grid-template-columns: 1fr; }
  .flujo-pasos li + li::before { display: none; }
  .carga-layout { grid-template-columns: 1fr; }
  .logo-login { max-height: 150px; width: 190px; }
  .pantalla-login main { padding: 20px 16px 32px; }
  .pantalla-login .login-caja { padding: 24px 20px 26px; }
}