/* ════════════════════════════════════════════════════════════════════
   Ajustes → «Contratos y formatos» (E5, 4-nov). La lógica en
   `legal-contratos.js`; el diseño en `docs/aud/mockups/legal-contratos/`.

   La composición es la de la maqueta aprobada; los valores son los de 08:
   sólo tokens de `orvik-tokens.css`, letra 13 / 15 / 17 / 24 y 30 el
   título de la consola (la maqueta traía 11, 12 y 14), radios 8
   (insignia), 12 (control) y 20 (tarjeta), y 44 de toque.
   ════════════════════════════════════════════════════════════════════ */

.lg { display:grid; gap:var(--hueco-tarjetas); color:var(--texto); min-width:0; }
.lg-top { display:grid; gap:var(--e-2); }
#main .lg-top h2 { margin:0; font:var(--t-pantalla); color:var(--texto); }
.lg-top p { margin:0; font:400 var(--letra-15, 15px)/22px var(--fuente); color:var(--texto-2); }

.lg-aviso { display:flex; gap:var(--e-3); align-items:flex-start; padding:var(--e-4); border-radius:var(--r-tarjeta);
  background:var(--aviso-suave); color:var(--texto); border:1px solid var(--linea); font:400 var(--letra-15, 15px)/22px var(--fuente); }
.lg-aviso b { display:block; font-weight:600; }
.lg-aviso .ti { font-size:var(--letra-17, 17px); line-height:22px; color:var(--aviso-texto); }

.lg-cols { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:var(--hueco-tarjetas); align-items:start; }
@media (max-width:900px) { .lg-cols { grid-template-columns:minmax(0, 1fr); } }
.lg-card { background:var(--superficie); border:1px solid var(--linea); border-radius:var(--r-tarjeta); padding:var(--e-5);
  display:grid; gap:var(--e-3); min-width:0; align-content:start; }
#main .lg-card h3 { margin:0; font:600 var(--letra-17, 17px)/22px var(--fuente); color:var(--texto); }
.lg-card p { margin:0; }
.lg-n { font:400 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto-3); }

/* Todos · En revisión · Aprobados: un control, 44 de alto (08 §5). */
.lg-seg { display:inline-flex; justify-self:start; gap:var(--e-1); padding:var(--e-1); border-radius:var(--r-control); background:var(--control); }
#main .lg-seg button { min-height:var(--toque); padding:0 var(--e-4); border:0; border-radius:var(--r-control); background:transparent; cursor:pointer;
  font:500 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto-2); }
#main .lg-seg button[aria-selected="true"] { background:var(--superficie-2); color:var(--texto); font-weight:600; }

.lg-sec { margin:var(--e-3) 0 0; font:600 var(--letra-13, 13px)/16px var(--fuente); letter-spacing:.06em; text-transform:uppercase; color:var(--texto-3); }
.lg-lista { list-style:none; margin:0; padding:0; display:grid; }
#main .lg-fila { display:grid; grid-template-columns:96px minmax(0, 1fr) auto; gap:var(--e-3); align-items:center; width:100%; min-height:64px;
  padding:var(--e-2) var(--e-3); border:0; border-top:1px solid var(--linea); border-radius:var(--r-control); background:none; color:inherit;
  text-align:left; cursor:pointer; }
#main .lg-fila[aria-current="true"] { background:var(--superficie-2); border-top-color:transparent; }
#main .lg-fila:focus-visible, #main .lg-seg button:focus-visible, #main .lg-doc:focus-visible { outline:2px solid var(--foco); outline-offset:2px; }
.lg-cl { font:600 var(--letra-13, 13px)/18px var(--fuente-mono); color:var(--texto-2); overflow-wrap:anywhere; }
.lg-nm { min-width:0; }
.lg-nm b { display:block; font:var(--t-cuerpo-f); color:var(--texto); }
.lg-nm small { display:block; margin-top:2px; font:400 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:600px) { #main .lg-fila { grid-template-columns:minmax(0, 1fr) auto; } .lg-cl { grid-column:1 / -1; } }

/* Los estados: insignias, no botones (radio 8). */
.lg-est { font:600 var(--letra-13, 13px)/18px var(--fuente); padding:var(--e-1) var(--e-2); border-radius:var(--r-chico); white-space:nowrap; justify-self:end; }
.lg-warn { background:var(--aviso-suave); color:var(--aviso-texto); }
.lg-ok   { background:var(--exito-suave); color:var(--exito-texto); }

/* El texto del paquete, con lo variable resaltado. */
.lg-doc { max-height:430px; overflow:auto; background:var(--fondo); border:1px solid var(--linea); border-radius:var(--r-control);
  padding:var(--e-5) var(--e-6); font:400 var(--letra-15, 15px)/24px var(--fuente); color:var(--texto-2); }
@media (max-width:600px) { .lg-doc { padding:var(--e-4); } }
.lg-doc .lg-c { margin:var(--e-3) 0; text-align:center; font:600 var(--letra-15, 15px)/22px var(--fuente); color:var(--texto); }
.lg-doc p { margin:0 0 var(--e-3); }
.lg-doc p.lg-b { color:var(--texto); font-weight:600; }
.lg-var { background:var(--marca-suave); color:var(--marca-principal-texto); border-radius:var(--r-chico); padding:0 var(--e-1); }

.lg-meta { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:var(--e-2) var(--e-4); margin:var(--e-2) 0 0;
  font:400 var(--letra-13, 13px)/18px var(--fuente); }
.lg-meta dt { color:var(--texto-3); }
.lg-meta dd { margin:0; color:var(--texto); overflow-wrap:anywhere; }
/* Los botones del panel (.btn el principal, .btn.ghost el otro) con la letra del 08: el .btn.ghost
   de la consola trae 14 (pedido a E3), igual que en Facturación (.cf2-btn). */
.lg-btn, #main .lg-btn, #modal-root .lg-btn { width:auto; min-height:var(--toque); padding:0 var(--e-4); border-radius:var(--r-control);
  font:500 var(--letra-15, 15px)/20px var(--fuente); }
/* Mismo peso que `#app .btn.ghost` (consola-orvik.css, 14) y después: manda esta. */
#main .lg-btn.ghost, #modal-root .lg-btn.ghost { color:var(--texto); font-size:var(--letra-15, 15px); line-height:20px; padding:0 var(--e-4); }
.lg-btns { display:flex; flex-wrap:wrap; gap:var(--e-3); justify-content:flex-end; }
.lg-msg { font:600 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto); }
.lg-nota { font:400 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto-3); }