/* ============================================================================
   OCR para el área legal — hoja de estilo
   ----------------------------------------------------------------------------
   Minimalismo editorial: monocromo cálido, pasteles desaturados solo con valor
   semántico, un borde de 1px como única separación y sombras prácticamente
   inexistentes. La jerarquía la carga la tipografía, no el color.

   Sin CDN ni fuentes remotas: la herramienta procesa documentos confidenciales
   y no debe pedirle nada a terceros al abrirse. Las familias son del sistema.
   ========================================================================= */

:root {
  /* Lienzo y superficies — hueso cálido, no gris azulado */
  --lienzo: #f7f6f3;
  --superficie: #ffffff;
  --superficie-2: #fbfbfa;

  /* Tinta */
  --tinta: #2f3437;
  --tinta-media: #5f6569;
  /* El gris de la paleta editorial es #787774, pero da 4.32:1 sobre el lienzo:
     por debajo del 4.5:1 que WCAG 2.2 AA pide en texto normal. Este cumple en
     los tres fondos —blanco, superficie y lienzo— y a la vista es el mismo gris. */
  --tinta-suave: #72716e;

  /* Estructura: un solo borde para todo */
  --linea: #eaeaea;
  --linea-fuerte: #d8d8d6;

  /* --- Naranja AMW, el acento de marca -------------------------------------
     Medido, no elegido a ojo. El naranja de marca NO admite texto encima:
       #ff6a00 + blanco  2.87:1   #ff6a00 + tinta  4.39:1   (los dos fallan AA)
     Por eso el botón usa el tono 700, y el texto naranja el 800:
       #b84a00 + blanco  5.23:1 ✓   #8f3a00 sobre lienzo  7.01:1 ✓
     El 500 queda para lo que no lleva texto: barras, bordes, marcas. */
  --marca:          #ff6a00;   /* solo fondos y trazos, nunca bajo texto */
  --marca-boton:    #b84a00;   /* con texto blanco: 5.23:1 */
  --marca-boton-on: #a24200;   /* su hover */
  --marca-texto:    #8f3a00;   /* sobre lienzo: 7.01:1 */
  --marca-tenue:    #fff4ec;   /* el fondo más claro de la escala */
  --marca-borde:    #ffc7a3;

  /* Pasteles desaturados, solo con significado */
  --azul-fondo: #e1f3fe;
  --azul-texto: #1f6c9f;
  --verde-fondo: #edf3ec;
  --verde-texto: #346538;
  --ambar-fondo: #fbf3db;
  --ambar-texto: #956400;
  --rojo-fondo: #fdebec;
  --rojo-texto: #9f2f2d;

  /* Familias */
  --sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* Radios crispos */
  --r-s: 4px;
  --r-m: 6px;
  --r-l: 10px;

  --t: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--lienzo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* WCAG 2.4.11 y 2.4.13 — el foco siempre visible y con contorno propio */
:where(a, button, input, select, summary, label.zona, [tabindex]):focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

/* WCAG 2.4.1 — salto al contenido para quien navega con teclado */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinta);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--r-m) 0;
  z-index: 10;
  font-size: 14px;
}
.saltar:focus { left: 0; }

/* --- Cabecera ------------------------------------------------------------ */

.barra {
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
  padding: 22px 28px;
}
.barra .interior {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.barra h1 {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.barra .sub {
  color: var(--tinta-suave);
  font-size: 13.5px;
  text-wrap: balance;
}

main { max-width: 1120px; margin: 0 auto; padding: 32px 28px 8px; }

.rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "documento    configuracion"
    "conversiones configuracion";
  gap: 24px;
  align-items: start;
}

/* La configuración vive a la derecha y ocupa las dos filas; a la izquierda quedan
   la carga y el resultado, que es el recorrido natural: subo, ajusto, descargo. */
.a-documento { grid-area: documento; }
.a-configuracion { grid-area: configuracion; }
.a-conversiones { grid-area: conversiones; }

/* --- Tarjetas: borde, nunca sombra --------------------------------------- */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-l);
  padding: 28px;
}
.tarjeta > h2 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.tarjeta .ayuda {
  color: var(--tinta-suave);
  font-size: 13.5px;
  margin: 0 0 22px;
  max-width: 62ch;
  text-wrap: pretty;
}

/* --- Zona de carga -------------------------------------------------------- */

.zona {
  display: block;
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--r-m);
  padding: 34px 22px;
  text-align: center;
  cursor: pointer;
  background: var(--superficie-2);
  transition: border-color var(--t), background var(--t);
}
.zona:hover, .zona.encima { border-color: var(--tinta-media); background: var(--lienzo); }
.zona svg { display: block; margin: 0 auto 12px; color: var(--tinta-suave); }
.zona .principal { display: block; font-weight: 550; font-size: 14.5px; }
.zona .secundario { display: block; color: var(--tinta-suave); font-size: 13px; margin-top: 4px; }
.zona.cargado { border-style: solid; border-color: var(--verde-texto); background: var(--verde-fondo); }
.zona.cargado svg { color: var(--verde-texto); }

input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- Controles ------------------------------------------------------------ */

fieldset { border: 0; padding: 0; margin: 0 0 26px; }
fieldset:last-of-type { margin-bottom: 0; }
legend {
  display: block;
  width: 100%;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding: 0 0 14px;
}

.campo { margin-bottom: 18px; }
.campo .et { display: block; font-size: 13.5px; font-weight: 550; margin-bottom: 6px; }
.campo .pista {
  color: var(--tinta-suave);
  font-size: 12.5px;
  margin: 6px 0 0;
  max-width: 58ch;
  text-wrap: pretty;
}

select,
input[type="text"],
input[type="number"] {
  width: 100%;
  min-height: 40px;            /* WCAG 2.5.8 — objetivo cómodo */
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-s);
  transition: border-color var(--t);
}
select:hover, input[type="text"]:hover, input[type="number"]:hover { border-color: var(--tinta-suave); }
input[type="number"] { font-variant-numeric: tabular-nums; }

/* La casilla entera es el objetivo, no solo el cuadrito de 15px */
.casilla {
  display: flex;
  gap: 11px;
  /* 🔑 `center`, no `flex-start`. Con `min-height: 44px` —que está para el objetivo
     táctil— una casilla de una sola línea dejaba el texto pegado arriba y el hueco
     debajo: la fila entera se veía descuadrada respecto a las demás. */
  align-items: center;
  padding: 9px 8px;
  margin: 0 -8px;
  border-radius: var(--r-s);
  cursor: pointer;
  min-height: 44px;
  transition: background var(--t);
}
/* Cuando la casilla lleva descripción son dos líneas, y ahí el cuadro debe quedar a
   la altura del TÍTULO, no a media caja. */
.casilla:has(small) { align-items: flex-start; }
.casilla:has(small) input { margin-top: 3px; }

.casilla:hover { background: var(--superficie-2); }
.casilla input {
  flex-shrink: 0;
  width: 17px; height: 17px;
  margin: 0;
  accent-color: var(--tinta);
  cursor: pointer;
}
.casilla + .casilla { margin-top: 2px; }
.casilla .texto { font-size: 13.5px; }
.casilla .texto b { font-weight: 550; display: block; }
.casilla .texto small {
  display: block;
  color: var(--tinta-suave);
  font-size: 12.5px;
  margin-top: 2px;
  max-width: 54ch;
}

/* --- Botón ---------------------------------------------------------------- */

.boton {
  width: 100%;
  min-height: 44px;
  margin-top: 20px;
  padding: 12px 18px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 560;
  color: #fff;
  background: #1c1c1a;
  border: 1px solid #1c1c1a;
  border-radius: var(--r-m);
  cursor: pointer;
  transition: background var(--t), transform var(--t);
}
.boton:hover:not(:disabled) { background: #333331; }
.boton:active:not(:disabled) { transform: scale(0.985); }
.boton:disabled {
  background: var(--superficie-2);
  border-color: var(--linea);
  color: var(--tinta-suave);
  cursor: not-allowed;
}

/* --- Avisos --------------------------------------------------------------- */

/* `.aviso` (el ámbar) se retiró el 5-oct junto con el recordatorio del opt-out, que
   era su único uso. Sin barra lateral de color, cuando vuelva a hacer falta: el fondo
   pastel y el color del texto ya dicen de qué tipo es, y el borde uniforme de 1px es
   la única separación que usa el resto de la interfaz. */

.aviso-error {
  border: 1px solid #f3d3d4;
  background: var(--rojo-fondo);
  color: var(--rojo-texto);
  border-radius: var(--r-s);
  padding: 12px 14px;
  margin-top: 18px;
  font-size: 13px;
}
.aviso-error[hidden] { display: none; }

/* --- Conversiones --------------------------------------------------------- */

.vacio {
  border: 1px dashed var(--linea);
  border-radius: var(--r-m);
  padding: 34px 24px;
  text-align: center;
}
.vacio svg { color: var(--linea-fuerte); margin-bottom: 12px; }
.vacio p { margin: 0; color: var(--tinta-media); font-size: 13.5px; }
.vacio p + p { margin-top: 6px; color: var(--tinta-suave); font-size: 12.5px; }

.trabajo {
  border-bottom: 1px solid var(--linea);
  padding: 18px 0;
  animation: entra 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* La tarjeta que tiene el menú abierto se pone por encima de las demás. Sin esto, da
   igual el z-index del menú: queda atrapado dentro del contexto de su propia tarjeta. */
.trabajo:has(.menu-descarga[open]) { position: relative; z-index: 900; }

.trabajo:first-child { padding-top: 2px; }
.trabajo:last-child { border-bottom: 0; padding-bottom: 2px; }

@keyframes entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.trabajo .cabeza { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.trabajo .nombre { font-weight: 550; font-size: 14px; word-break: break-word; }
.trabajo .hora {
  color: var(--tinta-suave);
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.trabajo .detalle { color: var(--tinta-media); font-size: 13px; margin: 8px 0 0; }

.etiqueta {
  display: inline-block;
  margin-top: 9px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 9999px;
}
.e-cola, .e-procesando, .e-ensamblando { background: var(--azul-fondo); color: var(--azul-texto); }
.e-listo { background: var(--verde-fondo); color: var(--verde-texto); }
.e-error { background: var(--rojo-fondo); color: var(--rojo-texto); }

.datos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--tinta-suave);
}
.datos b {
  color: var(--tinta);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.descargas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.descargas a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;              /* WCAG 2.5.8 */
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 550;
  text-decoration: none;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-s);
  transition: background var(--t), border-color var(--t);
}
.descargas a:hover { background: var(--lienzo); border-color: var(--tinta-suave); }
.descargas a.principal { background: #1c1c1a; border-color: #1c1c1a; color: #fff; }
.descargas a.principal:hover { background: #333331; }

.fallo {
  background: var(--rojo-fondo);
  border: 1px solid var(--linea);
  border-radius: var(--r-s);
  padding: 11px 13px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--rojo-texto);
  white-space: pre-wrap;
  max-height: 170px;
  overflow: auto;
}

.progreso {
  height: 2px;
  background: var(--linea);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 12px;
}
.progreso span {
  display: block;
  height: 100%;
  width: 32%;
  background: var(--azul-texto);
  border-radius: 9999px;
  animation: avanza 1.3s ease-in-out infinite;
}
@keyframes avanza {
  from { transform: translateX(-110%); }
  to { transform: translateX(420%); }
}

footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 28px 44px;
  color: var(--tinta-suave);
  font-size: 12.5px;
  max-width: 68ch;
  text-wrap: pretty;
}

/* --- Reflujo (WCAG 1.4.10): legible hasta 320 px sin scroll horizontal ---- */

@media (max-width: 920px) {
  .rejilla {
    grid-template-columns: 1fr;
    grid-template-areas:
      "documento"
      "configuracion"
      "conversiones";
  }
}

@media (max-width: 600px) {
  main { padding: 24px 16px 4px; }
  .barra { padding: 18px 16px; }
  .tarjeta { padding: 22px 18px; }
  footer { padding: 22px 16px 36px; }
  .trabajo .cabeza { flex-direction: column; gap: 3px; }
}

@media (max-width: 380px) {
  body { font-size: 14.5px; }
  .barra h1 { font-size: 20px; }
  .tarjeta { padding: 18px 14px; }
  .descargas a { flex: 1 1 auto; justify-content: center; }
}

/* --- Movimiento reducido -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .progreso span { width: 100%; }
}

/* ============================================================================
   Historial de conversiones — rediseño del 5-oct
   ----------------------------------------------------------------------------
   El problema que resuelve: la tarjeta enseñaba nombre, estado, cinco métricas y
   seis enlaces con el mismo peso visual, así que no se podía saber de un vistazo
   ni en qué estado iba ni qué hacer con ella.

   Ahora la jerarquía la cargan el tamaño y el espacio, no el color:
     1. el nombre del documento;
     2. UNA acción primaria, que es la que hace el trabajo: revisar;
     3. los datos, en una fila de cifras tabulares que se lee de corrido;
     4. las descargas, al final y subordinadas — y solo si está aprobado.
   ========================================================================= */

.t-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.t-nombre {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
  word-break: break-word;
}

.t-quien {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--tinta-suave);
}

/* El estado, como etiqueta. Lleva texto además del color: el color por sí solo
   no es una señal accesible. */
.t-estado {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.t-estado.es-subido     { background: var(--superficie-2); color: var(--tinta-media); border-color: var(--linea-fuerte); }
.t-estado.es-procesando { background: var(--azul-fondo);  color: var(--azul-texto);  border-color: var(--azul-texto); }
.t-estado.es-listo      { background: var(--marca-tenue); color: var(--marca-texto); border-color: var(--marca-borde); }
.t-estado.es-revisado   { background: var(--verde-fondo); color: var(--verde-texto); border-color: var(--verde-texto); }
.t-estado.es-error      { background: var(--rojo-fondo);  color: var(--rojo-texto);  border-color: var(--rojo-texto); }

/* Las cifras: una sola fila, tabulares, sin repetir la unidad en cada una. */
.t-cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin: 14px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid var(--linea);
}
.t-cifra { display: flex; flex-direction: column; gap: 1px; }
.t-cifra .valor {
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.t-cifra .etiqueta {
  font-size: 11.5px;
  color: var(--tinta-suave);
  text-transform: lowercase;
}
.t-cifra.destaca .valor { color: var(--marca-texto); }

/* --- La acción primaria: una sola por tarjeta --------------------------- */

.t-acciones { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.t-primario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;              /* sobre --marca-boton: 5.23:1 */
  background: var(--marca-boton);
  border: 1px solid var(--marca-boton);
  border-radius: var(--r-m);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t);
}
.t-primario:hover { background: var(--marca-boton-on); border-color: var(--marca-boton-on); color: #fff; }
.t-primario:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.t-primario .cuenta {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* --- Las descargas, subordinadas --------------------------------------- */

.t-descargas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.t-descarga {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  font-size: 12.5px;
  color: var(--tinta-media);
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-s);
  text-decoration: none;
}
.t-descarga:hover { background: var(--superficie-2); color: var(--tinta); }
.t-descarga:focus-visible { outline: 2px solid var(--azul-texto); outline-offset: 2px; }
.t-descarga.principal { font-weight: 600; color: var(--tinta); }

/* El candado: por qué no se puede descargar todavía. Explica en vez de esconder. */
.t-bloqueado {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tinta-media);
  background: var(--superficie-2);
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--r-s);
}

.t-error {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--rojo-texto);
  background: var(--rojo-fondo);
  border: 1px solid var(--rojo-texto);
  border-radius: var(--r-s);
}

/* --- Menú de descarga ---------------------------------------------------
   Un `<details>` nativo en vez de un menú hecho a mano: ya viene operable con
   teclado y anunciado por el lector de pantalla, sin una línea de JavaScript
   para eso. Lo único que se añade es cerrarlo al pulsar fuera.

   Y cada formato lleva una línea que dice para qué sirve: cinco palabras
   sueltas —«Word · Texto · Markdown · Reporte · JSON»— obligan a adivinar, y
   quien revisa un acta no tiene por qué saber qué es un JSON. */

.menu-descarga { position: relative; display: inline-block; }

.menu-descarga > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 15px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-m);
  cursor: pointer;
  list-style: none;              /* fuera el triángulo por omisión */
  user-select: none;
}
.menu-descarga > summary::-webkit-details-marker { display: none; }
.menu-descarga > summary:hover { background: var(--superficie-2); }
.menu-descarga > summary:focus-visible { outline: 2px solid var(--azul-texto); outline-offset: 2px; }
.menu-descarga > summary::after {
  content: "";
  width: 7px; height: 7px;
  margin-left: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t);
}
.menu-descarga[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }

.menu-opciones {
  position: absolute;
  /* 🔴 Alto a propósito. Con un z-index modesto el menú quedaba POR DEBAJO del texto
     de las tarjetas siguientes: `.trabajo` se anima con `transform`, y un transform
     crea contexto de apilamiento, así que cada tarjeta se pinta en su propia capa y
     las posteriores ganan. El resultado era un menú con el texto de abajo encima. */
  z-index: 1000;
  top: calc(100% + 6px);
  left: 0;
  min-width: 268px;
  padding: 6px;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-m);
}
/* En pantallas estrechas se abre hacia la izquierda para no salirse. */
@media (max-width: 560px) {
  .menu-opciones { left: auto; right: 0; }
}

/* Fondo opaco explícito: el menú tapa, no deja ver a través. */
.menu-opciones { background-color: #ffffff; }

.menu-opciones a {
  display: block;
  padding: 9px 11px;
  border-radius: var(--r-s);
  text-decoration: none;
  color: var(--tinta);
}
.menu-opciones a:hover { background: var(--superficie-2); }
.menu-opciones a:focus-visible { outline: 2px solid var(--azul-texto); outline-offset: -2px; }
.menu-opciones a b {
  display: block;
  font-size: 13.5px;
  font-weight: 550;
}
.menu-opciones a small {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--tinta-suave);
  line-height: 1.4;
}
.menu-opciones .destacado b { color: var(--marca-texto); }
.menu-opciones hr {
  margin: 5px 7px;
  border: 0;
  border-top: 1px solid var(--linea);
}