/* Fenix - estilo minimalista */ /* ============================================================ TEMAS — paleta como variables CSS. Claro = valores históricos. El tema se aplica con el atributo data-theme en (ver base.html). Las superficies y textos principales usan var(--…); así claro/neutro/oscuro cambian solos. ============================================================ */ :root, :root[data-theme="claro"] { --bg: #f7f8fa; --text: #1f2937; --text-soft: #374151; --muted: #6b7280; --muted-light: #9ca3af; --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: #059669; --warn: #dc2626; --badge-ok-bg: #d1fae5; --badge-ok-text: #065f46; --badge-info-bg: #dbeafe; --badge-info-text: #1e40af; } /* Neutro: grises cálidos, menos brillo que claro. */ :root[data-theme="neutro"] { --bg: #e6e7ea; --text: #26282d; --text-soft: #3a3d44; --muted: #5d6068; --muted-light: #888c95; --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: #2f855a; --warn: #c0392b; --badge-ok-bg: #d4e7da; --badge-ok-text: #275c41; --badge-info-bg: #dbe2ee; --badge-info-text: #2f3e57; } /* Oscuro */ :root[data-theme="oscuro"] { --bg: #0f172a; --text: #e2e8f0; --text-soft: #cbd5e1; --muted: #94a3b8; --muted-light: #7c8aa0; --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: #f87171; --badge-ok-bg: #14532d; --badge-ok-text: #bbf7d0; --badge-info-bg: #1e3a5f; --badge-info-text: #bfdbfe; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; } .topbar { background: linear-gradient(180deg, var(--topbar-from) 0%, var(--topbar-to) 100%); color: white; padding: 0.55rem 1.25rem; display: flex; align-items: center; gap: 1.25rem; box-shadow: 0 2px 6px var(--shadow); position: sticky; top: 0; z-index: 60; } .topbar .brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: 1.75rem; } .topbar .brand-logo { height: 52px; width: auto; display: block; } /* Ícono de los menús principales (Asientos, Reportes, etc.) */ .topbar .menu .ico { font-size: .95rem; margin-right: .35rem; line-height: 1; } /* ---- Menú con desplegables ---- */ .topbar .menu { display: flex; gap: 0.15rem; flex: 1; list-style: none; margin: 0; padding: 0; align-items: center; flex-wrap: wrap; } .topbar .menu > li { position: relative; } .topbar .menu > li > a, .topbar .menu > li > .group-label { display: inline-flex; align-items: center; gap: .15rem; color: var(--topbar-text); text-decoration: none; padding: 0.4rem 0.7rem; border-radius: 6px; font-size: 0.92rem; font-family: inherit; white-space: nowrap; background: transparent; border: 0; cursor: pointer; } .topbar .menu > li > a:hover, .topbar .menu > li > .group-label:hover, .topbar .menu > li:focus-within > .group-label { 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.22); color: #fff; font-weight: 600; } .topbar .menu .caret { font-size: 0.62rem; opacity: 0.85; } .topbar .dropdown { position: absolute; top: calc(100% + 4px); left: 0; min-width: 212px; background: var(--surface); border-radius: 8px; box-shadow: 0 10px 28px var(--shadow); padding: 0.35rem; margin: 0; list-style: none; display: none; z-index: 70; } /* 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 cierre. */ .topbar .dropdown::before { content: ""; position: absolute; top: -4px; left: 0; right: 0; height: 4px; } .topbar .menu > li:hover .dropdown, .topbar .menu > li:focus-within .dropdown { display: block; } .topbar .dropdown li a { display: block; 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); } .topbar .dropdown .sep { height: 1px; background: var(--border); margin: 0.3rem 0.25rem; } .topbar .empresa-switcher { display: flex; align-items: center; gap: .4rem; } .topbar .empresa-switcher label { font-size: .8rem; opacity: .9; } .topbar .empresa-switcher select { padding: 0.32rem 0.5rem; border-radius: 6px; border: 0; font-size: 0.88rem; background: var(--surface); color: var(--text); } .container { max-width: 1280px; margin: 2rem auto; padding: 0 1.5rem; } h1 { font-size: 1.6rem; margin: 0 0 0.5rem; } h2 { font-size: 1.2rem; } .subtitle { color: var(--muted); margin-top: 0; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; border-top: 3px solid var(--primary); box-shadow: 0 1px 2px var(--shadow); transition: transform .12s ease, box-shadow .12s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--shadow); } .card-label { color: var(--muted); font-size: 0.85rem; } .card-value { font-size: 1.6rem; font-weight: 600; margin-top: 0.25rem; color: var(--primary-text); } .balance-box { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.5rem; margin: 1.5rem 0; max-width: 500px; } .balance-box table { width: 100%; } .balance-box td { padding: 0.25rem 0.5rem; } .balance-box .num { text-align: right; font-variant-numeric: tabular-nums; } .balance-box tr.ok { color: var(--ok); font-weight: 600; } .balance-box tr.warn { color: var(--warn); font-weight: 600; } .btn { display: inline-block; padding: 0.5rem 1rem; background: var(--primary); color: var(--on-primary); text-decoration: none; border-radius: 6px; 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); transform: translateY(-1px); box-shadow: 0 4px 10px var(--shadow); } .filtros { background: var(--surface); padding: 0.75rem 1rem; border-radius: 6px; border: 1px solid var(--border); display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; } .filtros label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; } .filtros input, .filtros select { padding: 0.4rem; border: 1px solid var(--border-strong); border-radius: 4px; font-size: 0.9rem; background: var(--surface); color: var(--text); } .filtros button { padding: 0.5rem 1rem; background: var(--primary); color: var(--on-primary); border: 0; border-radius: 4px; cursor: pointer; } table.grid { width: 100%; background: var(--surface); border-collapse: collapse; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; font-size: 0.88rem; } table.grid th { background: var(--surface-alt); text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); font-weight: 600; position: relative; /* Necesario para posicional el manillar de redimensionamiento */ } table.grid td { padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--border); } table.grid tr:hover { background: var(--row-hover); } /* Soporte para redimensionar columnas */ .col-resizer { position: absolute; top: 0; right: 0; width: 6px; cursor: col-resize; user-select: none; height: 100%; z-index: 10; } .col-resizer:hover, .col-resizer.resizing { border-right: 3px solid var(--primary); } @media print { .col-resizer { display: none !important; } table.grid { table-layout: auto !important; } table.grid th { width: auto !important; } } table.grid .num { text-align: right; font-variant-numeric: tabular-nums; } table.grid .total-row { background: var(--surface-alt); font-weight: 600; } /* Títulos de rubro (Disponibilidades, Gastos operativos, …) y subtotales por rubro en los estados (EERR / EEP / Balance). Ver src/reportes/rubros.py. */ table.grid .rubro-row td { background: var(--surface-alt); padding-top: .55rem; border-top: 2px solid var(--border, #d0d0d0); letter-spacing: .02em; } table.grid .subtotal-row td { border-bottom: 1px solid var(--border, #d0d0d0); color: var(--muted, #555); } .meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; background: var(--surface); padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 6px; margin: 1rem 0; } .pagination { margin: 1rem 0; text-align: center; } .pagination a { margin: 0 0.5rem; } .warn { color: var(--warn); } .ok { color: var(--ok); } .badge-ok, .badge-info { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 10px; font-size: 0.75rem; font-weight: 600; } .badge-ok { background: var(--badge-ok-bg); color: var(--badge-ok-text); } .badge-info { background: var(--badge-info-bg); color: var(--badge-info-text); } footer { text-align: center; color: var(--muted); padding: 2rem; border-top: 1px solid var(--border); margin-top: 3rem; } /* ---- Reportes: EERR + EP ------------------------------------------- */ .eerr-grid, .eep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1rem 0; } @media (max-width: 900px) { .eerr-grid, .eep-grid { grid-template-columns: 1fr; } } .eerr-block, .eep-block { min-width: 0; } .eerr-block h2, .eep-block h2 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--primary); } .eep-block h3 { font-size: 0.95rem; color: var(--muted); margin: 1rem 0 0.5rem; } .muted { color: var(--muted-light); text-align: center; font-style: italic; } .resumen-box { background: var(--surface); border: 2px solid var(--border); border-radius: 8px; padding: 1rem 1.5rem; margin: 1.5rem 0; max-width: 520px; } .resumen-box.positive { border-color: var(--ok); } .resumen-box.negative { border-color: var(--warn); } .resumen-box table { width: 100%; } .resumen-box td { padding: 0.3rem 0; } .resumen-box .num { text-align: right; font-variant-numeric: tabular-nums; } .resumen-box tr.total td { border-top: 1px solid var(--border); padding-top: 0.5rem; font-size: 1.05rem; } /* Selector de moneda tipo grupo de botones (igual que el mayor). */ .moneda-vista { display: inline-flex; gap: 0; align-items: center; border: 1px solid var(--border-strong); border-radius: 4px; overflow: hidden; vertical-align: middle; } .moneda-vista label { padding: 0.4rem 0.7rem; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 0.85rem; border-right: 1px solid var(--border-strong); margin: 0; } .moneda-vista label:last-child { border-right: 0; } .moneda-vista input { display: none; } .moneda-vista input:checked + label { background: var(--primary); color: var(--on-primary); }