/* ===================================================================== TEMAS. Todo el CSS de la app usa estos tokens: cambiar el atributo data-theme del (claro | oscuro | descubrir) re-pinta todo. El tema elegido persiste en localStorage (script en App.razor). ===================================================================== */ :root { /* ---- tema CLARO (default) ---- */ --brand-900: #1B456D; --brand-700: #3A76A7; --brand-500: #497CA5; --brand-100: #CADBEB; --brand-50: #e7f0f8; --cta: #FF5757; --cta-2: #FF0A07; --cta-soft: #ffd9d9; --bg: var(--brand-900); --surface: #ffffff; --surface-2: #f4f8fc; --border: #d9e3ee; --text: #1B456D; --muted: #5a7a96; --success: #2f9e6e; --danger: var(--cta-2); --warning: #e58a1a; --warn-ink: #a07408; --ok-soft: #e2f4ec; --warn-soft:#fdf3dc; --bad-soft: #ffe5e5; /* Menu lateral: tokens propios para que el tema descubrir pueda pintarlo distinto del resto de la pantalla. */ --sidebar-bg: #ffffff; --sidebar-ink: #1B456D; --sidebar-muted: #97afc8; --nav-ink: #3A76A7; --nav-hover: #e7f0f8; --nav-active-a: #1B456D; --nav-active-b: #3A76A7; --shadow-sm: 0 1px 2px rgba(27, 69, 109, 0.07), 0 1px 3px rgba(27, 69, 109, 0.05); --shadow-md: 0 4px 14px rgba(27, 69, 109, 0.1), 0 2px 4px rgba(27, 69, 109, 0.06); --shadow-lg: 0 14px 36px rgba(27, 69, 109, 0.14); --radius: 14px; --radius-sm: 8px; } /* ---- tema OSCURO ---- */ html[data-theme="oscuro"] { --brand-900: #b9d3ec; /* en oscuro los "azules de titulo" pasan a claros */ --brand-700: #82b2dd; --brand-500: #6d9fc9; --brand-100: #2b455f; --brand-50: #22364b; --cta: #ff7b7b; --cta-2: #ff8a88; --cta-soft: #4a2626; --surface: #1a2430; --surface-2: #121a24; --border: #2c3e52; --text: #dce7f2; --muted: #8fa6bc; --success: #5bc98f; --warning: #e5a54a; --warn-ink: #e0b054; --ok-soft: #17332a; --warn-soft:#382c10; --bad-soft: #3a2020; --sidebar-bg: #16202b; --sidebar-ink: #dce7f2; --sidebar-muted: #5f7990; --nav-ink: #9dbdda; --nav-hover: #22364b; --nav-active-a: #2f5f8d; --nav-active-b: #3A76A7; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.5); } /* ---- tema DESCUBRIR: los colores de la marca a fondo ---- */ html[data-theme="descubrir"] { --surface: #ffffff; --surface-2: #dfeaf6; /* fondo de contenido celeste marca */ --border: #b9cfe4; --brand-50: #dce9f5; --sidebar-bg: #1B456D; /* menu azul Descubrir con texto blanco */ --sidebar-ink: #ffffff; --sidebar-muted: #8fb0cd; --nav-ink: #cadbeb; --nav-hover: rgba(255, 255, 255, 0.12); --nav-active-a: #FF5757; /* el activo en rojo CTA de la marca */ --nav-active-b: #e03e3e; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Montserrat', system-ui, sans-serif; color: var(--text); background: var(--surface-2); -webkit-font-smoothing: antialiased; } h1, h2, h3, .display { font-family: 'Quicksand', 'Montserrat', sans-serif; font-weight: 700; color: var(--brand-900); letter-spacing: -0.01em; } h1 { font-size: 1.85rem; margin: 0 0 0.5rem 0; } h2 { font-size: 1.2rem; margin: 0 0 0.85rem 0; } h3 { font-size: 1rem; margin: 0 0 0.75rem 0; color: var(--brand-700); } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--success); } .invalid { outline: 1px solid var(--danger); } .validation-message { color: var(--danger); } .blazor-error-boundary { background: var(--danger); padding: 1rem; color: white; border-radius: var(--radius-sm); } .blazor-error-boundary::after { content: "Ocurrió un error." } .page-intro { color: var(--muted); font-size: 0.95rem; margin: 0 0 1.5rem 0; } /* Cards */ .card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); margin-bottom: 1rem; border: 1px solid var(--border); transition: box-shadow 0.2s, transform 0.2s; } .card:hover { box-shadow: var(--shadow-md); } .card-accent { background: linear-gradient(135deg, var(--brand-100) 0%, var(--brand-50) 100%); border-color: #b6cee0; } .muted { color: var(--muted); font-size: 0.875rem; } .error { color: var(--danger); } .ok { color: var(--success); } .badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: var(--brand-100); color: var(--brand-900); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 100%); color: #fff; border: none; padding: 0.65rem 1.2rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.9rem; font-weight: 600; font-family: inherit; letter-spacing: 0.01em; transition: transform 0.1s, box-shadow 0.2s, opacity 0.2s; box-shadow: 0 2px 8px rgba(27, 69, 109, 0.25); } .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(27, 69, 109, 0.35); } .btn:active:not(:disabled) { transform: translateY(0); } .btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; } .btn.cta { background: linear-gradient(135deg, var(--cta) 0%, var(--cta-2) 100%); box-shadow: 0 2px 8px rgba(255, 87, 87, 0.35); } .btn.cta:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(255, 87, 87, 0.45); } .btn.secondary { background: var(--surface); color: var(--brand-900); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .btn.secondary:hover:not(:disabled) { background: var(--brand-100); border-color: var(--brand-500); } .btn.ghost { background: transparent; color: var(--brand-700); box-shadow: none; } .btn.ghost:hover:not(:disabled) { background: var(--brand-100); } /* Inputs */ .input, textarea.input, select.input { width: 100%; box-sizing: border-box; padding: 0.6rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.92rem; font-family: inherit; background: var(--surface); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; } .input:focus, textarea.input:focus, select.input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(73, 124, 165, 0.18); } textarea.input { font-family: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace; font-size: 0.85rem; } .code-block { background: var(--brand-900); color: var(--brand-50); padding: 0.85rem 1rem; border-radius: var(--radius-sm); font-family: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace; font-size: 0.82rem; overflow-x: auto; white-space: pre-wrap; margin: 0.5rem 0; border: 1px solid #0f3252; } /* Tables */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .data-table th, .data-table td { text-align: left; padding: 0.28rem 0.55rem; /* filas finas, densidad tipo Excel */ border-bottom: 1px solid var(--border); line-height: 1.25; } .data-table th { background: linear-gradient(180deg, var(--surface-2) 0%, var(--brand-50) 100%); position: sticky; top: 0; font-weight: 700; color: var(--brand-900); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; } .data-table tr:hover { background: var(--surface-2); } .scroll { max-height: 65vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } /* Layout */ .row-flex { display: flex; gap: 1rem; flex-wrap: wrap; } .col { flex: 1; min-width: 280px; } /* KPI cards */ .kpi { position: relative; background: var(--surface); border-radius: var(--radius); padding: 1.25rem 1.5rem; flex: 1; min-width: 200px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; } .kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brand-900) 0%, var(--brand-500) 100%); } .kpi .label { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .kpi .value { font-family: 'Quicksand', 'Montserrat', sans-serif; font-size: 1.85rem; font-weight: 700; margin-top: 0.35rem; letter-spacing: -0.02em; color: var(--brand-900); } .kpi .icon { position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 100%); color: white; font-size: 1.1rem; } .kpi.coral::before { background: linear-gradient(90deg, var(--cta) 0%, var(--cta-2) 100%); } .kpi.coral .icon { background: linear-gradient(135deg, var(--cta) 0%, var(--cta-2) 100%); } .kpi.sky::before { background: linear-gradient(90deg, var(--brand-500) 0%, var(--brand-100) 100%); } .kpi.sky .icon { background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%); } .kpi.ocean::before { background: linear-gradient(90deg, var(--brand-700) 0%, var(--brand-500) 100%); } .kpi.ocean .icon { background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 100%); } /* Chips */ .chip { display: inline-block; background: var(--brand-50); color: var(--brand-700); padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; } .chip.view { background: var(--bad-soft); color: var(--cta-2); } .chip.ok { background: var(--ok-soft); color: var(--success); } .chip.bad { background: var(--bad-soft); color: var(--danger); } /* Facturas */ .card.ok { border-left: 3px solid var(--success); } .card.error { border-left: 3px solid var(--danger); } /* Vuelos agrupados por PNR: el costo del aereo se carga por reserva, no por tramo, asi que la cabecera del grupo es la que lo muestra. El fondo va en el y no en el : .data-table tr:hover pinta el fondo de la fila y le taparia el suyo a la cabecera. Tampoco es sticky: dentro de .scroll el sticky ya lo usa el thead y dos capas pegadas se superponen. */ .data-table tr.grupo-pnr > td { background: linear-gradient(180deg, var(--surface-2) 0%, var(--brand-50) 100%); border-top: 2px solid var(--brand-100); color: var(--brand-900); padding-top: 0.5rem; padding-bottom: 0.5rem; } .data-table tr.grupo-pnr:hover > td { background: linear-gradient(180deg, var(--brand-50) 0%, var(--brand-100) 100%); } /* Los tramos cuelgan de la reserva de arriba: la sangria lo hace visible. */ .data-table tr.tramo-pnr > td:first-child { padding-left: 1.5rem; } /* Un comprobante anulado sigue visible —el rastro importa— pero apagado. */ tr.anulado { opacity: 0.5; } tr.anulado td { text-decoration: line-through; } tr.anulado td:last-child { text-decoration: none; } /* Los