/* ============================================================
   PAGINAS.CSS
   Hoja de estilos compartida para todas las páginas internas
   del sitio (distintas de index.html): criptos.html y futuras
   páginas. Se carga DESPUÉS de styles.css y reutiliza las mismas
   variables de tema (--purple, --teal, --coral, --bg-0, etc.)
   ============================================================ */

/* Colores de riesgo (no cambian con el tema claro/oscuro) */
:root{
    --risk-green:#0f9d6e;
    --risk-yellow:#c98a12;
    --risk-red:#d6334a;
}
html[data-theme="dark"]{
    --risk-green:#1ec998;
    --risk-yellow:#eab23a;
    --risk-red:#f5495f;
}

/* ============================================================
   HERO DE PÁGINA INTERNA (más compacto que el de index)
   ============================================================ */
.page-hero{
    position:relative;
    overflow:hidden;
    padding:64px 0 56px;
    background:
        radial-gradient(420px 260px at 85% 20%, var(--purple-tint), transparent 70%),
        radial-gradient(360px 220px at 10% 90%, var(--teal-tint), transparent 70%);
    border-bottom:1px solid var(--border-soft);
}
.page-hero .container{max-width:880px;}
.page-hero h1{font-size:clamp(28px,4.2vw,44px);line-height:1.15;margin-top:14px;}
.page-hero p.lead{font-size:16.5px;color:var(--text-1);max-width:620px;margin:18px 0 26px;}
.page-hero .hero-buttons{display:flex;gap:14px;flex-wrap:wrap;}

/* ============================================================
   SECCIONES DE CONTENIDO / EDUCACIÓN
   ============================================================ */
.info-section{padding:72px 0;}
.info-section.alt{background:var(--bg-1);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);}
.info-section-head{max-width:680px;margin:0 0 40px;}
.info-section-head h2{font-size:28px;line-height:1.25;margin-top:12px;}
.info-section-head p{color:var(--text-1);font-size:15.5px;margin-top:14px;}

.concept-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.concept-card{
    background:var(--bg-2);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    padding:30px;
    box-shadow:var(--shadow-card);
}
.concept-card .ico{
    width:46px;height:46px;border-radius:var(--radius-md);
    background:var(--purple-tint);color:var(--purple);
    display:flex;align-items:center;justify-content:center;font-size:19px;
    margin-bottom:16px;
}
.concept-card.c-teal .ico{background:var(--teal-tint);color:var(--teal);}
.concept-card.c-coral .ico{background:var(--coral-tint);color:var(--coral);}
.concept-card.c-pink .ico{background:var(--pink-tint);color:var(--pink);}
.concept-card h3{font-size:18px;margin-bottom:10px;}
.concept-card p{color:var(--text-1);font-size:14.5px;line-height:1.7;margin:0 0 10px;}
.concept-card p:last-child{margin-bottom:0;}
.concept-card strong{color:var(--text-0);}
.concept-card.full{grid-column:1 / -1;}

/* Tabla de ejemplos (apalancamiento, volatilidad) */
.example-table-wrap{overflow-x:auto;margin-top:16px;border-radius:var(--radius-md);border:1px solid var(--border-soft);}
.example-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px;}
.example-table th,.example-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border-soft);white-space:nowrap;}
.example-table th{
    font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;
    color:var(--text-2);background:var(--bg-1);font-weight:600;
}
.example-table tr:last-child td{border-bottom:none;}
.example-table td.up{color:var(--risk-green);font-weight:600;}
.example-table td.down{color:var(--risk-red);font-weight:600;}
.example-table td.label{font-weight:600;color:var(--text-0);}

/* Caja de aviso / disclaimer */
.disclaimer-box{
    display:flex;gap:16px;align-items:flex-start;
    background:var(--coral-tint);
    border:1px solid rgba(194,84,15,.25);
    border-radius:var(--radius-md);
    padding:22px 24px;
    margin-top:36px;
}
.disclaimer-box i{color:var(--coral);font-size:20px;flex-shrink:0;margin-top:2px;}
.disclaimer-box h4{margin:0 0 6px;font-size:15px;color:var(--text-0);}
.disclaimer-box p{margin:0;font-size:13.5px;color:var(--text-1);line-height:1.6;}

/* ============================================================
   SISTEMA DE ANÁLISIS — TABS
   ============================================================ */
.cs-tabs-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.cs-tab-cripto,.cs-tab-temp{
    font-family:var(--font-mono);
    font-size:13px;font-weight:600;
    padding:9px 18px;border-radius:999px;
    background:var(--bg-2);border:1px solid var(--border-soft);
    color:var(--text-1);cursor:pointer;
    transition:all .15s ease;
}
.cs-tab-cripto:hover,.cs-tab-temp:hover{border-color:var(--purple);color:var(--text-0);}
.cs-tab-cripto.active,.cs-tab-temp.active{background:var(--purple);border-color:var(--purple);color:#fff;}

/* ============================================================
   TARJETA DE MERCADO EN VIVO
   ============================================================ */
.cs-market-card{
    background:var(--bg-2);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    padding:28px;
    box-shadow:var(--shadow-card);
    position:relative;
    transition:opacity .2s ease;
}
.cs-market-card.cs-loading{opacity:.55;pointer-events:none;}
.cs-market-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:22px;}
.cs-market-price-block .nombre{font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;}
.cs-market-price-block .precio{font-size:32px;font-weight:800;color:var(--text-0);margin-top:4px;}
.cs-cambio{font-size:14px;font-weight:700;font-family:var(--font-mono);}
.cs-cambio.cs-up{color:var(--risk-green);}
.cs-cambio.cs-down{color:var(--risk-red);}
.cs-market-meta{display:flex;gap:22px;font-size:12.5px;color:var(--text-2);}
.cs-market-meta strong{color:var(--text-0);display:block;font-size:13px;margin-top:2px;}
.cs-market-temp-label{font-family:var(--font-mono);font-size:11.5px;color:var(--text-2);}

.cs-refrescar-btn{
    background:var(--bg-1);border:1px solid var(--border-soft);color:var(--text-1);
    width:36px;height:36px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:14px;
    transition:border-color .15s, color .15s;
}
.cs-refrescar-btn:hover{border-color:var(--purple);color:var(--purple);}

.cs-indicator-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px;}
.cs-indicator{background:var(--bg-1);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:16px;}
.cs-indicator .lbl{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin-bottom:8px;display:block;}
.cs-pill{display:inline-block;font-weight:700;font-size:14.5px;}
.cs-pill-alcista{color:var(--risk-green);}
.cs-pill-bajista{color:var(--risk-red);}
.cs-pill-lateral{color:var(--text-1);}
.cs-pill-vol-baja{color:var(--risk-green);}
.cs-pill-vol-media{color:var(--risk-yellow);}
.cs-pill-vol-alta{color:var(--risk-red);}

.cs-leverage-box{
    margin-top:18px;padding:16px 18px;border-radius:var(--radius-md);
    background:var(--purple-tint);border:1px solid rgba(91,141,239,.2);
    display:flex;gap:14px;align-items:flex-start;
}
.cs-leverage-box i{color:var(--purple);font-size:18px;margin-top:2px;}
.cs-leverage-box .val{font-size:18px;font-weight:800;color:var(--text-0);}
.cs-leverage-box .nota{font-size:13px;color:var(--text-1);margin-top:4px;}

.cs-mercado-error{
    display:none;margin-top:16px;padding:14px 18px;border-radius:var(--radius-md);
    background:rgba(214,51,74,.08);border:1px solid rgba(214,51,74,.25);
    color:var(--risk-red);font-size:13.5px;
}

/* ============================================================
   NOTICIAS
   ============================================================ */
.cs-news-card{background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:24px;margin-top:24px;}
.cs-news-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.cs-news-head h3{font-size:15px;}
.cs-news-list{display:flex;flex-direction:column;gap:2px;}
.cs-news-item{display:flex;flex-direction:column;gap:3px;padding:13px 8px;border-radius:var(--radius-sm);transition:background .15s;}
.cs-news-item:hover{background:var(--bg-1);}
.cs-news-source{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--purple);}
.cs-news-title{font-size:13.5px;color:var(--text-0);font-weight:600;line-height:1.4;}
.cs-news-time{font-size:11.5px;color:var(--text-2);}
.cs-news-loading,.cs-news-error{font-size:13px;color:var(--text-1);padding:8px;}

/* ============================================================
   SIMULADOR DE ENTRADA
   ============================================================ */
.cs-sim-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;}
.cs-sim-form{background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-card);}
.cs-field{margin-bottom:20px;}
.cs-field label{display:block;font-size:13px;font-weight:600;color:var(--text-0);margin-bottom:8px;}
.cs-field .hint{font-size:12px;color:var(--text-2);margin-top:6px;}
.cs-input{
    width:100%;padding:12px 14px;border-radius:var(--radius-sm);
    background:var(--bg-1);border:1px solid var(--border-soft);
    color:var(--text-0);font-family:var(--font-display);font-size:14.5px;outline:none;
    transition:border-color .15s;
}
.cs-input:focus{border-color:var(--purple);}
.cs-input-row{display:flex;gap:10px;align-items:center;}
.cs-input-row .cs-input{flex:1;}

.cs-range-row{display:flex;align-items:center;gap:14px;}
.cs-range-row input[type="range"]{flex:1;accent-color:var(--purple);}
.cs-range-value{font-family:var(--font-mono);font-weight:700;color:var(--purple);min-width:46px;text-align:right;}

.cs-radio-group{display:flex;gap:12px;}
.cs-radio-option{flex:1;}
.cs-radio-option input{display:none;}
.cs-radio-option label{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:13px;border-radius:var(--radius-sm);border:1px solid var(--border-soft);
    background:var(--bg-1);cursor:pointer;font-size:13.5px;font-weight:600;color:var(--text-1);
    transition:all .15s;
}
.cs-radio-option input:checked + label{border-color:var(--risk-green);color:var(--risk-green);background:rgba(15,157,110,.08);}
.cs-radio-option:nth-child(2) input:checked + label{border-color:var(--risk-red);color:var(--risk-red);background:rgba(214,51,74,.08);}

.cs-sim-buttons{display:flex;gap:12px;margin-top:6px;flex-wrap:wrap;}

/* Resultado del simulador */
.cs-result-card{background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-card);min-height:200px;}
.cs-risk-badge{display:inline-block;font-size:13px;font-weight:700;padding:8px 16px;border-radius:999px;margin-bottom:18px;}
.cs-risk-seguro{background:rgba(15,157,110,.12);color:var(--risk-green);}
.cs-risk-moderado{background:rgba(201,138,18,.12);color:var(--risk-yellow);}
.cs-risk-peligroso{background:rgba(214,51,74,.12);color:var(--risk-red);}
.cs-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
.cs-result-grid div{background:var(--bg-1);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:12px 14px;}
.cs-result-grid span{display:block;font-size:11.5px;color:var(--text-2);margin-bottom:4px;}
.cs-result-grid strong{font-size:15px;color:var(--text-0);}
.cs-result-reasons{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.cs-result-reasons li{font-size:13px;color:var(--text-1);padding-left:18px;position:relative;line-height:1.5;}
.cs-result-reasons li::before{content:'•';position:absolute;left:4px;color:var(--purple);}
.cs-result-disclaimer{font-size:12px;color:var(--text-2);display:flex;gap:6px;align-items:flex-start;margin:0;}
.cs-result-warning{color:var(--risk-yellow);font-size:13.5px;}
.cs-result-placeholder{color:var(--text-2);font-size:13.5px;}

/* ============================================================
   MIS OPERACIONES
   ============================================================ */
.cs-ops-list{display:flex;flex-direction:column;gap:18px;margin-top:28px;}
.cs-op-card{background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:22px 24px;}
.cs-op-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.cs-op-cripto{font-weight:700;font-size:15px;color:var(--text-0);}
.cs-op-dir{font-family:var(--font-mono);font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;}
.cs-dir-long{background:rgba(15,157,110,.12);color:var(--risk-green);}
.cs-dir-short{background:rgba(214,51,74,.12);color:var(--risk-red);}
.cs-op-fecha{margin-left:auto;font-size:12px;color:var(--text-2);}
.cs-op-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px;}
.cs-op-grid div span{display:block;font-size:11px;color:var(--text-2);margin-bottom:3px;}
.cs-op-grid div strong{font-size:13.5px;color:var(--text-0);}
.cs-op-actions{display:flex;gap:10px;margin-bottom:6px;}
.cs-op-result{margin-top:14px;}
.cs-op-result:empty{margin:0;}
.cs-op-precio-actual{font-size:13.5px;color:var(--text-1);margin-bottom:12px;}
.cs-ops-vacio{text-align:center;padding:40px 20px;color:var(--text-2);font-size:14px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
    .concept-grid{grid-template-columns:1fr;}
    .cs-indicator-grid{grid-template-columns:repeat(2,1fr);}
    .cs-sim-grid{grid-template-columns:1fr;}
    .cs-op-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
    .page-hero{padding:48px 0 40px;}
    .info-section{padding:52px 0;}
    .cs-indicator-grid{grid-template-columns:1fr 1fr;}
    .cs-result-grid{grid-template-columns:1fr;}
    .cs-market-top{flex-direction:column;}
    .cs-op-grid{grid-template-columns:1fr 1fr;}
    .cs-radio-group{flex-direction:column;}
}