/* Soporte tecnico RLL
   Tokens de diseno/tokens.json. La idea: formas en copias. Cada estado es una
   copia de color, el folio es el protagonista y el sello marca lo importante.
   Amarillo Radial solo en la accion principal; violeta sello en folios,
   enlaces, seleccion y foco. Una sola familia (Archivo) con su eje de anchura. */

@font-face {
  font-family: "Archivo";
  src: url("archivo-wdth.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --papel: #F7F8F6;
  --superficie: #FFFFFF;
  --tinta: #24272A;
  --tinta-suave: #5B6066;
  --linea: #D9DCD8;
  --linea-tenue: #E6E8E5;
  --linea-fuerte: #C4C8C3;
  --radial-amarillo: #FAD629;
  --radial-amarillo-borde: #C9A800;
  --radial-negro: #282829;
  --sello: #4B3BA6;
  --sello-oscuro: #2F2378;
  --sello-tinte: #EEEDF6;
  --sello-tinte-fuerte: #E6E3F4;
  --copia-nuevo: #FFFFFF;          --copia-nuevo-borde: #B9BDB8;
  --copia-atencion: #FCD6B8;       --copia-atencion-borde: #D48A55;
  --copia-espera: #F4C9D0;         --copia-espera-borde: #C27585;
  --copia-resuelto: #CFE6CF;       --copia-resuelto-borde: #6E9F6E;
  --resuelto-tinta: #1F3B1F;
  --error: #9B1C1C;
  --error-tinte: #FBEAEA;
  --punteado: #9EA39D;
  --sombra-copia: 6px 6px 0 var(--copia-atencion), 6px 6px 0 1px var(--copia-atencion-borde);
  --radius-s: 6px;
  --radius-m: 8px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

a { color: var(--sello); }
a:hover { color: var(--sello-oscuro); }
button, input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--sello);
  outline-offset: 2px;
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  padding: 10px 14px; background: var(--superficie); border: 2px solid var(--sello);
}
.saltar:focus { top: 12px; }

/* ------------------------------------------------------------ tipografia */

.titulo-1 {
  margin: 0;
  font-size: 34px; line-height: 1.1; font-weight: 700;
  font-stretch: 112%; letter-spacing: -0.015em;
}
.titulo-2 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 600; max-width: 30ch; }
.etiqueta { font-size: 15px; font-weight: 700; }
.suave { color: var(--tinta-suave); }
.nota { font-size: 13px; line-height: 19px; color: var(--tinta-suave); }
.bajada { margin: 0; color: var(--tinta-suave); max-width: 60ch; }

.folio {
  display: block;
  font-weight: 700; font-stretch: 125%; letter-spacing: -0.02em;
  color: var(--sello); line-height: 0.95;
}
.folio-xl { font-size: 88px; }
.folio-l { font-size: 72px; }

/* --------------------------------------------------------------- botones */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radius-s);
  background: var(--superficie); color: var(--tinta);
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.boton:hover { color: var(--tinta); border-color: var(--tinta-suave); }

/* La accion principal. Una por pantalla. */
.boton-principal {
  border-color: var(--radial-amarillo-borde);
  background: var(--radial-amarillo); color: var(--radial-negro);
  font-weight: 700;
}
.boton-principal:hover { color: var(--radial-negro); border-color: var(--radial-negro); }
.boton-grande { min-height: 48px; padding: 0 24px; font-size: 16px; }

.boton-resolver {
  border-color: var(--copia-resuelto-borde);
  background: var(--copia-resuelto); color: var(--resuelto-tinta);
}
.boton-resolver:hover { color: var(--resuelto-tinta); border-color: var(--resuelto-tinta); }

.boton-texto {
  min-height: 44px; padding: 0 10px; border: 0; background: none;
  color: var(--tinta-suave); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.boton-texto:hover { color: var(--tinta); }

.botones { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------- campos */

.campo { display: flex; flex-direction: column; gap: 8px; }
.campo > label, .campo > .etiqueta { font-weight: 700; }
.ayuda { color: var(--tinta-suave); font-size: 14px; }

.entrada, .area-texto, .lista {
  width: 100%;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radius-s);
  background: var(--superficie); font-size: 16px;
}
.entrada, .lista { height: 44px; padding: 0 12px; }
.entrada-alta { height: 48px; padding: 0 14px; }
.area-texto { padding: 12px 14px; resize: vertical; min-height: 110px; }
.campo-error .entrada, .campo-error .area-texto, .campo-error .lista { border-color: var(--error); }
.mensaje-error { color: var(--error); font-size: 14px; font-weight: 600; }

fieldset.grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.grupo > legend { padding: 0; margin-bottom: 10px; font-weight: 700; }

/* Chips de tipo de falla: radios con aspecto de boton. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--linea-fuerte); border-radius: 22px;
  background: var(--superficie); font-size: 15px; font-weight: 600; cursor: pointer;
}
.chip input:checked + span { background: var(--sello); border-color: var(--sello); color: #FFFFFF; }
.chip input:focus-visible + span { outline: 2px solid var(--sello); outline-offset: 2px; }

/* "Puedes seguir trabajando?" */
.opciones { display: flex; flex-direction: column; gap: 10px; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion span {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 16px; min-height: 44px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radius-s);
  background: var(--superficie); cursor: pointer;
}
.opcion b { font-size: 15px; font-weight: 600; }
.opcion small { font-size: 14px; color: var(--tinta-suave); }
.opcion input:checked + span { background: var(--sello-tinte); border-color: var(--sello); }
.opcion input:focus-visible + span { outline: 2px solid var(--sello); outline-offset: 2px; }

/* Foto: input de archivo vestido de boton punteado. */
.foto { position: relative; align-self: flex-start; }
.foto input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.foto > span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border: 1px dashed var(--punteado); border-radius: var(--radius-s); font-size: 15px;
}
.foto input:focus-visible + span { outline: 2px solid var(--sello); outline-offset: 2px; }
.foto-elegida { font-size: 14px; color: var(--tinta-suave); }
.foto .solo-celular { display: none; }

.casilla { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sello); flex: none; }

/* --------------------------------------------------------------- avisos */

.aviso {
  padding: 12px 16px; border: 1px solid var(--linea-fuerte); background: var(--superficie);
  max-width: 68ch;
}
.aviso-error { border-color: var(--error); background: var(--error-tinte); color: var(--error); font-weight: 600; }
.aviso-hecho { border-color: var(--sello); background: var(--sello-tinte); }
.aviso ul { margin: 6px 0 0; padding-left: 18px; font-weight: 400; }

/* ------------------------------------------------------- copias de estado */

.copia-nuevo    { --copia: var(--copia-nuevo);    --copia-borde: var(--copia-nuevo-borde); }
.copia-atencion { --copia: var(--copia-atencion); --copia-borde: var(--copia-atencion-borde); }
.copia-espera   { --copia: var(--copia-espera);   --copia-borde: var(--copia-espera-borde); }
.copia-resuelto { --copia: var(--copia-resuelto); --copia-borde: var(--copia-resuelto-borde); }

/* El papelito: folio impreso en el color de su copia, esquinas rectas. */
.papelito {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 74px; height: 40px;
  background: var(--copia); border: 1px solid var(--copia-borde);
  font-stretch: 125%; font-weight: 700; font-size: 14px; letter-spacing: 0.02em;
  color: var(--tinta);
}
.estado {
  display: inline-flex; align-self: flex-start; align-items: center;
  padding: 6px 12px; background: var(--copia); border: 1px solid var(--copia-borde);
  font-size: 14px; font-weight: 600;
}
.muestra { display: inline-block; flex: none; width: 16px; height: 12px; background: var(--copia); border: 1px solid var(--copia-borde); }

/* ------------------------------------------------------------- el sello */

.sello {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 18px; border: 3px double var(--sello); border-radius: var(--radius-s);
  color: var(--sello); transform: rotate(-7deg); opacity: 0.92;
  animation: sellar 0.42s cubic-bezier(.2, 1.6, .4, 1) 0.25s both;
}
.sello b { font-size: 22px; font-weight: 800; font-stretch: 125%; letter-spacing: 0.04em; }
.sello small { font-size: 13px; font-weight: 600; }
@keyframes sellar {
  from { opacity: 0; transform: rotate(-7deg) scale(1.7); }
  to   { opacity: 0.92; transform: rotate(-7deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sello, .cabeza-folio .sello { animation: none; }
}

/* ------------------------------------------------------------ encabezado */

.cabecera {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  padding: 16px 28px; background: var(--superficie); border-bottom: 1px solid var(--linea);
}
.marca { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; flex: 1 1 360px; }
.marca img { height: 40px; width: auto; }
.marca-nombre {
  font-size: 20px; font-weight: 700; font-stretch: 125%; letter-spacing: -0.01em;
  color: var(--tinta); text-decoration: none;
}
.secciones { display: flex; gap: 4px; }
.secciones a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  color: var(--tinta-suave); text-decoration: none;
}
.secciones a[aria-current="page"] {
  color: var(--tinta); font-weight: 600;
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}
.buscar { flex: 1 1 280px; max-width: 420px; }
.buscar .entrada { background: var(--papel); font-size: 15px; padding: 0 14px; }
.cuenta { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--tinta-suave); }
.cuenta form { margin: 0; }

/* -------------------------------------------------- reportar una falla */

.hoja {
  display: flex; flex-wrap: wrap; gap: 48px;
  max-width: 1120px; padding: 40px 28px 64px;
}
.hoja > main { flex: 999 1 520px; min-width: 0; max-width: 640px; }
.recientes { flex: 1 1 260px; min-width: 0; max-width: 340px; display: flex; flex-direction: column; }
.recientes h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.recientes ol { margin: 0; padding: 0; list-style: none; }
.reciente {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 0;
  border-top: 1px solid var(--linea); color: var(--tinta); text-decoration: none;
}
.reciente:hover .reciente-titulo { text-decoration: underline; }
.reciente-titulo { font-size: 15px; font-weight: 600; }
.reciente-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vacio { padding: 12px 0; border-top: 1px solid var(--linea); color: var(--tinta-suave); font-size: 15px; }

.formulario { display: flex; flex-direction: column; gap: 28px; }
.encabezado-pagina { display: flex; flex-direction: column; gap: 6px; }
.envio { padding-top: 0; }

/* ----------------------------------------------------------- comprobante */

.comprobante {
  position: relative; padding: 28px 32px 32px;
  background: var(--superficie); border: 1px solid var(--linea-fuerte);
  box-shadow: var(--sombra-copia);
}
.comprobante .sello { position: absolute; top: 28px; right: 28px; }
.datos-comprobante {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px;
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--linea-tenue); font-size: 15px;
}
.datos-comprobante dt, .ficha dt { color: var(--tinta-suave); font-size: 13px; }
.datos-comprobante dd { margin: 0; }

/* ----------------------------------------------------------------- bandeja */

.bandeja { display: flex; flex-wrap: wrap; align-items: stretch; min-height: calc(100vh - 77px); }
.vistas {
  flex: 1 1 200px; max-width: 240px; padding: 20px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.vistas a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 12px; border-radius: var(--radius-s);
  color: var(--tinta); font-size: 15px; text-decoration: none; line-height: 1.2;
}
.vistas a:hover { background: var(--sello-tinte); }
.vistas a[aria-current="page"] { background: var(--sello-tinte-fuerte); color: var(--sello-oscuro); font-weight: 600; }
.leyenda {
  margin-top: 20px; padding: 14px 12px 0; border-top: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--tinta-suave);
}
.leyenda h2 { margin: 0; color: var(--tinta); font-weight: 600; font-size: 14px; }
.leyenda span { display: flex; align-items: center; gap: 8px; }

.lista-tickets {
  flex: 1 1 360px; max-width: 460px; min-width: 0;
  border-left: 1px solid var(--linea); border-right: 1px solid var(--linea);
  background: var(--superficie);
}
.lista-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 20px 12px; }
.lista-cabeza h2 { margin: 0; font-size: 17px; font-weight: 700; }
.lista-tickets ol { margin: 0; padding: 0; list-style: none; }
.fila {
  display: flex; gap: 14px; padding: 14px 20px;
  border-top: 1px solid var(--linea-tenue); color: var(--tinta); text-decoration: none;
}
.fila:hover { background: var(--papel); }
.fila[aria-current="true"] { background: var(--sello-tinte); }
.fila-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fila-titulo { font-weight: 600; font-size: 15px; }
.fila-meta { color: var(--tinta-suave); font-size: 13px; }
.fila-pie { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.detenido { font-size: 13px; font-weight: 700; }
.lista-vacia { padding: 20px; border-top: 1px solid var(--linea-tenue); color: var(--tinta-suave); }

.detalle {
  flex: 999 1 520px; min-width: 0; padding: 32px 40px 48px;
  display: flex; flex-direction: column; gap: 28px;
}

/* ----------------------------------------------------- detalle de un folio */

/* El sello va en su propia columna y baja de renglon si no cabe: nunca se
   encima sobre el folio, que es lo que se dicta por telefono. */
.cabeza-folio { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; }
.cabeza-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cabeza-folio .sello { margin-top: 8px; transform: rotate(-6deg); }
@keyframes sellar-detalle {
  from { opacity: 0; transform: rotate(-6deg) scale(1.7); }
  to   { opacity: 0.92; transform: rotate(-6deg) scale(1); }
}
.cabeza-folio .sello { animation-name: sellar-detalle; }
.cabeza-folio .titulo-2 { margin-top: 10px; }
.cabeza-folio .estado { margin-top: 8px; }

.ficha {
  margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px;
  padding: 18px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.ficha dd { margin: 2px 0 0; font-weight: 600; }

.bloque { display: flex; flex-direction: column; gap: 8px; max-width: 68ch; }
.bloque h2 { margin: 0; font-size: 15px; font-weight: 700; }
.lo-reportado { margin: 0; font-size: 16px; line-height: 1.55; white-space: pre-line; }

.adjuntos { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.adjuntos a { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.adjuntos img { width: 160px; height: 120px; object-fit: cover; border: 1px solid var(--linea-fuerte); }

.historial { margin: 0; padding: 0; list-style: none; }
.historial li { display: flex; gap: 16px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--linea-tenue); }
.historial .muestra { width: 28px; height: 20px; margin-top: 2px; }
.historial-texto { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.historial-texto b { font-weight: 600; }
.historial-texto span { color: var(--tinta-suave); font-size: 14px; white-space: pre-line; }
.historial-cuando { flex: 0 0 auto; text-align: right; color: var(--tinta-suave); font-size: 13px; }

.acciones { display: flex; flex-direction: column; gap: 12px; max-width: 68ch; }

/* -------------------------------------------------------------- entrada */

.entrada-pagina { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; }
.entrada-pagina > main {
  flex: 1 1 440px; min-width: 0; max-width: 640px; padding: 56px 48px;
  display: flex; flex-direction: column; justify-content: center; gap: 36px;
}
.entrada-pagina > main > img { height: 52px; width: auto; align-self: flex-start; }
.entrada-titulo {
  margin: 0; font-size: 40px; line-height: 1.05; font-weight: 700;
  font-stretch: 118%; letter-spacing: -0.02em;
}
.entrada-form { display: flex; flex-direction: column; gap: 18px; max-width: 400px; }
.consulta {
  flex: 1 1 380px; min-width: 0; padding: 56px 48px;
  background: var(--superficie); border-left: 1px solid var(--linea);
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.consulta h2 { margin: 0; font-size: 22px; font-weight: 700; }
.consulta form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.consulta .campo { flex: 1 1 180px; gap: 6px; }
.entrada-folio {
  height: 56px; padding: 0 14px; background: var(--papel);
  font-size: 28px; font-weight: 700; font-stretch: 125%; letter-spacing: 0.02em; color: var(--sello);
}
.consulta .boton { min-height: 56px; padding: 0 20px; font-size: 16px; }
.resultado {
  display: flex; flex-direction: column; gap: 2px; padding: 16px; max-width: 420px;
  background: var(--copia, var(--superficie)); border: 1px solid var(--copia-borde, var(--linea-fuerte));
}
.resultado b { font-weight: 700; }
.resultado span { font-size: 14px; }

.pagina-simple { max-width: 520px; padding: 40px 28px 64px; display: flex; flex-direction: column; gap: 24px; }

/* ----------------------------------------------------------------- celular */

@media (max-width: 640px) {
  .cabecera { padding: 14px 16px; }
  .marca { flex-wrap: nowrap; gap: 12px; }
  /* Logo a la izquierda y el nombre (o las secciones) al otro extremo, como el diseno. */
  .marca-nombre:last-child, .secciones { margin-left: auto; }
  .marca img { height: 32px; }
  .marca-nombre { font-size: 16px; font-stretch: 118%; }
  .hoja { padding: 20px 16px 0; gap: 32px; }
  .titulo-1 { font-size: 26px; }
  .formulario { gap: 22px; }
  .bajada-escritorio { display: none; }
  .foto .solo-escritorio { display: none; }
  .foto .solo-celular { display: inline; }

  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip span { width: 100%; min-height: 48px; padding: 0 12px; border-radius: var(--radius-m); }
  .opcion span, .entrada, .lista, .area-texto, .boton { border-radius: var(--radius-m); }
  .opcion span { min-height: 48px; }
  .opcion small { display: none; }
  .boton { min-height: 48px; }
  .foto { align-self: stretch; }
  .foto > span { width: 100%; justify-content: center; min-height: 48px; border-radius: var(--radius-m); }

  /* El boton principal queda fijo abajo, al alcance del pulgar. */
  .envio {
    position: sticky; bottom: 0; z-index: 2;
    margin: 0 -16px; padding: 12px 16px 20px;
    background: var(--superficie); border-top: 1px solid var(--linea);
  }
  .envio .boton-principal { width: 100%; min-height: 52px; font-size: 17px; }

  .comprobante { padding: 22px 20px 24px; }
  .comprobante .sello { top: 18px; right: 14px; padding: 6px 10px; }
  .comprobante .sello b { font-size: 16px; }
  .folio-xl { font-size: 64px; }
  .datos-comprobante { grid-template-columns: 1fr; }

  .vistas { max-width: none; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; padding: 12px 16px; }
  .vistas a { flex: 1 1 150px; }
  .leyenda { display: none; }
  .lista-tickets { max-width: none; border-left: 0; border-right: 0; }
  .detalle { padding: 24px 16px 40px; }
  .folio-l { font-size: 56px; }

  .entrada-pagina > main, .consulta { padding: 40px 16px; }
  .consulta { border-left: 0; border-top: 1px solid var(--linea); }
  .entrada-titulo { font-size: 32px; }
}

@media print {
  .cabecera, .vistas, .lista-tickets, .acciones { display: none; }
  .sello { animation: none; }
}

/* El detalle de quien reporto va dentro de .hoja, que ya pone los margenes. */
.hoja > .detalle-propio { padding: 0; }

/* ------------------------------------------------------------- catalogos */
/* Mismo marco que la bandeja: menu lateral y una zona de trabajo. Filas en
   tabla, no tarjetas; el amarillo solo en "Agregar" o en "Guardar". */

.catalogo {
  flex: 999 1 600px; min-width: 0; padding: 32px 40px 48px;
  display: flex; flex-direction: column; gap: 24px;
  border-left: 1px solid var(--linea);
}
.catalogo-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; }
.catalogo-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 15px; }
.catalogo-filtros form { flex: 1 1 280px; max-width: 420px; }
.catalogo-filtros a { display: inline-flex; align-items: center; min-height: 44px; }
.volver { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.ficha-form { max-width: 640px; }

.tabla-marco { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linea); }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th {
  text-align: left; font-weight: 700; font-size: 14px; white-space: nowrap;
  padding: 12px 16px; border-bottom: 2px solid var(--tinta);
}
.tabla td { padding: 12px 16px; border-bottom: 1px solid var(--linea-tenue); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; }
.tabla a { font-weight: 600; }
.tabla .inactivo td, .tabla .inactivo a { color: var(--tinta-suave); }

.clave-provisional { display: flex; flex-direction: column; gap: 6px; align-self: flex-start; }
.clave-texto {
  font-size: 34px; line-height: 1.1; font-weight: 700; font-stretch: 125%;
  letter-spacing: 0.04em; color: var(--sello); word-break: break-all;
}

.lista-simple { margin: 0; padding: 0; list-style: none; }
.lista-simple li { padding: 10px 0; border-top: 1px solid var(--linea-tenue); }

@media (max-width: 640px) {
  .catalogo { padding: 24px 16px 40px; border-left: 0; }
  .clave-texto { font-size: 24px; }
}