/* ============================================================================
   CUSTODIA — hoja propia
   ----------------------------------------------------------------------------
   Va DESPUÉS de escriba-ui.css e importa solo lo que le falta a esa hoja: el
   acento de la app (tabla oficial en escriba-design-system/SKILL.md) y las
   fuentes vendorizadas. NUNCA redefine un token neutro (--bg, --text, --border,
   etc.): eso es lo que garantiza que Custodia comparte la experiencia con el
   resto de la Suite y solo cambia de color.
   ============================================================================ */

/* ---- Acento: tinta cuero/ámbar quemado, decidido con el dueño --------------- */
:root {
  --accent: #b5762a; --accent-2: #96611f; --on-accent: #fff;
  --ring: 0 0 0 3px rgba(181,118,42,.20);
}
:root[data-theme="dark"] {
  --accent: #d99a4e; --accent-2: #b5762a;
  --ring: 0 0 0 3px rgba(217,154,78,.26);
}

/* ---- Tipografía vendorizada (sin CDN) --------------------------------------
   Si estos archivos faltaran (build sin /estatico/vendor/fonts, por ejemplo),
   el navegador no encuentra el @font-face y cae solo a la pila de "system-ui,
   ..." que ya trae escriba-ui.css en `body`: no hace falta un fallback propio
   acá, y no romper es justamente no declarar nada más que esto. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/estatico/vendor/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/estatico/vendor/fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/estatico/vendor/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================
   COMPONENTES PROPIOS DE CUSTODIA — pantallas de trabajo diario
   ----------------------------------------------------------------------------
   escriba-ui.css (canónico) solo trae el chrome de la Suite (topbar, menú,
   modal, login): NO trae tarjeta, chip, tabla ni tipografía de contenido, así
   que las pantallas de trabajo (lista, ficha, exclusiones, expedientes)
   necesitan sus propios componentes. Van acá, construidos sobre los tokens
   neutros y de estado del canónico -nunca redefiniéndolos-, siguiendo el
   patrón de Selega (implementación de referencia): un .panel/.card propio de
   cada app, no del canónico.
   ============================================================================ */

/* ---- Contenedor de página: el chrome no tiene, cada app declara el suyo --- */
main { padding: 22px 24px 60px; max-width: 1080px; margin: 0 auto; }

/* ---- De quién es este panel ------------------------------------------------
   Multiempresa: dos pestañas que sólo dicen "Custodia" son dos pestañas
   iguales, y ahí es donde una exclusión o un cambio de estado terminan en la
   marca equivocada. Encabeza el cuerpo de TODAS las pantallas de la sesión
   -no el header, que por contrato §3.2 no lleva nada suelto- y el nombre va
   al tamaño de un título, no al de un texto secundario: tiene que verse sin
   buscarlo, que es justamente lo que dejó de pasar cuando vivía adentro de un
   menú que arranca oculto. */
.empresa-sesion { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 0 0 12px; border-bottom: 1px solid var(--hairline); }
.empresa-sesion-lbl { color: var(--muted); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; }
.empresa-sesion-nom { font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--text); }

/* ---- Tarjeta: unidad de contenido de toda pantalla de trabajo -------------- */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 20px; margin: 0 0 16px; box-shadow: var(--shadow); }
.card h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }

/* ---- Enlaces de contenido --------------------------------------------------
   Los que NO son un componente propio (a.link, .volver, .enlace-accion, la
   tira de pasos): el título de un hallazgo, la URL de la ficha, un archivo de
   evidencia, un expediente. El canónico no le pone color a un <a> pelado, así
   que sin esto quedaban en el azul -y el violeta de "visitado"- del
   navegador: no es el color de ninguna app de la Suite, y "visitado" acá no
   significa nada. Van con la tinta del texto y el subrayado teñido de acento,
   que es lo que los hace legibles como enlaces sin gritar en una lista de
   cien hallazgos; el acento pleno se reserva para el hover.
   El selector es :not([class]) para no pisar a ninguno de los componentes:
   cada uno de ellos ya declara su color. */
main a:not([class]) { color: var(--text); text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
main a:not([class]):hover { color: var(--accent); text-decoration-color: currentColor; }
/* Un título de tarjeta no se subraya: ahí el enlace ya se lee por el tamaño. */
.card h2 a:not([class]) { text-decoration: none; }
.card h2 a:not([class]):hover { text-decoration: underline; }

/* ---- Texto secundario / cifras ---------------------------------------------- */
.meta { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- Filas de formulario: filtrar y accionar -------------------------------- */
.filtros, .acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.acciones input[type="text"] { min-width: 220px; flex: 1 1 200px; }

/* ---- Chip de gravedad: información, no decoración ---------------------------
   Es cómo se decide qué mirar primero entre cientos de filas, así que las
   cuatro gravedades usan un token de ESTADO distinto -nunca el acento-:
   grave→--err, media→--warn, baja→--ok, nula→--muted. Que las cuatro queden
   del color del acento es el error fácil al pasar todo al sistema nuevo, y
   las volvería indistinguibles de un vistazo. */
.chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 12px;
  border-radius: 999px; margin: 0 0 10px; letter-spacing: .01em; }
.chip.grave { color: var(--err); background: color-mix(in srgb, var(--err) 15%, transparent); }
.chip.media { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.chip.baja { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.chip.nula { color: var(--muted); background: var(--card); }

/* ---- Fundamento del veredicto: tiene que leerse cómodo, no en letra chica ---
   Es lo que permite discutir un falso positivo -qué escalón de la cascada
   disparó y con qué valores-, así que va en su propio bloque a tamaño de
   lectura normal, nunca en el texto secundario (.meta). */
.fundamento { font-size: 14.5px; line-height: 1.6; color: var(--text); background: var(--card-2);
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 16px; margin: 0 0 14px; }
.fundamento .meta { margin: 8px 0 0; }

/* ---- Informe narrado (expediente) ------------------------------------------- */
.informe { white-space: pre-wrap; font: inherit; font-size: 14px; line-height: 1.6; color: var(--text); margin: 0 0 10px; }

/* ---- Tablas de evidencia (ficha, exclusiones, expedientes) -----------------
   La evidencia -precio, vendedor, hecho con su fuente y su fecha- respalda un
   reclamo legal: celdas a tamaño normal, nunca en el texto secundario. Solo
   el encabezado de columna es chico, como corresponde a una etiqueta. */
.card table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0 0 10px; }
.card th, .card td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.card th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.card tr:last-child td { border-bottom: 0; }

/* ============================================================================
   CONFIGURACION Y ASISTENTE — las dos pantallas donde se toman decisiones
   ----------------------------------------------------------------------------
   Las pantallas de trabajo diario MUESTRAN lo que el sistema encontró. Estas
   dos, en cambio, son donde una persona DECIDE qué va a mirar el sistema, y
   una decisión mal tomada acá no se ve nunca: no hay hallazgo que la delate.
   Por eso los componentes de abajo no son "formulario lindo", son la señal de
   cuánto cuesta equivocarse en cada casilla.
   ============================================================================ */

/* ---- Cabecera de pantalla y vuelta atrás ---------------------------------- */
.volver { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
  color: var(--muted); font-size: 13px; text-decoration: none; }
.volver:hover { color: var(--text); }
.pagina { margin: 0 0 18px; }
.pagina h1 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.pagina p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; max-width: 76ch; }

/* ---- Cabecera de una tarjeta: título y, a la derecha, su marca de riesgo -- */
.card-cab { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 0 0 10px; }
.card-cab h2 { margin: 0; flex: 1 1 auto; }

/* ---- Avisos de resultado (guardado, falta, error) -------------------------
   Un aviso es una consecuencia, no un adorno: toma su color del token de
   ESTADO que le corresponde a través de --estado, nunca del acento. */
.aviso { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 16px; padding: 12px 15px;
  background: var(--card-2); border: 1px solid var(--border); border-left: 3px solid var(--estado, var(--hairline));
  border-radius: var(--radius); }
.aviso svg { flex: 0 0 auto; margin-top: 2px; color: var(--estado, var(--muted)); }
.aviso h2 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.aviso p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; max-width: 76ch; }
.aviso p:last-child { margin: 0; }
.aviso-ok { --estado: var(--ok); }
.aviso-warn { --estado: var(--warn); }
.aviso-err { --estado: var(--err); }

/* ---- Enlace de acción (ir a otra pantalla que SÍ hace lo que se busca) ---- */
.enlace-accion { display: inline-flex; align-items: center; gap: 7px; margin: 6px 0 0;
  color: var(--accent); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.enlace-accion:hover { color: var(--accent-2); text-decoration: underline; }

/* ---- Tablas anchas: primera columna fija (contrato §3.4.3) ----------------
   El §3.4.3 no pide "que scrollee": pide "primera columna sticky y/o colapso
   a tarjetas en móvil — NUNCA un scroll horizontal crudo y apretado". Un
   overflow-x pelado ES ese scroll crudo: la tabla se corre a la derecha y se
   pierde de qué fila era cada celda, que en exclusiones (siete columnas) o en
   los hechos de un expediente es perder el dato que respalda un reclamo.

   Así que la caja scrollea, pero la primera columna -la que dice de QUÉ es la
   fila: el alcance de la exclusión, el nombre del dato, la semilla- queda
   fija con su propio fondo (si no, el resto de la tabla se le vería por
   debajo) y una hairline que marca la costura. La tabla toma su ancho natural
   con un piso del ancho de la caja: así no se aprieta en columnas ilegibles
   cuando el contenido no entra, ni deja media caja vacía cuando sí entra. */
.tabla-scroll { overflow-x: auto; margin: 0 0 10px; }
.tabla-scroll table { margin: 0; width: max-content; min-width: 100%; }
.tabla-scroll th:first-child, .tabla-scroll td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--panel);
  box-shadow: inset -1px 0 0 var(--hairline); }

/* ---- Campo de formulario con su ayuda y, si hace falta, su freno ----------
   El valor heredado va PEGADO al campo, no en un párrafo general: la
   diferencia entre "vacío = heredá el global" y "0 = apagado a propósito" se
   decide mirando un campo, así que ahí tiene que estar el número que hoy
   está corriendo. */
.campos { display: flex; flex-direction: column; }
.campo { display: flex; flex-direction: column; gap: 7px; padding: 15px 0; border-top: 1px solid var(--hairline); }
.campo:first-child { border-top: 0; padding-top: 4px; }
.campo-cab { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.campo-lbl { font-size: 13.5px; font-weight: 600; }
.campo input[type="text"], .campo input[type="number"] { max-width: 210px; }
.heredado, .propio { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted-2); background: var(--card); }
.heredado .mono { color: var(--text); }
.campo-ayuda { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; max-width: 76ch; }

/* ---- Advertencia: no es ayuda, es un freno --------------------------------
   La del umbral de pHash dice que ese 8 salió de MEDIR el hash perceptual, no
   de cómo vende una marca. Con el estilo de .campo-ayuda se leería como una
   explicación más y no frenaría a nadie, así que va con el token --warn. */
.advertencia { display: flex; gap: 9px; align-items: flex-start; margin: 2px 0 0; padding: 10px 13px;
  max-width: 76ch; font-size: 12.5px; line-height: 1.55; color: var(--muted-2);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); border-radius: var(--radius); }
.advertencia svg { flex: 0 0 auto; margin-top: 2px; color: var(--warn); }

/* ============================================================================
   ASISTENTE — cuatro pasos, y la asimetría de riesgo a la vista
   ============================================================================ */

/* ---- La tira de pasos: un ÍNDICE, no un checklist -------------------------
   Ningún hito llega nunca a un estado de "listo". Cuando "listo" era
   "tildaste al menos una", el número se llenaba de acento y la tira se leía
   como una lista de tareas a medio hacer -1 y 3 en bronce, 2 y 4 en gris-.
   Pero el paso 4 viene siempre en cero A PROPÓSITO: sus propuestas apagan a
   un infractor en silencio y para siempre si sobran. Premiar el tilde ahí es
   premiar exactamente el error que el resto de la pantalla combate.

   Así que el número no marca progreso: marca RIESGO, con los mismos dos
   tokens de estado que las propuestas (--ok si el error se ve, --err si no se
   ve nunca). El acento no entra: es "esto es Custodia", y encima leído como
   medalla. Lo único que se mueve al tildar es la cuenta, que es un dato. */
.pasos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.hito { display: flex; align-items: center; gap: 10px; flex: 1 1 190px; padding: 10px 13px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  color: inherit; text-decoration: none; }
.hito:hover { border-color: var(--hairline); }
.hito-num { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--riesgo, var(--muted-2)); background: var(--card); border: 1px solid var(--border); }
.hito.riesgo-visible .hito-num, .hito.riesgo-silencioso .hito-num {
  background: color-mix(in srgb, var(--riesgo) 12%, transparent);
  border-color: color-mix(in srgb, var(--riesgo) 38%, transparent); }
.hito-nom { display: block; font-size: 13px; font-weight: 600; }
.hito-cuenta { display: block; margin-top: 1px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
/* Cómo se responde ESTE paso. Es lo que hace que un cero en canales se lea
   como la respuesta correcta hasta poder confirmar, y no como algo que falta. */
.hito-nota { display: block; margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--muted); }

/* ---- El paso ------------------------------------------------------------- */
.paso-cab { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 0 0 8px; }
.paso-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--on-accent); background: var(--accent); }
.paso-cab h2 { margin: 0; flex: 1 1 auto; }

/* ---- LA ASIMETRIA DE RIESGO ----------------------------------------------
   Estas dos clases son lo más importante de la pantalla y por eso son lo más
   simple: fijan --riesgo, y todo lo que cuelga de una propuesta -su borde, su
   insignia, su casilla y su consecuencia- lee ese token. Así la diferencia
   entre "si sobra, es ruido y se ve" y "si sobra, un infractor deja de
   denunciarse en silencio y para siempre" queda dicha UNA vez y se aplica en
   todos lados.

   El acento NO entra acá: el acento es "esto es Custodia", y el riesgo es un
   estado. Si el error caro se pintara del color de la app, dejaría de gritar. */
.riesgo-visible { --riesgo: var(--ok); }
.riesgo-silencioso { --riesgo: var(--err); }

/* Insignia de riesgo del paso: qué pasa si te equivocás en ESTE paso. */
.riesgo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--riesgo); background: color-mix(in srgb, var(--riesgo) 13%, transparent); }
.riesgo svg { flex: 0 0 auto; }

/* ---- Una propuesta: la unidad donde se decide ----------------------------- */
.propuestas { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.propuesta { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px;
  background: var(--card-2); border: 1px solid var(--border); border-left: 3px solid var(--riesgo, var(--border));
  border-radius: var(--radius); }
.propuesta.riesgo-silencioso { background: color-mix(in srgb, var(--err) 6%, var(--card-2)); }
.propuesta-cuerpo { flex: 1 1 auto; min-width: 0; }
.propuesta-tit { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.propuesta-valor { font-family: var(--mono); font-size: 13.5px; overflow-wrap: anywhere; }
.propuesta-motivo { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.propuesta-dato { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* La casilla toma el color del riesgo del ítem: tildar una roja no se siente
   igual que tildar una verde, y esa es exactamente la idea. */
.tilde { flex: 0 0 auto; display: grid; place-items: center; padding-top: 2px; }
.tilde input[type="checkbox"] { width: 17px; height: 17px; margin: 0; cursor: pointer; accent-color: var(--riesgo, var(--accent)); }
.tilde-vacio { width: 17px; height: 17px; }

/* La consecuencia: qué pasa si esta casilla queda tildada de más. Va al lado
   de la casilla, no en un cartel arriba de todo -un cartel se lee una vez y
   la decisión se toma cuatro líneas más abajo-. */
.consecuencia { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0;
  font-size: 12px; line-height: 1.45; color: var(--muted); }
.consecuencia svg { flex: 0 0 auto; margin-top: 2px; }
.riesgo-silencioso .consecuencia { color: var(--err); font-weight: 600; }

/* ---- Verificado / no verificado (marketplaces) ---------------------------- */
.verificado { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; border: 1px solid var(--border); }
.verificado-si { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.verificado-no { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-color: color-mix(in srgb, var(--warn) 32%, transparent); }

/* ---- Lo que se descartó por inválido -------------------------------------
   Se muestra, no se esconde: si el modelo propuso cinco y se ven tres, quien
   mira tiene que saber que hubo dos descartados y por qué. Si no, va a creer
   que el modelo encontró tres. */
.descartes { margin: 12px 0 0; padding: 12px 14px; background: var(--card-2);
  border: 1px dashed var(--hairline); border-radius: var(--radius); }
.descartes > p { margin: 0 0 8px; color: var(--muted-2); font-size: 12.5px; line-height: 1.55; max-width: 76ch; }
.descartes ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; line-height: 1.7; }

/* ---- Barra de aplicar: queda a la vista mientras se recorre la pantalla --- */
.barra-aplicar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 18px 0 0; padding: 13px 16px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.barra-aplicar p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; max-width: 62ch; }

/* ---- Angosto: los pasos en una columna y los campos a lo ancho ------------ */
@media (max-width: 640px) {
  .pasos { flex-direction: column; }
  .campo input[type="text"], .campo input[type="number"] { max-width: none; }
  .barra-aplicar { flex-direction: column; align-items: stretch; }
}