:root {
    --bg-main: #0b0e11;
    --bg-card: #161a1e;
    --border-color: #2b3139;
    --text-main: #eaecef;
    --text-muted: #a0a6b1;
    --font-headings: 'Poppins', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --accent: #0ecb81; 
}

.calc-container-horizontal.modo-compra { --accent: #0ecb81; }
.calc-container-horizontal.modo-venta { --accent: #f6465d; }
.calc-container-horizontal.modo-ciclo { --accent: #f0b90b; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

.container { max-width: 800px; margin: 0 auto; padding: 20px; }
.nav-header { padding: 20px 0; margin-bottom: 20px; }
.btn-back { 
    color: #f0b90b; text-decoration: none; font-weight: 600; 
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-headings);
    transition: 0.2s;
}
.btn-back:hover { color: #fff; }

.blog-post { color: var(--text-main); line-height: 1.6; }
.post-tag { color: #f0b90b; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; margin-bottom: 15px; display: block; font-family: var(--font-headings); }
.blog-post h1 { font-family: var(--font-headings); font-size: 2.3rem; line-height: 1.2; color: #fff; margin-bottom: 25px; }
.blog-post h2 { font-family: var(--font-headings); color: #f0b90b; margin: 45px 0 20px; font-size: 1.7rem; }
.blog-post h3 { font-family: var(--font-headings); color: #fff; margin: 30px 0 15px; font-size: 1.3rem; }
.blog-post p { margin-bottom: 20px; font-size: 1.1rem; color: var(--text-muted); text-align: justify; }
.blog-post ul, .blog-post ol { margin-bottom: 25px; padding-left: 30px; color: var(--text-muted); font-size: 1.1rem; }
.blog-post li { margin-bottom: 12px; }
.blog-post li strong { color: #fff; font-weight: 500; }

.post-image-container { margin: 35px 0; width: 100%; max-width: 754px; margin-left: auto; margin-right: auto; }
.img-responsive { display: block; width: 100%; height: auto; aspect-ratio: 754 / 424; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color); background-color: #111; }

.calc-container-horizontal {
    background: #1e2329;
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--accent);
    border-radius: 12px;
    overflow: hidden;
    margin: 45px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: border-color 0.3s ease;
}

.calc-tabs-header { display: flex; background: var(--bg-card); border-bottom: 1px solid var(--border-color); }

.tab-btn {
    flex: 1; padding: 15px; background: transparent; border: none;
    color: var(--text-muted); cursor: pointer; font-weight: bold; font-size: 12px;
    font-family: var(--font-body); transition: all 0.3s ease;
}
.tab-btn:hover { color: #fff; }

.tab-btn.active { 
    color: var(--accent); 
    background: #1e2329; 
    border-bottom: 2px solid var(--accent); 
}

.calc-content { display: flex; flex-wrap: wrap; }

.calc-inputs {
    flex: 1.3;
    padding: 25px;
    border-right: 1px solid var(--border-color);
    min-width: 320px;
}

.input-row { display: flex; gap: 15px; margin-bottom: 15px; }
.input-group { flex: 1; margin-bottom: 15px; }
#rowTasaSimple { margin-bottom: 15px; }

.input-group label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 8px; font-weight: 700; }

.calc-container-horizontal input, 
.calc-container-horizontal select {
    width: 100%; padding: 12px 14px; background: #2b3139; border: 1px solid #474d57;
    color: #fff; border-radius: 6px; font-size: 14px; outline: none;
    font-family: var(--font-body);
}

.calc-container-horizontal select {
    padding-right: 25px;
    text-overflow: ellipsis;
    cursor: pointer;
}

.calc-container-horizontal input:focus, 
.calc-container-horizontal select:focus { border-color: var(--accent); }

.btn-limpiar {
    width: 100%; margin-top: 0px; padding: 12px; background: rgba(246, 70, 93, 0.1);
    border: 1px solid #ff5c77; color: #ff5c77;
    border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 700;
    transition: 0.2s;
}
.btn-limpiar:hover { background: #f6465d; color: #fff; border-color: #f6465d; }

.calc-results-display {
    flex: 1; padding: 25px; background: rgba(0,0,0,0.15);
    display: flex; flex-direction: column; justify-content: center; min-width: 280px;
}

.res-item { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 13px; color: var(--text-muted); font-weight: 500; }
.res-item b { color: #fff; }

.res-total-box {
    text-align: center; background: var(--bg-card); padding: 25px;
    border-radius: 8px; border: 1px solid var(--border-color); margin-top: 10px;
}

.total-val { 
    font-size: 34px; font-weight: 700; color: var(--accent); 
    font-family: monospace; margin-bottom: 5px; transition: color 0.3s; 
}
.total-pct { font-size: 13px; color: var(--text-muted); font-weight: 700; }

.fee-link { text-align: center; margin-top: 20px; }
.fee-link a { color: #f0b90b; font-size: 11px; text-decoration: none; opacity: 0.8; font-weight: 500; transition: 0.2s; }
.fee-link a:hover { opacity: 1; text-decoration: underline; }

.text-red { color: #ff5c77 !important; }

/* =========================================================
   DISEÑO MÓVIL ULTRA COMPACTO (TIPO WIDGET NATIVO)
========================================================= */
@media (max-width: 768px) {
    .calc-content { flex-direction: column; }
    
    /* Márgenes y rellenos drásticamente reducidos */
    .calc-container-horizontal { margin: 25px 0; }
    .calc-inputs { border-right: none; border-bottom: 1px solid var(--border-color); padding: 15px; min-width: 100%; }
    .calc-results-display { padding: 15px; min-width: 100%; }
    
    /* Cuadrícula perfecta 50/50 para que no se deformen los inputs */
    .input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
    
    .input-group { margin-bottom: 12px; width: 100%; }
    #rowTasaSimple { margin-bottom: 12px; }
    
    .input-group label { font-size: 9px; margin-bottom: 5px; letter-spacing: 0.5px; }

    /* Inputs más bajitos y con texto ajustado */
    .calc-container-horizontal input, 
    .calc-container-horizontal select {
        padding: 8px 10px; font-size: 12px; height: 36px;
    }

    /* Pestañas reducidas */
    .tab-btn { padding: 12px 2px; font-size: 9px; line-height: 1.2; letter-spacing: -0.2px; }
    
    .btn-limpiar { padding: 10px; font-size: 11px; height: 36px; }

    /* Resultados compactos */
    .res-item { margin-bottom: 10px; font-size: 11px; }
    .res-total-box { padding: 15px; margin-top: 5px; }
    .total-val { font-size: 26px; }
    .total-pct { font-size: 11px; }
    
    .img-responsive { aspect-ratio: auto; height: auto; }
}