/* --- RENZO FERNANDO MOSQUERA DAZA --- */

:root {
    /* --- Tema Claro --- */
    --light-bg: #f8fafc; /* slate-50 */
    --light-bg-card: #ffffff;
    --light-border: #e2e8f0; /* slate-200 */
    --light-text-primary: #0f172a; /* slate-900 */
    --light-text-secondary: #64748b; /* slate-500 */
    --light-text-label: #334155; /* slate-700 */
    --light-accent: #2563eb; /* blue-600 */
    --light-accent-glow: rgba(59, 130, 246, 0.2);
    --light-result-bg: linear-gradient(145deg, #ecfdf5, #d1fae5); /* emerald-50, green-100 */
    --light-result-border: #a7f3d0; /* green-200 */
    --light-result-value: #047857; /* green-700 */
    --light-result-label: #059669; /* green-600 */
    --light-memory-bg: #f1f5f9; /* slate-100 */
    --light-memory-border: var(--light-accent);
    --light-memory-text: #334155; /* slate-700 */
    --light-memory-strong: #020617; /* slate-950 */
    --light-memory-formula: #4338ca; /* indigo-700 */
    --light-step-bg: #e0e7ff; /* indigo-100 */
    --light-step-text: #4338ca; /* indigo-700 */
    --light-copy-btn-bg: rgba(0,0,0,0.05);
    --light-copy-btn-hover-bg: rgba(0,0,0,0.1);
    --light-copy-btn-color: #64748b; /* slate-500 */
    --light-copy-btn-success-color: #059669; /* green-600 */

    /* --- Tema Oscuro --- */
    --dark-bg: #020617; /* slate-950 */
    --dark-bg-card: #0f172a; /* slate-900 */
    --dark-border: #334155; /* slate-700 */
    --dark-text-primary: #f1f5f9; /* slate-100 */
    --dark-text-secondary: #94a3b8; /* slate-400 */
    --dark-text-label: #cbd5e1; /* slate-300 */
    --dark-accent: #60a5fa; /* blue-400 */
    --dark-accent-glow: rgba(96, 165, 250, 0.2);
    --dark-result-bg: linear-gradient(145deg, #064e3b, #052e16); /* green-900, green-950 */
    --dark-result-border: #047857; /* green-700 */
    --dark-result-value: #6ee7b7; /* green-300 */
    --dark-result-label: #a7f3d0; /* green-200 */
    --dark-memory-bg: #1e293b; /* slate-800 */
    --dark-memory-border: var(--dark-accent);
    --dark-memory-text: #cbd5e1; /* slate-300 */
    --dark-memory-strong: #f8fafc; /* slate-50 */
    --dark-memory-formula: #818cf8; /* indigo-400 */
    --dark-step-bg: #312e81; /* indigo-900 */
    --dark-step-text: #a5b4fc; /* indigo-300 */
    --dark-copy-btn-bg: rgba(255,255,255,0.1);
    --dark-copy-btn-hover-bg: rgba(255,255,255,0.2);
    --dark-copy-btn-color: #94a3b8; /* slate-400 */
    --dark-copy-btn-success-color: #6ee7b7; /* green-300 */
}

/* --- Estilos Base y Tema Claro por defecto --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--light-bg);
    color: var(--light-text-secondary);
    transition: background-color 0.3s, color 0.3s;
}

.main-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.main-header { text-align: center; margin-bottom: 3rem; }
.main-title { color: var(--light-text-primary); font-size: 2.5rem; font-weight: 800; letter-spacing: -0.025em; }
.sub-heading { font-size: 1.125rem; margin-top: 0.5rem; max-width: 500px; margin-left: auto; margin-right: auto; }

.main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 1024px) {
    .main-grid { grid-template-columns: 4fr 5fr; align-items: start; }
}

.controls-column { display: flex; flex-direction: column; gap: 2rem; }
.results-column .card-sticky { position: sticky; top: 2rem; }

.card {
    background-color: var(--light-bg-card);
    border-radius: 1rem;
    border: 1px solid var(--light-border);
    padding: 1.5rem;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--light-text-primary);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--light-border);
}

.step-circle {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: var(--light-step-bg);
    color: var(--light-step-text);
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.sub-title {
    text-align: center;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--light-text-secondary);
}

.inputs-container { display: flex; flex-direction: column; gap: 1.25rem; }
.input-group { display: flex; flex-direction: column; }
.input-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--light-text-label);
    margin-bottom: 0.5rem;
}
.input-field {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--light-border);
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
    background-color: var(--light-bg);
    color: var(--light-text-primary);
    font-size: 1rem;
}
.input-field:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--light-accent-glow);
    border-color: var(--light-accent);
}
/* Ocultar flechas en input number */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}


.result-box {
    background: var(--light-result-bg);
    border: 1px solid var(--light-result-border);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}
.result-value-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.result-value {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--light-result-value);
    line-height: 1;
    letter-spacing: -0.05em;
    transition: color 0.3s;
}
.result-label {
    font-size: 1rem;
    color: var(--light-result-label);
    margin-top: 0.75rem;
    font-weight: 500;
    min-height: 1.5rem; /* Evita que el layout salte */
    transition: color 0.3s;
}

.calculation-memory {
    background-color: var(--light-memory-bg);
    border-left: 4px solid var(--light-memory-border);
    border-radius: 0.25rem;
    padding: 1.5rem;
    font-size: 0.9rem;
    color: var(--light-memory-text);
    min-height: 200px;
    transition: all 0.3s;
}
.calculation-memory p { margin-bottom: 1.25rem; line-height: 1.6; }
.calculation-memory p:last-child { margin-bottom: 0; }
.calculation-memory strong { color: var(--light-memory-strong); font-weight: bold; }
.calculation-memory .formula-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 0.75rem;
    background-color: rgba(0,0,0,0.02);
    border-radius: 0.375rem;
    font-size: 1rem;
}
.calculation-memory .katex { color: var(--light-memory-formula); }
.placeholder-text, .placeholder-text-table {
    font-style: italic;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--light-text-secondary);
}

.equivalency-section { margin-top: 3rem; }
.equivalency-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem 3rem;
}
@media (min-width: 768px) {
    .equivalency-grid { grid-template-columns: 1fr 1fr; }
}

.equivalency-table { width: 100%; border-collapse: collapse; }
.equivalency-table th, .equivalency-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--light-border);
}
.equivalency-table th { font-size: 0.875rem; font-weight: 600; color: var(--light-text-secondary); }
.equivalency-table td { font-size: 0.875rem; color: var(--light-text-primary); font-family: 'Menlo', 'Consolas', monospace; }
.equivalency-table tbody tr:last-child td { border-bottom: none; }
.equivalency-table tbody tr:hover { background-color: rgba(0, 0, 0, 0.02); }

.page-footer {
    text-align: center;
    margin-top: 4rem;
    padding-top: 2rem;
    font-size: 0.875rem;
    color: var(--light-text-secondary);
    border-top: 1px solid var(--light-border);
}
.page-footer-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
@media (min-width: 768px) {
    .page-footer-content {
        flex-direction: row;
        justify-content: space-between;
    }
    .footer-text {
        text-align: left;
    }
}
.footer-text p { margin: 0; }
.project-purpose {
    font-size: 0.8rem;
    font-style: italic;
    margin-top: 0.25rem;
}
.github-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--light-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    flex-shrink: 0;
}
.github-link:hover { color: var(--light-text-primary); }

.theme-switcher-container { position: absolute; top: 1rem; right: 1rem; z-index: 10; }
.theme-toggle-button {
    background-color: var(--light-bg-card);
    border: 1px solid var(--light-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
    color: var(--light-text-secondary);
    transition: all 0.3s;
}
.theme-toggle-button:hover {
    color: var(--light-text-primary);
    border-color: var(--light-accent);
    transform: scale(1.1);
}

.hidden { display: none; }

/* --- Botones de Copiar --- */
.copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    flex-shrink: 0;
}
.copy-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Botón principal */
#copy-main-result-btn {
    width: 44px;
    height: 44px;
    background-color: transparent;
    color: var(--light-result-label);
}
#copy-main-result-btn:hover:not(:disabled) {
    background-color: rgba(0,0,0,0.05);
}
#copy-main-result-btn .copy-icon,
#copy-main-result-btn .check-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease-in-out;
}
#copy-main-result-btn.copied .copy-icon {
    display: none;
}
#copy-main-result-btn.copied .check-icon {
    display: inline-block;
    color: var(--light-copy-btn-success-color);
    transform: scale(1.1);
}

/* Botones en memoria de cálculo */
.copy-button-inline {
    width: 32px;
    height: 32px;
    background-color: var(--light-copy-btn-bg);
    color: var(--light-copy-btn-color);
}
.copy-button-inline:hover:not(:disabled) {
    background-color: var(--light-copy-btn-hover-bg);
    transform: scale(1.1);
}
.copy-button-inline .copy-icon,
.copy-button-inline .check-icon {
    width: 16px;
    height: 16px;
}
.copy-button-inline.copied {
    background-color: var(--light-copy-btn-success-color);
}
.copy-button-inline.copied .copy-icon {
    display: none;
}
.copy-button-inline.copied .check-icon {
    display: inline-block;
    color: var(--light-bg-card);
}


/* --- Estilos para el tema oscuro --- */
html.dark body { background-color: var(--dark-bg); color: var(--dark-text-secondary); }
html.dark .main-title { color: var(--dark-text-primary); }
html.dark .card { background-color: var(--dark-bg-card); border-color: var(--dark-border); }
html.dark .card-title { color: var(--dark-text-primary); border-color: var(--dark-border); }
html.dark .step-circle { background-color: var(--dark-step-bg); color: var(--dark-step-text); }
html.dark .sub-title { color: var(--dark-text-secondary); }
html.dark .input-group label { color: var(--dark-text-label); }
html.dark .input-field { background-color: var(--dark-bg); border-color: var(--dark-border); color: var(--dark-text-primary); }
html.dark .input-field:focus { box-shadow: 0 0 0 3px var(--dark-accent-glow); border-color: var(--dark-accent); }
html.dark .result-box { background: var(--dark-result-bg); border-color: var(--dark-result-border); }
html.dark .result-value { color: var(--dark-result-value); }
html.dark .result-label { color: var(--dark-result-label); }
html.dark .calculation-memory { background-color: var(--dark-memory-bg); border-color: var(--dark-memory-border); color: var(--dark-memory-text); }
html.dark .calculation-memory strong { color: var(--dark-memory-strong); }
html.dark .calculation-memory .katex { color: var(--dark-memory-formula); }
html.dark .calculation-memory .formula-wrapper { background-color: rgba(255,255,255,0.03); }
html.dark .placeholder-text, html.dark .placeholder-text-table { color: var(--dark-text-secondary); }
html.dark .equivalency-table th, html.dark .equivalency-table td { border-color: var(--dark-border); }
html.dark .equivalency-table th { color: var(--dark-text-secondary); }
html.dark .equivalency-table td { color: var(--dark-text-primary); }
html.dark .equivalency-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.03); }
html.dark .page-footer { color: var(--dark-text-secondary); border-color: var(--dark-border); }
html.dark .github-link { color: var(--dark-text-secondary); }
html.dark .github-link:hover { color: var(--dark-text-primary); }
html.dark .theme-toggle-button { background-color: var(--dark-bg-card); border-color: var(--dark-border); color: var(--dark-text-secondary); }
html.dark .theme-toggle-button:hover { color: var(--dark-text-primary); border-color: var(--dark-accent); }
html.dark #copy-main-result-btn { color: var(--dark-result-label); }
html.dark #copy-main-result-btn:hover:not(:disabled) { background-color: rgba(255,255,255,0.05); }
html.dark #copy-main-result-btn.copied .check-icon { color: var(--dark-copy-btn-success-color); }
html.dark .copy-button-inline { background-color: var(--dark-copy-btn-bg); color: var(--dark-copy-btn-color); }
html.dark .copy-button-inline:hover:not(:disabled) { background-color: var(--dark-copy-btn-hover-bg); }
html.dark .copy-button-inline.copied { background-color: var(--dark-copy-btn-success-color); }
html.dark .copy-button-inline.copied .check-icon { color: var(--dark-bg-card); }