/* ============================================================================ BBVA DISE – Comparador de Automoviles Unified stylesheet for: Index.cshtml, Compare.cshtml, Print.cshtml Page scoping ------------ Add ONE of these classes to the tag of each page so the page-specific rules apply correctly: Index.cshtml -> Compare.cshtml -> Print.cshtml -> The page-* classes are only needed for non-color overrides (e.g. Print's white background and the @media print block scoped to .page-print). All three pages share the same primary color (#0D6EFD) from Index. ============================================================================ */ /* ---------------------------------------------------------------------------- 1. Print page setup (only takes effect when Print.cshtml is printed/PDFed) ---------------------------------------------------------------------------- */ @page { size: A4 portrait; margin: 15mm 12mm 18mm 12mm; } /* ---------------------------------------------------------------------------- 2. Design tokens ---------------------------------------------------------------------------- */ :root { --bs-body-font-family: 'Manrope', sans-serif; /* Brand color (from Index.cshtml — applied across all pages) */ --bs-primary: #0D6EFD; --bs-primary-rgb: 13, 110, 253; --bs-secondary: #506076; /* Surfaces */ --background: #f7f9fb; --surface-container-low: #f0f4f7; --surface-container-lowest: #ffffff; --primary-container: #dce1ff; /* Text */ --text-primary: #2a3439; --text-secondary: #566166; --text-outline: #717c82; --text-muted-print: #454652; --outline-variant: #a9b4b9; } /* ---------------------------------------------------------------------------- 3. Base typography & body ---------------------------------------------------------------------------- */ body { font-family: var(--bs-body-font-family); background-color: var(--background); color: var(--text-primary); } /* Print page uses white paper background and slightly darker text */ body.page-print { background-color: #ffffff; color: #191c1d; } h1, h2, h3, h4, h5, h6, .font-headline { font-family: var(--bs-body-font-family); } /* ---------------------------------------------------------------------------- 4. Icons ---------------------------------------------------------------------------- */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } /* ---------------------------------------------------------------------------- 5. Custom color utilities ---------------------------------------------------------------------------- */ .text-primary-custom { color: var(--bs-primary) !important; } .bg-primary-custom { background-color: var(--bs-primary) !important; } .border-primary-custom { border-color: var(--bs-primary) !important; } .bg-light-custom { background-color: #f3f4f5 !important; } .text-muted-custom { color: var(--text-muted-print) !important; } .bg-surface-low { background-color: var(--surface-container-low) !important; } .bg-surface-lowest { background-color: var(--surface-container-lowest) !important; } .bg-primary-container { background-color: var(--primary-container) !important; } .text-on-surface-variant { color: var(--text-secondary) !important; } .text-outline { color: var(--text-outline) !important; } /* ---------------------------------------------------------------------------- 6. Buttons ---------------------------------------------------------------------------- */ .btn-link { color: #303439; } .btn-rounded { border-radius: 50rem !important; padding-left: 1.5rem; padding-right: 1.5rem; } .btn-primary-custom { color: #fff; background-color: var(--bs-primary); border-color: var(--bs-primary); } .btn-primary-custom:hover { color: var(--bs-primary); } .btn-outline-primary-custom { color: var(--bs-primary); border-color: var(--bs-primary); } .btn-outline-primary-custom:hover { color: #fff; background-color: var(--bs-primary); } /* ---------------------------------------------------------------------------- 7. Navigation ---------------------------------------------------------------------------- */ .navbar-brand { font-weight: 800; letter-spacing: -0.02em; color: var(--bs-primary) !important; } .nav-link { font-weight: 500; color: var(--text-secondary); transition: color 0.2s; } .nav-link:hover { color: var(--bs-primary); } .nav-link.active { color: var(--bs-primary); border-bottom: 2px solid var(--bs-primary); } .nav-link.active-custom { color: var(--bs-primary) !important; font-weight: 600; border-bottom: 2px solid var(--bs-primary); padding-bottom: 0.25rem; } /* ---------------------------------------------------------------------------- 8. Hero, form card, info card (Index) ---------------------------------------------------------------------------- */ .hero-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--outline-variant); } .form-card { background: #ffffff; border-radius: 1rem !important; border: none; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); } .section-title { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-primary); border-left: 4px solid var(--bs-primary); padding-left: 1rem; margin-bottom: 1.5rem; } .form-label-custom { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--outline-variant); margin-bottom: 0.25rem; } .form-control-custom { background-color: var(--surface-container-low); border: none; border-bottom: 2px solid rgba(169, 180, 185, 0.4); border-radius: 0; padding: 0.5rem 0; transition: border-color 0.2s; } .form-control-custom:focus { background-color: var(--surface-container-low); outline: none; box-shadow: none; border-bottom-color: var(--bs-primary); } .info-card { background-color: rgba(var(--bs-primary-rgb), 0.1); border-radius: 1rem; border: none; padding: 2rem; } /* ---------------------------------------------------------------------------- 9. Promo card (Index) ---------------------------------------------------------------------------- */ .promo-card { position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .promo-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: #eaf2fb; } .promo-card:hover .promo-img { transform: scale(1.05); } .promo-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: white; } /* ---------------------------------------------------------------------------- 10. Misc (Index) ---------------------------------------------------------------------------- */ .insight-toast { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border-left: 4px solid var(--bs-primary); border-radius: 0.5rem; padding: 1rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } footer { background-color: var(--surface-container-low); padding: 3rem 0; } .row-hover:hover { background-color: var(--bs-primary-bg-subtle); transition: background-color 0.15s ease; } /* ---------------------------------------------------------------------------- 11. Compare page – utilities ---------------------------------------------------------------------------- */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } .tracking-tight { letter-spacing: -0.025em; } .tracking-widest { letter-spacing: 0.1em; } .rounded-2xl { border-radius: 1rem !important; } .rounded-xl { border-radius: 0.75rem !important; } .card-hover:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important; } /* ---------------------------------------------------------------------------- 12. Compare page – company filter chips ---------------------------------------------------------------------------- */ .company-chip { cursor: pointer; transition: all 0.15s ease-in-out; user-select: none; } .company-chip:hover { background-color: #f8f9fa !important; } .company-chip:has(.company-filter:checked) { border-color: #d1c4e9; } .company-chip:has(.company-filter:checked) span { font-weight: 600; } /* The circular checkbox */ .company-filter { appearance: none; -webkit-appearance: none; width: 1.15rem; height: 1.15rem; border: 2px solid #d1d5db; border-radius: 50%; background-color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s ease-in-out; } /* Checked state: primary fill + white checkmark via SVG */ .company-filter:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 0.75rem; } .company-filter:focus-visible { outline: 2px solid #b39ddb; outline-offset: 2px; } /* ---------------------------------------------------------------------------- 13. Print page – screen-only helpers ---------------------------------------------------------------------------- */ .tableCoberturasBreak { page-break-before: always; } /* ---------------------------------------------------------------------------- 14. Print page – @media print rules (PDF generation) Scoped to .page-print so they never accidentally fire on other pages if someone uses the browser's "Print" command. ---------------------------------------------------------------------------- */ @media print { /* Force background colors & exact color rendering */ .page-print * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .page-print { background-color: #fff !important; } /* Kill shadows/rounded corners that muddy print output */ .page-print .card, .page-print .table-responsive { box-shadow: none !important; } /* Tighten the header on paper */ .page-print header.border-bottom .container-xl { padding-top: 0 !important; padding-bottom: 0 !important; } .page-print header .text-end { font-size: 8pt !important; } /* Trim main & hero card padding */ .page-print main.py-5 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .page-print header.py-4, .page-print header.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .page-print header .card-body { padding: 1.25rem !important; } /* Let the table breathe on A4: no horizontal scroll, fixed layout */ .page-print .table-responsive { overflow: visible !important; } .page-print table.table { width: 100% !important; table-layout: fixed !important; font-size: 10pt !important; } /* Column widths tuned for A4 portrait (sum = 100%) */ .page-print table.table th:nth-child(1), .page-print table.table td:nth-child(1) { width: 18%; /* COMPAÑIA */ } .page-print table.table th:nth-child(2), .page-print table.table td:nth-child(2) { width: 20%; /* PLAN */ } .page-print table.table th:nth-child(3), .page-print table.table td:nth-child(3) { width: 28%; /* COTIZACION INTERNA */ word-break: break-all; } .page-print table.table th:nth-child(4), .page-print table.table td:nth-child(4) { width: 17%; /* DEDUCIBLE */ } .page-print table.table th:nth-child(5), .page-print table.table td:nth-child(5) { width: 17%; /* PREMIO */ } /* Keep all header labels on a single line */ .page-print table.table thead th { white-space: nowrap !important; } /* Tighten cell padding so rows fit comfortably */ .page-print table.table th, .page-print table.table td { padding: 0.6rem 0.5rem !important; vertical-align: middle !important; word-wrap: break-word; overflow-wrap: break-word; } /* Flatten the flex-based COMPAÑIA cell back to a normal table cell */ .page-print table.table td.d-flex { display: table-cell !important; } /* Hide the absolutely-positioned blue indicator (renders wrong in print) and replace it with a solid left border on the first cell */ .page-print table.table tbody tr td:first-child > div.position-absolute { display: none !important; } .page-print table.table tbody tr td:first-child { border-left: 4px solid var(--bs-primary) !important; } /* Shrink the PREMIO font so it doesn't blow up row height */ .page-print table.table td.fs-4 { font-size: 1rem !important; } /* Prevent rows from splitting across pages */ .page-print table.table tr { page-break-inside: avoid; break-inside: avoid; } /* Shrink the SUGERIDO badge so it fits inline with the company name */ .page-print table.table td .badge { font-size: 0.5rem !important; padding: 0.1rem 0.3rem !important; letter-spacing: 0.03em !important; margin-left: 0.25rem !important; vertical-align: middle; display: inline-block !important; } }