/* ============================================================ calculadora.css Scope: .calc-page — no colisiona con estilos de WordPress Fuente: traducción de clases Tailwind de page-calculadora.php ============================================================ */ /* --- Variables de color (del tailwind.config inline) --- */ :root { --calc-primary: #DA2F10; --calc-primary-container: #e32519; --calc-primary-fixed: #ffdad5; --calc-primary-fixed-dim: #ffb4a8; --calc-on-primary: #ffffff; --calc-secondary: #5f5e5e; --calc-on-background: #1b1c1c; --calc-background: #fbf9f8; --calc-surface: #fbf9f8; --calc-outline-variant: #e7bdb6; --calc-error: #DA2F10; --calc-zinc-50: #fafafa; --calc-zinc-100: #f4f4f5; --calc-zinc-200: #e4e4e7; --calc-zinc-400: #a1a1aa; --calc-zinc-900: #18181b; --calc-red-400: #f87171; } /* ============================================================ RESET SCOPED — evita que WP rompa el layout interno ============================================================ */ .calc-page *, .calc-page *::before, .calc-page *::after { box-sizing: border-box; } /* ============================================================ BODY / WRAPPER (reemplaza ) ============================================================ */ .calc-page { background-color: var(--calc-background); color: var(--calc-on-background); font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.5; font-weight: 400; overflow-x: hidden; } /* ============================================================ MAIN CONTAINER max-w-7xl mx-auto px-4 md:px-8 py-12 ============================================================ */ .calc-page .calc-main { max-width: 80rem; margin-left: auto; margin-right: auto; padding: 3rem 1rem; } @media (min-width: 768px) { .calc-page .calc-main { padding-left: 2rem; padding-right: 2rem; } } /* ============================================================ HERO SECTION mb-16 ============================================================ */ .calc-page .calc-hero { margin-bottom: 4rem; } /* h1: font-display-xl text-display-xl uppercase text-on-background mb-4 */ .calc-page .calc-hero h1 { font-family: 'Inter', sans-serif; font-size: 72px; line-height: 1.1; letter-spacing: -0.04em; font-weight: 900; text-transform: uppercase; color: var(--calc-on-background); margin-bottom: 1rem; } /* p: font-body-lg text-body-lg max-w-2xl text-secondary */ .calc-page .calc-hero p { font-size: 18px; line-height: 1.6; font-weight: 400; max-width: 42rem; color: var(--calc-secondary); } /* ============================================================ GRID PRINCIPAL grid grid-cols-1 lg:grid-cols-12 gap-gutter ============================================================ */ .calc-page .calc-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 1024px) { .calc-page .calc-grid { grid-template-columns: repeat(12, 1fr); } } /* ============================================================ FORM SECTION lg:col-span-8 bg-white border-2 border-black p-8 ============================================================ */ .calc-page .calc-form-section { background-color: #ffffff; border: 2px solid #000; padding: 2rem; } @media (min-width: 1024px) { .calc-page .calc-form-section { grid-column: span 8; } } /* h2: font-headline-md text-headline-md uppercase mb-8 border-b-4 border-primary-container pb-2 inline-block */ .calc-page .calc-form-section > h2 { font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 800; text-transform: uppercase; margin-bottom: 2rem; border-bottom: 4px solid var(--calc-primary-container); padding-bottom: 0.5rem; display: inline-block; } /* form: grid grid-cols-1 md:grid-cols-2 gap-8 */ .calc-page .calc-form-section form { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .calc-page .calc-form-section form { grid-template-columns: repeat(2, 1fr); } } /* field wrapper: flex flex-col gap-2 */ .calc-page .calc-field { display: flex; flex-direction: column; gap: 0.5rem; } /* labels: font-bold uppercase text-xs tracking-widest text-black */ .calc-page .calc-field label, .calc-page .calc-label { font-family: 'Work Sans', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; color: #000; } /* inputs y selects: brutalist-input w-full p-4 border-2 border-black text-lg font-bold */ .calc-page .brutalist-input { width: 100%; padding: 1rem; border: 2px solid #000; font-size: 1.125rem; font-weight: 700; background-color: #ffffff; appearance: none; -webkit-appearance: none; font-family: inherit; color: #000; } .calc-page .brutalist-input:focus { outline: none; border-color: #E32519; box-shadow: 4px 4px 0px 0px #E32519; } /* md:col-span-2 */ .calc-page .calc-col-full { grid-column: 1 / -1; } /* ============================================================ INDEX BOXES grid grid-cols-1 md:grid-cols-3 gap-4 ============================================================ */ .calc-page .calc-index-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 0.5rem; } @media (min-width: 768px) { .calc-page .calc-index-grid { grid-template-columns: repeat(3, 1fr); } } /* index-box: relative flex items-center justify-center p-4 border-2 border-black cursor-pointer */ .calc-page .index-box { position: relative; display: flex; align-items: center; justify-content: center; padding: 1rem; border: 2px solid #000; cursor: pointer; transition: background-color 0.15s; font-weight: 700; text-transform: uppercase; font-size: 0.875rem; } .calc-page .index-box:hover { background-color: var(--calc-zinc-100); } .calc-page .index-box.bg-primary-container { background-color: var(--calc-primary-container); color: #fff; } .calc-page .index-box .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ============================================================ BOTÓN CALCULAR w-full bg-[#E32519] text-white py-6 text-xl font-black uppercase tracking-widest ============================================================ */ .calc-page .calc-btn-submit { width: 100%; background-color: #E32519; color: #fff; padding-top: 1.5rem; padding-bottom: 1.5rem; font-size: 1.25rem; font-family: 'Work Sans', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; border: none; cursor: pointer; transition: background-color 0.15s, transform 0.1s; } .calc-page .calc-btn-submit:hover { background-color: #000; } .calc-page .calc-btn-submit:active { transform: translate(4px, 4px); } /* ============================================================ SIDEBAR lg:col-span-4 flex flex-col gap-8 ============================================================ */ .calc-page .calc-sidebar { display: flex; flex-direction: column; gap: 2rem; } @media (min-width: 1024px) { .calc-page .calc-sidebar { grid-column: span 4; } } /* Card negra: bg-black text-white p-8 border-2 border-black */ .calc-page .calc-card-dark { background-color: #000; color: #fff; padding: 2rem; border: 2px solid #000; } /* h3 en card dark: font-label-lg text-label-lg uppercase tracking-widest text-[#E32519] mb-4 */ .calc-page .calc-card-dark h3 { font-size: 14px; line-height: 1.2; letter-spacing: 0.05em; font-weight: 700; text-transform: uppercase; color: #E32519; margin-bottom: 1rem; } /* Monto grande: text-4xl font-black text-white */ .calc-page .calc-monto { font-size: 2.25rem; font-weight: 900; color: #fff; } /* Monto rojo grande: text-3xl font-black text-[#E32519] */ .calc-page .calc-monto-red { font-size: 1.875rem; font-weight: 900; color: #E32519; } /* Label pequeño: text-xs uppercase font-bold text-zinc-400 */ .calc-page .calc-label-sm { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--calc-zinc-400); } /* text-red-400 */ .calc-page .calc-text-red-light { color: var(--calc-red-400); font-size: 0.75rem; text-transform: uppercase; font-weight: 700; } /* Bloque con borde izquierdo rojo: mb-8 p-4 border-l-4 border-[#E32519] bg-zinc-900 */ .calc-page .calc-highlight-block { margin-bottom: 2rem; padding: 1rem; border-left: 4px solid #E32519; background-color: var(--calc-zinc-900); } /* mb-8 */ .calc-page .calc-mb-8 { margin-bottom: 2rem; } /* Card blanca sidebar: bg-white border-2 border-black p-6 */ .calc-page .calc-card-white { background-color: #fff; border: 2px solid #000; padding: 1.5rem; } .calc-page .calc-card-white h4 { font-weight: 700; text-transform: uppercase; color: #000; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .calc-page .calc-card-white p { font-size: 0.875rem; line-height: 1.6; } /* ============================================================ SECCIÓN RESULTADOS mt-xl ============================================================ */ .calc-page .calc-results-section { margin-top: 80px; } /* Header de resultados: flex items-end justify-between mb-8 */ .calc-page .calc-results-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; flex-wrap: wrap; gap: 0.5rem; } /* h2 resultados */ .calc-page .calc-results-section h2 { font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 800; text-transform: uppercase; } .calc-page .calc-results-section .calc-subtitle { color: var(--calc-secondary); } /* Botones de acción: font-bold uppercase text-xs border-2 border-black px-4 py-2 */ .calc-page .calc-action-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; text-transform: uppercase; font-size: 0.75rem; border: 2px solid #000; padding: 0.5rem 1rem; background: #fff; color: #000; cursor: pointer; transition: background-color 0.15s, color 0.15s; text-decoration: none; } .calc-page .calc-action-btn:hover { background-color: #000; color: #fff; } /* ============================================================ TABLA overflow-x-auto border-2 border-black ============================================================ */ .calc-page .calc-table-wrapper { overflow-x: auto; border: 2px solid #000; } .calc-page .calc-table { width: 100%; text-align: left; background-color: #fff; border-collapse: collapse; } /* thead: bg-black text-white */ .calc-page .calc-table thead { background-color: #000; color: #fff; } .calc-page .calc-table th { padding: 1.5rem; font-weight: 900; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; } .calc-page .calc-table th:nth-child(2), .calc-page .calc-table th:nth-child(3) { text-align: right; } /* tbody: divide-y-2 divide-black */ .calc-page .calc-table tbody tr { border-top: 2px solid #000; } .calc-page .calc-table td { padding: 1.5rem; } .calc-page .calc-table td:nth-child(2), .calc-page .calc-table td:nth-child(3) { text-align: right; } /* Fila normal */ .calc-page .calc-table tbody tr:hover { background-color: var(--calc-zinc-50); } /* Fila mes actual: bg-primary-fixed/80 */ .calc-page .calc-table tr.calc-row-current { background-color: rgba(255, 218, 213, 0.8); } .calc-page .calc-table tr.calc-row-current:hover { background-color: rgba(255, 218, 213, 0.5); } .calc-page .calc-table tr.calc-row-current td:nth-child(2), .calc-page .calc-table tr.calc-row-current td:nth-child(3) { color: var(--calc-primary); } /* font-bold en td */ .calc-page .calc-table td:first-child { font-weight: 700; } .calc-page .calc-table td:nth-child(2) { font-weight: 900; } /* Badge ajuste: bg-primary text-white */ .calc-page .calc-badge-ajuste { display: inline-block; padding: 0.25rem 0.75rem; background-color: var(--calc-primary); color: #fff; font-weight: 700; font-size: 10px; text-transform: uppercase; } /* Badge sin ajuste: bg-zinc-200 text-black */ .calc-page .calc-badge-sin-ajuste { display: inline-block; padding: 0.25rem 0.75rem; background-color: var(--calc-zinc-200); color: #000; font-weight: 700; font-size: 10px; text-transform: uppercase; } /* ============================================================ MATERIAL SYMBOLS ============================================================ */ .calc-page .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; color: var(--calc-primary); vertical-align: middle; } /* text-primary en iconos */ .calc-page .material-symbols-outlined.icon-primary { color: var(--calc-primary); } /* ============================================================ UTILIDADES MENORES ============================================================ */ .calc-page .calc-text-primary { color: var(--calc-primary); } .calc-page .calc-text-secondary { color: var(--calc-secondary); } .calc-page .calc-font-bold { font-weight: 700; } .calc-page .calc-font-black { font-weight: 900; } .calc-page .calc-underline { text-decoration: underline; } .calc-page .calc-uppercase { text-transform: uppercase; } /* ============================================================ RESPONSIVE — hero title en mobile ============================================================ */ @media (max-width: 640px) { .calc-page .calc-hero h1 { font-size: 2.5rem; letter-spacing: -0.02em; } .calc-page .calc-results-header { flex-direction: column; align-items: flex-start; } } @media (max-width: 767px) { .calc-page .calc-table th:nth-child(3), .calc-page .calc-table th:nth-child(4), .calc-page .calc-table td:nth-child(3), .calc-page .calc-table td:nth-child(4) { display: none; } }