/* Kit común de MARDEV: colores, barra lateral, menú de cuenta y cabecera. No se edita en el producto. */
@font-face { font-family: "Outfit"; src: url("/estaticos/outfit/outfit-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/estaticos/outfit/outfit-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF; }

/* Color de cada producto: el principal y el de su barra. El rojo queda solo para errores. */
[data-kit="declare"] { --k-marca: #16324A; --k-barra: #16324A; }
[data-kit="apruebe"] { --k-marca: #157A50; --k-barra: #114F38; }
[data-kit="cotice"] { --k-marca: #B45309; --k-barra: #6F3208; }
[data-kit="licite"] { --k-marca: #6A4CA0; --k-barra: #3D2B66; }
[data-kit="central"] { --k-marca: #1F2937; --k-barra: #1F2937; }

:root, [data-tema="claro"] { --k-cara: #FFFFFF; --k-tinta: #18212D; --k-tenue: #5C6675; --k-linea: #DFE4EA; --k-suave: rgba(24,33,45,.06); --k-velo: rgba(10,14,20,.5); }
[data-tema="oscuro"] { --k-cara: #353430; --k-tinta: #ECE9E1; --k-tenue: #A9A59B; --k-linea: #45433E; --k-suave: rgba(255,255,255,.07); --k-velo: rgba(0,0,0,.6); }
:root { --lateral-fondo: var(--k-barra); --lateral-texto: rgba(255,255,255,.84); --lateral-texto-vivo: #FFFFFF; --lateral-borde: rgba(255,255,255,.16);
  --lateral-hover: rgba(255,255,255,.1); --lateral-activo: #FFFFFF; --lateral-activo-texto: var(--k-barra); }
:root { --letra: 1; } [data-letra="2"] { --letra: 1.1; } [data-letra="3"] { --letra: 1.22; } [data-letra="4"] { --letra: 1.4; }

/* Cabecera pública: del color del producto arriba, clara al bajar y oscura con el tema oscuro. */
.k-cabecera { position: sticky; top: 0; z-index: 40; background: var(--k-marca); color: #fff; transition: background .25s, color .25s, box-shadow .25s; }
.k-cabecera a:not(.btn):not(.boton), .k-cabecera .icono { color: inherit; }
html.k-bajo .k-cabecera { background: var(--k-cara); color: var(--k-tinta); box-shadow: 0 1px 0 var(--k-linea); }

/* Barra lateral */
html.con-lateral { --lateral-ancho: 236px; }
html.con-lateral body { padding-left: var(--lateral-ancho, 0px); transition: padding-left .22s ease; }
.lateral { position: fixed; top: 0; left: 0; bottom: 0; z-index: 45; width: 236px; display: flex; flex-direction: column; overflow: hidden;
  background: var(--lateral-fondo); color: var(--lateral-texto); box-shadow: 1px 0 0 rgba(0,0,0,.08); transition: width .22s ease, transform .22s ease; }
.lateral-cab { display: flex; align-items: center; gap: 8px; padding: 14px 10px 12px 14px; }
.lateral-marca { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; white-space: nowrap; }
.lateral-logo { flex: 0 0 32px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.lateral-nombre { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.lateral-nombre b { font-size: 16px; font-weight: 700; letter-spacing: .3px; }
.lateral-nombre small { font-size: 10.5px; font-weight: 700; color: var(--lateral-texto); }
.lateral-plegar, .boton-lateral { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px;
  background: transparent; color: var(--lateral-texto); cursor: pointer; }
.lateral-plegar:hover { background: var(--lateral-hover); color: var(--lateral-texto-vivo); }
.lateral-plegar svg { transition: transform .22s ease; }
.lateral .navega { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; padding: 4px 10px 8px; overflow-y: auto; overflow-x: hidden; }
.lateral .solapa { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 8px 11px; border-radius: 10px; color: var(--lateral-texto);
  font-size: 14px; font-weight: 530; white-space: nowrap; text-decoration: none; }
.lateral .solapa svg { flex: 0 0 19px; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lateral .solapa:hover { background: var(--lateral-hover); color: var(--lateral-texto-vivo); }
.lateral .solapa.activa { background: var(--lateral-activo); color: var(--lateral-activo-texto); font-weight: 650; }

.lateral-grupo { margin: 12px 11px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lateral-texto); opacity: .7; white-space: nowrap; }
.lateral-pie { display: flex; align-items: center; gap: 8px; padding: 10px 10px 12px 12px; border-top: 1px solid var(--lateral-borde); }
.lateral-quien { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--lateral-texto); text-decoration: none; }
.lateral-avatar { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--k-barra); font-weight: 750; font-size: 12px; }
.lateral-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lateral-texto b { color: var(--lateral-texto-vivo); font-weight: 650; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.lateral-texto small { font-size: 11px; opacity: .8; overflow: hidden; text-overflow: ellipsis; }
.lateral-salir { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--lateral-texto); }
.lateral-salir:hover { background: var(--lateral-hover); color: var(--lateral-texto-vivo); }
.lateral-velo { display: none; }
.lateral-rotulo { position: fixed; z-index: 120; transform: translateY(-50%); pointer-events: none; padding: 5px 10px; border-radius: 8px;
  background: #0F2233; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 20px rgba(15,34,51,.3); }
.barra-clara { background: var(--k-cara); color: var(--k-tinta); border-bottom: 1px solid var(--k-linea); }
.barra-clara .icono { color: var(--k-tinta); }
.barra-clara .icono:hover { background: var(--vidrio-alto); }
.barra-titulo { font-size: 1.05rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boton-lateral { color: var(--k-tenue); }
.boton-lateral:hover { background: var(--k-suave); color: var(--k-tinta); }
@media (min-width: 861px) {
  .boton-lateral { display: none; }
  html.con-lateral[data-lateral="plegada"] { --lateral-ancho: 56px; }
  [data-lateral="plegada"] .lateral { width: 56px; }
  [data-lateral="plegada"] .lateral :is(.lateral-nombre, .lateral-texto, .lateral-grupo, .solapa span) { display: none; }
  [data-lateral="plegada"] .lateral-cab { flex-direction: column; gap: 10px; padding: 14px 0 10px; }
  [data-lateral="plegada"] .lateral-marca { flex: none; }
  [data-lateral="plegada"] .lateral-plegar svg { transform: rotate(180deg); }
  [data-lateral="plegada"] .lateral .navega { padding: 4px 8px 8px; }
  [data-lateral="plegada"] .lateral .solapa { justify-content: center; padding: 10px 0; gap: 0; }
  [data-lateral="plegada"] .lateral-pie { flex-direction: column; padding: 10px 0 12px; }
  [data-lateral="plegada"] .lateral-quien { flex: none; }
}
@media (max-width: 860px) {
  html.con-lateral { --lateral-ancho: 0px; }
  .lateral { width: min(292px, 86vw); z-index: 90; transform: translateX(-105%); visibility: hidden; transition: transform .24s ease, visibility 0s linear .24s; }
  html.cajon .lateral { transform: none; visibility: visible; box-shadow: 0 0 60px rgba(0,0,0,.35); transition: transform .24s ease, visibility 0s; }
  .lateral-velo { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(15,34,51,.45); opacity: 0; pointer-events: none; transition: opacity .24s ease; }
  html.cajon .lateral-velo { opacity: 1; pointer-events: auto; }
  .lateral-plegar { display: none; }
}
.lateral-asa { display: none; }
@media (min-width: 861px) {
  html.con-lateral .lateral-asa { display: block; position: fixed; top: 0; bottom: 0; left: calc(var(--lateral-ancho, 0px) - 4px); width: 8px; z-index: 47; cursor: ew-resize; }
  html.con-lateral .lateral-asa:hover { background: linear-gradient(90deg, transparent 3px, var(--k-marca) 3px, var(--k-marca) 5px, transparent 5px); }
}
.lateral-fin { flex: 1 1 auto; min-height: 12px; }

/* Pie de la barra: el nombre abre la cuenta y la puerta sale. */
.lateral-salir { flex: none; border: 0; padding: 0; background: none; cursor: pointer; }
.lateral .solapa .mt-mano { top: -36px; }
.lateral .solapa .mt-mano svg { flex: none; width: 100%; height: auto; stroke: none; }
@media (min-width: 861px) { [data-lateral="plegada"] .lateral .mt-mano { display: none; } }

/* Hojas: menú de cuenta y confirmaciones. Abajo en el celular, al centro en computadora. */
.k-velo { position: fixed; inset: 0; z-index: 140; display: flex; align-items: flex-end; justify-content: center; background: var(--k-velo); }
.k-velo[hidden] { display: none; }
.k-hoja { width: 100%; max-height: 88dvh; overflow-y: auto; padding: 16px 16px max(16px, env(safe-area-inset-bottom, 0px)); background: var(--k-cara); color: var(--k-tinta); border-radius: 16px 16px 0 0; font-family: "Outfit", system-ui, sans-serif; font-size: 15px; }
@media (min-width: 861px) { .k-velo { align-items: center; } .k-hoja { width: 400px; border-radius: 14px; } .k-hoja.k-corta { width: 340px; } }
.k-hoja h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: inherit; }
.k-tenue { margin: 2px 0 0; color: var(--k-tenue); font-size: .9rem; overflow-wrap: anywhere; }
.k-tit { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.k-x { flex: none; width: 44px; height: 44px; margin: -8px -8px 0 0; border: 0; border-radius: 10px; background: none; color: var(--k-tenue); font-size: 24px; line-height: 1; cursor: pointer; }
.k-sec { display: block; margin: 12px 0 2px; color: var(--k-tenue); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.k-fila { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 8px; border-radius: 10px; color: inherit; text-decoration: none; }
.k-fila:hover { background: var(--k-suave); }
.k-fila svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--k-marca); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.k-ajuste { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 2px 8px; }
.k-seg { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--k-suave); }
.k-seg button { min-width: 44px; min-height: 40px; padding: 0 9px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: .88rem; cursor: pointer; }
.k-seg button[aria-pressed="true"] { background: var(--k-marca); color: #fff; font-weight: 650; }
.k-acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.k-boton { min-height: 44px; padding: 0 18px; border: 1px solid var(--k-marca); border-radius: 10px; background: var(--k-marca); color: #fff; font: inherit; font-weight: 650; cursor: pointer; }
.k-boton.k-borde { background: none; color: var(--k-tinta); border-color: var(--k-linea); }
@media print { .lateral, .lateral-asa, .lateral-velo, .k-velo { display: none !important; } html.con-lateral body { padding-left: 0; } }

/* Reportar: franja al borde, junto a la barra lateral. */
.ap-reportar { position: fixed; left: var(--lateral-ancho, 0px); top: 50%; transform: translateY(-50%); z-index: 30; width: 18px; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #fff; background: var(--k-marca); border: 0; border-radius: 0 8px 8px 0; cursor: pointer; }
.ap-reportar span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .72rem; font-weight: 650; line-height: 1; }
.ap-reportar svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-reportar b { position: absolute; top: -8px; left: 4px; background: #fbbf24; color: #000; border-radius: 99px; padding: 1px 5px; font-size: .68rem; line-height: 1.2; }
.ap-ventana { position: fixed; left: calc(var(--lateral-ancho, 0px) + 28px); bottom: 24px; z-index: 80; width: min(360px, calc(100vw - 40px)); padding: 12px; background: var(--k-cara); color: var(--k-tinta); border: 1px solid var(--k-linea); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ap-ventana[hidden] { display: none; }
.ap-ventana header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ap-ventana header strong { flex: 1; }
.ap-ventana textarea, .ap-ventana input { display: block; width: 100%; margin-bottom: 6px; padding: 8px; font: inherit; color: inherit; background: var(--k-cara); border: 1px solid var(--k-linea); border-radius: 8px; }
.ap-x { width: 32px; height: 32px; border: 0; background: none; color: var(--k-tenue); font-size: 18px; cursor: pointer; }
.ap-tipos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 8px; }
.ap-tipos button { min-width: 0; min-height: 34px; padding: 0 2px; font: inherit; font-size: .78rem; color: inherit; background: var(--k-suave); border: 0; border-radius: 6px; cursor: pointer; }
.ap-tipos button[aria-pressed="true"] { background: var(--k-marca); color: #fff; font-weight: 650; }
.ap-miniaturas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 20px; }
.ap-mini { position: relative; width: 96px; height: 60px; border: 1px solid var(--k-linea); border-radius: 6px; overflow: hidden; }
.ap-mini img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.ap-mini button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; line-height: 18px; cursor: pointer; }
.ap-hecho { color: #1b8a5a; margin-top: 6px; } .ap-falla { color: #c53030; margin-top: 6px; }
@media print { .ap-reportar, .ap-ventana { display: none !important; } }