/* Estilo «Moderno» de FacturaGesTOTAL (el mismo de FacturaGesRRHH): tarjetas redondeadas con sombra suave,
   acento índigo y más aire. Va detrás de estilo.css y solo cambia el aspecto, no la estructura de las pantallas.
   Modo oscuro: <html data-tema="oscuro">, que elige cada usuario con el botón 🌙 (se guarda en su cuenta). */

/* Letra Inter (SIL Open Font License 1.1, /fonts/Inter-LICENSE.txt), alojada en este servidor: sin llamadas a terceros */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/inter-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: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/inter-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root { --m-acento: #4f46e5; --m-acento-osc: #4338ca; --m-acento-suave: #eef2ff; --m-acento-borde: #c7d2fe; --m-fondo: #f5f7fb; --m-panel: #ffffff; --m-tinta: #111827; --m-gris: #6b7280; --m-linea: #e5e7eb; --m-linea-suave: #f1f2f6; --m-sombra: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05); --m-letra: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; }
html[data-tema="oscuro"] { --m-acento: #6366f1; --m-acento-osc: #818cf8; --m-acento-suave: #262b52; --m-acento-borde: #3b4280;
  --m-fondo: #0e1020; --m-panel: #171a2e; --m-tinta: #e5e7eb; --m-gris: #9ca3af; --m-linea: #2c3150; --m-linea-suave: #20243a;
  --m-sombra: 0 1px 2px rgba(0,0,0,.35); color-scheme: dark; }

/* ---------------------------------------------------------------- gestión (body.fg) */
body.fg { --bg: var(--m-fondo); --ink: var(--m-tinta); --muted: var(--m-gris); --line: var(--m-linea); --teal: var(--m-acento); --navy: var(--m-tinta); font-family: var(--m-letra) !important; background: var(--m-fondo) !important; color: var(--m-tinta) !important; font-size: 13.5px !important; }
body.fg .fg-sidebar { background: var(--m-panel) !important; border-right: 0 !important; box-shadow: 1px 0 0 var(--m-linea-suave) !important; }
body.fg .sb-icono { border-radius: 12px !important; margin: 4px 6px !important; }
body.fg .sb-grupo.activo .sb-icono, body.fg .sb-grupo:hover .sb-icono { background: var(--m-acento-suave) !important; }
body.fg .sb-sub, body.fg .mb-sub { background: var(--m-panel) !important; border: 1px solid var(--m-linea) !important; border-radius: 12px !important; box-shadow: 0 12px 32px rgba(16,24,40,.14) !important; padding: 6px !important; }
body.fg .sb-titulo { background: transparent !important; color: var(--m-gris) !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin: 0 0 4px !important; }
body.fg .sb-sub a, body.fg .mb-sub a { border-radius: 8px !important; color: var(--m-tinta) !important; }
body.fg .sb-sub a:hover, body.fg .mb-sub a:hover, body.fg .sb-sub a.activo, body.fg .mb-sub a.activo { background: var(--m-acento-suave) !important; color: var(--m-acento-osc) !important; }
body.fg .fg-menubar { height: 44px !important; background: var(--m-panel) !important; border-bottom: 1px solid var(--m-linea-suave) !important; }
body.fg .mb-grupo > span { font-weight: 500 !important; color: var(--m-gris) !important; padding: 0 14px !important; font-size: 13px !important; }
body.fg .mb-grupo:hover > span { background: transparent !important; color: var(--m-tinta) !important; }
body.fg .mb-grupo.activo > span { color: var(--m-acento) !important; box-shadow: inset 0 -2px 0 var(--m-acento) !important; }
body.fg .mb-version, body.fg .mb-version b { color: var(--m-gris) !important; }
body.fg .mb-salir button { background: var(--m-acento) !important; color: #fff !important; border-radius: 8px !important; padding: 5px 12px !important; }
body.fg .fg-header { background: transparent !important; border: 0 !important; padding: 22px 28px 6px !important; }
body.fg .fg-titulo { font-size: 26px !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: var(--m-tinta) !important; }
body.fg .fg-subtitulo { color: var(--m-gris) !important; }
body.fg .fg-contenido { padding: 14px 28px !important; }
body.fg .rh-op-kpi, body.fg .rh-op-tarjeta, body.fg .rh-op-seccion, body.fg .rh-lista, body.fg .rh-ficha, body.fg .rh-barra,
body.fg .rh-op-seleccion, body.fg fieldset, body.fg .card, body.fg .seccion, body.fg .fg-tabla { background: var(--m-panel) !important; border: 1px solid var(--m-linea-suave) !important; border-radius: 14px !important; box-shadow: var(--m-sombra) !important; color: var(--m-tinta) !important; }
body.fg .rh-op-kpi { padding: 18px 20px !important; }
body.fg .rh-lista { overflow: hidden !important; }
body.fg table { background: transparent !important; }
body.fg th { background: var(--m-panel) !important; color: var(--m-gris) !important; font-weight: 600 !important; text-transform: uppercase !important; font-size: 11px !important; letter-spacing: .04em !important; border-bottom: 1px solid var(--m-linea) !important; }
body.fg td { border-bottom: 1px solid var(--m-linea-suave) !important; color: var(--m-tinta) !important; }
body.fg tbody tr:hover td { background: var(--m-acento-suave) !important; }
body.fg tr.sel td, body.fg tbody tr.sel { background: var(--m-acento-suave) !important; }
body.fg input, body.fg select, body.fg textarea { background: var(--m-panel) !important; color: var(--m-tinta) !important; border: 1px solid var(--m-linea) !important; border-radius: 8px !important; padding: 7px 10px !important; }
body.fg input:focus, body.fg select:focus, body.fg textarea:focus { outline: 3px solid var(--m-acento-suave) !important; border-color: var(--m-acento) !important; }
body.fg button:where(:not([style*="background"]):not(.vt-art):not(.tb):not(.vera *)) { background: var(--m-acento) !important; color: #fff !important; border: 0 !important; border-radius: 8px !important; font-weight: 600 !important; }
body.fg button:where(:not([style*="background"]):not(.vt-art):not(.tb):not(.vera *)):hover { background: var(--m-acento-osc) !important; }
body.fg button.secundario { background: var(--m-panel) !important; color: var(--m-tinta) !important; border: 1px solid var(--m-linea) !important; }
body.fg button.secundario:hover { background: var(--m-acento-suave) !important; }
body.fg legend { font-weight: 700 !important; color: var(--m-tinta) !important; padding: 0 6px !important; }
body.fg label { color: var(--m-gris) !important; }
body.fg .rh-paso { background: var(--m-panel) !important; border: 1px solid var(--m-linea) !important; border-radius: 999px !important; padding: 6px 14px !important; color: var(--m-tinta) !important; }
body.fg .rh-paso.hecho { background: var(--m-acento-suave) !important; border-color: var(--m-acento-borde) !important; color: var(--m-acento-osc) !important; }
body.fg .fg-nota, body.fg .rh-op-nota { color: var(--m-gris) !important; }
body.fg a { color: var(--m-acento) !important; }

/* ---------------------------------------------------------------- portal del empleado y páginas de entrada (body.portal) */
body.portal { font-family: var(--m-letra) !important; background: var(--m-fondo) !important; color: var(--m-tinta) !important; }
body.portal .pt-cab { background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; color: #fff !important; }
body.portal .pt-cab .pt-empresa { opacity: .85 !important; }
body.portal .pt-herramientas button { background: rgba(255,255,255,.18) !important; border: 0 !important; color: #fff !important; border-radius: 10px !important; }
body.portal .pt-cab form button { background: rgba(255,255,255,.18) !important; border-radius: 10px !important; }
body.portal .pt-demo-volver { color: #fff !important; }
body.portal .pt-nav { background: var(--m-panel) !important; box-shadow: 0 1px 0 var(--m-linea-suave) !important; padding: 0 8px !important; }
body.portal .pt-nav a { border-radius: 999px !important; margin: 8px 2px !important; padding: 6px 12px !important; border: 0 !important; color: var(--m-gris) !important; }
body.portal .pt-nav a.activo { background: var(--m-acento-suave) !important; color: var(--m-acento-osc) !important; font-weight: 600 !important; box-shadow: none !important; }
body.portal .pt-reloj { background: linear-gradient(160deg, #1e1b4b, #312e81) !important; border-radius: 20px !important; box-shadow: 0 10px 30px rgba(49,46,129,.35) !important; }
body.portal .pt-estado { color: #a5b4fc !important; letter-spacing: .2em !important; }
body.portal .pt-botones button { border-radius: 14px !important; font-weight: 600 !important; }
body.portal .pt-botones button:not(.parar) { background: #6366f1 !important; }
body.portal .pt-botones button.parar { background: #ef4444 !important; }
body.portal .pt-kpi, body.portal .pt-panel, body.portal .pt-caja, body.portal .pt-anuncio, body.portal .pt-login { background: var(--m-panel) !important; border: 1px solid var(--m-linea-suave) !important; border-radius: 16px !important; box-shadow: var(--m-sombra) !important; color: var(--m-tinta) !important; }
body.portal .pt-kpi .valor { color: var(--m-tinta) !important; font-weight: 700 !important; }
body.portal .pt-kpi .valor.rojo, body.portal .rojo { color: #dc2626 !important; }
body.portal .pt-panel h2, body.portal .pt-caja h2, body.portal .pt-sec h2, body.portal .pt-sec h3 { background: transparent !important; color: var(--m-tinta) !important; font-weight: 700 !important; border: 0 !important; }
body.portal th { background: var(--m-panel) !important; color: var(--m-gris) !important; text-transform: uppercase !important; font-size: 11px !important; border-color: var(--m-linea) !important; }
body.portal td { border-color: var(--m-linea-suave) !important; color: var(--m-tinta) !important; }
body.portal input, body.portal select, body.portal textarea { border-radius: 10px !important; border: 1px solid var(--m-linea) !important; background: var(--m-panel) !important; color: var(--m-tinta) !important; }
body.portal button { border-radius: 10px !important; background: var(--m-acento) !important; }
body.portal button.secundario { background: var(--m-panel) !important; color: var(--m-tinta) !important; border: 1px solid var(--m-linea) !important; }
body.portal .pt-login h1 { color: var(--m-tinta) !important; }

/* ---------------------------------------------------------------- modo oscuro: lo que no sale solo de las variables */
html[data-tema="oscuro"] body.fg .sb-icono { filter: brightness(1.1) !important; }
html[data-tema="oscuro"] body.fg .rh-op-kpi, html[data-tema="oscuro"] body.fg .rh-op-kpi * { color: var(--m-tinta) !important; }
html[data-tema="oscuro"] body.fg .rh-op-kpi .rojo { color: #f87171 !important; }
html[data-tema="oscuro"] body.fg .rh-op-pie, html[data-tema="oscuro"] body.fg .rh-op-pie *,
html[data-tema="oscuro"] body.fg .rh-op-kpis, html[data-tema="oscuro"] body.fg .rh-op-cabecera { background: transparent !important; color: var(--m-tinta) !important; }
html[data-tema="oscuro"] body.fg .rh-op-seccion h2, html[data-tema="oscuro"] body.fg .rh-op-subtitulo { color: #a5b4fc !important; background: transparent !important; }
html[data-tema="oscuro"] body.fg .fg-demo { background: #3b2f0b !important; color: #fde68a !important; border-color: #5b4a12 !important; }
html[data-tema="oscuro"] body.portal .pt-reloj { background: linear-gradient(160deg, #111427, #1e1b4b) !important; }
html[data-tema="oscuro"] body.portal .pt-cab { background: linear-gradient(135deg, #312e81, #4c1d95) !important; }
html[data-tema="oscuro"] ::-webkit-scrollbar { background: #14172a !important; }
html[data-tema="oscuro"] ::-webkit-scrollbar-thumb { background: #2c3150 !important; border-radius: 8px !important; }

/* «Vista previa · imprimir · exportar» de cada tabla: enlace discreto, no botón */
body.fg .rh-lst-boton, body.portal .rh-lst-boton { background: transparent !important; color: var(--m-acento) !important; border: 0 !important;
  font-weight: 500 !important; padding: 2px 4px !important; box-shadow: none !important; }
body.fg .rh-lst-boton:hover, body.portal .rh-lst-boton:hover { text-decoration: underline !important; background: transparent !important; }

/* ================================================================ FacturaGesTOTAL: pantallas propias */
body.fg { --panel: var(--m-panel); --teal-claro: #818cf8; --teal-oscuro: var(--m-acento-osc); }
body.fg .kpi, body.fg .fg-kpi, body.fg .panel-graf, body.fg .fg-dialogo, body.fg .fg-barra-corp, body.fg .md-barra,
body.fg .md-caja, body.fg .login-wrap { background: var(--m-panel) !important; border: 1px solid var(--m-linea-suave) !important;
  border-radius: 14px !important; box-shadow: var(--m-sombra) !important; color: var(--m-tinta) !important; }
body.fg .md-caja { border-radius: 12px !important; }
body.fg .seccion > h2, body.fg .fg-dialogo-cabecera { background: transparent !important; color: var(--m-tinta) !important; border-bottom: 1px solid var(--m-linea-suave) !important; }
body.fg .fg-dialogo { overflow: hidden !important; }
body.fg .fg-dialogo-botones { background: var(--m-panel) !important; }
body.fg .kpi .valor, body.fg .fg-kpi .valor { color: var(--m-tinta) !important; font-weight: 700 !important; }
body.fg .kpi .valor.rojo, body.fg .fg-kpi .valor.rojo { color: #dc2626 !important; }
body.fg .kpi .icono { color: var(--m-acento) !important; }
body.fg .gr3d .barra3d .cara { background: #6366f1 !important; } body.fg .gr3d .barra3d .lado { background: #4338ca !important; } body.fg .gr3d .barra3d .tapa { background: #a5b4fc !important; }
body.fg .gr3d.navy .barra3d .cara { background: #312e81 !important; } body.fg .gr3d.navy .barra3d .lado { background: #1e1b4b !important; } body.fg .gr3d.navy .barra3d .tapa { background: #4f46e5 !important; }
body.fg .gr3d .valor3d, body.fg .gr3d .etiqueta3d { color: var(--m-gris) !important; }
body.fg .gr3d-suelo { background: var(--m-linea) !important; }
body.fg .fg-pestanas { border-bottom: 1px solid var(--m-linea) !important; gap: 4px !important; }
body.fg .fg-pestanas a { background: transparent !important; border: 0 !important; border-radius: 8px 8px 0 0 !important; color: var(--m-gris) !important; }
body.fg .fg-pestanas a.activa { color: var(--m-acento) !important; box-shadow: inset 0 -2px 0 var(--m-acento) !important; background: transparent !important; }
/* botones: grises; índigo solo la acción principal (como el escritorio) */
body.fg button.secundario, body.fg .md .md-b, body.fg .md-b { background: var(--m-panel) !important; color: var(--m-tinta) !important;
  border: 1px solid var(--m-linea) !important; border-radius: 8px !important; box-shadow: none !important; font-weight: 500 !important; }
body.fg button.secundario:hover, body.fg .md .md-b:hover:not(:disabled), body.fg .md-b:hover:not(:disabled) { background: var(--m-acento-suave) !important; }
body.fg .md .md-b.prim, body.fg .md-b.prim { background: var(--m-acento) !important; color: #fff !important; border-color: var(--m-acento) !important; }
body.fg .md .md-b.prim:hover:not(:disabled) { background: var(--m-acento-osc) !important; }
body.fg .md .md-b:disabled { color: var(--m-gris) !important; opacity: .6 !important; }
body.fg button.peligro { background: var(--m-panel) !important; color: #dc2626 !important; border: 1px solid #fecaca !important; }
body.fg button.fg-quitar { background: none !important; color: #dc2626 !important; border: 0 !important; }
body.fg button.fg-ayuda-btn, body.fg button.fg-tema-btn { background: var(--m-acento-suave) !important; color: var(--m-acento-osc) !important; border: 0 !important; border-radius: 8px !important; }
body.fg button.fg-ayuda-btn:hover, body.fg button.fg-tema-btn:hover { background: var(--m-acento) !important; color: #fff !important; }
/* pantallas calcadas del escritorio (.md): campos compactos como allí, pero con esquinas y línea fina */
body.fg .md { font-family: var(--m-letra) !important; color: var(--m-tinta) !important; }
body.fg .md input, body.fg .md select, body.fg .md textarea { padding: 1px 5px !important; border-radius: 6px !important; }
body.fg .md-editor { border-radius: 4px !important; outline: 0 !important; border: 1px solid var(--m-acento) !important; }
body.fg .md-botonera { background: transparent !important; }
body.fg .md-c, body.fg .md-c > span { color: var(--m-gris) !important; }
body.fg .md-tv th { background: var(--m-panel) !important; }
body.fg .md-caja:focus .md-tv tbody tr.sel, body.fg .md-tv tbody tr.sel { background: var(--m-acento-suave) !important; }
body.fg .md-tv tr.pendiente td { color: #dc2626 !important; }
body.fg .md-tv tr.grupo td { background: var(--m-linea-suave) !important; }
body.fg .md-ventana { background: var(--m-panel) !important; color: var(--m-tinta) !important; border-radius: 14px !important; overflow: hidden; }
body.fg .badge.ok { background: #dcfce7 !important; color: #166534 !important; }
/* entrada (login) */
body .login-wrap { border-radius: 16px !important; box-shadow: var(--m-sombra) !important; }
html[data-tema="oscuro"] body.fg .md input:disabled, html[data-tema="oscuro"] body.fg input[readonly] { background: var(--m-linea-suave) !important; }
html[data-tema="oscuro"] body.fg .gr3d-suelo { background: var(--m-linea) !important; }
html[data-tema="oscuro"] body.fg .badge.ok { background: #14532d !important; color: #bbf7d0 !important; }
html[data-tema="oscuro"] body.fg img.sb-img, html[data-tema="oscuro"] body.fg .fg-logo-vista { filter: brightness(1.05); }

/* ---------------------------------------------------------------- FacturaGesTOTAL: colores fijos de las pantallas calcadas */
body.fg .card > h2 { background: transparent !important; color: var(--m-tinta) !important; border-bottom: 1px solid var(--m-linea-suave) !important; }

/* textos en teal o azul marino del diseño clásico → índigo (no los que usan ese color de FONDO: botones del TPV, cabeceras...) */
body.fg [style*="#1f8a7a"]:not([style*="background:#1f8a7a"]):not([style*="background: #1f8a7a"]):not([style*="background-color:#1f8a7a"]), body.fg [style*="#16324f"]:not([style*="background:#16324f"]):not([style*="background: #16324f"]):not([style*="background-color:#16324f"]) { color: var(--m-acento) !important; }
/* ventana de ayuda: cabecera índigo oscuro con el título en blanco */
body.fg #fg-ayuda [data-cab] { background: #312e81 !important; color: #fff !important; }
body.fg #fg-ayuda [data-cab] span { color: #fff !important; }
body.fg #fg-ayuda { border-color: #312e81 !important; border-radius: 12px !important; }
body.fg .kpi .valor[style], body.fg .fg-kpi .valor[style] { color: var(--m-tinta) !important; }
body.fg .kpi .valor.rojo[style], body.fg .valor[style*="#c0392b"] { color: #dc2626 !important; }
body.fg .md-ro { border-radius: 6px !important; border-color: var(--m-linea) !important; background: var(--m-linea-suave) !important; color: var(--m-tinta) !important; }
body.fg .md-gen, body.fg .md-cond, body.fg .md-bloque, body.fg .md-tv, body.fg table.md-tv, body.fg .md-tv th { background: var(--m-panel) !important; color: var(--m-tinta) !important; }
body.fg .md-gen, body.fg .md-cond { border-top-color: var(--m-fondo) !important; }
body.fg .md-bloque { border-color: var(--m-linea) !important; border-radius: 10px !important; }
body.fg .md-desglose th { background: transparent !important; color: var(--m-gris) !important; }
body.fg .md-desglose td { border: 1px solid var(--m-linea) !important; border-radius: 6px !important; background: var(--m-panel) !important; color: var(--m-tinta) !important; }
body.fg .md-total, body.fg .md-total-lbl, body.fg .md-titulo-v, body.fg .md-bloque legend, body.fg .md-verifactu, body.fg .md .md-enlace { color: var(--m-acento-osc) !important; }
body.fg .md-lupa.md-mas, body.fg .md-fenl { color: var(--m-acento) !important; }
body.fg .md-v-cab { background: var(--m-panel) !important; color: var(--m-tinta) !important; border-bottom: 1px solid var(--m-linea) !important; }
body.fg .md-tv tr.total td { background: var(--m-linea-suave) !important; }
body.fg .md-tv tr.foco td:first-child { box-shadow: inset 2px 0 0 var(--m-acento) !important; }
body.fg .md input.md-campo.editando, body.fg .md-fc textarea.md-campo.editando { background: var(--m-panel) !important; }
html[data-tema="oscuro"] body.fg .md input.md-campo:not(.editando), html[data-tema="oscuro"] body.fg .md select { background: #1b1f36 !important; }
html[data-tema="oscuro"] body.fg .md input:disabled { background: #14172a !important; color: var(--m-gris) !important; }
html[data-tema="oscuro"] body.fg .md-tv tr.grupo td, html[data-tema="oscuro"] body.fg .md-tv tr.texto td { color: var(--m-gris) !important; }
html[data-tema="oscuro"] body.fg input[type=checkbox], html[data-tema="oscuro"] body.fg input[type=radio] { accent-color: var(--m-acento); }
html[data-tema="oscuro"] body.fg .md-velo { background: rgba(0,0,0,.5) !important; }
body.fg .pn-kpi { background: var(--m-panel) !important; border: 1px solid var(--m-linea-suave) !important; border-radius: 14px !important; box-shadow: var(--m-sombra) !important; }
body.fg .pn-kpi .num { color: var(--m-tinta) !important; }
body.fg .pn-kpi .num.rojo { color: #dc2626 !important; }
body.fg .pn-kpi .lbl { color: var(--m-gris) !important; }
body.fg .md .md-lupa { background: transparent !important; color: var(--m-tinta) !important; border: 0 !important; padding: 0 2px !important; font-weight: 700 !important; }
body.fg .md .md-lupa:hover:not(:disabled) { background: var(--m-acento-suave) !important; }
body.fg .md .md-lupa.md-mas { color: var(--m-acento) !important; }
body.fg .md-sash { background: var(--m-fondo) !important; border: 0 !important; }
body.fg .md .md-enlace, body.fg .md-enlace { background: transparent !important; color: var(--m-acento) !important; border: 0 !important; font-weight: 500 !important; padding: 2px 6px !important; }
body.fg .md .md-enlace:hover { background: var(--m-acento-suave) !important; }
body.fg .md .md-enlace.rojo { color: #dc2626 !important; }
/* Recuadros de solo lectura («Empresa» de la barra, campos calculados) e imagen de artículo: línea fina, sin el borde negro */
body.fg .fg-campo-ro, body.fg .md-ro { border: 1px solid var(--m-linea) !important; border-radius: 6px !important; background: var(--m-linea-suave) !important; color: var(--m-tinta) !important; padding: 2px 8px !important; }
body.fg .md-img { border: 1px solid var(--m-linea) !important; border-radius: 10px !important; background: var(--m-linea-suave) !important; }
body.fg .md-ventana input.md-campo, body.fg .md-ventana select.md-lista-c, body.fg .md-barra select, body.fg .md-barra input { border: 1px solid var(--m-linea) !important; border-radius: 6px !important; }
body.fg .md input.md-campo, body.fg .md select.md-lista-c, body.fg .md textarea.md-campo { border: 1px solid var(--m-linea) !important; }
body.fg .md input.md-campo.editando:focus, body.fg .md select.md-lista-c.editando:focus { border-color: var(--m-acento) !important; outline: 2px solid var(--m-acento-suave) !important; }
/* Selector de idioma de la cabecera */
body.fg .fg-idioma-sel { width: auto !important; padding: 5px 8px !important; border-radius: 8px !important; background: var(--m-acento-suave) !important; color: var(--m-acento-osc) !important; border: 0 !important; font-weight: 600 !important; font-size: 12px !important; cursor: pointer; }

/* ---------------------------------------------------------------- tamaño de letra de cada usuario
   Ajustes → Opciones → «Tamaño de letra» (src/lib/preferencias.js, <html data-letra>): toda la pantalla (letra, alto de los
   campos, rellenos) a escala, también lo que las vistas escriben en px. «Normal» es algo más pequeña que la letra de antes
   («Grande»). Lo que mide la ventana en vh se compensa para seguir llenándola; el alto de #md lo ajusta /js/tema.js. */
html[data-letra="pequena"] { --fg-zoom: .8; }
html[data-letra="normal"] { --fg-zoom: .9; }
html[data-letra="grande"] { --fg-zoom: 1; }
html[data-letra] body.fg { zoom: var(--fg-zoom, 1); }
html[data-letra] body.fg .fg-shell { min-height: calc(100vh / var(--fg-zoom, 1)); }
html[data-letra] body.fg .fg-sidebar { height: calc(100vh / var(--fg-zoom, 1)); }

/* ---------------------------------------------------------------- empresa y año, siempre a la vista (barra de arriba)
   Clases propias (src/layout.js indicadorContexto): no son «mb-grupo» porque de ahí leen el menú el escritorio y Vera. */
body.fg .mb-contexto { position: relative; flex: 0 0 auto; display: flex; align-items: center; margin: 0 6px 0 4px; outline: none; }
body.fg .mb-ctx-pastilla { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  background: var(--m-acento-suave); color: var(--m-acento-osc); border: 1px solid var(--m-acento-borde); font-size: 12.5px; font-weight: 500; }
body.fg .mb-contexto:hover .mb-ctx-pastilla, body.fg .mb-contexto:focus-within .mb-ctx-pastilla { border-color: var(--m-acento); }
body.fg .mb-ctx-emp { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
body.fg .mb-ctx-sep { opacity: .55; }
body.fg .mb-ctx-anio { font-weight: 700; }
body.fg .mb-ctx-flecha { font-size: 10px; opacity: .7; }
body.fg .mb-ctx-sub { display: none; position: absolute; top: 100%; left: 0; min-width: 260px; z-index: 40; background: var(--m-panel); border: 1px solid var(--m-linea);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(16,24,40,.14); padding: 6px; }
body.fg .mb-contexto:hover .mb-ctx-sub, body.fg .mb-contexto:focus-within .mb-ctx-sub { display: block; }
body.fg .mb-ctx-sub a, body.fg .mb-ctx-sub form button { display: block; width: 100%; margin: 0; padding: 7px 12px; border: 0 !important; border-radius: 8px !important; background: none !important;
  color: var(--m-tinta) !important; font: inherit; font-size: 13px; font-weight: 400 !important; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; min-height: 0; }
body.fg .mb-ctx-sub a:hover, body.fg .mb-ctx-sub a.activo, body.fg .mb-ctx-sub form button:hover { background: var(--m-acento-suave) !important; color: var(--m-acento-osc) !important; }
body.fg .mb-ctx-sub a.activo { font-weight: 600 !important; }
body.fg .mb-ctx-sub form { margin: 0; }
body.fg .mb-ctx-tit { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--m-gris); }
body.fg .mb-ctx-anios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-height: 240px; overflow-y: auto; }
body.fg .mb-ctx-anios a:last-child { grid-column: 1 / -1; }
@media print { body.fg .mb-contexto { display: none !important; } }
@media print { html[data-letra] body.fg { zoom: 1; } }

/* ---------------------------------------------------------------- «Más ▾» del menú de arriba (public/js/tema.js) */
body.fg .mb-mas > span { font-weight: 500 !important; color: var(--m-gris) !important; padding: 0 14px !important; font-size: 13px !important; }
body.fg .mb-mas:hover > span { background: transparent !important; color: var(--m-tinta) !important; }
body.fg .mb-mas-sub { background: var(--m-panel) !important; border: 1px solid var(--m-linea) !important; border-radius: 12px !important; box-shadow: 0 12px 32px rgba(16,24,40,.14) !important; padding: 6px !important; }
body.fg .mb-mas-sub .mb-grupo > span { padding: 7px 12px !important; border-radius: 8px; color: var(--m-tinta) !important; }
body.fg .mb-mas-sub .mb-grupo:hover > span { background: var(--m-acento-suave) !important; color: var(--m-acento-osc) !important; }
body.fg .mb-mas-sub .mb-grupo.activo > span { color: var(--m-acento) !important; box-shadow: none !important; }

/* ---------------------------------------------------------------- diseño compacto tipo ERP (07/10/2026): menos aire, más datos
   a la vista. Mismos colores y misma estructura (lista arriba, ficha debajo). */
body.fg .fg-header { padding: 8px 18px 2px !important; }
body.fg .fg-titulo { font-size: 19px !important; }
body.fg .fg-subtitulo { font-size: 12px !important; }
body.fg .fg-contenido { padding: 6px 18px !important; }
body.fg .mb-salir button { white-space: nowrap !important; padding: 4px 10px !important; }
body.fg .md-tv td { height: 22px !important; }
body.fg .md-tv th { padding: 3px 6px !important; }
body.fg .md-barra { padding: 4px 8px !important; margin-bottom: 4px !important; }
body.fg .md-bloque { padding: 0 8px 4px !important; margin: 0 0 6px !important; }
body.fg .md-ff { gap: 6px !important; margin-top: 1px !important; }
body.fg .md-fc > span { line-height: 14px !important; }
body.fg .md-fcont { padding: 4px 8px !important; }
body.fg .md-botonera { padding: 3px 0 4px !important; }
body.fg .md .md-b { height: 28px !important; }
/* fecha vacía de una ficha que se consulta: en blanco (no «dd/mm/aaaa», que parece un dato) */
body.fg .md input[type=date].vacia:not(.editando)::-webkit-datetime-edit { color: transparent; }
body.fg .fg-botonera-corp { margin-left: -18px !important; margin-right: -18px !important; padding: 4px 18px !important; }
body.fg input, body.fg select, body.fg textarea { padding: 4px 8px !important; }
body.fg .fg-filtros { gap: 6px 10px !important; }
body.fg .fg-filtros > div:not(.estrecho):not(.botones):not(.salto) { flex: 0 1 220px !important; }
body.fg .gr3d .valor3d { margin-bottom: 13px !important; }   /* el importe, encima de la tapa de la barra (no montado) */
/* Solo se desplaza la página (no el «body» por su cuenta): si no, al elegir una fila el body se desplazaba y el menú de arriba
   quedaba fuera de la vista. El alto mínimo, un píxel menos por el redondeo del «zoom» de la letra. */
html[data-letra] body.fg { overflow-y: visible !important; }
html[data-letra] body.fg .fg-shell { min-height: calc(100vh / var(--fg-zoom, 1) - 2px); }

/* Vera dentro del programa (web): en la fila de «? Ayuda», pequeña (public/js/tema.js la mueve allí); así no tapa importes ni
   botones de abajo. En el escritorio va en su panel lateral (botón de la cinta). La web pública conserva la de abajo. */
body.fg .fg-header-acciones .vera.vera-app { position: relative; top: auto; bottom: auto; right: auto; z-index: 950; }
body.fg .fg-header-acciones .vera.vera-app .vera-boton { width: 32px; height: 32px; animation: none; }
body.fg .fg-header-acciones .vera.vera-app .vera-boton::before, body.fg .fg-header-acciones .vera.vera-app .vera-boton::after { display: none; }
body.fg .fg-header-acciones .vera.vera-app .vera-nombre, body.fg .fg-header-acciones .vera.vera-app .vera-en-linea { display: none; }
body.fg .fg-header-acciones .vera.vera-app .vera-foto-boton, body.fg .fg-header-acciones .vera.vera-app .vera-boton .vera-foto { width: 32px !important; height: 32px !important; }
body.fg .fg-header-acciones .vera.vera-app .vera-panel { position: absolute; top: 40px; bottom: auto; right: 0; }
body.fg .fg-header-acciones .vera.vera-app .vera-bocadillo { top: 40px; bottom: auto; right: 0; border-radius: 18px 4px 18px 18px; }