/* ═══════════════════════════════════════════
Hero Hub · Módulo de Finanzas
Estilos compartidos por las secciones de finanzas.html.
Usa variables de styles.css y respeta modo oscuro.
═══════════════════════════════════════════ */
/* ─────────────────────────────────────────────
Aviso (callout amarillo de chargebacks)
───────────────────────────────────────────── */
.fc-notice {
display: flex;
align-items: flex-start;
gap: 12px;
background: #fff8e1;
border: 1px solid #ffd970;
border-left: 4px solid #e8a317;
border-radius: 10px;
padding: 12px 16px;
margin-bottom: 18px;
font-size: 13.5px;
line-height: 1.5;
color: #5a4517;
}
.fc-notice i[data-lucide] {
width: 18px; height: 18px;
color: #e8a317;
flex-shrink: 0;
margin-top: 2px;
}
.fc-notice strong { color: #4a3712; }
.fc-notice em { font-style: italic; }
body[data-theme="dark"] .fc-notice {
background: rgba(232, 163, 23, 0.10);
border-color: rgba(232, 163, 23, 0.45);
border-left-color: #e8a317;
color: #f3d889;
}
body[data-theme="dark"] .fc-notice strong { color: #fff0bf; }
/* ─────────────────────────────────────────────
Toolbar (búsqueda + contador total)
───────────────────────────────────────────── */
.fc-toolbar {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.fc-toolbar .search-wrap {
position: relative;
flex: 1;
min-width: 240px;
max-width: 460px;
}
.fc-toolbar .search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px; height: 16px;
color: var(--muted, #777);
pointer-events: none;
}
.fc-toolbar input[type="text"] {
width: 100%;
padding: 10px 12px 10px 38px;
border: 1px solid var(--border, #e8e8e8);
border-radius: 8px;
font-family: inherit;
font-size: 14px;
background: var(--card, #fff);
color: var(--text, #1a1a1a);
}
.fc-toolbar input[type="text"]:focus {
outline: none;
border-color: #06a3b6;
box-shadow: 0 0 0 3px rgba(6, 163, 182, 0.15);
}
.fc-total {
font-size: 13px;
color: var(--muted, #777);
font-variant-numeric: tabular-nums;
font-weight: 600;
}
/* ─────────────────────────────────────────────
Filtros por tipo de origen (chips)
───────────────────────────────────────────── */
.fc-filter-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.fc-filter-chip {
padding: 6px 14px;
border: 1px solid var(--border, #e8e8e8);
border-radius: 999px;
background: var(--card, #fff);
color: var(--text, #1a1a1a);
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.15s ease;
}
.fc-filter-chip:hover {
border-color: #06a3b6;
color: #06a3b6;
}
.fc-filter-chip.active {
background: #06a3b6;
border-color: #06a3b6;
color: #fff;
}
/* ─────────────────────────────────────────────
Celdas custom de la tabla
───────────────────────────────────────────── */
.fc-tasa-cell {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.fc-origen-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
}
.fc-origen-HERO { background: rgba(6,163,182,.12); color: #048395; }
.fc-origen-FRIENDS { background: rgba(34,160,107,.12); color: #1e8456; }
.fc-origen-AGENTES { background: rgba(232,163,23,.15); color: #946614; }
body[data-theme="dark"] .fc-origen-HERO { background: rgba(6,163,182,.22); color: #5fd0e0; }
body[data-theme="dark"] .fc-origen-FRIENDS { background: rgba(34,160,107,.20); color: #6dd9a0; }
body[data-theme="dark"] .fc-origen-AGENTES { background: rgba(232,163,23,.22); color: #f3c969; }
.fc-empty { color: var(--muted, #999); }
.fc-link {
color: var(--cyan, #06a3b6);
text-decoration: none;
font-weight: 500;
}
.fc-link:hover { text-decoration: underline; }
body[data-theme="dark"] .fc-link { color: #3dbccc; }
.fc-notes-cell {
font-size: 12.5px;
color: var(--muted, #666);
line-height: 1.35;
max-height: 36px;
overflow: hidden;
text-overflow: ellipsis;
}
.fc-actions {
display: inline-flex;
gap: 4px;
}
.fc-act-btn {
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
width: 28px; height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--muted, #777);
transition: all 0.15s ease;
font-size: 14px;
}
.fc-act-btn:hover { background: var(--card-hover, #f3f7fa); color: var(--text, #1a1a1a); border-color: var(--border, #e8e8e8); }
.fc-act-btn.fc-del:hover { color: #c0392b; border-color: rgba(192, 57, 43, 0.3); }
/* ─────────────────────────────────────────────
Status toast flotante
───────────────────────────────────────────── */
.fc-status {
position: fixed;
bottom: 32px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: #1a1a1a;
color: #fff;
padding: 10px 18px;
border-radius: 999px;
font-size: 13.5px;
font-weight: 600;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 9999;
}
.fc-status.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ─────────────────────────────────────────────
Modal (sl-dialog) — formulario Nueva/Editar
───────────────────────────────────────────── */
.fc-form {
display: grid;
gap: 14px;
}
.fc-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 600px) {
.fc-form-row { grid-template-columns: 1fr; }
}
.fc-form sl-input,
.fc-form sl-select,
.fc-form sl-textarea { width: 100%; }
.fc-form-hint {
font-size: 12px;
color: var(--muted, #777);
margin-top: 6px;
line-height: 1.4;
}
/* ─────────────────────────────────────────────
Exportar — tarjetas + resumen del periodo
───────────────────────────────────────────── */
.fexp-summary {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding: 12px 16px;
margin-bottom: 16px;
background: linear-gradient(135deg, rgba(6,163,182,.06), rgba(6,163,182,.02));
border: 1px solid rgba(6,163,182,.18);
border-radius: 10px;
font-size: 13px;
}
body[data-theme="dark"] .fexp-summary {
background: linear-gradient(135deg, rgba(6,163,182,.12), rgba(6,163,182,.04));
border-color: rgba(6,163,182,.32);
}
.fexp-summary-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.7px;
color: var(--muted, #64748b);
}
.fexp-summary-value {
font-family: var(--mono, "JetBrains Mono", monospace);
font-weight: 700;
color: var(--text, #1a1a1a);
font-variant-numeric: tabular-nums;
}
.fexp-summary-sep { color: var(--muted); }
body[data-theme="dark"] .fexp-summary-value { color: var(--text); }
.fexp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.fexp-card-wide { grid-column: 1 / -1; }
@media (max-width: 800px) {
.fexp-grid { grid-template-columns: 1fr; }
.fexp-card-wide { grid-column: auto; }
}
.fexp-card {
background: var(--card, #fff);
border: 1px solid var(--border, #e8e8e8);
border-radius: 14px;
padding: 18px 20px;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 10px;
}
body[data-theme="dark"] .fexp-card { background: var(--card); border-color: var(--border); }
.fexp-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: rgba(6,163,182,.10);
color: var(--cyan, #06a3b6);
display: inline-flex;
align-items: center;
justify-content: center;
}
body[data-theme="dark"] .fexp-icon {
background: rgba(6,163,182,.22);
color: #3dbccc;
}
.fexp-icon i[data-lucide],
.fexp-icon svg { width: 22px; height: 22px; }
.fexp-card h3 {
margin: 0;
font-family: var(--display);
font-size: 16px;
font-weight: 700;
color: var(--text);
}
.fexp-card p {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--muted);
flex: 1;
}
.fexp-card sl-button { align-self: flex-start; }
/* Fila de botones (CSV + Excel) dentro de una card de exportar */
.fexp-btn-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-self: flex-start;
}
.fexp-btn-row sl-button { align-self: auto; }
/* ═══════════════════════════════════════════════════════════
IMPORTAR — cards con file input y preview
═══════════════════════════════════════════════════════════ */
.fimp-tip {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 12px 0 4px;
padding: 12px 16px;
border-radius: 12px;
background: rgba(245, 184, 48, 0.10);
border: 1px solid rgba(245, 184, 48, 0.28);
color: rgba(15, 23, 42, 0.85);
font-size: 13px;
line-height: 1.5;
}
.fimp-tip i { width: 18px; height: 18px; color: #d97706; flex-shrink: 0; margin-top: 1px; }
.fimp-tip code {
padding: 1px 6px;
border-radius: 5px;
background: rgba(15, 23, 42, 0.08);
font-family: var(--mono, ui-monospace, monospace);
font-size: 12px;
}
body[data-theme="dark"] .fimp-tip {
background: rgba(245, 184, 48, 0.10);
border-color: rgba(245, 184, 48, 0.25);
color: rgba(226, 232, 240, 0.85);
}
body[data-theme="dark"] .fimp-tip i { color: #fbbf24; }
body[data-theme="dark"] .fimp-tip code { background: rgba(255, 255, 255, 0.10); }
.fimp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 12px;
}
@media (max-width: 900px) {
.fimp-grid { grid-template-columns: 1fr; }
}
.fimp-card {
background: var(--card, #fff);
border: 1px solid var(--border, #e2e8f0);
border-radius: 14px;
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 14px;
}
.fimp-card-head {
display: flex;
gap: 14px;
align-items: flex-start;
}
.fimp-icon {
width: 42px; height: 42px;
border-radius: 12px;
background: rgba(6, 163, 182, 0.10);
color: #06a3b6;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.fimp-icon i { width: 20px; height: 20px; }
body[data-theme="dark"] .fimp-icon {
background: rgba(6, 163, 182, 0.18);
color: #67e8f9;
}
.fimp-card h3 {
margin: 0 0 6px;
font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
font-size: 17px;
font-weight: 700;
color: var(--text, #0f172a);
}
.fimp-sub {
margin: 0;
font-size: 13px;
color: rgba(15, 23, 42, 0.70);
line-height: 1.5;
}
body[data-theme="dark"] .fimp-sub { color: rgba(226, 232, 240, 0.70); }
.fimp-sub code {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
background: rgba(6, 163, 182, 0.08);
padding: 1px 5px;
border-radius: 4px;
color: #0891a3;
}
body[data-theme="dark"] .fimp-sub code {
background: rgba(6, 163, 182, 0.16);
color: #67e8f9;
}
/* Botón "Seleccionar archivo" — el input real está oculto */
.fimp-file-label {
display: block;
cursor: pointer;
}
.fimp-file-input {
position: absolute;
width: 0; height: 0;
opacity: 0;
pointer-events: none;
}
.fimp-file-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 8px;
border: 1.5px dashed var(--border, #e2e8f0);
background: rgba(15, 23, 42, 0.02);
color: var(--text, #0f172a);
font-size: 13.5px;
font-weight: 500;
transition: border-color 0.15s, background 0.15s, color 0.15s;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fimp-file-btn i { width: 16px; height: 16px; color: #06a3b6; flex-shrink: 0; }
.fimp-file-label:hover .fimp-file-btn {
border-color: #06a3b6;
background: rgba(6, 163, 182, 0.05);
color: #06a3b6;
}
body[data-theme="dark"] .fimp-file-btn {
background: rgba(226, 232, 240, 0.04);
color: rgba(226, 232, 240, 0.9);
}
body[data-theme="dark"] .fimp-file-label:hover .fimp-file-btn {
color: #67e8f9;
}
/* Preview con contadores */
.fimp-preview {
padding: 14px 16px;
border-radius: 10px;
background: rgba(6, 163, 182, 0.04);
border: 1px solid rgba(6, 163, 182, 0.15);
font-size: 13.5px;
line-height: 1.6;
}
body[data-theme="dark"] .fimp-preview {
background: rgba(6, 163, 182, 0.10);
border-color: rgba(6, 163, 182, 0.25);
}
.fimp-preview-title {
font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #06a3b6;
margin: 0 0 8px;
}
body[data-theme="dark"] .fimp-preview-title { color: #67e8f9; }
.fimp-preview-stats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
}
.fimp-stat {
padding: 8px 10px;
border-radius: 8px;
background: var(--card, #fff);
}
body[data-theme="dark"] .fimp-stat { background: rgba(15, 23, 42, 0.35); }
.fimp-stat-label {
font-size: 11px;
color: rgba(15, 23, 42, 0.55);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
body[data-theme="dark"] .fimp-stat-label { color: rgba(226, 232, 240, 0.55); }
.fimp-stat-value {
font-family: 'JetBrains Mono', monospace;
font-size: 20px;
font-weight: 700;
color: var(--text, #0f172a);
margin-top: 2px;
}
.fimp-stat-value.pos { color: #22a06b; }
.fimp-stat-value.warn { color: #e8a317; }
.fimp-stat-value.neu { color: #06a3b6; }
.fimp-preview-details {
margin-top: 12px;
border-top: 1px dashed rgba(6, 163, 182, 0.2);
padding-top: 10px;
font-size: 12.5px;
max-height: 280px;
overflow-y: auto;
}
.fimp-preview-subtitle {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(15, 23, 42, 0.55);
margin-bottom: 6px;
}
body[data-theme="dark"] .fimp-preview-subtitle { color: rgba(226, 232, 240, 0.55); }
.fimp-preview-hint {
margin: 8px 0 0;
font-size: 11.5px;
color: rgba(15, 23, 42, 0.5);
}
body[data-theme="dark"] .fimp-preview-hint { color: rgba(226, 232, 240, 0.5); }
.fimp-preview-empty {
margin: 12px 0 0;
font-size: 13px;
color: rgba(15, 23, 42, 0.7);
}
body[data-theme="dark"] .fimp-preview-empty { color: rgba(226, 232, 240, 0.7); }
.fimp-diff-line {
font-size: 11.5px;
line-height: 1.5;
}
.fimp-diff-line strong { color: rgba(15, 23, 42, 0.75); }
body[data-theme="dark"] .fimp-diff-line strong { color: rgba(226, 232, 240, 0.85); }
.fimp-diff-before {
color: rgba(15, 23, 42, 0.5);
text-decoration: line-through;
}
body[data-theme="dark"] .fimp-diff-before { color: rgba(226, 232, 240, 0.5); }
.fimp-diff-after {
color: #059669;
font-weight: 600;
}
body[data-theme="dark"] .fimp-diff-after { color: #34d399; }
.fimp-preview-details table {
width: 100%;
border-collapse: collapse;
}
.fimp-preview-details th, .fimp-preview-details td {
padding: 4px 8px;
text-align: left;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.fimp-preview-details th {
font-weight: 700;
text-transform: uppercase;
font-size: 10.5px;
letter-spacing: 0.04em;
color: rgba(15, 23, 42, 0.55);
}
body[data-theme="dark"] .fimp-preview-details th { color: rgba(226, 232, 240, 0.55); }
.fimp-preview-details td { color: rgba(15, 23, 42, 0.85); }
body[data-theme="dark"] .fimp-preview-details td { color: rgba(226, 232, 240, 0.85); }
.fimp-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.fimp-status {
min-height: 20px;
font-size: 13px;
color: rgba(15, 23, 42, 0.65);
}
.fimp-status.success { color: #22a06b; font-weight: 600; }
.fimp-status.error { color: #c0392b; font-weight: 600; }
body[data-theme="dark"] .fimp-status { color: rgba(226, 232, 240, 0.7); }
body[data-theme="dark"] .fimp-status.success { color: #4ade80; }
body[data-theme="dark"] .fimp-status.error { color: #f87171; }
/* ─────────────────────────────────────────────
Reporte ejecutivo (visible solo al imprimir)
───────────────────────────────────────────── */
#fexp-print-report { display: none; }
@media print {
/* Esconder TODO menos el reporte */
body * { visibility: hidden; }
#fexp-print-report,
#fexp-print-report * { visibility: visible; }
#fexp-print-report {
display: block !important;
position: absolute;
left: 0; top: 0;
width: 100%;
padding: 24px 32px;
background: #fff !important;
color: #062a33 !important;
font-family: Inter, system-ui, sans-serif;
}
}
.fpr-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #06a3b6;
padding-bottom: 12px;
margin-bottom: 18px;
}
.fpr-brand { display: flex; align-items: center; gap: 12px; }
.fpr-brand img { width: 44px; height: 44px; }
.fpr-brand h1 {
margin: 0;
font-size: 18px;
color: #062a33;
font-family: "Bricolage Grotesque", system-ui, sans-serif;
font-weight: 800;
}
.fpr-brand .fpr-sub {
font-size: 12px;
color: #5a7480;
margin-top: 2px;
}
.fpr-meta {
text-align: right;
font-size: 11px;
color: #5a7480;
line-height: 1.5;
}
.fpr-meta strong { color: #062a33; }
.fpr-title {
font-family: "Bricolage Grotesque", system-ui, sans-serif;
font-size: 22px;
font-weight: 800;
color: #06a3b6;
margin: 0 0 6px;
}
.fpr-period {
font-size: 13px;
color: #5a7480;
margin-bottom: 18px;
}
.fpr-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 22px;
}
.fpr-kpi {
border: 1px solid #e8e8e8;
border-radius: 8px;
padding: 10px 12px;
}
.fpr-kpi.fpr-kpi-highlight { background: #06a3b6; color: #fff; border-color: #06a3b6; }
.fpr-kpi-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: #5a7480;
}
.fpr-kpi.fpr-kpi-highlight .fpr-kpi-label { color: rgba(255,255,255,.85); }
.fpr-kpi-value {
font-family: "JetBrains Mono", monospace;
font-size: 18px;
font-weight: 700;
color: #062a33;
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
.fpr-kpi.fpr-kpi-highlight .fpr-kpi-value { color: #fff; }
.fpr-section-title {
font-family: "Bricolage Grotesque", system-ui, sans-serif;
font-size: 14px;
font-weight: 700;
color: #062a33;
margin: 18px 0 10px;
border-bottom: 1px solid #e8e8e8;
padding-bottom: 4px;
}
table.fpr-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
table.fpr-table th,
table.fpr-table td {
padding: 8px 10px;
border-bottom: 1px solid #e8e8e8;
}
table.fpr-table th {
background: #f0f4f8;
text-align: left;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #5a7480;
}
table.fpr-table td.num {
font-family: "JetBrains Mono", monospace;
text-align: right;
font-variant-numeric: tabular-nums;
}
table.fpr-table tfoot td {
font-weight: 700;
border-top: 2px solid #06a3b6;
border-bottom: none;
background: #f0f4f8;
}
.fpr-footer {
margin-top: 22px;
padding-top: 10px;
border-top: 1px solid #e8e8e8;
font-size: 10.5px;
color: #5a7480;
text-align: center;
}
/* ─────────────────────────────────────────────
Dashboard de Finanzas — KPIs + charts
───────────────────────────────────────────── */
/* Hero KPI — Neto Real, protagonista arriba del dashboard */
.fd-hero-kpi {
background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
border: 1px solid var(--cyan);
border-radius: 16px;
padding: 26px 30px;
color: #fff;
margin-bottom: 12px;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 6px;
}
.fd-hero-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.9px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.88);
}
.fd-hero-value {
font-family: var(--mono, "JetBrains Mono", monospace);
font-size: 44px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
color: #fff;
}
.fd-hero-value.negative {
color: #fee2e2;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.fd-hero-sub {
font-size: 13px;
color: rgba(255, 255, 255, 0.82);
font-weight: 500;
}
@media (max-width: 700px) {
.fd-hero-kpi { padding: 20px 22px; }
.fd-hero-value { font-size: 34px; }
}
/* Strip de métricas de apoyo */
.fd-metric-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
background: var(--card, #fff);
border: 1px solid var(--border, #e8e8e8);
border-radius: 14px;
padding: 14px 4px;
box-shadow: var(--shadow-sm);
margin-bottom: 20px;
}
.fd-metric {
padding: 4px 18px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
border-right: 1px solid var(--border, #e8e8e8);
min-width: 0;
}
.fd-metric:last-child { border-right: none; }
.fd-metric-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
color: var(--muted, #64748b);
}
.fd-metric-value {
font-family: var(--mono, "JetBrains Mono", monospace);
font-size: 18px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text, #1a1a1a);
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fd-metric-sub {
font-size: 11px;
color: var(--muted, #64748b);
font-weight: 500;
margin-top: 2px;
}
body[data-theme="dark"] .fd-metric-strip {
background: var(--card);
border-color: var(--border);
}
body[data-theme="dark"] .fd-metric { border-right-color: var(--border); }
@media (max-width: 1000px) {
.fd-metric-strip { grid-template-columns: repeat(3, 1fr); }
.fd-metric:nth-child(3) { border-right: none; }
.fd-metric:nth-child(4),
.fd-metric:nth-child(5) { border-top: 1px solid var(--border, #e8e8e8); margin-top: 8px; padding-top: 12px; }
body[data-theme="dark"] .fd-metric:nth-child(4),
body[data-theme="dark"] .fd-metric:nth-child(5) { border-top-color: var(--border); }
}
@media (max-width: 560px) {
.fd-metric-strip { grid-template-columns: repeat(2, 1fr); }
.fd-metric { border-right: 1px solid var(--border, #e8e8e8); }
.fd-metric:nth-child(2n),
.fd-metric:last-child { border-right: none; }
.fd-metric:nth-child(n+3) { border-top: 1px solid var(--border, #e8e8e8); margin-top: 8px; padding-top: 12px; }
}
.fd-charts-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
}
@media (max-width: 900px) {
.fd-charts-row { grid-template-columns: 1fr; }
}
.fd-chart-card {
background: var(--card, #fff);
border: 1px solid var(--border, #e8e8e8);
border-radius: 14px;
padding: 16px 18px 18px;
box-shadow: var(--shadow-sm);
position: relative;
}
body[data-theme="dark"] .fd-chart-card { background: var(--card); border-color: var(--border); }
.fd-chart-title {
margin: 0 0 12px;
font-family: var(--display, "Bricolage Grotesque");
font-size: 14px;
font-weight: 700;
color: var(--text, #1a1a1a);
letter-spacing: 0.3px;
}
.fd-chart-wrap {
position: relative;
height: 280px;
}
.fd-chart-empty {
position: absolute;
inset: 50px 16px 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted, #64748b);
font-size: 13px;
font-style: italic;
pointer-events: none;
}
/* ─────────────────────────────────────────────
Lista de Ingresos — filtros + summary bar
───────────────────────────────────────────── */
.fi-filters-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 14px;
align-items: center;
}
.fi-filter-group {
display: flex;
align-items: center;
gap: 6px;
}
.fi-filter-group label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.4px;
color: var(--muted, #64748b);
}
.fi-filter-select {
height: 34px;
padding: 0 30px 0 10px;
border: 1px solid var(--border, #d4d4d8);
border-radius: 6px;
background: var(--card, #fff);
color: var(--text, #1a1a1a);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
}
.fi-filter-select:hover { border-color: #06a3b6; }
.fi-filter-select:focus { outline: none; border-color: #06a3b6; box-shadow: 0 0 0 3px rgba(6,163,182,.15); }
body[data-theme="dark"] .fi-filter-select {
background-color: var(--card);
border-color: var(--border);
color: var(--text);
background-image: url("data:image/svg+xml;utf8,");
}
body[data-theme="dark"] .fi-filter-select option {
background: var(--card);
color: var(--text);
}
/* Rango personalizado — dos inputs date que aparecen al elegir "Personalizado" */
.fi-custom-range {
display: flex;
align-items: center;
gap: 6px;
}
.fi-custom-range[hidden] { display: none; }
.fi-custom-input {
width: 120px;
height: 34px;
padding: 0 10px;
border: 1px solid var(--border, #d4d4d8);
border-radius: 6px;
background: var(--card, #fff);
color: var(--text, #1a1a1a);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.fi-custom-input:focus {
outline: none;
border-color: #06a3b6;
box-shadow: 0 0 0 3px rgba(6, 163, 182, 0.15);
}
.fi-custom-sep {
color: var(--muted, #64748b);
font-size: 14px;
}
body[data-theme="dark"] .fi-custom-input {
background: var(--card);
border-color: var(--border);
color: var(--text);
color-scheme: dark;
}
.fi-summary-bar {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 12px 18px;
margin-bottom: 14px;
background: linear-gradient(135deg, rgba(6,163,182,.06), rgba(6,163,182,.02));
border: 1px solid rgba(6,163,182,.18);
border-radius: 10px;
font-size: 13px;
}
body[data-theme="dark"] .fi-summary-bar {
background: linear-gradient(135deg, rgba(6,163,182,.12), rgba(6,163,182,.04));
border-color: rgba(6,163,182,.32);
}
.fi-sum-item {
display: flex;
align-items: center;
gap: 8px;
}
.fi-sum-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--muted, #64748b);
}
.fi-sum-value {
font-family: var(--mono, "JetBrains Mono", monospace);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text, #1a1a1a);
}
.fi-sum-value.fi-sum-ganancia { color: var(--cyan, #06a3b6); }
.fi-sum-value.fi-sum-ganancia.negative { color: #c0392b; }
body[data-theme="dark"] .fi-sum-value { color: var(--text); }
body[data-theme="dark"] .fi-sum-value.fi-sum-ganancia { color: #3dbccc; }
/* Indicador de paginación arriba de la tabla de Ingresos */
.fi-page-info {
font-size: 12px;
color: rgba(15, 23, 42, 0.55);
margin: 6px 0 4px;
padding-left: 4px;
}
body[data-theme="dark"] .fi-page-info { color: rgba(226, 232, 240, 0.6); }
/* Celdas custom de la tabla de Ingresos */
.fi-cell-money {
font-family: var(--mono, "JetBrains Mono", monospace);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.fi-cell-ganancia { color: var(--cyan, #06a3b6); }
.fi-cell-ganancia.negative { color: #c0392b; }
body[data-theme="dark"] .fi-cell-ganancia { color: #3dbccc; }
.fi-cat-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3px;
}
.fi-cat-COMISSION { background: rgba(34,160,107,.12); color: #1e8456; }
.fi-cat-OVERRIDES { background: rgba(232,163,23,.15); color: #946614; }
.fi-cat-HERO { background: rgba(6,163,182,.12); color: #048395; }
body[data-theme="dark"] .fi-cat-COMISSION { background: rgba(34,160,107,.20); color: #6dd9a0; }
body[data-theme="dark"] .fi-cat-OVERRIDES { background: rgba(232,163,23,.22); color: #f3c969; }
body[data-theme="dark"] .fi-cat-HERO { background: rgba(6,163,182,.22); color: #5fd0e0; }
#fi-table .tabulator-row { cursor: pointer; }
#fi-table .fc-actions { cursor: default; }
/* ─────────────────────────────────────────────
Modal Nuevo Ingreso — payouts dinámicos + resumen
───────────────────────────────────────────── */
.fi-section-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--muted, #777);
margin: 8px 0 -4px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border, #e8e8e8);
}
body[data-theme="dark"] .fi-section-title { color: var(--text-2); border-bottom-color: var(--border); }
.fi-row-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
}
@media (max-width: 700px) {
.fi-row-3 { grid-template-columns: 1fr; }
}
.fi-payouts-empty {
font-size: 13px;
color: var(--muted, #777);
font-style: italic;
padding: 12px 0;
}
.fi-payouts-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.fi-payout-row {
display: grid;
grid-template-columns: minmax(140px, 1.4fr) minmax(140px, 1.6fr) 110px 32px;
gap: 10px;
align-items: end;
padding: 12px;
background: var(--paper, #f0f4f8);
border: 1px solid var(--border, #e8e8e8);
border-radius: 10px;
}
body[data-theme="dark"] .fi-payout-row {
background: var(--paper-2);
border-color: var(--border);
}
@media (max-width: 700px) {
.fi-payout-row {
grid-template-columns: 1fr 32px;
grid-template-areas:
"broker remove"
"reporte reporte"
"saldo saldo";
}
.fi-payout-row .fi-pf-broker { grid-area: broker; }
.fi-payout-row .fi-pf-reporte { grid-area: reporte; }
.fi-payout-row .fi-pf-saldo { grid-area: saldo; }
.fi-payout-row .fi-pf-remove { grid-area: remove; align-self: start; margin-top: 22px; }
}
.fi-pf-remove {
background: transparent;
border: 1px solid var(--border, #e8e8e8);
border-radius: 6px;
width: 32px; height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--muted, #777);
font-size: 14px;
transition: all 0.15s ease;
padding: 0;
}
.fi-pf-remove:hover {
background: rgba(192, 57, 43, 0.08);
color: #c0392b;
border-color: rgba(192, 57, 43, 0.3);
}
.fi-add-payout-btn {
align-self: flex-start;
margin-top: 4px;
background: transparent;
border: 1px dashed var(--border, #cbd5e1);
color: var(--cyan, #06a3b6);
border-radius: 8px;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.15s ease;
}
.fi-add-payout-btn:hover {
border-color: var(--cyan, #06a3b6);
background: rgba(6, 163, 182, 0.06);
}
.fi-summary {
background: linear-gradient(135deg, rgba(6,163,182,.08), rgba(6,163,182,.02));
border: 1px solid rgba(6,163,182,.18);
border-radius: 12px;
padding: 14px 16px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
body[data-theme="dark"] .fi-summary {
background: linear-gradient(135deg, rgba(6,163,182,.14), rgba(6,163,182,.04));
border-color: rgba(6,163,182,.32);
}
.fi-summary-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.fi-summary-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--muted, #777);
}
.fi-summary-value {
font-family: var(--mono, "JetBrains Mono", monospace);
font-size: 18px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text, #1a1a1a);
}
.fi-summary-value.fi-ganancia {
color: var(--cyan, #06a3b6);
}
.fi-summary-value.fi-ganancia.negative {
color: #c0392b;
}
body[data-theme="dark"] .fi-summary-value { color: var(--text); }
body[data-theme="dark"] .fi-summary-value.fi-ganancia { color: #3dbccc; }
.fi-mes-pill {
display: inline-block;
background: rgba(6,163,182,.10);
color: var(--cyan, #06a3b6);
font-family: var(--mono, "JetBrains Mono", monospace);
font-size: 12px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
margin-left: 8px;
vertical-align: middle;
}
body[data-theme="dark"] .fi-mes-pill {
background: rgba(6,163,182,.22);
color: #5fd0e0;
}
/* sl-dialog ancho para Nuevo Ingreso */
sl-dialog.fi-modal::part(panel) {
width: 720px;
max-width: 95vw;
}
/* Select nativo (usado en el modal en vez de sl-select para evitar
choques con sl-dialog). Estilo aproximado al de Shoelace. */
.fc-native-field {
display: flex;
flex-direction: column;
}
.fc-native-label {
display: block;
font-size: 14px;
font-weight: 400;
color: var(--text, #1a1a1a);
margin-bottom: 6px;
line-height: 1.4;
}
.fc-native-select {
width: 100%;
height: 40px;
padding: 0 32px 0 12px;
border: 1px solid var(--border, #d4d4d8);
border-radius: 4px;
background: var(--card, #fff);
color: var(--text, #1a1a1a);
font-family: inherit;
font-size: 14px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
}
.fc-native-select:hover {
border-color: #06a3b6;
}
.fc-native-select:focus {
outline: none;
border-color: #06a3b6;
box-shadow: 0 0 0 3px rgba(6, 163, 182, 0.15);
}
body[data-theme="dark"] .fc-native-label {
color: var(--text);
}
body[data-theme="dark"] .fc-native-select {
background-color: var(--card);
border-color: var(--border);
color: var(--text);
background-image: url("data:image/svg+xml;utf8,");
}
body[data-theme="dark"] .fc-native-select option {
background: var(--card);
color: var(--text);
}
/* Input nativo type="date" — sin chevron, con color-scheme para que el
picker del SO respete el tema oscuro. */
.fc-native-date {
width: 100%;
height: 40px;
padding: 0 12px;
border: 1px solid var(--border, #d4d4d8);
border-radius: 4px;
background: var(--card, #fff);
color: var(--text, #1a1a1a);
font-family: inherit;
font-size: 14px;
cursor: pointer;
}
.fc-native-date:hover { border-color: #06a3b6; }
.fc-native-date:focus {
outline: none;
border-color: #06a3b6;
box-shadow: 0 0 0 3px rgba(6, 163, 182, 0.15);
}
body[data-theme="dark"] .fc-native-date {
background: var(--card);
border-color: var(--border);
color: var(--text);
color-scheme: dark;
}
/* Opción "+ Agregar nuevo..." dentro de selects */
option.fi-add-new-option {
font-style: italic;
color: var(--cyan, #06a3b6);
font-weight: 600;
}
/* Formulario inline para agregar valor nuevo a un dropdown */
.fi-add-inline {
display: flex;
gap: 8px;
margin-top: 8px;
align-items: stretch;
}
.fi-add-inline-input {
flex: 1;
height: 36px;
padding: 0 12px;
border: 1px solid var(--cyan, #06a3b6);
border-radius: 4px;
background: var(--card, #fff);
color: var(--text, #1a1a1a);
font-family: inherit;
font-size: 14px;
text-transform: uppercase;
}
.fi-add-inline-input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(6, 163, 182, 0.15);
}
.fi-add-inline-save {
background: var(--cyan, #06a3b6);
color: #fff;
border: none;
border-radius: 4px;
padding: 0 14px;
font-weight: 600;
font-size: 13px;
font-family: inherit;
cursor: pointer;
transition: background 0.15s;
}
.fi-add-inline-save:hover:not(:disabled) { background: var(--cyan-2, #0891a3); }
.fi-add-inline-save:disabled { opacity: 0.6; cursor: not-allowed; }
.fi-add-inline-cancel {
background: transparent;
border: 1px solid var(--border, #e8e8e8);
border-radius: 4px;
width: 36px;
color: var(--muted, #777);
cursor: pointer;
font-size: 14px;
}
.fi-add-inline-cancel:hover {
color: var(--text, #1a1a1a);
border-color: var(--muted, #777);
}
body[data-theme="dark"] .fi-add-inline-input {
background: var(--card);
color: var(--text);
}
body[data-theme="dark"] .fi-add-inline-cancel {
background: transparent;
border-color: var(--border);
color: var(--text-2);
}
/* ─────────────────────────────────────────────
Tabulator — contenedor
Las reglas globales (.tabulator, dark mode incluido) viven
en audit-panel.css, que también se carga en finanzas.html.
Acá refuerzo el dark mode scoped a #fc-table porque el tema
modern de Tabulator puede llegar a ganar la cascada.
───────────────────────────────────────────── */
#fc-table {
background: var(--card, #fff);
border: 1px solid var(--border, #e8e8e8);
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow);
}
body[data-theme="dark"] #fc-table {
border-color: var(--border);
}
/* Dark mode — solo celdas custom específicas de Finanzas.
Los overrides globales de .tabulator (header, rows, cells, paginación)
viven en audit-panel.css y se aplican a #fc-table automáticamente. */
body[data-theme="dark"] #fc-table .fc-tasa-cell {
color: var(--text);
}
body[data-theme="dark"] #fc-table .fc-notes-cell {
color: var(--text-2);
}
body[data-theme="dark"] #fc-table .fc-empty {
color: var(--muted);
}
body[data-theme="dark"] #fc-table .fc-act-btn {
color: var(--text-2);
}
body[data-theme="dark"] #fc-table .fc-act-btn:hover {
background: rgba(255,255,255,0.06);
color: var(--text);
border-color: var(--border);
}
/* ─────────────────────────────────────────────
Botón de tema (Día/Noche) en el header
───────────────────────────────────────────── */
.fc-theme-toggle {
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--paper, #f0f4f8);
border: 1px solid var(--border, #e8e8e8);
color: var(--text, #1a1a1a);
cursor: pointer;
transition: all 0.15s ease;
padding: 0;
}
.fc-theme-toggle:hover {
border-color: var(--cyan, #06a3b6);
color: var(--cyan, #06a3b6);
}
.fc-theme-toggle i[data-lucide],
.fc-theme-toggle svg { width: 18px; height: 18px; }
body[data-theme="dark"] .fc-theme-toggle {
background: var(--card);
border-color: var(--border);
color: var(--text);
}
body[data-theme="dark"] .fc-theme-toggle:hover {
border-color: var(--cyan);
color: var(--cyan);
}
/* ─────────────────────────────────────────────
Botón ✉ en Lista de Ingresos
───────────────────────────────────────────── */
.fc-act-btn.fc-email:hover {
color: var(--cyan, #06a3b6);
border-color: rgba(6, 163, 182, 0.3);
background: rgba(6, 163, 182, 0.08);
}
.fc-act-btn.fc-email.sent {
color: #22a06b;
}
.fc-act-btn.fc-email.sent:hover {
border-color: rgba(34, 160, 107, 0.3);
background: rgba(34, 160, 107, 0.08);
}
body[data-theme="dark"] .fc-act-btn.fc-email:hover {
background: rgba(6, 163, 182, 0.15);
}
body[data-theme="dark"] .fc-act-btn.fc-email.sent:hover {
background: rgba(34, 160, 107, 0.18);
}
/* ─────────────────────────────────────────────
Modal "Enviar reporte a brokers" (fi-em-*)
───────────────────────────────────────────── */
.fi-email-modal::part(panel) {
max-width: 600px;
}
.fi-em-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.fi-em-intro {
padding: 14px 16px;
border-radius: 10px;
background: var(--paper, #f0f4f8);
border: 1px solid var(--border, #e8e8e8);
}
.fi-em-desc {
font-family: var(--display, "Bricolage Grotesque"), system-ui, sans-serif;
font-size: 17px;
font-weight: 700;
color: var(--text, #1a1a1a);
margin-bottom: 4px;
}
.fi-em-meta {
font-size: 12px;
color: var(--muted, #777);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.fi-em-meta-dot {
opacity: 0.5;
}
.fi-em-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.fi-em-row {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid var(--border, #e8e8e8);
background: var(--card, #fff);
transition: border-color 0.15s ease, background 0.15s ease;
}
.fi-em-row.disabled {
opacity: 0.6;
}
.fi-em-row.sent {
border-color: rgba(34, 160, 107, 0.4);
background: rgba(34, 160, 107, 0.04);
}
.fi-em-row-main {
flex: 1 1 auto;
min-width: 0;
}
.fi-em-broker {
font-weight: 700;
color: var(--text, #1a1a1a);
margin-bottom: 2px;
}
.fi-em-email {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
color: var(--cyan, #06a3b6);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fi-em-email-input {
width: 100%;
font-family: "JetBrains Mono", monospace;
font-size: 12px;
padding: 6px 10px;
border: 1px solid var(--border, #e8e8e8);
border-radius: 8px;
background: var(--card, #fff);
color: var(--text, #1a1a1a);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fi-em-email-input:focus {
outline: none;
border-color: var(--cyan, #06a3b6);
box-shadow: 0 0 0 3px rgba(6, 163, 182, 0.12);
}
.fi-em-email-input::placeholder { color: var(--muted, #aaa); }
body[data-theme="dark"] .fi-em-email-input {
background: var(--paper);
border-color: var(--border);
color: var(--text);
}
body[data-theme="dark"] .fi-em-email-input:focus {
background: var(--card);
}
/* Mini-modal de 1 payout */
.fi-em-single-payout {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 16px;
border-radius: 10px;
background: var(--card, #fff);
border: 1px solid var(--border, #e8e8e8);
}
.fi-em-single-broker,
.fi-em-single-saldo {
display: flex;
flex-direction: column;
gap: 2px;
}
.fi-em-single-saldo { text-align: right; }
.fi-em-single-broker-lbl,
.fi-em-single-saldo-lbl {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--cyan, #06a3b6);
}
.fi-em-single-broker-val {
font-size: 15px;
font-weight: 700;
color: var(--text, #1a1a1a);
}
.fi-em-single-saldo-val {
font-family: "JetBrains Mono", monospace;
font-size: 18px;
font-weight: 700;
color: var(--text, #1a1a1a);
}
.fi-em-resend-note {
padding: 10px 14px;
border-radius: 8px;
background: rgba(232, 163, 23, 0.08);
border-left: 3px solid #e8a317;
font-size: 12px;
color: var(--text, #1a1a1a);
line-height: 1.5;
}
body[data-theme="dark"] .fi-em-single-payout {
background: var(--paper);
border-color: var(--border);
}
body[data-theme="dark"] .fi-em-resend-note {
background: rgba(232, 163, 23, 0.12);
color: var(--text);
}
.fi-em-row-side {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.fi-em-saldo {
font-family: "JetBrains Mono", monospace;
font-weight: 700;
font-size: 14px;
color: var(--text, #1a1a1a);
text-align: right;
min-width: 80px;
}
.fi-em-status-cell {
min-width: 130px;
text-align: right;
}
.fi-em-sent-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #22a06b;
background: rgba(34, 160, 107, 0.1);
padding: 3px 8px;
border-radius: 6px;
white-space: nowrap;
}
.fi-em-warn {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #c0392b;
background: rgba(192, 57, 43, 0.1);
padding: 3px 8px;
border-radius: 6px;
white-space: nowrap;
}
.fi-em-send-btn {
background: var(--cyan, #06a3b6);
color: #fff;
border: 0;
border-radius: 8px;
font-weight: 700;
font-size: 13px;
padding: 8px 16px;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
min-width: 92px;
}
.fi-em-send-btn:hover:not(:disabled) {
background: #048395;
}
.fi-em-send-btn:active:not(:disabled) {
transform: translateY(1px);
}
.fi-em-send-btn:disabled {
background: var(--muted, #bbb);
cursor: not-allowed;
}
.fi-em-row.sent .fi-em-send-btn {
background: transparent;
color: var(--cyan, #06a3b6);
border: 1px solid var(--cyan, #06a3b6);
}
.fi-em-row.sent .fi-em-send-btn:hover:not(:disabled) {
background: rgba(6, 163, 182, 0.08);
}
.fi-em-status {
min-height: 22px;
font-size: 13px;
padding: 8px 0 0;
text-align: center;
}
.fi-em-status.success { color: #22a06b; font-weight: 600; }
.fi-em-status.error { color: #c0392b; font-weight: 600; }
/* Dark mode */
body[data-theme="dark"] .fi-em-intro {
background: var(--paper);
border-color: var(--border);
}
body[data-theme="dark"] .fi-em-row {
background: var(--card);
border-color: var(--border);
}
body[data-theme="dark"] .fi-em-row.sent {
background: rgba(34, 160, 107, 0.08);
border-color: rgba(34, 160, 107, 0.35);
}
body[data-theme="dark"] .fi-em-sent-tag {
background: rgba(34, 160, 107, 0.18);
}
body[data-theme="dark"] .fi-em-warn {
background: rgba(192, 57, 43, 0.18);
}
body[data-theme="dark"] .fi-email-modal {
--sl-panel-background-color: var(--card);
--sl-color-neutral-0: var(--card);
--sl-color-neutral-1000: var(--text);
}
/* ═══════════════════════════════════════════════════════════
FASE 1: Carrier + Tipo destinatario + Modal view/edit
═══════════════════════════════════════════════════════════ */
/* Badge del carrier en la tabla de ingresos */
.fi-carrier-badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
background: rgba(6, 163, 182, 0.10);
color: #0891a3;
border: 1px solid rgba(6, 163, 182, 0.22);
}
body[data-theme="dark"] .fi-carrier-badge {
background: rgba(6, 163, 182, 0.18);
color: #67e8f9;
border-color: rgba(6, 163, 182, 0.35);
}
/* Badge de tipo (agencia / broker) — usado en la tabla y en el modal */
.fb-tipo-badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.fb-tipo-agencia {
background: rgba(147, 51, 234, 0.10);
color: #7c3aed;
border: 1px solid rgba(147, 51, 234, 0.30);
}
.fb-tipo-broker {
background: rgba(232, 163, 23, 0.12);
color: #b8860b;
border: 1px solid rgba(232, 163, 23, 0.35);
}
body[data-theme="dark"] .fb-tipo-agencia {
background: rgba(167, 139, 250, 0.15);
color: #c4b5fd;
border-color: rgba(167, 139, 250, 0.35);
}
body[data-theme="dark"] .fb-tipo-broker {
background: rgba(255, 209, 102, 0.15);
color: #fcd34d;
border-color: rgba(255, 209, 102, 0.35);
}
/* Radios de tipo (usado en modal Agencia/Broker y en payout rows) */
.fb-tipo-radios,
.fi-payout-tipo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 4px;
}
.fb-tipo-radio,
.fi-payout-tipo-radio {
display: block;
padding: 10px 14px;
border: 1.5px solid var(--border, #e2e8f0);
border-radius: 10px;
background: var(--card, #fff);
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.fb-tipo-radio input,
.fi-payout-tipo-radio input {
margin-right: 8px;
accent-color: #06a3b6;
}
.fb-tipo-radio span,
.fi-payout-tipo-radio span {
font-weight: 600;
font-size: 13.5px;
}
.fb-tipo-radio small {
display: block;
font-size: 11.5px;
color: rgba(15, 23, 42, 0.55);
margin-top: 4px;
margin-left: 22px;
font-weight: 400;
line-height: 1.35;
}
.fb-tipo-radio:hover,
.fi-payout-tipo-radio:hover {
border-color: rgba(6, 163, 182, 0.4);
}
.fb-tipo-radio.is-active,
.fi-payout-tipo-radio.is-active {
border-color: #06a3b6;
background: rgba(6, 163, 182, 0.06);
}
body[data-theme="dark"] .fb-tipo-radio,
body[data-theme="dark"] .fi-payout-tipo-radio {
background: var(--card);
border-color: var(--border);
}
body[data-theme="dark"] .fb-tipo-radio small {
color: rgba(226, 232, 240, 0.55);
}
body[data-theme="dark"] .fb-tipo-radio.is-active,
body[data-theme="dark"] .fi-payout-tipo-radio.is-active {
background: rgba(6, 163, 182, 0.14);
}
/* Payout tipo — versión compacta en el payout row */
.fi-payout-tipo {
grid-column: 1 / -1;
margin-bottom: 6px;
}
.fi-payout-tipo-radio {
padding: 6px 12px;
}
.fi-payout-tipo-radio span {
font-size: 12.5px;
}
/* Row de 2 columnas (Carrier + Monto) */
.fi-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
align-items: end;
}
@media (max-width: 640px) {
.fi-row-2 { grid-template-columns: 1fr; }
}
/* ─── Modal Ingreso: modo lectura ─── */
.fi-view-topbar {
display: flex;
justify-content: flex-end;
margin-bottom: 4px;
}
.fi-edit-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid #06a3b6;
background: rgba(6, 163, 182, 0.08);
color: #06a3b6;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.fi-edit-btn:hover {
background: #06a3b6;
color: #fff;
}
body[data-theme="dark"] .fi-edit-btn {
color: #67e8f9;
border-color: #67e8f9;
background: rgba(6, 163, 182, 0.12);
}
body[data-theme="dark"] .fi-edit-btn:hover {
background: #06a3b6;
color: #fff;
}
/* En modo view, los inputs disabled/readonly se ven "atenuados pero legibles" */
.fi-mode-view .fc-native-date:disabled,
.fi-mode-view .fc-native-select:disabled {
background: rgba(15, 23, 42, 0.04);
color: rgba(15, 23, 42, 0.85);
cursor: default;
border-style: dashed;
opacity: 1;
}
body[data-theme="dark"] .fi-mode-view .fc-native-date:disabled,
body[data-theme="dark"] .fi-mode-view .fc-native-select:disabled {
background: rgba(226, 232, 240, 0.04);
color: rgba(226, 232, 240, 0.85);
}
.fi-mode-view sl-input::part(input),
.fi-mode-view sl-textarea::part(textarea) {
cursor: default;
}
/* Payout row en modo view (card compacta con acciones) */
.fi-payout-row-view {
padding: 12px 14px;
border: 1px solid var(--border, #e2e8f0);
border-radius: 10px;
margin-bottom: 8px;
background: rgba(15, 23, 42, 0.02);
}
body[data-theme="dark"] .fi-payout-row-view {
background: rgba(226, 232, 240, 0.04);
border-color: var(--border);
}
.fi-view-payout-head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.fi-view-broker {
font-weight: 700;
font-size: 14px;
color: var(--text, #0f172a);
flex: 1;
min-width: 0;
}
.fi-view-email-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid #06a3b6;
background: #fff;
color: #06a3b6;
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.fi-view-email-btn:hover {
background: #06a3b6;
color: #fff;
}
body[data-theme="dark"] .fi-view-email-btn {
background: var(--card);
color: #67e8f9;
border-color: #67e8f9;
}
body[data-theme="dark"] .fi-view-email-btn:hover {
background: #06a3b6;
color: #fff;
}
.fi-view-payout-body {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 10px;
font-size: 13px;
color: rgba(15, 23, 42, 0.75);
}
body[data-theme="dark"] .fi-view-payout-body {
color: rgba(226, 232, 240, 0.8);
}
@media (max-width: 640px) {
.fi-view-payout-body { grid-template-columns: 1fr; }
}
.fi-view-label {
font-size: 11px;
font-weight: 700;
color: rgba(15, 23, 42, 0.5);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: 4px;
}
body[data-theme="dark"] .fi-view-label {
color: rgba(226, 232, 240, 0.55);
}
.fi-view-sent {
color: #22a06b;
font-weight: 600;
}
.fi-view-sent-none {
color: rgba(15, 23, 42, 0.5);
font-style: italic;
}
body[data-theme="dark"] .fi-view-sent-none {
color: rgba(226, 232, 240, 0.5);
}
/* Toggle view/edit para elementos duales (input date + span estático) */
.fi-mode-view .fi-edit-only { display: none !important; }
.fi-mode-edit .fi-view-only { display: none !important; }
/* Fecha estática en modo view (muestra MM/DD/YYYY sin depender del navegador) */
.fc-native-static {
padding: 8px 12px;
border: 1.5px dashed var(--border, #e2e8f0);
border-radius: 8px;
background: rgba(15, 23, 42, 0.03);
color: var(--text, #0f172a);
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
font-weight: 600;
}
body[data-theme="dark"] .fc-native-static {
background: rgba(226, 232, 240, 0.04);
color: rgba(226, 232, 240, 0.9);
border-color: var(--border);
}
/* ═══════════════════════════════════════════════════════════
EXPORTAR PERSONALIZADO — form único (v2.12)
═══════════════════════════════════════════════════════════ */
.fexp-form {
background: var(--card, #fff);
border: 1px solid var(--border, #e2e8f0);
border-radius: 16px;
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: 24px;
}
body[data-theme="dark"] .fexp-form {
background: var(--card);
border-color: var(--border);
}
.fexp-step {
display: flex;
flex-direction: column;
gap: 12px;
}
.fexp-step-label {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--text, #0f172a);
padding-bottom: 6px;
border-bottom: 1px dashed var(--border, #e2e8f0);
}
.fexp-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
border-radius: 50%;
background: #06a3b6;
color: #fff;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 700;
}
.fexp-cols-actions {
margin-left: auto;
display: flex;
gap: 6px;
}
/* Radios grandes (Paso 1) — tarjetas seleccionables */
.fexp-radios {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
@media (max-width: 700px) {
.fexp-radios { grid-template-columns: 1fr; }
}
.fexp-radio {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border: 1.5px solid var(--border, #e2e8f0);
border-radius: 12px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
background: var(--card, #fff);
}
.fexp-radio input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.fexp-radio > i {
width: 22px; height: 22px;
color: rgba(15, 23, 42, 0.5);
flex-shrink: 0;
}
.fexp-radio:hover {
border-color: rgba(6, 163, 182, 0.4);
}
.fexp-radio.is-active {
border-color: #06a3b6;
background: rgba(6, 163, 182, 0.06);
}
.fexp-radio.is-active > i {
color: #06a3b6;
}
.fexp-radio-title {
font-size: 14px;
font-weight: 700;
color: var(--text, #0f172a);
}
.fexp-radio-sub {
font-size: 11.5px;
color: rgba(15, 23, 42, 0.55);
margin-top: 2px;
}
body[data-theme="dark"] .fexp-radio {
background: var(--card);
border-color: var(--border);
}
body[data-theme="dark"] .fexp-radio-sub { color: rgba(226, 232, 240, 0.55); }
body[data-theme="dark"] .fexp-radio.is-active {
background: rgba(6, 163, 182, 0.14);
}
body[data-theme="dark"] .fexp-radio > i { color: rgba(226, 232, 240, 0.55); }
body[data-theme="dark"] .fexp-radio.is-active > i { color: #67e8f9; }
/* Radios compactos (destTipo, formato) */
.fexp-radios-compact {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.fexp-radio-compact {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border: 1.5px solid var(--border, #e2e8f0);
border-radius: 999px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--text, #0f172a);
background: var(--card, #fff);
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.fexp-radio-compact input {
width: 0; height: 0; opacity: 0;
position: absolute;
pointer-events: none;
}
.fexp-radio-compact:hover {
border-color: rgba(6, 163, 182, 0.4);
}
.fexp-radio-compact.is-active {
border-color: #06a3b6;
background: #06a3b6;
color: #fff;
}
body[data-theme="dark"] .fexp-radio-compact {
background: var(--card);
color: var(--text);
border-color: var(--border);
}
body[data-theme="dark"] .fexp-radio-compact.is-active {
background: #06a3b6;
color: #fff;
border-color: #06a3b6;
}
/* Campo del formulario (label + valor) */
.fexp-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.fexp-field-label {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12.5px;
font-weight: 600;
color: rgba(15, 23, 42, 0.65);
text-transform: uppercase;
letter-spacing: 0.04em;
}
body[data-theme="dark"] .fexp-field-label {
color: rgba(226, 232, 240, 0.65);
}
.fexp-field-value {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.fexp-chip-all {
padding: 3px 10px;
font-size: 11px;
border-radius: 999px;
border: 1px solid var(--border, #e2e8f0);
background: transparent;
color: rgba(15, 23, 42, 0.65);
cursor: pointer;
text-transform: none;
letter-spacing: normal;
font-weight: 500;
transition: border-color 0.15s, color 0.15s;
}
.fexp-chip-all:hover {
border-color: #06a3b6;
color: #06a3b6;
}
body[data-theme="dark"] .fexp-chip-all { color: rgba(226, 232, 240, 0.65); }
/* Chips multiselect */
.fexp-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-height: 32px;
}
.fexp-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
border-radius: 999px;
border: 1.5px solid var(--border, #e2e8f0);
background: var(--card, #fff);
color: rgba(15, 23, 42, 0.5);
cursor: pointer;
font-size: 12.5px;
font-weight: 500;
transition: all 0.15s;
user-select: none;
}
.fexp-chip:hover {
border-color: rgba(6, 163, 182, 0.5);
}
.fexp-chip.is-active {
border-color: #06a3b6;
background: rgba(6, 163, 182, 0.10);
color: #0891a3;
font-weight: 600;
}
.fexp-chip.is-active::before {
content: "✓";
font-weight: 700;
margin-right: 2px;
}
body[data-theme="dark"] .fexp-chip {
background: var(--card);
color: rgba(226, 232, 240, 0.5);
border-color: var(--border);
}
body[data-theme="dark"] .fexp-chip.is-active {
background: rgba(6, 163, 182, 0.20);
color: #67e8f9;
border-color: #06a3b6;
}
.fexp-chips-empty {
font-size: 12px;
color: rgba(15, 23, 42, 0.4);
padding: 6px 2px;
font-style: italic;
}
body[data-theme="dark"] .fexp-chips-empty { color: rgba(226, 232, 240, 0.4); }
/* Columnas (checkboxes en grid) */
.fexp-cols {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 8px 16px;
padding: 6px 0;
}
.fexp-col {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
transition: background 0.12s;
font-size: 13px;
color: var(--text, #0f172a);
}
.fexp-col:hover { background: rgba(6, 163, 182, 0.05); }
.fexp-col input[type="checkbox"] {
accent-color: #06a3b6;
width: 16px; height: 16px;
cursor: pointer;
}
body[data-theme="dark"] .fexp-col:hover { background: rgba(6, 163, 182, 0.10); }
.fexp-mini-btn {
padding: 4px 10px;
font-size: 11.5px;
border-radius: 6px;
border: 1px solid var(--border, #e2e8f0);
background: transparent;
color: rgba(15, 23, 42, 0.7);
cursor: pointer;
font-family: inherit;
transition: border-color 0.15s, color 0.15s;
}
.fexp-mini-btn:hover {
border-color: #06a3b6;
color: #06a3b6;
}
body[data-theme="dark"] .fexp-mini-btn { color: rgba(226, 232, 240, 0.7); }
/* Action bar */
.fexp-action-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 20px;
border-top: 1.5px solid var(--border, #e2e8f0);
flex-wrap: wrap;
}
.fexp-preview-count {
font-size: 14px;
color: rgba(15, 23, 42, 0.75);
}
.fexp-preview-count strong {
color: #06a3b6;
font-family: 'JetBrains Mono', monospace;
font-size: 16px;
}
body[data-theme="dark"] .fexp-preview-count { color: rgba(226, 232, 240, 0.75); }
body[data-theme="dark"] .fexp-preview-count strong { color: #67e8f9; }
/* Card del Resumen ejecutivo (fuera del form) */
.fexp-report-card {
display: flex;
align-items: center;
gap: 18px;
background: var(--card, #fff);
border: 1px solid var(--border, #e2e8f0);
border-radius: 14px;
padding: 18px 22px;
margin-top: 20px;
}
body[data-theme="dark"] .fexp-report-card {
background: var(--card);
border-color: var(--border);
}
.fexp-report-icon {
flex-shrink: 0;
width: 44px; height: 44px;
border-radius: 12px;
background: rgba(6, 163, 182, 0.10);
color: #06a3b6;
display: flex; align-items: center; justify-content: center;
}
.fexp-report-icon i { width: 20px; height: 20px; }
.fexp-report-body { flex: 1; min-width: 0; }
.fexp-report-body h3 {
margin: 0 0 4px;
font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--text, #0f172a);
}
.fexp-report-body p {
margin: 0;
font-size: 12.5px;
color: rgba(15, 23, 42, 0.65);
line-height: 1.4;
}
body[data-theme="dark"] .fexp-report-body p { color: rgba(226, 232, 240, 0.65); }
@media (max-width: 700px) {
.fexp-report-card { flex-direction: column; align-items: flex-start; }
}
/* ═══════════════════════════════════════════════════════════
EXPORTAR — WIZARD MULTI-PASO (v2.12.x)
═══════════════════════════════════════════════════════════ */
.fexp-wizard {
background: var(--card, #fff);
border: 1px solid var(--border, #e2e8f0);
border-radius: 16px;
padding: 28px 32px 24px;
display: flex;
flex-direction: column;
gap: 20px;
}
body[data-theme="dark"] .fexp-wizard {
background: var(--card);
border-color: var(--border);
}
/* Barra de progreso ────────────────────────────────── */
.fexp-progress {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 0 18px;
border-bottom: 1px dashed var(--border, #e2e8f0);
}
.fexp-progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex-shrink: 0;
min-width: 56px;
cursor: pointer;
transition: opacity 0.15s;
}
.fexp-progress-step .num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
border-radius: 50%;
border: 2px solid var(--border, #e2e8f0);
background: var(--card, #fff);
color: rgba(15, 23, 42, 0.5);
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
font-size: 13px;
transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.fexp-progress-step .label {
font-size: 10.5px;
font-weight: 600;
color: rgba(15, 23, 42, 0.5);
text-transform: uppercase;
letter-spacing: 0.04em;
transition: color 0.15s;
}
.fexp-progress-step.is-done .num {
background: rgba(6, 163, 182, 0.15);
border-color: #06a3b6;
color: #06a3b6;
}
.fexp-progress-step.is-done .num::after {
content: "✓";
font-size: 14px;
color: #06a3b6;
position: relative;
top: -1px;
}
.fexp-progress-step.is-done .num > * {
display: none; /* Ocultar el número al completar */
}
.fexp-progress-step.is-active .num {
background: #06a3b6;
border-color: #06a3b6;
color: #fff;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(6, 163, 182, 0.35);
}
.fexp-progress-step.is-active .label {
color: #06a3b6;
}
.fexp-progress-step.is-skipped { opacity: 0.35; pointer-events: none; }
.fexp-progress-step.is-skipped .num { border-style: dashed; }
.fexp-progress-conn {
flex: 1;
min-width: 12px;
height: 2px;
background: var(--border, #e2e8f0);
transition: background 0.2s;
margin: -18px 0 0;
border-radius: 1px;
}
.fexp-progress-conn.is-done { background: #06a3b6; }
body[data-theme="dark"] .fexp-progress-step .num {
background: var(--card);
border-color: var(--border);
color: rgba(226, 232, 240, 0.5);
}
body[data-theme="dark"] .fexp-progress-step .label { color: rgba(226, 232, 240, 0.5); }
body[data-theme="dark"] .fexp-progress-conn { background: var(--border); }
@media (max-width: 700px) {
.fexp-progress { overflow-x: auto; padding-bottom: 14px; }
.fexp-progress-step { min-width: 48px; }
.fexp-progress-step .label { display: none; }
}
/* Paneles de pasos ────────────────────────────────── */
.fexp-panels {
min-height: 260px;
}
.fexp-panel {
display: none;
flex-direction: column;
gap: 16px;
animation: fexp-fade-in 0.25s ease;
}
.fexp-panel.is-active { display: flex; }
@keyframes fexp-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.fexp-panel-header {
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
}
.fexp-panel-num {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 700;
color: #06a3b6;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.fexp-panel-title {
margin: 0;
font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
font-size: 22px;
font-weight: 700;
color: var(--text, #0f172a);
letter-spacing: -0.01em;
}
.fexp-panel-hint {
margin: 0;
font-size: 13.5px;
color: rgba(15, 23, 42, 0.65);
line-height: 1.5;
}
body[data-theme="dark"] .fexp-panel-hint { color: rgba(226, 232, 240, 0.65); }
.fexp-panel-header .fexp-cols-actions {
position: absolute;
right: 0; top: 0;
display: flex;
gap: 6px;
}
@media (max-width: 500px) {
.fexp-panel-header .fexp-cols-actions { position: static; margin-top: 6px; }
}
/* Navegación ────────────────────────────────── */
.fexp-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding-top: 14px;
border-top: 1px dashed var(--border, #e2e8f0);
}
.fexp-nav sl-button:last-child { margin-left: auto; }
/* Resumen final ────────────────────────────────── */
.fexp-final-summary {
margin-top: 12px;
padding: 14px 18px;
background: rgba(6, 163, 182, 0.06);
border: 1px solid rgba(6, 163, 182, 0.20);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
body[data-theme="dark"] .fexp-final-summary {
background: rgba(6, 163, 182, 0.14);
border-color: rgba(6, 163, 182, 0.30);
}
.fexp-final-label {
font-size: 12px;
font-weight: 700;
color: rgba(15, 23, 42, 0.65);
text-transform: uppercase;
letter-spacing: 0.04em;
}
body[data-theme="dark"] .fexp-final-label { color: rgba(226, 232, 240, 0.65); }
.fexp-final-count {
font-size: 14px;
color: var(--text, #0f172a);
}
.fexp-final-count strong {
font-family: 'JetBrains Mono', monospace;
font-size: 22px;
font-weight: 700;
color: #06a3b6;
margin-right: 2px;
}
body[data-theme="dark"] .fexp-final-count strong { color: #67e8f9; }
/* Preview persistente ────────────────────────────────── */
.fexp-preview-frame {
margin-top: 8px;
background: rgba(15, 23, 42, 0.02);
border: 1.5px dashed var(--border, #e2e8f0);
border-radius: 12px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
body[data-theme="dark"] .fexp-preview-frame {
background: rgba(226, 232, 240, 0.03);
border-color: var(--border);
}
.fexp-preview-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.fexp-preview-file {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 12.5px;
font-weight: 600;
color: #0891a3;
padding: 5px 12px;
background: rgba(6, 163, 182, 0.10);
border-radius: 6px;
}
.fexp-preview-file i { width: 14px; height: 14px; color: #22a06b; }
body[data-theme="dark"] .fexp-preview-file {
color: #67e8f9;
background: rgba(6, 163, 182, 0.20);
}
body[data-theme="dark"] .fexp-preview-file i { color: #4ade80; }
.fexp-preview-count {
font-size: 12px;
font-weight: 600;
color: rgba(15, 23, 42, 0.55);
text-transform: uppercase;
letter-spacing: 0.04em;
}
body[data-theme="dark"] .fexp-preview-count { color: rgba(226, 232, 240, 0.55); }
.fexp-preview-badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
min-height: 20px;
}
.fexp-preview-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
color: #0891a3;
background: rgba(6, 163, 182, 0.10);
border: 1px solid rgba(6, 163, 182, 0.22);
}
.fexp-preview-badge i { width: 10px; height: 10px; }
body[data-theme="dark"] .fexp-preview-badge {
color: #67e8f9;
background: rgba(6, 163, 182, 0.18);
border-color: rgba(6, 163, 182, 0.35);
}
.fexp-preview-badge-empty {
font-size: 11.5px;
color: rgba(15, 23, 42, 0.4);
font-style: italic;
}
body[data-theme="dark"] .fexp-preview-badge-empty { color: rgba(226, 232, 240, 0.4); }
.fexp-preview-table-wrap {
overflow-x: auto;
border-radius: 8px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: var(--card, #fff);
}
body[data-theme="dark"] .fexp-preview-table-wrap {
background: rgba(15, 23, 42, 0.3);
border-color: rgba(226, 232, 240, 0.08);
}
.fexp-preview-table {
width: 100%;
border-collapse: collapse;
font-size: 11.5px;
}
.fexp-preview-table th {
padding: 8px 10px;
text-align: left;
background: rgba(15, 23, 42, 0.04);
font-weight: 700;
color: rgba(15, 23, 42, 0.85);
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.04em;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
white-space: nowrap;
}
.fexp-preview-table td {
padding: 7px 10px;
color: rgba(15, 23, 42, 0.70);
border-bottom: 1px solid rgba(15, 23, 42, 0.05);
font-family: 'JetBrains Mono', monospace;
white-space: nowrap;
}
.fexp-preview-table tbody tr:last-child td { border-bottom: none; }
.fexp-preview-table tbody tr.is-ghost td { opacity: 0.45; font-style: italic; }
body[data-theme="dark"] .fexp-preview-table th {
background: rgba(226, 232, 240, 0.04);
color: rgba(226, 232, 240, 0.85);
border-bottom-color: rgba(226, 232, 240, 0.08);
}
body[data-theme="dark"] .fexp-preview-table td {
color: rgba(226, 232, 240, 0.7);
border-bottom-color: rgba(226, 232, 240, 0.05);
}
.fexp-preview-empty {
padding: 22px;
text-align: center;
color: rgba(15, 23, 42, 0.4);
font-size: 12px;
font-style: italic;
}
body[data-theme="dark"] .fexp-preview-empty { color: rgba(226, 232, 240, 0.4); }
.fexp-preview-footer {
font-size: 10.5px;
color: rgba(15, 23, 42, 0.4);
text-align: right;
font-style: italic;
}
body[data-theme="dark"] .fexp-preview-footer { color: rgba(226, 232, 240, 0.4); }
/* ═══════════════════════════════════════════════════════════
REPORTES DE PAGO — badge de estado + celda destinatario
═══════════════════════════════════════════════════════════ */
.fr-badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.fr-badge-borrador {
background: rgba(148, 163, 184, 0.15);
color: #64748b;
border: 1px solid rgba(148, 163, 184, 0.35);
}
.fr-badge-enviado {
background: rgba(6, 163, 182, 0.12);
color: #0891a3;
border: 1px solid rgba(6, 163, 182, 0.35);
}
.fr-badge-pagado {
background: rgba(34, 160, 107, 0.12);
color: #16a34a;
border: 1px solid rgba(34, 160, 107, 0.35);
}
body[data-theme="dark"] .fr-badge-borrador {
background: rgba(148, 163, 184, 0.2);
color: #cbd5e1;
border-color: rgba(203, 213, 225, 0.35);
}
body[data-theme="dark"] .fr-badge-enviado {
background: rgba(6, 163, 182, 0.22);
color: #67e8f9;
border-color: rgba(6, 163, 182, 0.45);
}
body[data-theme="dark"] .fr-badge-pagado {
background: rgba(34, 160, 107, 0.22);
color: #86efac;
border-color: rgba(34, 160, 107, 0.45);
}
.fr-dest {
display: flex;
flex-direction: column;
gap: 2px;
align-items: flex-start;
}
.fr-dest .fb-tipo-badge {
align-self: flex-start;
}
.fr-periodo {
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12px;
color: rgba(15, 23, 42, 0.72);
}
body[data-theme="dark"] .fr-periodo { color: rgba(226, 232, 240, 0.72); }
/* ─── Wizard Nuevo Reporte ────────────────────────────────── */
.fr-wizard-dialog::part(panel) { max-width: 900px; }
.fr-wizard { display: flex; flex-direction: column; gap: 20px; }
.fr-progress {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 0 12px;
}
.fr-progress-step {
display: flex;
align-items: center;
gap: 8px;
color: rgba(15, 23, 42, 0.5);
font-size: 12px;
font-weight: 600;
flex-shrink: 0;
}
.fr-progress-step .num {
width: 26px;
height: 26px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.2);
color: rgba(15, 23, 42, 0.55);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12px;
}
.fr-progress-step.is-active { color: #0891a3; }
.fr-progress-step.is-active .num { background: #06a3b6; color: #fff; }
.fr-progress-step.is-done .num { background: #22a06b; color: #fff; }
.fr-progress-conn {
flex: 1;
height: 2px;
background: rgba(148, 163, 184, 0.35);
min-width: 20px;
}
body[data-theme="dark"] .fr-progress-step { color: rgba(226, 232, 240, 0.55); }
body[data-theme="dark"] .fr-progress-step .num { background: rgba(148, 163, 184, 0.25); color: rgba(226, 232, 240, 0.7); }
body[data-theme="dark"] .fr-progress-step.is-active { color: #67e8f9; }
.fr-panels { min-height: 260px; }
.fr-panel { display: none; flex-direction: column; gap: 14px; }
.fr-panel.is-active { display: flex; }
.fr-panel-title { margin: 0; font-family: var(--display, "Bricolage Grotesque"), sans-serif; font-size: 20px; }
.fr-panel-hint { margin: -4px 0 0; color: rgba(15, 23, 42, 0.6); font-size: 13px; }
body[data-theme="dark"] .fr-panel-hint { color: rgba(226, 232, 240, 0.6); }
.fr-wz-ingresos-summary {
display: flex;
gap: 8px;
padding: 8px 0;
}
.fr-wz-chip {
padding: 4px 12px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.15);
color: rgba(15, 23, 42, 0.75);
font-size: 12px;
font-weight: 600;
}
.fr-wz-chip-total { background: rgba(34, 160, 107, 0.15); color: #16a34a; }
body[data-theme="dark"] .fr-wz-chip { background: rgba(148, 163, 184, 0.22); color: rgba(226, 232, 240, 0.75); }
body[data-theme="dark"] .fr-wz-chip-total { background: rgba(34, 160, 107, 0.22); color: #86efac; }
.fr-wz-ingresos-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 320px;
overflow-y: auto;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 10px;
padding: 8px;
background: rgba(240, 244, 248, 0.5);
}
body[data-theme="dark"] .fr-wz-ingresos-list {
background: rgba(15, 42, 51, 0.3);
border-color: rgba(148, 163, 184, 0.15);
}
.fr-wz-ing-row {
display: grid;
grid-template-columns: 24px 1fr auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: #fff;
border-radius: 8px;
cursor: pointer;
transition: background .15s;
border: 1px solid transparent;
}
.fr-wz-ing-row:hover { border-color: rgba(6, 163, 182, 0.35); }
body[data-theme="dark"] .fr-wz-ing-row { background: #0f2a33; }
.fr-wz-ing-line1 { display: flex; align-items: center; gap: 8px; }
.fr-wz-sep { color: rgba(15, 23, 42, 0.3); }
body[data-theme="dark"] .fr-wz-sep { color: rgba(226, 232, 240, 0.3); }
.fr-wz-ing-line2 { font-size: 12px; color: rgba(15, 23, 42, 0.6); margin-top: 2px; }
body[data-theme="dark"] .fr-wz-ing-line2 { color: rgba(226, 232, 240, 0.6); }
.fr-wz-ing-amt { font-family: "JetBrains Mono", monospace; font-weight: 700; color: #16a34a; }
body[data-theme="dark"] .fr-wz-ing-amt { color: #86efac; }
.fr-wz-empty {
text-align: center;
color: rgba(15, 23, 42, 0.55);
padding: 32px 16px;
font-style: italic;
}
body[data-theme="dark"] .fr-wz-empty { color: rgba(226, 232, 240, 0.55); }
.fr-wz-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 8px;
border-top: 1px solid rgba(148, 163, 184, 0.22);
gap: 10px;
}
.fr-wz-nav sl-button[hidden] { display: none; }
.fr-wz-preview {
background: rgba(240, 244, 248, 0.6);
border: 1px dashed rgba(148, 163, 184, 0.35);
border-radius: 12px;
padding: 16px;
max-height: 400px;
overflow-y: auto;
}
body[data-theme="dark"] .fr-wz-preview {
background: rgba(15, 42, 51, 0.3);
border-color: rgba(148, 163, 184, 0.25);
}
/* ─── Reporte formateado (usado en wizard preview, modal ver y print) ─── */
.fr-report {
background: #fff;
color: #0a3d4a;
border-radius: 12px;
padding: 32px;
font-family: var(--sans, "Inter"), sans-serif;
position: relative;
border: 1px solid rgba(148, 163, 184, 0.2);
max-width: 780px;
margin: 0 auto;
}
body[data-theme="dark"] .fr-report { background: #0f2a33; color: #e8f4f6; }
.fr-report-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 20px;
border-bottom: 2px solid #06a3b6;
margin-bottom: 20px;
}
.fr-report-brand { display: flex; align-items: center; gap: 12px; }
.fr-report-brand img { width: 44px; height: 44px; }
.fr-report-brand-name {
font-family: var(--display, "Bricolage Grotesque"), sans-serif;
font-size: 18px;
font-weight: 800;
letter-spacing: 0.02em;
}
.fr-report-brand-sub { font-size: 12px; color: rgba(15, 23, 42, 0.6); text-transform: uppercase; letter-spacing: 0.08em; }
body[data-theme="dark"] .fr-report-brand-sub { color: rgba(226, 232, 240, 0.6); }
.fr-report-meta { text-align: right; }
.fr-report-num {
font-family: "JetBrains Mono", monospace;
font-size: 20px;
font-weight: 700;
color: #06a3b6;
}
.fr-report-date { font-size: 12px; color: rgba(15, 23, 42, 0.6); margin-top: 4px; }
body[data-theme="dark"] .fr-report-date { color: rgba(226, 232, 240, 0.6); }
.fr-report-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
.fr-report-info-3col { grid-template-columns: 1.4fr 1fr 1.2fr; }
.fr-report-info-block { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.fr-report-info-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(15, 23, 42, 0.55);
font-weight: 600;
}
body[data-theme="dark"] .fr-report-info-label { color: rgba(226, 232, 240, 0.55); }
.fr-report-info-value {
font-family: var(--display, "Bricolage Grotesque"), sans-serif;
font-size: 18px;
font-weight: 700;
}
.fr-report-info-value-mes {
color: #06a3b6;
font-size: 20px;
letter-spacing: 0.02em;
}
body[data-theme="dark"] .fr-report-info-value-mes { color: #67e8f9; }
.fr-report-info-value-periodo {
font-family: "JetBrains Mono", monospace;
font-size: 13px;
font-weight: 600;
color: rgba(15, 23, 42, 0.75);
}
body[data-theme="dark"] .fr-report-info-value-periodo { color: rgba(226, 232, 240, 0.75); }
.fr-report-info-mes {
border-left: 3px solid rgba(6, 163, 182, 0.25);
padding-left: 14px;
}
/* Tag "mes contable" en la tabla + hint pequeño del wizard */
.fr-mes-tag {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 6px;
background: rgba(6, 163, 182, 0.10);
color: #0891a3;
font-family: "JetBrains Mono", monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
}
body[data-theme="dark"] .fr-mes-tag {
background: rgba(6, 163, 182, 0.20);
color: #67e8f9;
}
.fr-wz-hint-small {
margin: 6px 0 0;
font-size: 11px;
color: rgba(15, 23, 42, 0.55);
}
body[data-theme="dark"] .fr-wz-hint-small { color: rgba(226, 232, 240, 0.55); }
.fr-report-table {
width: 100%;
border-collapse: collapse;
margin: 8px 0 20px;
}
.fr-report-table th {
text-align: left;
padding: 10px 12px;
background: rgba(6, 163, 182, 0.08);
color: #0891a3;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid rgba(6, 163, 182, 0.3);
}
body[data-theme="dark"] .fr-report-table th { background: rgba(6, 163, 182, 0.18); color: #67e8f9; }
.fr-report-table td {
padding: 10px 12px;
font-size: 13px;
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.fr-report-td-amt { text-align: right; font-family: "JetBrains Mono", monospace; font-weight: 600; }
.fr-report-table tfoot td {
font-size: 14px;
font-weight: 700;
background: rgba(240, 244, 248, 0.7);
border-top: 2px solid #06a3b6;
border-bottom: none;
padding: 12px;
}
body[data-theme="dark"] .fr-report-table tfoot td { background: rgba(15, 42, 51, 0.6); }
.fr-report-total { color: #16a34a; font-size: 16px; }
body[data-theme="dark"] .fr-report-total { color: #86efac; }
.fr-report-pago {
margin-top: 20px;
padding: 16px;
background: rgba(240, 244, 248, 0.7);
border-radius: 10px;
}
body[data-theme="dark"] .fr-report-pago { background: rgba(15, 42, 51, 0.5); }
.fr-report-pago-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(15, 23, 42, 0.55);
margin-bottom: 10px;
font-weight: 600;
}
body[data-theme="dark"] .fr-report-pago-title { color: rgba(226, 232, 240, 0.55); }
.fr-report-pago-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fr-report-kv-k { font-size: 11px; color: rgba(15, 23, 42, 0.6); }
body[data-theme="dark"] .fr-report-kv-k { color: rgba(226, 232, 240, 0.6); }
.fr-report-kv-v { font-weight: 600; margin-top: 2px; }
.fr-report-notas {
margin-top: 16px;
padding: 12px 16px;
border-left: 3px solid #06a3b6;
background: rgba(6, 163, 182, 0.04);
border-radius: 4px;
}
body[data-theme="dark"] .fr-report-notas { background: rgba(6, 163, 182, 0.12); }
.fr-report-notas-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #0891a3; font-weight: 600; margin-bottom: 4px; }
body[data-theme="dark"] .fr-report-notas-title { color: #67e8f9; }
.fr-report-notas-body { font-size: 13px; white-space: pre-wrap; }
.fr-report-estado-wrap { margin-bottom: 6px; display: flex; justify-content: flex-end; }
/* Tabla de reportes — filas clickeables (abren modal Ver) */
#fr-table .tabulator-row { cursor: pointer; }
/* Modal Ver */
.fr-view-dialog::part(panel) { max-width: 860px; overflow: visible; }
.fr-view-body { padding-bottom: 8px; }
/* Pestañas externas del modal Ver (Editar arriba, Eliminar abajo).
Colapsadas por default (44px, solo ícono); expanden al hover mostrando
el label. Position:fixed → se sincronizan con el panel del sl-dialog
via window resize desde js/finanzas.js. */
.fr-view-tab {
position: fixed;
display: flex;
align-items: center;
gap: 10px;
height: 44px;
width: 44px;
padding: 0 12px;
border: none;
border-radius: 0 8px 8px 0;
color: #ffffff;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
box-shadow: 3px 4px 14px rgba(0, 0, 0, 0.18);
transition: width 220ms cubic-bezier(.4, 0, .2, 1), background 200ms ease, box-shadow 200ms ease;
z-index: 1010;
}
.fr-view-tab:hover { width: 148px; box-shadow: 4px 5px 18px rgba(0, 0, 0, 0.24); }
.fr-view-tab:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }
.fr-view-tab-icon { flex-shrink: 0; width: 20px; height: 20px; }
.fr-view-tab-label {
opacity: 0;
transform: translateX(-6px);
transition: opacity 160ms ease 60ms, transform 200ms ease 60ms;
}
.fr-view-tab:hover .fr-view-tab-label { opacity: 1; transform: translateX(0); }
.fr-view-tab-edit { background: #06a3b6; }
.fr-view-tab-edit:hover { background: #058a99; }
.fr-view-tab-delete { background: #dc2626; }
.fr-view-tab-delete:hover { background: #b91c1c; }
/* En pantallas angostas, las pestañas se salen de la vista — se ocultan.
Las acciones (editar / eliminar) quedan accesibles solo desde desktop.
Si mobile se vuelve caso real, agregar botones fallback en el footer. */
@media (max-width: 900px) {
.fr-view-tab { display: none; }
}
/* Marcar pagado modal */
.fr-paid-dialog::part(panel) { max-width: 520px; }
/* Print CSS: el PDF se imprime desde una ventana nueva (ver printReporte en
js/finanzas.js). Los estilos específicos de impresión viven allá; aquí
solo compartimos el look del .fr-report ya definido arriba. */