/* Fenix — sistema visual (9.21) Un solo lugar para los colores, las escalas y los componentes. Los templates usan clases de acá y NO colores cableados: un `background:#fff` en un template se ve bien en el tema claro y deja el texto a 1,2:1 en el oscuro (informe UX, crítico 3). La guarda está en tests/test_sistema_visual.py. Orden del archivo: 1. Tokens por tema (claro, neutro, oscuro) 2. Base: tipografía, links, foco, controles de formulario 3. Layout de la app (barra superior, contenedor, pie) 4. Componentes (botones, avisos, KPI, badges, formularios, tablas…) 5. Pantallas puntuales que ya vivían acá (EERR/EEP, moneda, export) 6. Responsive 7. Impresión y movimiento reducido ============================================================ */ /* ============================================================ 1. TOKENS El tema se aplica con data-theme en (ver base.html). Los nombres viejos (--primary, --muted, --ok, --warn…) se conservan porque los usan templates y el JS de algunas pantallas; los nuevos son semánticos. Contrastes medidos (WCAG 2.x) contra --surface: texto ≥ 4,5:1, bordes de controles ≥ 3:1. --muted-light ya no es un gris decorativo: la clase .muted se usa para ayudas y estados vacíos, y en los tres temas quedaba bajo AA. ============================================================ */ :root, :root[data-theme="claro"] { color-scheme: light; --bg: #f7f8fa; --text: #1f2937; --text-soft: #374151; --muted: #646b78; /* 5,4:1 sobre blanco, 4,9:1 sobre --surface-alt */ --muted-light: #646b78; /* era #9ca3af: 2,5:1 */ --surface: #ffffff; --surface-alt: #f3f4f6; --surface-hover: #f9fafb; --row-hover: #dbeafe; --border: #e5e7eb; --border-strong: #d1d5db; --primary: #1e40af; --primary-strong: #1e3a8a; --primary-text: #1e3a8a; --on-primary: #ffffff; --link-hover-bg: #eff6ff; --topbar-from: #1e40af; --topbar-to: #1d3a9e; --topbar-text: rgba(255, 255, 255, 0.92); --shadow: rgba(0, 0, 0, 0.12); --ok: #047857; /* era #059669: 3,8:1 */ --warn: #b91c1c; /* rojo de texto: el nombre es histórico */ --badge-ok-bg: #d1fae5; --badge-ok-text: #065f46; --badge-info-bg: #dbeafe; --badge-info-text: #1e40af; /* Links, foco y controles */ --link: #1d4ed8; --link-hover: #1e3a8a; --foco: #2563eb; --input-bg: #ffffff; --input-borde: #868e9a; /* 3,3:1: el borde del campo tiene que verse */ --input-texto: #1f2937; --input-deshabilitado: #f3f4f6; /* Estados: fondo, borde y texto de cada uno */ --info-bg: #eff6ff; --info-borde: #bfdbfe; --info-texto: #1e3a8a; --ok-bg: #ecfdf5; --ok-borde: #a7f3d0; --ok-texto: #065f46; --warn-bg: #fffbeb; --warn-borde: #fcd34d; --warn-texto: #92400e; --error-bg: #fef2f2; --error-borde: #fecaca; --error-texto: #991b1b; --neutro-bg: #e5e7eb; --neutro-texto: #374151; /* Números y botones sólidos de estado */ --positivo: #047857; --negativo: #b91c1c; --atencion: #b45309; --ok-solido: #047857; --peligro-solido: #b91c1c; --on-solido: #ffffff; --backdrop: rgba(15, 23, 42, 0.45); /* Series de gráficos: azul y naranja, distinguibles sin depender del rojo/verde. */ --serie-1: #2563eb; --serie-2: #ea580c; } /* Neutro: grises cálidos, menos brillo que claro. */ :root[data-theme="neutro"] { color-scheme: light; --bg: #e6e7ea; --text: #26282d; --text-soft: #3a3d44; --muted: #5d6068; --muted-light: #5d6068; /* era #888c95: 3,1:1 */ --surface: #f4f4f6; --surface-alt: #e4e5e9; --surface-hover: #ececef; --row-hover: #d1dae8; --border: #d3d5db; --border-strong: #b9bcc4; --primary: #3f5170; --primary-strong: #2f3e57; --primary-text: #2f3e57; --on-primary: #ffffff; --link-hover-bg: #e1e5ec; --topbar-from: #44506a; --topbar-to: #3a4458; --topbar-text: rgba(255, 255, 255, 0.9); --shadow: rgba(0, 0, 0, 0.18); --ok: #276749; /* era #2f855a: 4,1:1 */ --warn: #a23a2e; --badge-ok-bg: #d4e7da; --badge-ok-text: #275c41; --badge-info-bg: #dbe2ee; --badge-info-text: #2f3e57; --link: #2f4a73; --link-hover: #1f3352; --foco: #3f5170; --input-bg: #fbfbfc; --input-borde: #7b7f88; --input-texto: #26282d; --input-deshabilitado: #e4e5e9; --info-bg: #e3e8f0; --info-borde: #b8c4d6; --info-texto: #2f3e57; --ok-bg: #dfeee4; --ok-borde: #a9cdb5; --ok-texto: #22543d; --warn-bg: #f3ead6; --warn-borde: #d9c089; --warn-texto: #744210; --error-bg: #f3e1df; --error-borde: #dcaaa5; --error-texto: #822727; --neutro-bg: #dcdde2; --neutro-texto: #3a3d44; --positivo: #276749; --negativo: #a23a2e; --atencion: #8a5a14; --ok-solido: #2f6b4a; --peligro-solido: #a23a2e; --on-solido: #ffffff; --backdrop: rgba(20, 22, 28, 0.5); --serie-1: #3f5f8f; --serie-2: #b8651f; } /* Oscuro */ :root[data-theme="oscuro"] { color-scheme: dark; /* los date/month/file nativos también */ --bg: #0f172a; --text: #e2e8f0; --text-soft: #cbd5e1; --muted: #94a3b8; --muted-light: #94a3b8; /* era #7c8aa0: 4,2:1 */ --surface: #1e293b; --surface-alt: #334155; --surface-hover: #273449; --row-hover: #1e3a5f; --border: #334155; --border-strong: #475569; --primary: #3b82f6; --primary-strong: #60a5fa; --primary-text: #93c5fd; --on-primary: #0b1220; --link-hover-bg: #273449; --topbar-from: #1e293b; --topbar-to: #16202e; --topbar-text: rgba(255, 255, 255, 0.9); --shadow: rgba(0, 0, 0, 0.5); --ok: #34d399; --warn: #fca5a5; --badge-ok-bg: #14532d; --badge-ok-text: #bbf7d0; --badge-info-bg: #1e3a5f; --badge-info-text: #bfdbfe; /* Sin esto los links quedaban con el azul del navegador: 1,56:1. */ --link: #93c5fd; --link-hover: #bfdbfe; --foco: #60a5fa; --input-bg: #0f172a; --input-borde: #6b7a90; --input-texto: #e2e8f0; --input-deshabilitado: #1e293b; --info-bg: #172554; --info-borde: #1e40af; --info-texto: #bfdbfe; --ok-bg: #052e22; --ok-borde: #047857; --ok-texto: #a7f3d0; --warn-bg: #3b2506; --warn-borde: #a16207; --warn-texto: #fde68a; --error-bg: #450a0a; --error-borde: #b91c1c; --error-texto: #fecaca; --neutro-bg: #334155; --neutro-texto: #cbd5e1; --positivo: #34d399; --negativo: #fca5a5; --atencion: #fbbf24; --ok-solido: #34d399; --peligro-solido: #f87171; --on-solido: #0b1220; --backdrop: rgba(0, 0, 0, 0.6); --serie-1: #60a5fa; --serie-2: #fb923c; } /* Escalas: iguales en los tres temas. */ :root { --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-5: 1.5rem; --esp-6: 2rem; --radio-s: 4px; --radio-m: 6px; --radio-l: 10px; --fs-xs: 0.75rem; /* 12 px */ --fs-s: 0.8125rem; /* 13 px */ --fs-m: 0.875rem; /* 14 px, el cuerpo */ --fs-l: 1.05rem; --fs-xl: 1.5rem; --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fuente-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace; } /* ============================================================ 2. BASE ============================================================ */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--fuente); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; } img { max-width: 100%; height: auto; } code, kbd { font-family: var(--fuente-mono); font-size: 0.92em; } abbr[title] { text-decoration: underline dotted; cursor: help; } /* Los links toman el color del tema. Sin esta regla, en el oscuro quedaban con el azul por defecto del navegador sobre fondo casi negro. */ a { color: var(--link); text-underline-offset: 2px; } a:hover { color: var(--link-hover); } /* Foco visible para quien usa el teclado, en todo. */ :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; } h1 { font-size: var(--fs-xl); line-height: 1.2; margin: 0 0 0.5rem; font-weight: 650; } h2 { font-size: 1.2rem; line-height: 1.3; } h3 { font-size: 1rem; } .subtitle { color: var(--muted); margin-top: 0; } /* Controles de formulario. Con :where() la especificidad es cero: cualquier clase de una pantalla (la grilla del asiento, los filtros) gana sin pelear. Antes solo `.filtros` tenía estilo y el resto dependía del navegador, que en tema oscuro pintaba campos blancos con texto claro. */ :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea) { font: inherit; color: var(--input-texto); background-color: var(--input-bg); border: 1px solid var(--input-borde); border-radius: var(--radio-s); padding: 0.4rem 0.5rem; } :where(input, select, textarea):disabled { background-color: var(--input-deshabilitado); cursor: not-allowed; } :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--negativo); box-shadow: 0 0 0 1px var(--negativo); } :where(button) { font: inherit; } input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); } ::placeholder { color: var(--muted); opacity: 1; } /* Utilidades de texto. `.muted` mezclaba color + centrado + itálica, que en una ayuda al pie de un formulario queda raro: lo nuevo separa las dos cosas en .texto-suave (solo color) y .vacio (el estado vacío). */ .texto-suave { color: var(--muted); } .texto-chico { font-size: var(--fs-s); } .texto-mono { font-family: var(--fuente-mono); } .nota { color: var(--muted); font-size: var(--fs-s); line-height: 1.55; margin: var(--esp-4) 0 0; max-width: 90ch; } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .positivo { color: var(--positivo); } .negativo { color: var(--negativo); } .atencion { color: var(--atencion); } .warn { color: var(--warn); } .ok { color: var(--ok); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* «Saltar al contenido»: el primer foco de cada página. */ .saltar-contenido { position: absolute; left: var(--esp-2); top: -3rem; z-index: 100; padding: 0.5rem 0.9rem; background: var(--surface); color: var(--link); border: 2px solid var(--foco); border-radius: var(--radio-m); font-weight: 600; text-decoration: none; } .saltar-contenido:focus { top: var(--esp-2); } /* ============================================================ 3. LAYOUT DE LA APP ============================================================ */ /* ---- Íconos (9.50) ---- El sprite está en templates/_iconos.html y se usa con ui.icono('nombre'). Son de trazo: el color es el del texto (currentColor) y el grosor, este. */ .sprite-iconos { position: absolute; width: 0; height: 0; overflow: hidden; } .icono { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; } /* ---- Barra superior ---- Un renglón desde 901 px: a 1366 entran los nueve lugares del menú, el buscador, la empresa, la ayuda y el usuario. Para eso los íconos de los nueve lugares se muestran recién desde 1530 px (y en el menú de celular, donde sobra el ancho): entre 901 y 1529 son 216 px que no hay. El menú no se encoge nunca —un ítem cortado no se puede leer—; lo que cede es el nombre de la empresa, con puntos suspensivos y el nombre entero en el `title`. Debajo de 901, el menú pasa a columna detrás del botón «Menú». */ .topbar { background: linear-gradient(180deg, var(--topbar-from) 0%, var(--topbar-to) 100%); color: var(--topbar-text); padding: 0.45rem 1rem; display: flex; flex-wrap: nowrap; align-items: center; gap: 0.3rem; box-shadow: 0 2px 6px var(--shadow); position: sticky; top: 0; z-index: 60; } .topbar .brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; margin-right: 0.35rem; } .topbar .brand-logo { height: 28px; width: auto; display: block; } /* En la barra el foco va en blanco: el azul del tema no se ve sobre el azul. */ .topbar :focus-visible { outline-color: #fff; } /* ---- Menú con desplegables ---- */ .topbar .menu { display: flex; flex: 0 0 auto; margin-right: auto; gap: 0.05rem; list-style: none; margin: 0; padding: 0; align-items: center; } .topbar .menu > li { position: relative; } .topbar .menu > li > a, .topbar .menu > li > .group-label { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--topbar-text); text-decoration: none; padding: 0.4rem 0.45rem; border-radius: 6px; font-size: 0.88rem; font-family: inherit; line-height: 1.2; white-space: nowrap; background: transparent; border: 0; cursor: pointer; } .topbar .menu > li > a:hover, .topbar .menu > li > .group-label:hover, .topbar .menu > li > .group-label[aria-expanded="true"] { background: rgba(255, 255, 255, 0.16); color: #fff; } .topbar .menu > li.active > a, .topbar .menu > li.active > .group-label { background: rgba(255, 255, 255, 0.24); color: #fff; font-weight: 600; } .topbar .caret { width: 0.8em; height: 0.8em; opacity: 0.85; margin-left: -0.15rem; } .topbar .menu > li > a > .icono, .topbar .menu > li > .group-label > .icono:not(.caret) { display: none; } @media (min-width: 1530px) { .topbar .menu > li > a > .icono, .topbar .menu > li > .group-label > .icono:not(.caret) { display: inline-block; } } [aria-expanded="true"] > .caret { transform: rotate(180deg); } /* Una función que el plan no incluye: se ve, apagada (documento 05 §5). */ .topbar .menu-apagado { opacity: 0.72; } .menu-plan { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: auto; padding-left: 0.6rem; font-size: var(--fs-xs); color: var(--muted); } .topbar .dropdown { position: absolute; top: calc(100% + 4px); left: 0; min-width: 214px; max-width: calc(100vw - 1.5rem); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px var(--shadow); padding: 0.35rem; margin: 0; list-style: none; display: none; z-index: 70; } .topbar .dropdown :focus-visible { outline-color: var(--foco); } /* Puente invisible que rellena el hueco de 4px entre el botón y el menú, para que el mouse no pierda el :hover al bajar y el menú no se cierra. */ .topbar .dropdown::before { content: ""; position: absolute; top: -5px; left: 0; right: 0; height: 5px; } /* Abierto por click o teclado (ui.js pone aria-expanded)… */ .topbar [aria-expanded="true"] + .dropdown { display: block; } /* …y por hover, solo donde hay un mouse de verdad y la barra es un renglón. */ @media (hover: hover) and (min-width: 901px) { .topbar .menu > li:hover > .dropdown, .topbar .user-box:hover > .dropdown { display: block; } } .topbar .dropdown li a { display: flex; align-items: center; gap: 0.5rem; color: var(--text); text-decoration: none; padding: 0.45rem 0.7rem; border-radius: 6px; font-size: 0.88rem; white-space: nowrap; } .topbar .dropdown li a:hover { background: var(--link-hover-bg); color: var(--primary-text); } .topbar .dropdown li a[aria-current="page"] { background: var(--link-hover-bg); color: var(--primary-text); font-weight: 600; } .topbar .dropdown .icono { color: var(--muted); } .topbar .dropdown .sep { height: 1px; background: var(--border); margin: 0.3rem 0.25rem; } /* El botón «Menú» de pantallas chicas (ver 6. Responsive). */ .menu-toggle { display: none; align-items: center; gap: 0.35rem; padding: 0.35rem 0.65rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; background: rgba(255, 255, 255, 0.12); color: #fff; font: inherit; font-size: 0.88rem; cursor: pointer; } .menu-toggle:hover, .menu-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.24); } /* Buscador de la barra */ .nav-buscar { position: relative; flex: 0 1 9rem; min-width: 6.5rem; margin: 0 0 0 0.25rem; } .nav-buscar:focus-within { flex-basis: 13rem; } .nav-buscar__icono { position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .nav-buscar input { width: 100%; padding: 0.35rem 0.6rem 0.35rem 1.85rem; border: 1px solid var(--border-strong); border-radius: 14px; font-size: 0.82rem; background: var(--surface); color: var(--text); } .nav-buscar input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px #fff; } /* La empresa en la que se está trabajando: siempre a la vista. */ .topbar .empresa-switcher { display: flex; align-items: center; gap: 0.35rem; min-width: 0; flex: 0 1 auto; font-size: 0.85rem; color: var(--topbar-text); } .empresa-switcher__etq { font-size: 0.8rem; white-space: nowrap; } .empresa-switcher__nombre { display: block; min-width: 0; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #fff; } .empresa-switcher__boton { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; padding: 0.28rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; background: rgba(255, 255, 255, 0.12); color: #fff; text-decoration: none; } .empresa-switcher__boton:hover, .empresa-switcher.active .empresa-switcher__boton { background: rgba(255, 255, 255, 0.24); color: #fff; } /* «? Ayuda» */ .nav-ayuda { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; padding: 0.4rem 0.5rem; border-radius: 6px; color: var(--topbar-text); text-decoration: none; font-size: 0.88rem; white-space: nowrap; } .nav-ayuda__texto { display: inline; } .nav-ayuda:hover, .nav-ayuda.active { background: rgba(255, 255, 255, 0.16); color: #fff; } /* Caja de usuario (derecha de la barra) */ .topbar .user-box { position: relative; flex: none; } .topbar .user-box > .group-label { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.6rem; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.12); color: #fff; font: inherit; font-size: 0.85rem; white-space: nowrap; cursor: pointer; } .topbar .user-box > .group-label:hover, .topbar .user-box > .group-label[aria-expanded="true"], .topbar .user-box.active > .group-label { background: rgba(255, 255, 255, 0.24); } .topbar .user-box .dropdown { right: 0; left: auto; min-width: 250px; } .user-dropdown__quien { padding: 0.4rem 0.7rem 0.55rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 0.75rem; line-height: 1.5; } .user-dropdown__quien strong { color: var(--text-soft); } .form-salir { margin: 0; } .logout-btn { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.45rem 0.7rem; border: 0; border-radius: 6px; background: none; color: var(--negativo); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; } .logout-btn:hover { background: var(--error-bg); } /* Selector de tema dentro del menú de usuario */ .tema-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem; font-size: 0.88rem; color: var(--text); } .tema-row .icono { color: var(--muted); } .tema-row select { flex: 1; padding: 0.25rem 0.4rem; border: 1px solid var(--input-borde); border-radius: 6px; background: var(--input-bg); color: var(--input-texto); font: inherit; font-size: 0.82rem; } /* Popup (asiento abierto desde un informe): sin barra ni pie. */ html.popup-mode .topbar, html.popup-mode footer, html.popup-mode .solo-normal { display: none !important; } .container { max-width: 1280px; margin: 2rem auto; padding: 0 1.5rem; } footer { text-align: center; color: var(--muted); padding: 2rem; border-top: 1px solid var(--border); margin-top: 3rem; } /* ============================================================ 4. COMPONENTES Los macros de src/templates/_ui.html dibujan estas clases. ============================================================ */ /* ---- Encabezado de página: título, contexto, para qué sirve, ayuda ---- */ .encabezado { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--esp-3) var(--esp-5); margin: 0 0 var(--esp-5); } .encabezado__texto { flex: 1 1 26rem; min-width: 0; } .encabezado__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); } .encabezado h1 { margin: 0; } .encabezado__contexto { color: var(--muted); margin: var(--esp-1) 0 0; font-size: 0.92rem; } .encabezado__desc { color: var(--text-soft); margin: var(--esp-2) 0 0; max-width: 78ch; line-height: 1.55; } .encabezado__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; } .encabezado__acciones .btn, .encabezado__acciones .export-bar { margin: 0; } .ayuda-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.65rem; border: 1px solid var(--input-borde); border-radius: 999px; background: var(--surface); color: var(--link); font-size: var(--fs-s); font-weight: 500; line-height: 1.5; text-decoration: none; white-space: nowrap; } .ayuda-btn:hover { background: var(--link-hover-bg); color: var(--link-hover); } .ayuda-link { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; border-radius: 999px; border: 1px solid var(--input-borde); color: var(--link); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; vertical-align: middle; } .ayuda-link:hover { background: var(--link-hover-bg); } /* ---- Migas de pan ---- */ .migas { margin: 0 0 var(--esp-2); font-size: var(--fs-s); color: var(--muted); } .migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--esp-1) 0; margin: 0; padding: 0; } .migas li + li::before { content: "›"; margin: 0 0.45rem; color: var(--muted); } .migas a { color: var(--link); text-decoration: none; } .migas a:hover { text-decoration: underline; } .migas [aria-current="page"] { color: var(--text-soft); } /* ---- Botones ---- `.btn` es el primario y conserva su margen derecho histórico; adentro de .acciones o del encabezado el espacio lo da el `gap`. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem 1rem; background: var(--primary); color: var(--on-primary); border: 1px solid transparent; border-radius: var(--radio-m); font: inherit; font-weight: 500; line-height: 1.25; text-decoration: none; cursor: pointer; margin-right: 0.5rem; box-shadow: 0 1px 2px var(--shadow); transition: background .12s ease, transform .12s ease, box-shadow .12s ease; } .btn:hover { background: var(--primary-strong); color: var(--on-primary); transform: translateY(-1px); box-shadow: 0 4px 10px var(--shadow); } .btn--secundario { background: var(--surface); color: var(--link); border-color: var(--input-borde); box-shadow: none; } .btn--secundario:hover { background: var(--link-hover-bg); color: var(--link-hover); } .btn--fantasma { background: transparent; color: var(--link); box-shadow: none; padding-left: 0.6rem; padding-right: 0.6rem; } .btn--fantasma:hover { background: var(--link-hover-bg); color: var(--link-hover); box-shadow: none; } .btn--ok, .btn-success { background: var(--ok-solido); color: var(--on-solido); } .btn--ok:hover, .btn-success:hover { background: var(--ok-solido); color: var(--on-solido); filter: brightness(0.93); } .btn--peligro { background: var(--peligro-solido); color: var(--on-solido); } .btn--peligro:hover { background: var(--peligro-solido); color: var(--on-solido); filter: brightness(0.93); } /* Peligro sin relleno: para «Eliminar» al lado de otras acciones, que no tiene que gritar más que el botón principal. */ .btn--peligro-suave { background: var(--surface); color: var(--negativo); border-color: var(--error-borde); box-shadow: none; } .btn--peligro-suave:hover { background: var(--error-bg); color: var(--error-texto); } .btn--chico { padding: 0.28rem 0.65rem; font-size: var(--fs-s); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; } /* Sin tocar celdas: varias tablas ya tenían una columna `td.acciones`, y un display:flex en una celda la saca de la tabla. */ .acciones:not(td, th) { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; margin: var(--esp-4) 0; } .acciones .btn { margin-right: 0; } .acciones form { margin: 0; } /* Un