/* ==========================================================================
   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 h2 {
    font-size: 20px;
    font-weight: bolder;
    margin: 0;
    padding-left: 5px;
}

#titulo h2 .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 {
    width: 100%;
    padding: 10px;
}

#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;
}

/* --- 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;
}

/* --- "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 h2 {
    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 #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%;
    }

    #Cuad-tecnico-c .ct-flex .ct-col:nth-child(2),
    #Cuad-tecnico-c .ct-flex .ct-col:nth-child(3) {
        width: 45%;
    }

    #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 h2 {
        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 h2 {
        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;
    }
}