/* ==========================================================================
   Perfil page — production layout replica
   Sources: Perfil_p.vue, Cotizacion_c.vue, Cuad_tecnico_c.vue,
            Chat_c.vue (read-only), Coti_hist_c.vue, Logo_especie_c.vue
   ========================================================================== */

/* --- Logo circle (from Logo_especie_c) --- */
#perfil-page .logo-circle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-weight: bold;
    color: #fff;
    background: #6c757d;
}

#perfil-page .logo-circle img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%;
}

/* --- Container (#contenido) responsive widths --- */
#contenido {
    width: 100%;
    padding: 30px 15px;
    margin: 0 auto;
}

/* --- Title (#titulo) --- */
#titulo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
    width: 100%;
}

#titulo h1 {
    font-size: 20px;
    font-weight: bolder;
    margin: 0;
    padding-left: 5px;
}

#titulo h1 .gray {
    color: var(--text-muted);
}

/* --- Cotización card --- */
#Cotizacion-c > .rava-gray-border {
    padding: 15px;
}

#Cotizacion-c .bolder,
#Cotizacion-c .negativo,
#Cotizacion-c .positivo,
#izqCotiza p:first-child {
    font-weight: bolder;
}

#izqCotiza .gris {
    color: var(--text-muted);
}

#izqCotiza {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#izqCotiza p {
    margin: 0;
}

#izqCotiza p:first-child {
    font-size: 24px;
}

#izqCotiza p:nth-child(2) {
    font-size: 20px;
}

#centroCotiza ul,
#derCotiza ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#centroCotiza ul li,
#derCotiza ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Cuadro Técnico --- */
#Cuad-tecnico-c {
    margin-top: 15px;
}

#Cuad-tecnico-c .tab-title {
    font-weight: bolder;
    color: var(--rava-gold-medium);
    padding: 8px 10px;
    font-size: 14px;
    border-bottom: 4px solid var(--rava-gold-medium);
    margin: 0;
}

#Cuad-tecnico-c .ct-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

#Cuad-tecnico-c .ct-flex .ct-col {
    /* Mobile default: apilado vertical. Desktop override abajo en media query. */
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

#Cuad-tecnico-c .ct-flex .ct-col:first-child {
    padding-top: 0;
}

#Cuad-tecnico-c .ct-flex ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#Cuad-tecnico-c .ct-flex ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#Cuad-tecnico-c .ct-flex ul li .section-title {
    font-weight: bolder;
    display: block;
    width: 100%;
}

#Cuad-tecnico-c .ct-flex ul li .corte {
    font-weight: bolder;
    margin-top: 10px;
    display: block;
    width: 100%;
}

/* MM grid section */
#Cuad-tecnico-c .mm-grid {
    margin-top: 20px;
    display: block;
}

#Cuad-tecnico-c .mm-grid .mm-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

#Cuad-tecnico-c .mm-grid .mm-block {
    width: 100%;
}

#Cuad-tecnico-c .mm-grid .mm-block p {
    margin: 0;
    padding: 2px 0;
}

#Cuad-tecnico-c .mm-grid .tituloGral {
    font-weight: bolder;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

#Cuad-tecnico-c .mm-grid .mm-values {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#Cuad-tecnico-c .mm-grid .mm-values p {
    width: 20%;
    text-align: right;
}

#Cuad-tecnico-c .mm-grid .mm-titles {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bolder;
    font-size: 12px;
}

#Cuad-tecnico-c .mm-grid .mm-titles p {
    width: 20%;
    text-align: right;
}

/* --- Intradiario --- */
.intradiario-section {
    padding: 10px 0;
    margin-bottom: 15px;
}

.intradiario-section > p {
    margin: 0;
    margin-left: 10px;
    font-weight: bolder;
    font-size: 14px;
}

/* --- Chat / Foro (read-only) --- */
#Chat-c {
    background: var(--section-gray);
    border-radius: 4px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 34px;
    max-height: 500px;
    overflow-y: hidden;
    transition: height 0.2s linear;
}

#Chat-c.abierto {
    height: 500px;
}

#Chat-c.cerrado {
    height: 34px;
}

#Chat-c header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    width: 100%;
    height: 34px;
    z-index: 3;
    user-select: none;
}

#Chat-c header p {
    margin: 0;
    font-weight: bolder;
}

#Chat-c header .chat-toggle {
    cursor: pointer;
    height: 24px;
    user-select: none;
}

#chat-messages {
    width: 100%;
    height: 100%;
    padding: 0 10px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #aaa transparent;
    transition: opacity 0.3s linear;
}

#chat-messages::-webkit-scrollbar {
    width: 10px;
}

#chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

#chat-messages::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 6px;
}

#chat-messages .msj {
    padding: 5px 10px;
    width: 90%;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    font-size: 14px;
    margin: 10px 0;
    background: white;
    word-wrap: break-word;
}

#chat-messages .msj .headerMsj {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 24px;
}

#chat-messages .msj .headerMsj .fecha,
#chat-messages .msj .datosMsj .hora {
    font-size: 12px;
}

#chat-messages .msj p.user {
    color: var(--rava-blue-medium);
    font-weight: bolder;
    margin-bottom: 0;
    margin-top: 0;
}

#chat-messages .msj p {
    margin-top: 0;
}

#chat-messages .msj .datosMsj {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#chat-messages .msj .datosMsj .cantLikes {
    font-size: 12px;
}

#chat-messages .d-none-chat {
    display: none;
}

/* --- Foro topic cross-links --- */
.foro-header-link {
    font-size: 12px;
    font-weight: bold;
    color: var(--rava-blue-medium);
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.foro-header-link:hover {
    background: var(--rava-blue-01);
    color: var(--rava-blue-strong);
    text-decoration: none;
}

.foro-topic-link {
    display: block;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: var(--rava-blue-medium);
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.foro-topic-link:hover {
    background: var(--rava-blue-strong);
    text-decoration: none;
    color: #fff;
}

/* --- Cotizaciones Históricas --- */
#Coti-hist-c {
    position: relative;
}

#Coti-hist-c .tab-title {
    font-weight: bolder;
    color: var(--rava-gold-medium);
    padding: 8px 10px;
    font-size: 14px;
    border-bottom: 4px solid var(--rava-gold-medium);
    margin: 0;
}

#coti-hist-scroll {
    max-height: 200px;
    overflow-y: scroll;
}

#coti-hist-scroll::-webkit-scrollbar {
    width: 6px;
}

#Coti-hist-c table {
    width: 100%;
    border-collapse: collapse;
}

#Coti-hist-c td,
#Coti-hist-c th {
    padding: 3px 0;
    text-align: right;
    font-size: 10px;
}

#Coti-hist-c td:first-child,
#Coti-hist-c th:first-child {
    text-align: left;
    padding-left: 5px;
}

#Coti-hist-c td:last-child,
#Coti-hist-c th:last-child {
    padding-right: 5px;
}

#Coti-hist-c tr {
    border-bottom: 0;
}

#Coti-hist-c table tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.03);
}

#Coti-hist-c table tr:hover {
    background: var(--rava-blue-02);
}

#Coti-hist-c table tr:first-child {
    background: var(--rava-blue-01);
}

#Coti-hist-c table tr:first-child:hover {
    background: var(--rava-blue-01);
}

#Coti-hist-c .noAbbr {
    display: none;
}

/* --- Perfil text section --- */
.perfil-text {
    padding: 10px;
    margin-top: 15px;
}

.perfil-text p:first-child {
    margin: 0;
    font-weight: bolder;
    font-size: 14px;
}

.perfil-text p:nth-child(2) {
    margin: 0;
    margin-top: 10px;
    font-size: 13px;
    text-align: justify;
}

/* --- Más info (exterior) --- */
#masInfo {
    padding: 10px;
    margin-top: 15px;
}

#masInfo > p {
    margin: 0;
    margin-bottom: 10px;
    font-weight: bolder;
    font-size: 14px;
}

#masInfo ul {
    padding-left: 0;
    list-style: none;
}

#masInfo ul li a {
    color: var(--rava-blue-medium);
    font-weight: bolder;
}

#masInfo ul li p {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 0;
}

/* --- Balance table --- */
.balance-section {
    margin-top: 15px;
}

.balance-section .tab-title {
    font-weight: bolder;
    color: var(--rava-gold-medium);
    padding: 8px 10px;
    font-size: 14px;
    border-bottom: 4px solid var(--rava-gold-medium);
    margin: 0;
}

.balance-section table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.balance-section td,
.balance-section th {
    padding: 4px 6px;
    text-align: right;
}

.balance-section td:first-child,
.balance-section th:first-child {
    text-align: left;
}

.balance-section table tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.03);
}

.balance-section table tr:hover {
    background: var(--rava-blue-02);
}

.balance-section table thead tr {
    background: var(--rava-blue-01) !important;
}

/* --- Artículos --- */
.articulos-section {
    margin-top: 15px;
}

.articulos-section .tab-title {
    font-weight: bolder;
    color: var(--rava-gold-medium);
    padding: 8px 10px;
    font-size: 14px;
    border-bottom: 4px solid var(--rava-gold-medium);
    margin: 0;
}

.articulos-section .art-item {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.articulos-section .art-item a {
    color: var(--rava-blue-medium);
    font-weight: bolder;
    font-size: 14px;
}

.articulos-section .art-item .art-date {
    float: right;
    color: var(--text-muted);
    font-size: 12px;
}

.articulos-section .art-item .art-desc {
    color: var(--text-muted);
    font-size: 12px;
    margin: 2px 0 0;
}

/* --- Noticias --- */
.noticias-section {
    margin-top: 15px;
}

.noticias-section .tab-title {
    font-weight: bolder;
    color: var(--rava-gold-medium);
    padding: 8px 10px;
    font-size: 14px;
    border-bottom: 4px solid var(--rava-gold-medium);
    margin: 0;
}

/* --- Balance EPS + Histórico (match legacy www2), 2026-04-23 --- */
.balance-section .tabla-cotizaciones {
    /* Override min-height:700px del componente generico (pensado para listados largos de cotizaciones). */
    min-height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 10px 10px;
    contain: none !important;
}
.balance-section .balance-eps th,
.balance-section .balance-eps td { text-align: center; }
.balance-section .balance-hist th { text-align: right; padding: 6px 8px; font-size: 11.5px; }
.balance-section .balance-hist th:first-child { text-align: left; }
.balance-section .balance-hist td { padding: 6px 8px; font-size: 12.5px; }
.balance-section .balance-hist td.anio { font-weight: bolder; }
.balance-section .balance-hist td.bolder { font-weight: bolder; text-align: left; padding-left: 6px; }
.balance-section .balance-hist td.negativo.estimado { color: var(--text-muted); font-style: italic; }
.balance-section #balanceDatos { padding: 8px 14px; font-size: 12px; color: var(--text-muted); display: flex; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid rgba(0,0,0,0.05); }
.balance-section #balanceDatos p { margin: 0; }
.balance-section #balanceDatos span { font-weight: 600; color: var(--text-primary, #444); }
.balance-section .balance-aclaracion { padding: 6px 14px; margin: 0; font-size: 11px; color: var(--text-muted); font-style: italic; }

/* --- Cuadro técnico: ultimo-div (resumen inferior, match legacy), 2026-04-23 --- */
#Cuad-tecnico-c .ultimo-div { padding: 10px 14px 14px; border-top: 1px solid rgba(0,0,0,0.06); display: flex; gap: 0; }
#Cuad-tecnico-c .ultimo-div #MM,
#Cuad-tecnico-c .ultimo-div #noMM { display: flex; justify-content: space-between; width: 50%; margin-top: 0; }
#Cuad-tecnico-c .ultimo-div #MM200, #Cuad-tecnico-c .ultimo-div #SST { width: 24%; border-right: 1px solid rgba(0,0,0,0.10); padding: 0 8px; }
#Cuad-tecnico-c .ultimo-div #SST { border-right: 0; padding-right: 0; }
#Cuad-tecnico-c .ultimo-div #MM21, #Cuad-tecnico-c .ultimo-div #MACD { width: 76%; padding: 0 8px; border-right: 1px solid rgba(0,0,0,0.10); }
#Cuad-tecnico-c .ultimo-div .tituloGral { text-align: center; font-weight: bolder; font-size: 12px; margin: 0 0 4px; }
#Cuad-tecnico-c .ultimo-div .titulosMedio { display: flex; font-size: 11px; font-weight: bolder; color: var(--text-muted); }
#Cuad-tecnico-c .ultimo-div .titulosMedio p { margin: 0; flex: 0 0 auto; text-align: center; }
#Cuad-tecnico-c .ultimo-div #MM21 .titulosMedio p:nth-of-type(1),
#Cuad-tecnico-c .ultimo-div #MACD .titulosMedio p:nth-of-type(1) { width: 80%; border-right: 1px solid rgba(0,0,0,0.10); }
#Cuad-tecnico-c .ultimo-div #MM21 .titulosMedio p:nth-of-type(2),
#Cuad-tecnico-c .ultimo-div #MACD .titulosMedio p:nth-of-type(2) { width: 20%; }
#Cuad-tecnico-c .ultimo-div .titulos,
#Cuad-tecnico-c .ultimo-div .valores { display: flex; justify-content: space-between; }
#Cuad-tecnico-c .ultimo-div .titulos p { font-size: 11px; font-weight: bolder; text-align: right; margin: 0; width: 20%; }
#Cuad-tecnico-c .ultimo-div .valores p { font-size: 13px; text-align: right; margin: 2px 0 0; width: 20%; }
#Cuad-tecnico-c .ultimo-div .titulos p:nth-of-type(4),
#Cuad-tecnico-c .ultimo-div .valores p:nth-of-type(4) { border-right: 1px solid rgba(0,0,0,0.10); padding-right: 4px; }
#Cuad-tecnico-c .ultimo-div .titulos p.center,
#Cuad-tecnico-c .ultimo-div .valores p.center { text-align: center; }
#Cuad-tecnico-c .ultimo-div #MM200 .valores p,
#Cuad-tecnico-c .ultimo-div #SST .valores p { font-size: 16px; font-weight: bolder; margin: 8px 0 0; width: 100%; }
.dark #Cuad-tecnico-c .ultimo-div { border-top-color: rgba(255,255,255,0.08); }
.dark #Cuad-tecnico-c .ultimo-div #MM200,
.dark #Cuad-tecnico-c .ultimo-div #SST,
.dark #Cuad-tecnico-c .ultimo-div #MM21 .titulosMedio p:nth-of-type(1),
.dark #Cuad-tecnico-c .ultimo-div #MACD .titulosMedio p:nth-of-type(1),
.dark #Cuad-tecnico-c .ultimo-div .titulos p:nth-of-type(4),
.dark #Cuad-tecnico-c .ultimo-div .valores p:nth-of-type(4) { border-right-color: rgba(255,255,255,0.12); }

/* --- Balance table (curada, 2026-04-23) --- */
.balance-section {
    margin-top: 15px;
}
.balance-section .tab-title {
    font-weight: bolder;
    color: var(--rava-gold-medium);
    padding: 8px 10px;
    font-size: 14px;
    border-bottom: 4px solid var(--rava-gold-medium);
    margin: 0;
}
.balance-section .tabla-cotizaciones {
    padding: 0;
}
.balance-section .balance-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.balance-section .balance-table th {
    background: rgba(0, 0, 0, 0.03);
    padding: 8px 10px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    white-space: nowrap;
}
.balance-section .balance-table th:first-child,
.balance-section .balance-table td:first-child {
    text-align: left;
}
.balance-section .balance-table td {
    padding: 8px 10px;
    text-align: right;
    font-size: 13px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    white-space: nowrap;
}
.balance-section .balance-table tr:last-child td {
    border-bottom: 0;
}
.balance-section .balance-table .positivo { color: var(--rava-green, #2ca758); }
.balance-section .balance-table .negativo { color: var(--rava-red, #d9534f); }
.dark .balance-section .balance-table th { background: rgba(255, 255, 255, 0.04); color: #bbb; border-bottom-color: rgba(255, 255, 255, 0.08); }
.dark .balance-section .balance-table td { border-bottom-color: rgba(255, 255, 255, 0.05); }

/* --- Noticia item (diseno alineado a .articulos-section .art-item, 2026-04-23) --- */
.noticias-section .noticia-item {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.noticias-section .noticia-item:last-child { border-bottom: 0; }
.noticias-section .noticia-item.noticia-with-thumb {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.noticias-section .noticia-thumb-link {
    flex: 0 0 auto;
    display: block;
    width: 80px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--rava-gray-light, #eee);
}
.noticias-section .noticia-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.noticias-section .noticia-with-thumb .noticia-content {
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 600px) {
    .noticias-section .noticia-thumb-link { width: 64px; height: 50px; }
}
.dark .noticias-section .noticia-thumb-link { background: rgba(255,255,255,0.05); }
.noticias-section .noticia-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
    line-height: 1.4;
}
.noticias-section .noticia-meta .art-date { font-weight: 600; }
.noticias-section .noticia-meta .noticia-fuente { color: var(--text-muted); }
.noticias-section .noticia-titulo {
    display: block;
    font-size: 14px;
    font-weight: bolder;
    color: var(--rava-blue-medium);
    text-decoration: none;
    line-height: 1.35;
}
.noticias-section .noticia-titulo:hover { text-decoration: underline; }
.noticias-section .noticia-resumen {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}
.noticias-section .noticia-ver-mas {
    padding: 10px 14px !important;
    text-align: right;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.noticias-section .noticia-ver-mas a {
    color: var(--rava-blue-medium);
    font-weight: 600;
    text-decoration: none;
    font-size: 12px;
}
.noticias-section .noticia-ver-mas a:hover { text-decoration: underline; }
.noticias-section .noticia-idioma-badge {
    display: inline-block;
    background: rgba(10, 80, 145, 0.08);
    color: var(--rava-blue-medium);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
    letter-spacing: 0.3px;
    vertical-align: middle;
    cursor: help;
}
.noticias-section .noticia-original {
    margin: 2px 0 0 0;
    font-size: 11.5px;
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.35;
}
.dark .noticias-section .noticia-idioma-badge {
    background: rgba(100, 160, 220, 0.15);
    color: #7fb3e8;
}
.dark .noticias-section .noticia-item { border-bottom-color: rgba(255, 255, 255, 0.08); }
.dark .noticias-section .noticia-ver-mas { border-top-color: rgba(255, 255, 255, 0.08); }
.dark .noticias-section .noticia-resumen { color: #bbb; }


/* --- "Sin datos" --- */
.sin-datos {
    padding: 25vh 15px;
    text-align: center;
    color: var(--rava-blue-light);
    font-weight: bolder;
    font-size: 20px;
}

/* --- Positivo / Negativo global for perfil --- */
#perfil-page .positivo {
    color: var(--color-sucess);
    font-weight: bolder;
}

#perfil-page .negativo {
    color: var(--color-danger);
    font-weight: bolder;
}

#perfil-page .bolder {
    font-weight: bolder;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
.dark #perfil-page .rava-gray-border {
    background: var(--dark-mode);
}

.dark #titulo h1 {
    color: var(--lightgray);
}

.dark #izqCotiza p,
.dark #centroCotiza ul li,
.dark #derCotiza ul li {
    color: var(--lightgray);
}

.dark #Cuad-tecnico-c li {
    color: var(--lightgray);
}

.dark #Cuad-tecnico-c .tab-title,
.dark #Coti-hist-c .tab-title,
.dark .balance-section .tab-title,
.dark .articulos-section .tab-title,
.dark .noticias-section .tab-title {
    color: var(--dark-mode-gold);
    border-bottom-color: var(--dark-mode-gold);
}

.dark #Chat-c {
    background: var(--dark-mode);
}

.dark #Chat-c header {
    color: var(--lightgray);
}

.dark #chat-messages .msj {
    background: var(--dark-mode-gray);
    color: var(--lightgray);
}

.dark #chat-messages .msj p.user {
    color: var(--dark-mode-blue);
}

.dark .foro-header-link {
    color: var(--dark-mode-blue);
}

.dark .foro-header-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.dark .foro-topic-link {
    background: var(--rava-blue-07);
}

.dark .foro-topic-link:hover {
    background: var(--rava-blue-medium);
}

.dark #Coti-hist-c td,
.dark #Coti-hist-c th {
    color: var(--lightgray);
}

.dark #Coti-hist-c table tr:nth-child(even),
.dark .balance-section table tr:nth-child(even) {
    background: var(--dark-mode-black);
}

.dark .perfil-text p,
.dark #masInfo ul li p {
    color: var(--lightgray);
}

.dark #masInfo ul li a {
    color: var(--dark-mode-blue);
}

.dark .articulos-section .art-item a {
    color: var(--dark-mode-blue);
}

.dark #perfil-page .positivo {
    color: var(--dark-mode-green);
}

.dark #perfil-page .negativo {
    color: var(--dark-mode-red);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* 380px — slightly larger text for coti_hist */
@media screen and (min-width: 380px) {
    #Coti-hist-c td {
        font-size: 12px;
    }
}

/* 600px — flex cotización, container 590px */
@media screen and (min-width: 600px) {
    #contenido {
        width: 590px;
    }

    #Cotizacion-c > .rava-gray-border {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #izqCotiza {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        width: 30%;
    }

    #izqCotiza p {
        width: 100%;
    }

    #centroCotiza {
        width: 25%;
    }

    #derCotiza {
        width: 35%;
    }

    /* Desktop: 4 columnas horizontales (Precio/Medias | Medias 21/42 | MACD | MM200). */
    #Cuad-tecnico-c .ct-flex .ct-col {
        width: 25%;
        padding: 8px 14px;
        border-left: 1px solid rgba(0, 0, 0, 0.05);
    }
    #Cuad-tecnico-c .ct-flex .ct-col:first-child {
        border-left: none;
    }

    #Cuad-tecnico-c .ct-flex .ct-col .corte {
        margin-top: 10px;
    }

    #Coti-hist-c th {
        font-size: 12px;
    }

    #Coti-hist-c td {
        font-size: 14px;
    }
}

/* 768px — container 700px, bigger price */
@media screen and (min-width: 768px) {
    #contenido {
        width: 700px;
    }

    #titulo h1 {
        font-size: 24px;
        padding-left: 10px;
    }

    #izqCotiza p:first-child {
        font-size: 30px;
        line-height: 34px;
    }

    #izqCotiza p:nth-child(2) {
        font-size: 24px;
        line-height: 28px;
    }

    .perfil-text p:first-child,
    #masInfo > p,
    .intradiario-section > p {
        font-size: 15px;
    }

    .perfil-text p:nth-child(2),
    #masInfo ul li a {
        font-size: 14px;
    }

    #Cuad-tecnico-c .ct-flex .ct-col {
        width: 33%;
        padding-top: 0;
    }

    #Cuad-tecnico-c .ct-flex .ct-col ul li > span {
        font-size: 14px;
    }

    #Cuad-tecnico-c .ct-flex .ct-col .corte {
        margin-top: 25px;
    }

    #Cuad-tecnico-c .mm-grid {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    #Cuad-tecnico-c .mm-grid .mm-half {
        width: 50%;
    }

    #Cuad-tecnico-c .mm-grid .tituloGral {
        font-size: 14px;
    }
}

/* 992px — two-column layout, container 900px */
@media screen and (min-width: 992px) {
    #contenido {
        width: 900px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #titulo h1 {
        font-size: 28px;
        padding-left: 10px;
    }

    #izq {
        width: 65%;
    }

    #der {
        width: calc(35% - 15px);
    }

    .perfil-text {
        padding-bottom: 20px;
    }

    #Chat-c {
        margin-top: 0;
    }

    #Coti-hist-c td,
    #Coti-hist-c th {
        font-size: 10px;
    }

    #Coti-hist-c .noAbbr {
        display: none;
    }
}

@media screen and (max-width: 991px) {
    #Chat-c {
        margin-top: 15px;
    }
}

/* 1200px — container 1100px, bigger price */
@media screen and (min-width: 1200px) {
    #contenido {
        width: 1100px;
    }

    #izqCotiza p:first-child {
        font-size: 34px;
        line-height: 38px;
    }

    #izqCotiza p:nth-child(2) {
        font-size: 26px;
        line-height: 30px;
    }

    #Cuad-tecnico-c .ct-flex .ct-col ul li > span {
        font-size: 14px;
    }
}

/* ==== Smilies del foro en mensajes del perfil ==== */
#chat-messages .msj .foro-text {
    white-space: normal;
    line-height: 1.55;
    word-wrap: break-word;
}
#chat-messages .msj .foro-text img.foro-smilie {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin: 0 2px;
    object-fit: contain;
}