@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg-main: #f9fafb;
    --bg-surface: #ffffff;
    --text-main: #111827;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
    --primary: #111827;
    --primary-hover: #374151;
    --success: #10b981;
    --danger: #ef4444;
    --hover-bg: #f3f4f6;
    --radius-sm: 6px;
    --radius-md: 8px;
    --font-inter: 'Inter', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-inter);
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    min-height: 100vh;
}

/* Modals / Overlays */
.hidden { display: none !important; }

/* 2FA SCREEN */
#screen-2fa {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #f3f4f6;
}
.auth-card {
    background: white;
    padding: 2.5rem;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
}
.auth-card h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.auth-card p { color: var(--text-muted); margin-bottom: 1.5rem; font-size: 0.9rem; }
.input-group { margin-bottom: 1.5rem; text-align: left; }
.input-group label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-muted); }
.input-group input, .input-group select { 
    width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.95rem; outline: none; transition: border-color 0.2s; 
}
.input-group input:focus, .input-group select:focus { border-color: var(--primary); }
.error-msg { color: var(--danger); font-size: 0.85rem; margin-top: -1rem; margin-bottom: 1rem; display: none; }

/* BUTTONS */
.btn-primary {
    background: var(--primary); color: white; border: none; padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.9rem; transition: background 0.2s;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-outline {
    background: transparent; border: 1px solid var(--border-color); color: var(--text-main); padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: background 0.2s;
}
.btn-outline:hover { background: var(--hover-bg); }
.btn-text { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; font-weight: 500; }
.btn-text:hover { color: var(--primary); }
.icon-only { padding: 0.5rem; }

/* SPINNER */
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: white; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* MAIN APP LAYOUT */
#screen-main { display: none; height: 100vh; overflow: hidden; }

/* SIDEBAR */
.sidebar {
    width: 280px; background: var(--bg-surface); height: 100%; border-right: 1px solid var(--border-color); padding: 1.5rem; float: left; overflow-y: auto;
}
.sidebar-header { margin-bottom: 2rem; }
.sidebar-header h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; }
.sidebar-header span { font-size: 0.8rem; color: var(--text-muted); }

.filter-group { padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); margin-bottom: 1.5rem; }
.checkbox-label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.9rem; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; border-radius: 4px; accent-color: var(--primary); }

.select-input { width: 100%; padding: 0.6rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.9rem; background: white; margin-bottom: 1rem; outline: none; }
.select-input:focus { border-color: var(--primary); }

/* TOGGLE SWITCH */
.toggle-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; font-size: 0.9rem; }
.toggle-checkbox { display: none; }
.toggle-switch { width: 36px; height: 20px; background: var(--border-color); border-radius: 20px; position: relative; transition: background 0.3s; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 50%; transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-checkbox:checked + .toggle-switch { background: var(--success); }
.toggle-checkbox:checked + .toggle-switch::after { transform: translateX(16px); }

/* FUENTE BUTTONS */
.fuente-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; background: white; border: 1px solid var(--border-color); padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); margin-bottom: 0.5rem; font-size: 0.9rem; cursor: pointer; text-align: left; transition: border-color 0.2s; }
.fuente-btn:hover { border-color: #d1d5db; }
.fuente-btn.active { border-color: var(--primary); background: var(--hover-bg); }
.fuente-icon { width: 20px; height: 20px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; color: white; font-weight: bold; margin-right: 0.5rem; }

/* AMOUNT RANGE */
.amount-range { display: flex; gap: 0.5rem; border-bottom: none;}
.input-box { flex: 1; }
.input-box label { display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.input-with-icon { display: flex; align-items: center; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0 0.5rem; background: white; }
.input-with-icon span { font-size: 0.8rem; color: var(--text-muted); }
.input-with-icon input { border: none; padding: 0.5rem; width: 100%; outline: none; font-size: 0.9rem; }

/* CONTENT AREA */
.content { height: 100%; overflow: hidden; display: flex; flex-direction: column; background: var(--bg-surface);}
.top-bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); }
.search-box { display: flex; align-items: center; background: var(--hover-bg); border-radius: var(--radius-md); padding: 0.5rem 1rem; width: 400px; }
.search-box .material-icons-round { color: var(--text-muted); font-size: 1.2rem; margin-right: 0.5rem; }
.search-box input { background: transparent; border: none; width: 100%; outline: none; font-size: 0.95rem; }
.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.btn-group { display: flex; border-radius: var(--radius-sm); overflow: hidden; }
.btn-group .btn-primary { border-radius: 0; }
.btn-group .btn-primary:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); border-right: 1px solid rgba(255,255,255,0.2); }
.btn-group .btn-primary:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.date-select { width: 160px; margin-bottom: 0; border: none; background: transparent; font-weight: 500; cursor: pointer; }

/* TABLE */
.table-container { flex: 1; overflow: auto; padding: 0; }
.tx-table { width: 100%; border-collapse: collapse; text-align: left; }
.tx-table th { position: sticky; top: 0; background: var(--bg-surface); z-index: 10; padding: 1rem; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.05em; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.tx-table td { padding: 1rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; font-size: 0.9rem; }
.tx-table tbody tr:hover { background: var(--bg-main); }
.tx-table input[type="checkbox"] { width: 16px; height: 16px; border-radius: 4px; accent-color: var(--primary); }

.concept-cell { display: flex; align-items: center; gap: 1rem; font-weight: 500; }
.concept-icon { width: 24px; height: 24px; background: #e5e7eb; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; }

.pill { display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.pill-empty { border: 1px solid var(--border-color); color: var(--text-muted); background: white; cursor: pointer; transition: background 0.2s; }
.pill-empty:hover { background: var(--hover-bg); }

.amount-positive { color: var(--success); font-weight: 600; }
.amount-negative { color: var(--text-main); font-weight: 600; }
.amount-strike { text-decoration: line-through; color: var(--text-muted); font-weight: 400; }

.sort-icon { font-size: 0.9rem; vertical-align: middle; margin-left: 2px; color: var(--border-color); }

/* MODALS */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(2px); }
.modal-content { background: white; padding: 2rem; border-radius: var(--radius-md); width: 100%; max-width: 400px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.modal-content h3 { margin-bottom: 1.5rem; font-size: 1.25rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; }