/* Portal de clientes de Ordenatto.
   Marca provisional: la paleta, los radios, los pesos y las sombras de siempre, con el nombre
   de Ordenatto, hasta que exista su marca (docs/MARCA.md). «Precisión visible»: NIT, números de
   factura y montos en mono tabular, y ningún estado se comunica solo con color. Los colores
   solo se escriben aquí, en :root; nunca en una plantilla. */

/* ---------- Fuentes (servidas desde el portal, sin CDN; licencia OFL en fuentes/) ---------- */

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fuentes/inter.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("fuentes/jetbrains-mono.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  --or-blue-50:      #e8f2fd;
  --or-blue-500:     #2490ef;
  --or-blue-700:     #1b74c2;
  --or-blue-on-dark: #4fa8f4;
  --or-ink:          #1f272e;
  --or-gray-600:     #4a5560;
  --or-gray-400:     #7b8794;
  --or-gray-200:     #b6c0ca;
  --or-border:       #e3e8ec;
  --or-canvas:       #f7f9fa;
  --or-surface:      #ffffff;

  --or-accepted: #1f9d63;  --or-accepted-bg: #e7f6ee;
  --or-rejected: #d92d20;  --or-rejected-bg: #fdeceb;
  --or-pending:  #d98b0a;  --or-pending-bg:  #fdf3e3;
  --or-accent:   #6b57d6;

  --or-font-sans: Inter, system-ui, sans-serif;
  --or-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --or-radius-field:  6px;
  --or-radius-button: 8px;
  --or-radius-card:   10px;
  --or-radius-pill:   999px;

  --or-space-1: 4px;  --or-space-2: 8px;  --or-space-3: 12px; --or-space-4: 16px;
  --or-space-6: 24px; --or-space-8: 32px; --or-space-12: 48px; --or-space-16: 64px;

  --or-shadow-1: 0 1px 2px  rgb(31 39 46 / 6%);
  --or-shadow-2: 0 4px 12px rgb(31 39 46 / 8%);
  --or-shadow-3: 0 12px 28px rgb(31 39 46 / 12%);

  --or-focus-ring: 0 0 0 3px rgb(36 144 239 / 16%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--or-font-sans);
  font-size: 16px;
  line-height: 26px;
  color: var(--or-ink);
  background: var(--or-canvas);
  -webkit-font-smoothing: antialiased;
}

/* Azul pequeño sobre blanco: siempre el 700, que es el que pasa AA. */
a { color: var(--or-blue-700); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 0; box-shadow: var(--or-focus-ring); border-radius: var(--or-radius-field); }

/* ---------- Datos fiscales: mono ---------- */

.mono, .fiscal {
  font-family: var(--or-font-mono); font-size: 14px; font-variant-numeric: tabular-nums;
}
td.num, th.num, .num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { font-family: var(--or-font-mono); font-size: 14px; }

/* ---------- Logo ---------- */

.logo { display: block; height: auto; }
.logo text { font-family: var(--or-font-sans); }

/* ---------- Armazón: barra lateral en tinta y barra superior clara ---------- */

/* La barra lateral va sobre tinta: el logo usa su versión «sobre tinta», los textos van en
   blanco o gris claro y el azul es el aclarado. */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

.barra {
  background: var(--or-ink); color: var(--or-gray-200);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: var(--or-space-6) var(--or-space-3) var(--or-space-4);
}
/* Área de protección del logo. */
.barra .marca { display: block; padding: 0 var(--or-space-3) var(--or-space-8); }
.barra .marca:hover { text-decoration: none; }
/* El logo de la empresa, si lo subió. Va en una placa blanca: los logos se dibujan
   para fondo claro, y sobre tinta muchos desaparecerían. */
.barra .marca-empresa {
  display: flex; align-items: center; min-height: 64px;
  margin: 0 0 var(--or-space-6); padding: 10px var(--or-space-3);
  background: var(--or-surface); border-radius: var(--or-radius-card);
}
.barra .marca-empresa img { display: block; max-width: 100%; max-height: 52px; }
/* El logo para fondo oscuro va directo sobre la tinta, sin la placa. */
.barra .marca-empresa.sin-placa { background: none; padding-left: var(--or-space-3); }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a { color: var(--or-gray-200); text-decoration: none; }
.menu .modulo {
  display: flex; align-items: center; gap: var(--or-space-3);
  padding: 10px var(--or-space-3); border-radius: var(--or-radius-button);
  font-size: 15px; line-height: 20px; font-weight: 500;
}
.menu .modulo .icono { flex: none; }
.menu .modulo:hover { background: rgb(255 255 255 / 6%); color: #fff; }
.menu .modulo.activo { background: rgb(36 144 239 / 22%); color: #fff; }
.menu .modulo.activo .icono { color: var(--or-blue-on-dark); }
.paginas-modulo {
  display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 var(--or-space-2) 22px; padding-left: var(--or-space-4);
  border-left: 1px solid rgb(182 192 202 / 20%);
}
.paginas-modulo a { padding: 7px var(--or-space-3); border-radius: var(--or-radius-field); font-size: 14px; line-height: 20px; }
.paginas-modulo a:hover { color: #fff; background: rgb(255 255 255 / 6%); }
.paginas-modulo a.activo { color: #fff; font-weight: 600; }
/* Endoso sobre tinta: gris claro, nunca azul. */
.barra .pie {
  margin-top: auto; padding: var(--or-space-6) var(--or-space-3) 0;
  color: var(--or-gray-200); font-size: 12px; line-height: 18px;
}
/* Con el logo de la empresa arriba, Ordenatto firma al pie: su logo y el endoso. */
.firma-ordenatto { margin-top: auto; padding: var(--or-space-6) var(--or-space-3) 0; }
.firma-ordenatto .logo { display: block; }
.barra .firma-ordenatto .pie { margin-top: var(--or-space-1); padding: 0; }

.area { min-width: 0; display: flex; flex-direction: column; }
.superior {
  background: var(--or-surface); border-bottom: 1px solid var(--or-border);
  min-height: 64px; padding: 0 var(--or-space-8);
  display: flex; align-items: center; gap: var(--or-space-4);
  position: sticky; top: 0; z-index: 5;
}
.boton-menu, .marca-movil, .velo, .interruptor-menu { display: none; }

/* La cuenta: empresa, iniciales y un desplegable sin JavaScript. */
.cuenta { margin-left: auto; position: relative; }
.cuenta summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--or-space-3);
  padding: 6px 6px 6px var(--or-space-3); border-radius: var(--or-radius-pill);
}
.cuenta summary::-webkit-details-marker { display: none; }
.cuenta summary:hover { background: var(--or-canvas); }
.empresa-activa { font-size: 14px; font-weight: 500; color: var(--or-ink); max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Azul profundo y no el primario: con blanco pequeño encima, el 700 pasa AA. */
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--or-blue-700); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}
.desplegable {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; z-index: 10;
  background: var(--or-surface); border: 1px solid var(--or-border);
  border-radius: var(--or-radius-card); box-shadow: var(--or-shadow-2); padding: var(--or-space-2);
}
.desplegable .quien { padding: var(--or-space-2) var(--or-space-3) var(--or-space-3); border-bottom: 1px solid var(--or-border); margin-bottom: var(--or-space-2); line-height: 20px; }
.desplegable .quien strong { display: block; font-weight: 600; font-size: 14px; }
.desplegable a, .desplegable button {
  display: block; width: 100%; text-align: left; padding: var(--or-space-2) var(--or-space-3);
  border-radius: var(--or-radius-field); font: 400 14px/20px var(--or-font-sans);
  color: var(--or-ink); background: none; border: 0; cursor: pointer;
}
.desplegable a:hover, .desplegable button:hover { background: var(--or-canvas); text-decoration: none; }
.desplegable form { margin: 0; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Centrado como el portal interno (Edwin, 30-09-2026): en pantallas anchas no se pega a la barra. */
.contenido { width: 100%; max-width: 1160px; margin: 0 auto; padding: var(--or-space-8); }

.titulo-pagina {
  font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 var(--or-space-2);
}
.subtitulo { color: var(--or-gray-600); margin: 0 0 var(--or-space-6); max-width: 72ch; }
h2 { font-size: 20px; line-height: 26px; font-weight: 600; margin: 0; }

.etiqueta-apartado {
  font-size: 13px; line-height: 16px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--or-gray-600);
}

/* Endoso fuera del armazón (pantallas de acceso). */
.pie { color: var(--or-gray-400); font-size: 13px; line-height: 21px; }

/* ---------- Pestañas, búsqueda y filtros ---------- */

.pestanas {
  display: flex; gap: var(--or-space-6); border-bottom: 1px solid var(--or-border);
  margin: var(--or-space-4) 0 var(--or-space-6); overflow-x: auto;
}
.pestanas a {
  padding: var(--or-space-3) 2px; margin-bottom: -1px; white-space: nowrap;
  color: var(--or-gray-600); font-size: 15px; font-weight: 500; border-bottom: 2px solid transparent;
}
.pestanas a:hover { color: var(--or-ink); text-decoration: none; }
.pestanas a.activo { color: var(--or-blue-700); border-bottom-color: var(--or-blue-500); }
.pestanas .cuenta-pestana { font-family: var(--or-font-mono); font-size: 13px; color: var(--or-gray-600); margin-left: 4px; }

.herramientas {
  display: flex; flex-wrap: wrap; gap: var(--or-space-3); align-items: flex-start;
  padding: var(--or-space-4) var(--or-space-6); border-bottom: 1px solid var(--or-border);
}
.herramientas .buscar { position: relative; flex: 1; min-width: 220px; margin: 0; }
.herramientas .buscar .icono { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; color: var(--or-gray-600); pointer-events: none; }
.herramientas .buscar input { padding-left: 40px; }
.filtros { position: relative; }
.filtros summary { list-style: none; }
.filtros summary::-webkit-details-marker { display: none; }
.filtros[open] summary { background: var(--or-canvas); }
.filtros .panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 4; width: 300px;
  background: var(--or-surface); border: 1px solid var(--or-border);
  border-radius: var(--or-radius-card); box-shadow: var(--or-shadow-2); padding: var(--or-space-4);
}
.filtros .panel .acciones { display: flex; gap: var(--or-space-2); }

/* ---------- Tarjetas ---------- */

.tarjeta {
  background: var(--or-surface); border: 1px solid var(--or-border);
  border-radius: var(--or-radius-card); box-shadow: var(--or-shadow-1);
}
/* Bloques fiscales separados al menos 24px, para que nada se lea de corrido. */
.tarjeta + .tarjeta, form + .tarjeta, .tarjeta + form, .rejilla + .tarjeta { margin-top: var(--or-space-6); }
.rejilla > .tarjeta { margin-top: 0; }
.tarjeta .cuerpo { padding: var(--or-space-6); }
.tarjeta .cabeza {
  padding: var(--or-space-4) var(--or-space-6); border-bottom: 1px solid var(--or-border);
  display: flex; align-items: center; gap: var(--or-space-3);
}
.tarjeta .cabeza .acciones { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--or-space-2); }

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--or-space-4) var(--or-space-6); }

/* ---------- Cifras ---------- */

.cifra {
  font-family: var(--or-font-mono); font-variant-numeric: tabular-nums;
  font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em;
}
.cifra.pequena { font-size: 20px; line-height: 26px; }
.etiqueta-cifra { color: var(--or-gray-600); font-size: 14px; line-height: 21px; margin-bottom: var(--or-space-1); }
.nota { color: var(--or-gray-600); font-size: 14px; line-height: 21px; }
.nota + .nota { margin-top: 2px; }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--or-space-2);
  font: 500 15px/1 var(--or-font-sans); cursor: pointer;
  padding: 10px 18px; border-radius: var(--or-radius-button);
  border: 1px solid var(--or-border); background: var(--or-surface); color: var(--or-ink);
  text-decoration: none;
}
.boton:hover { background: var(--or-canvas); text-decoration: none; }
.boton:focus-visible { outline: 0; box-shadow: var(--or-focus-ring); }
.boton.primario { background: var(--or-blue-500); border-color: var(--or-blue-500); color: #fff; }
.boton.primario:hover { background: var(--or-blue-700); border-color: var(--or-blue-700); }
.boton.peligro { color: var(--or-rejected); border-color: var(--or-border); }
.boton.peligro:hover { background: var(--or-rejected-bg); }
.boton.pequeno { padding: 7px 12px; font-size: 14px; }
/* Los formatos del PDF de un documento: una fila de botones que se parte en el móvil. */
.formatos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--or-space-2); margin-top: var(--or-space-4); }
.boton[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Formularios ---------- */

.campo { margin-bottom: var(--or-space-4); }
.campo label { display: block; font-weight: 500; font-size: 14px; line-height: 21px; margin-bottom: var(--or-space-1); }
.campo .ayuda { color: var(--or-gray-600); font-size: 14px; line-height: 21px; margin-top: var(--or-space-1); }

input[type="text"], input[type="email"], input[type="password"],
input[type="file"], input[type="number"], input[type="tel"], input[type="date"], input[type="search"], select {
  width: 100%; font: 400 15px/1.4 var(--or-font-sans); color: var(--or-ink);
  padding: 10px 12px; border: 1px solid var(--or-border); border-radius: var(--or-radius-field);
  background: var(--or-surface);
}
input::placeholder { color: var(--or-gray-600); opacity: 0.75; }
input:focus, select:focus { outline: 0; border-color: var(--or-blue-500); box-shadow: var(--or-focus-ring); }
/* Los campos que reciben datos fiscales —NIT, números de factura, montos— van en mono. */
input.fiscal { font-family: var(--or-font-mono); font-size: 15px; }
input.codigo {
  font-family: var(--or-font-mono); font-size: 24px; letter-spacing: 0.3em; text-align: center; padding: 12px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--or-blue-500); }

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

/* Texto en tinta sobre el fondo del estado: los colores de estado no pasan AA en
   texto pequeño, así que el color va en el borde y el texto se lee siempre. */
.aviso {
  padding: var(--or-space-3) var(--or-space-4); border-radius: var(--or-radius-card);
  font-size: 15px; line-height: 24px; color: var(--or-ink);
  border: 1px solid var(--or-border); border-left-width: 4px; margin-bottom: var(--or-space-6);
  background: var(--or-surface);
}
.aviso.error    { background: var(--or-rejected-bg); border-color: var(--or-rejected); }
.aviso.exito    { background: var(--or-accepted-bg); border-color: var(--or-accepted); }
.aviso.info     { background: var(--or-blue-50);     border-color: var(--or-blue-500); }
.aviso.atencion { background: var(--or-pending-bg);  border-color: var(--or-pending); }
.aviso strong { font-weight: 600; }
/* La fila que explica la de arriba: por qué la DIAN rechazó un evento (recibido.html). */
tr.detalle td { background: var(--or-rejected-bg); color: var(--or-ink); font-size: 13px; }
/* Un código largo sin espacios, como el CUFE: se parte en vez de desbordar. */
.corte { overflow-wrap: anywhere; }

/* ---------- Listas con búsqueda y páginas (documentos) ---------- */
.busqueda {
  display: flex; flex-wrap: wrap; gap: var(--or-space-2);
  padding: var(--or-space-3) var(--or-space-4); border-bottom: 1px solid var(--or-border);
}
.busqueda input[type="search"] { flex: 1 1 220px; min-width: 0; }
.paginacion {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--or-space-2);
  padding: var(--or-space-3) var(--or-space-4); border-top: 1px solid var(--or-border);
  font-size: 14px; color: var(--or-gray-600);
}
.migas { margin: 0 0 var(--or-space-2); font-size: 14px; color: var(--or-gray-600); }

/* ---------- El asistente de configuración ---------- */
.asistente-pasos {
  list-style: none; margin: 0 0 var(--or-space-6); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--or-space-2);
}
.asistente-pasos a {
  display: flex; align-items: center; gap: var(--or-space-2);
  padding: var(--or-space-2) var(--or-space-3); border: 1px solid var(--or-border);
  border-radius: 999px; font-size: 14px; color: var(--or-gray-600); text-decoration: none;
  background: var(--or-surface);
}
.asistente-pasos .numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--or-border);
  font-size: 12px; font-weight: 600;
}
.asistente-pasos li.hecho .numero {
  background: var(--or-accepted-bg); border-color: var(--or-accepted); color: var(--or-accepted);
}
.asistente-pasos li.actual a { border-color: var(--or-blue-500); color: var(--or-blue-700); font-weight: 600; }
.asistente-pasos li.actual .numero { background: var(--or-blue-500); border-color: var(--or-blue-500); color: #fff; }
.botones-asistente {
  display: flex; flex-wrap: wrap; gap: var(--or-space-2); margin-top: var(--or-space-4);
}
.opciones-asistente, .rejilla-doble {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--or-space-4);
}
.opcion-asistente {
  border: 1px solid var(--or-border); border-radius: 8px; padding: var(--or-space-4);
}
.opcion-asistente h3 { margin: 0 0 var(--or-space-2); font-size: 16px; }
.lista-simple { padding-left: var(--or-space-6); }
.lista-simple li { margin-bottom: var(--or-space-2); }
@media (max-width: 720px) {
  .opciones-asistente, .rejilla-doble { grid-template-columns: 1fr; }
}

/* ---------- Estados (siempre con texto) ---------- */

.indicador {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 10px; border-radius: var(--or-radius-pill);
  font: 500 13px/1.3 var(--or-font-sans);
  color: var(--or-gray-600); background: var(--or-canvas);
}
/* Sin punto: la etiqueta ya dice el estado con su texto. */
.indicador.verde { color: var(--or-accepted); background: var(--or-accepted-bg); }
.indicador.rojo  { color: var(--or-rejected); background: var(--or-rejected-bg); }
.indicador.ambar { color: var(--or-pending);  background: var(--or-pending-bg); }
.indicador.azul  { color: var(--or-blue-700); background: var(--or-blue-50); }

.etiqueta {
  display: inline-block; font: 500 13px/1.3 var(--or-font-sans); padding: 3px 10px;
  border-radius: var(--or-radius-pill); background: var(--or-canvas); color: var(--or-gray-600);
  border: 1px solid var(--or-border); white-space: nowrap;
}
.etiqueta.verde { background: var(--or-accepted-bg); color: var(--or-accepted); border-color: transparent; }
.etiqueta.azul { background: var(--or-blue-50); color: var(--or-blue-700); border-color: transparent; }

/* ---------- Tablas ---------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 21px; }
table th {
  text-align: left; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--or-gray-600);
  padding: var(--or-space-3) var(--or-space-6); border-bottom: 1px solid var(--or-border);
  background: var(--or-surface); white-space: nowrap;
}
table th.num { text-align: right; }
table td { padding: 14px var(--or-space-6); border-bottom: 1px solid var(--or-border); vertical-align: middle; }
table tr:last-child td { border-bottom: none; }
.tabla-desplazable { overflow-x: auto; }
.celda-cliente { max-width: 240px; }
table.compacta th, table.compacta td { padding-left: var(--or-space-4); padding-right: var(--or-space-4); }
table.compacta th:first-child, table.compacta td:first-child { padding-left: var(--or-space-6); }
table.compacta th:last-child, table.compacta td:last-child { padding-right: var(--or-space-6); }
.recortado { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.descargas { text-align: right; white-space: nowrap; font-size: 13px; font-weight: 500; }
td.descargas a + a { margin-left: var(--or-space-3); }

.vacio { padding: var(--or-space-12) var(--or-space-6); text-align: center; color: var(--or-gray-600); }
.vacio p { margin: 0 0 var(--or-space-4); }

/* Búsqueda y paginación de las listas del catálogo. */
.buscador { display: flex; flex-wrap: wrap; align-items: center; gap: var(--or-space-3); flex: 1; min-width: 0; }
.buscador input[type="text"] { max-width: 320px; padding: 8px 12px; }
.casilla {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
  color: var(--or-gray-600); white-space: nowrap;
}
.casilla input { width: auto; margin: 0; }
/* Una casilla con un texto largo, como la declaración de la aceptación tácita. */
.casilla.larga { white-space: normal; align-items: flex-start; color: var(--or-ink); }
.casilla.larga input { margin-top: 3px; }
.paginas { display: flex; align-items: center; gap: var(--or-space-2); border-top: 1px solid var(--or-border); }
.paginas .nota { margin: 0 auto 0 0; }

/* ---------- Pantalla de acceso ---------- */

.entrada {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--or-space-6);
}
.entrada .caja { width: 100%; max-width: 420px; }
/* Un formulario de una sola línea (el reenvío del correo): se parte en el móvil. */
.en-linea { display: flex; flex-wrap: wrap; align-items: center; gap: var(--or-space-2); }
.en-linea input { flex: 1 1 240px; }
/* La consulta pública, que enseña los datos de un documento. */
.entrada .caja.ancha { max-width: 640px; }
.entrada .logo { margin: 0 auto var(--or-space-4); }
.entrada .lema {
  text-align: center; color: var(--or-gray-600); margin: 0 0 var(--or-space-1); font-size: 16px;
}
.entrada .contexto {
  text-align: center; color: var(--or-gray-600); font-size: 14px; line-height: 21px;
  margin: 0 0 var(--or-space-6);
}
.entrada .pie { padding: var(--or-space-6) 0 0; text-align: center; }

/* ---------- QR, secreto y clave nueva ---------- */

.qr { display: block; margin: 0 auto var(--or-space-4); width: 210px; height: 210px; }
.secreto {
  font-family: var(--or-font-mono); font-size: 14px;
  background: var(--or-canvas); border: 1px solid var(--or-border); padding: 11px 14px;
  border-radius: var(--or-radius-field); word-break: break-all; text-align: center; letter-spacing: 0.05em;
}
/* Sobre tinta, el texto va en el azul aclarado. */
.clave-nueva {
  font-family: var(--or-font-mono); font-size: 14px;
  background: var(--or-ink); color: var(--or-blue-on-dark); padding: 14px 16px;
  border-radius: var(--or-radius-field); word-break: break-all; margin: var(--or-space-3) 0;
}

/* ---------- Facturar ---------- */

/* Las líneas de la factura: una tabla de campos que en el móvil se desplaza en
   horizontal en vez de apretarse hasta no leerse. */
.lineas-factura { overflow-x: auto; }
.lineas-factura table { min-width: 800px; }
.lineas-factura td { padding: var(--or-space-2) 6px; }
.lineas-factura td:first-child { padding-left: var(--or-space-6); }
.lineas-factura input, .lineas-factura select { padding: 8px 10px; font-size: 14px; }
.lineas-factura input.num { font-family: var(--or-font-mono); }
.totales-factura { margin-left: auto; max-width: 380px; }
.totales-factura td { padding: var(--or-space-2) var(--or-space-6); }
.totales-factura td:last-child {
  text-align: right; font-family: var(--or-font-mono); font-variant-numeric: tabular-nums;
}
.totales-factura tr.total td {
  font-size: 20px; line-height: 26px; font-weight: 600; border-top: 2px solid var(--or-border);
}
/* La vista previa del logo, sobre blanco como en la factura. */
.muestra-logo {
  display: inline-flex; align-items: center; padding: var(--or-space-4) var(--or-space-6);
  background: var(--or-surface); border: 1px solid var(--or-border); border-radius: var(--or-radius-card);
}
.muestra-logo img { display: block; max-width: 100%; max-height: 96px; }
/* El de fondo oscuro se muestra sobre la tinta de la barra, donde va a salir. */
.muestra-logo.oscura { background: var(--or-ink); border-color: var(--or-ink); }
.logos { display: flex; flex-wrap: wrap; gap: var(--or-space-6); }
/* La configuración inicial por partes: una tarjeta por configuración (30-09-2026). */
.configuraciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--or-space-4); }
.configuraciones .configuracion { margin: 0; display: flex; flex-direction: column; }
.configuraciones .configuracion .cuerpo { display: flex; flex-direction: column; gap: var(--or-space-2); flex: 1; }
.configuraciones .configuracion .boton { align-self: flex-start; margin-top: auto; }
.logos figure { margin: 0; }
.logos figcaption { margin-top: var(--or-space-2); }
.numero-grande {
  font-family: var(--or-font-mono); font-size: 28px; line-height: 34px;
  letter-spacing: 0.02em; font-weight: 600;
}

/* ---------- Utilidades de las pantallas de cuenta ---------- */

.boton.ancho { width: 100%; }
.centrado { text-align: center; margin-top: var(--or-space-4); }
.primero { margin-top: 0; }
.separado { margin-bottom: var(--or-space-6); }
.separado-arriba { margin-top: var(--or-space-6); }
/* Lo que se despliega dentro de una tarjeta: el servidor de correo propio. */
.cuerpo details > summary { cursor: pointer; font-weight: 600; }
.sin-corte { white-space: nowrap; }
.seccion-formulario {
  font-size: 15px; font-weight: 600; margin: var(--or-space-6) 0 var(--or-space-3);
  padding-top: var(--or-space-4); border-top: 1px solid var(--or-border);
}
.seccion-formulario .nota { font-weight: 400; margin-left: var(--or-space-2); }
.formulario-estrecho { max-width: 480px; }

/* Una casilla con error, en rojo: la que señaló el motor. */
.campo.invalido input, .campo.invalido select { border-color: var(--or-rejected); background: var(--or-rejected-bg); }
.campo.invalido label { color: var(--or-rejected); }
.datos { display: grid; grid-template-columns: 180px 1fr; gap: var(--or-space-2) var(--or-space-4); margin: 0 0 var(--or-space-4); }
.datos dt { font-size: 14px; color: var(--or-gray-600); }
.datos dd { margin: 0; }
td.num form { margin: 0; }

.pasos-habilitacion { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--or-space-3); }
.pasos-habilitacion li { display: flex; align-items: flex-start; gap: var(--or-space-3); }
.pasos-habilitacion li .indicador { min-width: 92px; justify-content: center; }

@media (max-width: 900px) {
  /* En el móvil la barra lateral se esconde y se abre con el botón de menú. */
  .app { display: block; }
  .barra {
    position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 30; height: auto;
    transform: translateX(-100%); transition: transform 0.2s ease;
  }
  .interruptor-menu:checked ~ .app .barra { transform: none; box-shadow: var(--or-shadow-3); }
  .interruptor-menu:checked ~ .app .velo {
    display: block; position: fixed; inset: 0; z-index: 20; background: rgb(31 39 46 / 40%);
  }
  .boton-menu {
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    width: 40px; height: 40px; border-radius: var(--or-radius-button); color: var(--or-ink);
  }
  .boton-menu:hover { background: var(--or-canvas); }
  .marca-movil { display: block; }
  .marca-movil img { display: block; max-height: 32px; max-width: 150px; }
  .superior { padding: 0 var(--or-space-4); gap: var(--or-space-2); }
  .empresa-activa { display: none; }
  .contenido { padding: var(--or-space-6) var(--or-space-4); }
  .tarjeta .cabeza { flex-wrap: wrap; padding: var(--or-space-3) var(--or-space-4); }
  .tarjeta .cuerpo { padding: var(--or-space-4); }
  .herramientas { padding: var(--or-space-3) var(--or-space-4); }
  .buscador input[type="text"] { max-width: none; }
  table th, table td { padding: var(--or-space-3) var(--or-space-4); }
  .datos { grid-template-columns: 1fr; gap: 2px; }
  .datos dd { margin-bottom: var(--or-space-2); }
}

/* ---------- Ventanas de los formularios (templates/_ventana.html) ---------- */

.ventana {
  border: 0; padding: 0; margin: auto; color: var(--or-ink); background: var(--or-surface);
  border-radius: var(--or-radius-card); box-shadow: var(--or-shadow-3);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
}
.ventana.ancha { width: min(820px, calc(100vw - 32px)); }
.ventana::backdrop { background: rgb(31 39 46 / 45%); }
/* La que vuelve con un error: encima de la página aunque no haya JavaScript. */
.ventana.abierta {
  display: block; position: fixed; inset: 0; height: fit-content; z-index: 50;
  outline: 100vmax solid rgb(31 39 46 / 45%);
}
.ventana-cabeza {
  display: flex; align-items: center; gap: var(--or-space-3);
  padding: var(--or-space-4) var(--or-space-6); border-bottom: 1px solid var(--or-border);
}
.ventana-cabeza h2 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; }
.ventana-cerrar {
  margin-left: auto; border: 0; background: none; cursor: pointer; font-size: 24px; line-height: 1;
  color: var(--or-gray-600); padding: 4px 8px; border-radius: var(--or-radius-button);
}
.ventana-cerrar:hover { background: var(--or-canvas); }
.ventana-cuerpo { padding: var(--or-space-6); }
.ventana-cuerpo .rejilla { grid-template-columns: 1fr; }
.ventana.ancha .ventana-cuerpo .rejilla { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ventana-pie {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--or-space-2);
  margin-top: var(--or-space-6);
}
/* El título de una pantalla con sus acciones arriba a la derecha: crear, registrar, configurar. */
.cabecera-pagina { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--or-space-3) var(--or-space-6); }
.cabecera-pagina > div:first-child { flex: 1 1 360px; }
.cabecera-pagina .acciones { display: flex; flex-wrap: wrap; gap: var(--or-space-2); }
/* Lo que sigue al formulario dentro de una ventana (p. ej. «Dejar de usar su correo»): aparte. */
.ventana-cuerpo form + form { border-top: 1px solid var(--or-border); padding-top: var(--or-space-4); }
/* Los filtros de la lista de documentos, en su panel; un error del filtro, dentro de la tarjeta. */
.filtros .panel .campo { margin-bottom: var(--or-space-3); }
.aviso.en-tarjeta { margin: var(--or-space-4); }
.herramientas .buscar input[type="search"] { padding-left: 48px; }