/* Conciliador Bancario - Tema verde/blanco (light) + dark mode override. Variables CSS exportadas a :root. Cargado una sola vez por shell. Componentes individuales usan .razor.css para estilos especificos. Dark mode: activa overrides. ThemeToggle hace switch via JS. */ :root { /* Paleta verde */ --verde-profundo: #1B5E20; --verde-primario: #2D7D32; --verde-claro: #66BB6A; --verde-muy-claro: #E8F5E9; --verde-fondo-suave: #F1F8E9; /* Accent + estados */ --amarillo: #FBC02D; --amarillo-fondo: #FFFBEB; --naranja: #F57F17; --naranja-fondo: #FFE0B2; --rojo: #C62828; --rojo-fondo: #FFEBEE; /* Grises + neutros */ --gris-borde: #c8d0d8; --gris-borde-suave: #e3e8ee; --gris-fondo: #F7F9FA; --gris-fondo-tabla: #FAFBFC; --gris-texto: #4F5B66; --gris-texto-suave: #6B7785; --gris-tab-bar: #ECEFF1; --blanco: #FFFFFF; /* Tipografia */ --fuente-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Calibri", "Helvetica Neue", Arial, sans-serif; --fuente-tabular: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Espaciado */ --espacio-xs: 4px; --espacio-sm: 6px; --espacio-md: 10px; --espacio-lg: 16px; --espacio-xl: 24px; /* Sombras */ --sombra-card: 0 1px 3px rgba(0, 0, 0, 0.05); --sombra-elevada: 0 4px 12px rgba(0, 0, 0, 0.08); --sombra-modal: 0 10px 40px rgba(0, 0, 0, 0.15); /* Border radius */ --radio-sm: 3px; --radio-md: 4px; --radio-lg: 8px; } /* Reset basico */ *, *::before, *::after { box-sizing: border-box; } body, html { margin: 0; padding: 0; font-family: var(--fuente-base); font-size: 13px; color: var(--gris-texto); background: var(--blanco); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Tipografia base */ h1, h2, h3, h4 { color: var(--verde-profundo); margin: 0 0 var(--espacio-md) 0; } h1 { font-size: 22px; font-weight: 700; } h2 { font-size: 18px; font-weight: 700; } h3 { font-size: 15px; font-weight: 600; } h4 { font-size: 13px; font-weight: 600; } .subtitle { font-size: 12px; color: var(--gris-texto-suave); } a { color: var(--verde-primario); text-decoration: none; } a:hover { text-decoration: underline; } /* Botones */ .btn { display: inline-flex; align-items: center; gap: var(--espacio-sm); padding: var(--espacio-sm) var(--espacio-lg); border-radius: var(--radio-md); cursor: pointer; border: none; font-size: 12px; font-weight: 500; font-family: var(--fuente-base); transition: background 0.15s ease; text-decoration: none; white-space: nowrap; } .btn:focus-visible { outline: 2px solid var(--verde-primario); outline-offset: 2px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primario { background: var(--verde-primario); color: var(--blanco); } .btn-primario:hover:not(:disabled) { background: var(--verde-profundo); } .btn-warning { background: var(--naranja); color: var(--blanco); } .btn-warning:hover:not(:disabled) { background: #E65100; } .btn-secundario { background: var(--blanco); color: var(--verde-profundo); border: 1px solid var(--gris-borde); } .btn-secundario:hover:not(:disabled) { background: var(--verde-muy-claro); } .btn-danger { background: var(--rojo); color: var(--blanco); } .btn-danger:hover:not(:disabled) { background: #B71C1C; } /* Helpers numericos */ .num { text-align: right; font-variant-numeric: tabular-nums; } .pos { color: var(--verde-primario); font-weight: 600; } .neg { color: var(--rojo); } /* A11y: focus visible siempre */ :focus-visible { outline: 2px solid var(--verde-primario); outline-offset: 2px; } /* Etiquetas estado */ .label-est { display: inline-block; padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .label-est.conc { background: var(--verde-muy-claro); color: var(--verde-profundo); } .label-est.pend { background: var(--naranja-fondo); color: #E65100; } .label-est.amb { background: #FFF9C4; color: var(--naranja); } .label-est.rej { background: var(--rojo-fondo); color: var(--rojo); } .label-est.lock { background: #E0E0E0; color: var(--gris-texto); } /* === DARK MODE OVERRIDES === */ /* Activado por: o `prefers-color-scheme: dark` cuando no hay override explicito */ [data-theme="dark"] { /* Paleta verde mas saturada para contraste sobre fondo oscuro */ --verde-profundo: #66BB6A; --verde-primario: #4CAF50; --verde-claro: #81C784; --verde-muy-claro: #1B3A1F; --verde-fondo-suave: #102D14; /* Estados se invierten: fondos oscuros + texto claro */ --amarillo-fondo: #3D3415; --naranja-fondo: #3D2014; --rojo-fondo: #3D1414; /* Grises invertidos */ --gris-borde: #3D464E; --gris-borde-suave: #2A3138; --gris-fondo: #181C20; --gris-fondo-tabla: #20262C; --gris-texto: #D4D9DE; --gris-texto-suave: #9BA3AB; --gris-tab-bar: #1F252B; --blanco: #14181C; } [data-theme="dark"] body, [data-theme="dark"] html { background: var(--gris-fondo); color: var(--gris-texto); } [data-theme="dark"] .btn-secundario { background: var(--gris-fondo-tabla); color: var(--verde-claro); border-color: var(--gris-borde); } /* Si el usuario NO ha elegido tema explicito, respetar preferencia del SO */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --verde-profundo: #66BB6A; --verde-primario: #4CAF50; --verde-claro: #81C784; --verde-muy-claro: #1B3A1F; --verde-fondo-suave: #102D14; --amarillo-fondo: #3D3415; --naranja-fondo: #3D2014; --rojo-fondo: #3D1414; --gris-borde: #3D464E; --gris-borde-suave: #2A3138; --gris-fondo: #181C20; --gris-fondo-tabla: #20262C; --gris-texto: #D4D9DE; --gris-texto-suave: #9BA3AB; --gris-tab-bar: #1F252B; --blanco: #14181C; } }