:root {
    color-scheme: dark;
    --rosewater: #f5e0dc;
    --flamingo: #f2cdcd;
    --pink: #f5c2e7;
    --mauve: #cba6f7; --red: #f38ba8;
    --maroon: #eba0ac;
    --peach: #fab387;
    --yellow: #f9e2af;
    --green: #a6e3a1;
    --teal: #94e2d5;
    --sky: #89dceb;
    --sapphire: #74c7ec;
    --blue: #89b4fa;
    --blueLight: #73c6ea;
    --lavender: #b4befe;
    --purple: #B08EEE;

    /* Text & surfaces */
    --text: #cdd6f4;
    --subtext1: #bac2de;
    --subtext0: #a6adc8;
    --title: #FFF;
    --none: #d0d0d0;

    /* Neutral tones */
    --overlay2: #9399b2;
    --overlay1: #7f849c;
    --overlay0: #6c7086;
    --surface3: #686b70;
    --surface2: #585b70;
    --surface1: #45475a;
    --surface0: #313244;

    /* Backgrounds */
    --base: #1e1e2e;
    --base2: #303242;
    --mantle: #181825;
    --crust: #11111b;
    --body: #242436;

    /* Mode Theme Logo */
    --logo-primary: var(--yellow);
    --logo-secondary: var(--surface0);
    --border: #888;

    --code-bg: #25252b;
    --code-text: var(--text);
    --code-selection: var(--surface2);
    --code-comment: var(--overlay1);
}

[data-theme="light"]{
    color-scheme: light;

    /* Base colors */
    --rosewater: #dc8a78;
    --flamingo: #dd7878;
    --pink: #ea76cb;
    --mauve: #8839ef;
    --red: #d20f39;
    --maroon: #e64553;
    --peach: #fe640b;
    --yellow: #df8e1d;
    --green: #40a02b;
    --teal: #179299;
    --sky: #04a5e5;
    --sapphire: #209fb5;
    --blue: #1e66f5;
    --blueLight: #84aef1;
    --lavender: #7287fd;
    --purple: #C38DFF;

    /* Text & surfaces */
    --text: #000;
    --subtext1: #5c5f77;
    --subtext0: #6c6f85;
    --title: #000;
    --none: #000;

    /* Neutral tones */
    --overlay2: #7c7f93;
    --overlay1: #8c8fa1;
    --overlay0: #9ca0b0;
    --surface2: #acb0be;
    --surface1: #bcc0cc;
    --surface0: #ccd0da;

    /* Backgrounds */
    --base: #eff1f5;
    --base2: #c9d5f4;
    --mantle: #e6e9ef;
    --crust: #dce0e8;
    --body: #eff1f5;
    ;

    /* Mode Theme Logo */
    --logo-primary: var(--text);
    --logo-secondary: var(--crust);

    --code-bg: #f6f0df; 
    --code-text: var(--text);
    --code-selection: var(--surface2);
    --code-comment: var(--overlay1);
}

@font-face {
    font-family: 'iAWriterMonoS';
    src: url('../fonts/iAWriterMonoS-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; 
}

@font-face {
    font-family: 'iAWriterMonoS';
    src: url('../fonts/iAWriterMonoS-Bold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap; 
}

@font-face {
    font-family: 'iAWriterMonoS';
    src: url('../fonts/iAWriterMonoS-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic; 
    font-display: swap; 
}

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

html{
    scroll-behavior: smooth;
}

body {
    font-family: 'iAWriterMonoS', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--base); 
    transition: background-color 0.3s ease;
    text-rendering: optimizeLegibility;
    min-width: 300px;
}

::-moz-selection,
::selection{
    color: #fff;
    background-color: #000;
}

/* Títulos */
h1, h2, h3 {
    font-weight: 600;
    line-height: 1.2;
    font-weight: 400;
    color: var(--text);
}

h1 {
    font-size: 2rem;
}

h2{
    font-size: 1.5rem;
}

h3 {
    font-size: 1.2rem;
}

/* Enlaces */
a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Listado de posts estilo RSS */
ul {
    list-style: none;
}

li {
    margin-bottom: 10px;
}

img {
    width: auto;
}

nav {
    margin-bottom: 20px;
    width: 100vh;
}
/* INDEX */
.main-section{
    margin-bottom: 20px;
    /* border-bottom: 1px solid var(--surface0); */
    padding-bottom: 10px;
}

.main-section:last-child{
    border-bottom: 0;
}

.font-page-title{
    font-size: 0.95rem;
    font-weight: 600;
}

/* GENERAL */
.limiter{
    max-width: 640px; 
    margin: 40px auto; 
    padding: 0 20px;
}

.title{line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* TAMAÑOS GENERAL RESPONSIVE */
@media screen and (max-width: 964px) {
    main,
    article,
    img,
    .header,
    .nu,
    .limiter,
    .post-content
    {
        max-width: 98%;
        min-width: 98% !important;
        box-sizing: unset;
        margin: 10px auto;
        padding: 0 !important;
    }
}

/* MARKDOWN ESTILOS */
.md-style p,
.md-style .highlight {
    margin-bottom: 20px;
}

.md-style h2,
.md-style h3,
.md-style h4 {
    margin-bottom: 20px !important;
    margin-top: 20px;
    border-bottom: 1px solid var(--surface0);
    padding-bottom: 10px;
}

.md-style h2 {
    font-size: 1.6rem;

}

.md-style h3 {
    border: 0;
    margin-top: 30px;
    font-size: 1.3rem;
    text-underline-offset: 15px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--surface0);
}

.md-style h4{
    font-size: 1.1rem;
}

.md-style pre{
    border-radius: 10px;
    padding: 15px 10px 0 10px;
}

.md-style li{
    list-style: url("/_includes/icons/arrow-right.svg");
    list-style: disc;
    list-style-position: inside;
    margin-left: 10px;
    margin-bottom: 0;
}

.md-style ul{
    margin-bottom: 10px !important;
}

.md-style a:hover{
    color: var(--flamingo);
}

.md-style li code,
.md-style p code{
    background-color: var(--surface1);
    color: var(--mauve);
    padding: 0 3px;
    border-radius: 2px;
}

.md-style blockquote{
    padding:0  0.5rem;
    background-color: var(--surface0) !important;
    border-left: 3px solid var(--lavender);
    margin-bottom: 10px;
    font-style: italic;
}

.micro-style h3{
    font-size: 1rem;
    text-decoration-color: var(--surface2);
}

.micro-style a{
    color: var(--blue);
    text-decoration: none;
}

.micro-style a:hover{
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 3px;;

}

/* NAV & FOOTER */
.nu a{
    font-size:0.9rem;
    text-decoration:  none;
}

.header{
    position: absolute;
    top: 40px;
    right: 50%;
    margin-right: 340px !important;
    letter-spacing: -.009em;
}

.header ul {
    display: flex;
    flex-direction: column;
    line-height: 1.8rem;
}

.header ul a {
    padding-left: 10px;
}

.active{
    font-weight: 600;
    /* background-color: #000; */
    /* color: #fff; */
}

.main{
    font-weight: 600;
    font-size: 1rem!important;
}

@media screen and (max-width: 964px) {
    .header{
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 1rem;
    }

    nav{
        border-bottom: 1px solid var(--border);
    }
}

.nu a:hover{
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mode-container{
    border-top: 1px solid var(--surface2);
    margin-top: 20px;
    padding-top: 10px;
    margin-left: 10px;
}

.mode-icon{
    position: relative;
    display:inline-block;
    cursor: pointer;
    min-width: 15px;
    min-height: 15px;
    background-color: var(--subtext1);
    border-radius: 50%;
    border: 1px solid var(--flamingo);
}

.mode-icon .tooltiptext {
    visibility: hidden;
    background-color: var(--surface2);
    color: var(--text);
    text-align: center;
    border-radius: 3px;
    padding: 0.1rem 0.5rem;
    position: absolute;
    z-index: 1;
    bottom:-80%;
    left: 500%;
    margin-left: -40px;
    opacity: 0;
    transition: opacity 0.3s;
}

.mode-icon:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

@media screen and (max-width: 960px) {
    .mode-container{
        border-top: 0 !important;
    }
}


/* ICONS */
.icons-title svg{
    width: 9px;
    color: var(--text);
}

.icons-menu svg{
    width: 9px;
    color: var(--text);
}

/* FRONT PAGE */
.front-page-title{
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 10px;
    text-decoration: none;
}

.front-page-title:hover {
    text-decoration: underline;
}

/* VIDEO */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Relación 16:9 */
    height: 0;
    overflow: hidden;
    margin-bottom: 20px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* CARD */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2rem;
}

.card-grid-index {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1rem;
}


@media screen and (max-width: 640px) {
    .card-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0.5rem;
    }

    .card-grid-index {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0.5rem;
    }

}
.card-index,
.card {
    overflow: hidden;
}

.card-index img,
.card img{
    object-fit: cover;
    width: 100%;
    display: block;
    margin-bottom: 10px;
}

.card-index img{
    height: auto;
}

.card img{
    height: 140px;
}

.card-index a,
.card a{
    text-decoration: none;
    letter-spacing: -0.02em;
    word-spacing: -0.25em;
    text-decoration: none;

}

.card-index a:hover,
.card a:hover{
    text-decoration: underline;
}

/* BOX */
.blog-box{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.5rem;
}

@media screen and (max-width: 640px) {
    .blog-box {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* IMAGE */
.zoom-container {
    width: 100%;
    cursor: zoom-in;
    display: block;
    margin: 1.5rem 0;
    text-align: center;
}

.image-side-right input,
.image-side-left input,
.zoom-container input {
    display: none;
}


.image-side-right img,
.image-side-left img,
.zoom-container img {
    min-width: 100%;
    height: 350px;
    object-fit: cover;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.image-side-right input:checked + img,
.image-side-left input:checked + img,
.zoom-container input:checked + img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: contain; 
    background: rgba(0, 0, 0, 0.9); 
    z-index: 9999;
    cursor: zoom-out;
    padding: 100px;
    border-radius: 0;
}

.image-side-left{
    float: left;
    margin: 1rem 20px 1rem 0;
}

.image-side-right{
    float: right;
    margin: 1rem 0 1rem 20px;
}

.image-side-right,
.image-side-left{
    width: 50%;
    cursor: zoom-in;
    display: block;
    text-align: center;
}

/* NOTAS */
.micro {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    /* border: 1px solid var(--border); */
    border: 1px solid var(--surface2);
    border-radius: 2px;
}

.micro-header{
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 20px;
    line-height: 0.5rem;
    border-bottom: 1px solid var(--surface2);
}

.micro-header .title{
    font-weight: 600;
    font-size: 1rem;
}

.micro-header p{
    font-size: 0.9rem;
}

.body{
    padding: 20px;
    background-color: var(--body);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

.url-title{
    font-weight: 600;
    text-decoration: none;
    color: var(--mauve);
}

.url-title:hover{
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* WRITING */
.row-writing{
    display:grid;
    grid-template-columns: 1fr 100px;
}

.row-writing-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row-writing-title a {
    letter-spacing: -0.02em;
    word-spacing: -0.15em;
    text-decoration: none;
}

.row-writing-title a:hover {
    text-decoration: underline;
    color: var(--title)
}

.row-writing-time{
    color: var(--overlay2);
    text-align: right;
}

.row-writing-title:hover + .row-writing-time {
    color: var(--title);
}

@media screen and (max-width: 640px) {
    .row-writing {
        grid-template-columns: 1fr;
        grid-row-gap: 0px;
    }

    .row-writing-time{
        text-align: left;
    }
}

/* POST */
.post-content{
    min-width: 640px;
}

.tags {
    padding: 5px 0;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.tech-pill,
.tag-pill{
    padding: 5px;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s ease;
    font-size: 0.8rem;
}

.tag-pill{
    background-color: #000;
    color: #fff;

}

.tag-pill:hover{
    background-color: #222;
}

.tech-pill{
    background-color: var(--rosewater);
    color: #000;
}

.post-date{
    color: var(--subtext0);
    font-size: 0.85rem;
}

.post-layout {
    display: grid;
    grid-template-columns: 1fr 230px;
    gap: 2rem;
}

.sticky-toc {
    position: sticky; /* La magia */
    top: 2rem; 
    font-size: 0.9rem;
}

@media (max-width: 964px) {
    .post-content {max-width: 100%;}
    .post-layout { grid-template-columns: 1fr; }
    .post-sidebar { display: none; }
}

.btn-content {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.btn {
    background-color: var(--surface0);
    padding: 0.5rem 1rem;
    border-radius: 3px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

.btn:hover{
    background-color: var(--surface1);
}

.icons-btn svg{
    width: 18px;
}

/* CONTENIDO NOTA */
.post-sidebar{
    padding: 0 10px;;
}

.h2-content{
    font-size:0.9rem;
}

.h3-content{
    font-size: 0.8rem;
    margin-left: 15px !important;
    padding-left: 5px;
    border-left: 1px solid var(--surface2);
}

.ul-content li a {
    text-decoration: none;
}

.visible > a {
    font-weight: 600;
    transform: translate(5px);
}

.ul-content li a:hover{
    color: var(--mauve);
}

.ul-content li{
    margin: 0;
}

.ul-content{
    padding: 0 10px;
}

.title-content{
    font-weight: 600;
    text-align: center;
}

/* CODIGO */
div.highlighter-rouge {
    position: relative;
}

div.highlighter-rouge::before {
    content: attr(class);
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 10px;
    font-size: 0.7rem;
    color: var(--overlay2);
    border-bottom-left-radius: 1px;
    text-transform: uppercase;
    font-weight: bold;
    pointer-events: none;
}

div.highlighter-rouge.language-cpp::before { content: "C++"; }
div.highlighter-rouge.language-cs::before { content: "C#"; }
div.highlighter-rouge.language-javascript::before { content: "JS"; color: #f7df1e; }
div.highlighter-rouge.language-bash::before { content: "Terminal"; }

/* ABOUT CARD*/
.about-card{
    display: grid;
    grid-template-columns: 1fr 135px;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--surface0);
    padding-bottom: 10px;
    border-radius: 3px;
}

@media screen and (max-width: 640px) {
    .about-card{
        grid-template-columns: none;
        height: 100%;
        text-align: center;
    }  

    .img-container-about-card{
        text-align: center;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .img-container-about-card img{
        min-width: 135px !important;
    }
}


.about-card a{
    color: var(--rosewater);
}

.about-card a:hover{
    color: var(--flamingo);
}

.about-card-contact{
    margin-top: 5px;
}

.highline-about-card{
    color: var(--surface3);
    font-size: 0.8rem;
}


.img-container-about-card img{
    border-radius: 50%;
    width: 135px;
    filter: saturate(0)
}

.image-about-section{
    margin-bottom: 20px;
}

.image-about-section img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center;
}

.about-table-contact{
    width: 100%;
    margin-bottom: 10px;
}

.about-table-contact tr td {
    text-align: center;
    width: 33%;
    border-right: 1px solid var(--surface2);
}

.about-table-contact tr td:last-child {
    border: 0;
}

.about-style a {
    color: var(--rosewater);
}

.about-style a:hover {
    color: var(--flamingo);
}

/* TAG */
.tag-header p{
    font-size: 0.8rem;
    color: var(--subtext0);
}
.tag-span{
    background-color: #000;
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
}

.tag-category,
.tag-title{
    font-size: 1rem;
}

.tag-category{
    color: var(--teal);
    padding-top: 20px;
}

.tag-category:first-child{
    padding: 0;
}

.tag-link{
    text-decoration: none;
}

.tag-link:hover{
    text-decoration: underline;
}

.tag-link-span{
    color: var(--surface2);
}

/* TUTORIALES */
.topic-title{
    margin-bottom: 10px;
    font-weight: 600;
}

.topic-section{
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--surface0);
}

/* CV */
.cv-col-1{
    color: var(--surface2);
    vertical-align: top;
    width: 20%;
    border-right: 1px solid var(--surface2);
    text-align: center;
}

.cv-col-skills-1{
    text-align: left;
    width: 45%;
}

.cv-col-skills-2{
    width: 55%;
}

.cv-col-2{
    width: 85%;
    padding-left: 20px;
    color: var(--code-comment);
    padding-bottom: 20px;
}

.cv-row:hover .cv-col-1{
    color:var(--pink);
}

.cv-row:hover .cv-col-2{
    color: var(--none);
}

.cv-table{
    margin: 1rem;
    margin-bottom: 3rem;;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}

.habilidades-table tr{
    text-align: left;
}

.cv-main p{
    text-align: center;
    color: var(--subtext0);
}

.cv-title{
    color: var(--teal);
    font-size: 0.9rem;
    text-align: center;
}

.span-entidad{
    display: block;
    margin-bottom: 0.5rem;
    font-style: italic;
}

/* ERROR 404 */
.error-content{
    border-radius: 3px;
    padding: 0.5rem;
    background-color: var(--surface0);
}