/* Estilos Generales */
:root {
--primary: #2b6cb0;
--primary-light: #4299e1;
--success: #38a169;
--danger: #e53e3e;
--dark: #2d3748;
--light: #f7fafc;
--border: #e2e8f0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6;
color: var(--dark);
background-color: #f7fafc;
margin: 0;
padding: 0;
}
.calculator-container {
max-width: 800px;
margin: 2rem auto;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center; color: var(--primary); margin-top: 0; margin-bottom: 1.5rem;
}
h3 {
text-align: center;

margin-bottom: 1.5rem; }
/* Pestañas */
.tabs {
display: flex;
margin-bottom: 1.5rem; border-bottom: 1px solid var(--border);
}
.tab {
padding: 0.75rem 1.5rem; border: none; background: none; cursor: pointer; font-weight: 500;
opacity: 0.7;
transition: opacity 0.2s;
}
.tab.active {
opacity: 1;
border-bottom: 2px solid var(--primary); color: var(--primary);
}
/* Formulario */

.form-section {
display: grid;
gap: 1rem; margin-bottom: 1.5rem;
}
.form-group { position: relative;
}
label {
display: block; margin-bottom: 0.5rem; font-weight: 500;
}
input, select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border); border-radius: 4px;
font-size: 1rem;
}
input[type="range"] {
height: 5px; -webkit-appearance: none;

width: 100%; background: #d1d5db; border-radius: 5px; outline: none; margin-top: 1rem;
}
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
width: 20px;
height: 20px; border-radius: 50%; background: var(--primary); cursor: pointer;
}
.tooltip {
position: absolute; right: 0;
top: 0;
font-size: 0.75rem; color: #718096; opacity: 0;
transition: opacity 0.2s;
}

.form-group:hover .tooltip { opacity: 1;
}
.calc-button {
display: block;
width: 100%;
padding: 1rem; background-color: var(--primary); color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
}
.calc-button:hover {
background-color: var(--primary-light);
}
/* Resultados */
.result-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;

margin-bottom: 2rem; }
.result-card {
background-color: var(--light); border-radius: 8px;
padding: 1rem;
text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.result-card h4 { margin-top: 0; margin-bottom: 0.5rem; font-size: 0.9rem; color: #718096;
}
.result-value { font-size: 1.5rem; font-weight: 700; color: var(--primary);
}
.charts-container {
display: grid; grid-template-columns: 1fr;

gap: 2rem;
margin-bottom: 2rem; }
.chart-wrapper {
background-color: var(--light); border-radius: 8px;
padding: 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.chart-wrapper h4 { margin-top: 0; text-align: center; margin-bottom: 1rem; color: #718096;
}
.pdf-button {
display: block;
width: 100%;
padding: 0.75rem; background-color: var(--dark); color: white;
border: none; border-radius: 4px; font-size: 0.9rem;

cursor: pointer;
transition: background-color 0.2s; }
.historical-table {
width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.historical-table th, .historical-table td { border: 1px solid var(--border); padding: 0.5rem;
text-align: center;
}
.historical-table th { background-color: var(--light);
}
/* Utilidades */
.hidden {
display: none; }
/* Responsive */
@media (min-width: 768px) {

.charts-container { grid-template-columns: 1fr 1fr;
} }