:root {
    --color-primary-dark: #1a1a1a;   /* Negro de fondo en Light Mode, texto en Dark Mode */
    --color-primary-light: #FAFAFA;  /* Blanco de fondo en Dark Mode, texto en Light Mode */

    --color-rep-blue: #3949AB;     /* Azul (R) - Sobre Mí / Contacto (si revisado) */
    --color-rep-yellow: #FFC107;   /* Amarillo (E) - Contacto */
    --color-rep-green: #43A047;    /* Verde (P) - Servicios */
    --color-rep-red: #e53935;      /* Rojo (98) - Portafolio */

    --color-section-about: var(--color-rep-blue);
    --color-section-services: var(--color-rep-green);
    --color-section-portfolio: var(--color-rep-red);
    --color-section-contact: var(--color-rep-yellow); /* Actualizado a amarillo */
    --color-section-secondary: #9E9E9E; /* Gris azulado para nodos secundarios */

    --logo-fill-light-mode: var(--color-primary-dark);
    --logo-fill-dark-mode: var(--color-primary-light);
    /* Nuevas variables para la terminal, basadas en tu paleta */
    --terminal-bg-color: var(--color-primary-dark); /* Fondo negro intenso */
    --terminal-text-color: var(--color-rep-green); /* Texto principal verde REP98 */
    --terminal-prompt-color: var(--color-section-secondary); /* Gris para el prompt */
    --terminal-border-color: var(--color-rep-green); /* Borde de la terminal */
    --terminal-shadow-color: rgba(67, 160, 71, 0.7); /* Sombra de resplandor verde */
    --terminal-header-bg: #2b2b2b; /* Un gris oscuro para la barra del terminal */
    --terminal-header-border: #444444; /* Un gris un poco más claro para el borde de la barra del terminal */
}
/* Normalize.css */

:where(html) {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  text-size-adjust: 100%; /* 2 */
}

:where(h1) {
  font-size: 2em;
  margin-block-end: 0.67em;
  margin-block-start: 0.67em;
}

:where(dl, ol, ul) :where(dl, ol, ul) {
  margin-block-end: 0;
  margin-block-start: 0;
}

:where(hr) {
  box-sizing: content-box; /* 1 */
  color: inherit; /* 2 */
  height: 0; /* 1 */
}


:where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline dotted;
}

:where(b, strong) {
  font-weight: bolder;
}

:where(code, kbd, pre, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

:where(small) {
  font-size: 80%;
}

:where(table) {
  border-color: currentColor; /* 1 */
  text-indent: 0; /* 2 */
}

:where(button, input, select) {
  margin: 0;
}

:where(button) {
  text-transform: none;
}

:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) {
  -webkit-appearance: button;
}

:where(progress) {
  vertical-align: baseline;
}

:where(select) {
  text-transform: none;
}

:where(textarea) {
  margin: 0;
}

:where(input[type="search" i]) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}


::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring {
    outline: 1px dotted ButtonText;
}

:where(:-moz-ui-invalid) {
    box-shadow: none;
}

:where(dialog) {
    background-color: white;
    border: solid;
    color: black;
    height: -moz-fit-content;
    height: fit-content;
    left: 0;
    margin: auto;
    padding: 1em;
    position: absolute;
    right: 0;
    width: -moz-fit-content;
    width: fit-content;
}

:where(dialog:not([open])) {
    display: none !important;
}


:where(summary) {
    display: list-item;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Configuración inicial para el modo claro por defecto */
body {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-family: 'Montserrat', sans-serif; /* Fuente por defecto para el cuerpo */
    margin: 0;
    width: 100dvw;
    overflow: hidden;
    height: 100dvh;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Tipografías específicas */
.inconsolata-bold {
    font-family: 'Inconsolata', monospace;
    font-weight: 700; /* Asumiendo bold en Inconsolata */
}

h1, h2, h3, h4, h5, h6, .raleway-header {
    font-family: 'Raleway', sans-serif; 
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 700;
    line-height: 1.2;
}


.main-header h1 {
    z-index: 3090;
    color: var(--color-primary-light);
    position: fixed;
    top: 0;
    margin: 0;
    padding: 0.35rem 1rem;
    background: rgba(255 255 255 / 20%);
    box-shadow: 0px 4px 2px 0px #f4511e78;
    border-radius: 25px;
    font-size: clamp(1.2rem, 1.5rem, 3dvw);
}
h4 {
    margin: 0.2rem 0;
}

svg.bi {
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: -.125em;
    fill: currentcolor;
}
.custom-loader-parent {
    background-color: var(--color-primary-dark);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transform: scale(0);
    overflow: hidden;
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    z-index: 0;
    flex-direction: column;
}

.custom-loader {
    width:120px;
    height:120px;
    margin: auto;
    margin-bottom: 4rem;
    color: #3949AB;
    --c:linear-gradient(currentColor 0 0);
    background:
        var(--c) 0 76px,
        var(--c) right 36px bottom 36px,
        var(--c) right 36px top    36px,
        var(--c) 36px 36px,
        var(--c) 36px 100%,
        var(--c) 100% 100%,
        var(--c) 100% 0,
        var(--c) 0 0;
    background-repeat: no-repeat;
}

.custom-loader-parent span {
    color: var(--color-section-contact);
    margin: auto;
    margin-top: 0.1rem;
    font-weight: 300;
    line-height: 1.2;
    font-size: calc(1.625rem + 4.5vw);
    font-family: 'Raleway', sans-serif;
}

.custom-loader-parent svg {
	font-family: "Raleway", sans-serif;
	width: 100%; height: 100%;
}
#custom-loader.show svg text {
	animation: stroke 6s infinite alternate;
	stroke-width: 2;
	stroke: #E53935;
	font-size: 100px;
}
@keyframes stroke {
	0%   {
		fill: rgba(255,193,7,0); stroke: rgba(229,57,53,1);
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
	}
	70%  {fill: rgba(255,193,7,0); stroke: rgba(229,57,53,1); }
	80%  {fill: rgba(255,193,7,0); stroke: rgba(229,57,53,1); stroke-width: 3; }
	100% {
		fill: rgba(255,193,7,1); stroke: rgba(229,57,53,0);
		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
	}
}

@keyframes l8-1 {
    0%     {background-size: 0    8px,8px 0   ,0    8px,8px 0   ,0    8px,8px 0   ,0    8px,8px 0   }
    6.25%  {background-size: 80px 8px,8px 0   ,0    8px,8px 0   ,0    8px,8px 0   ,0    8px,8px 0   }
    12.5%  {background-size: 80px 8px,8px 40px,0    8px,8px 0   ,0    8px,8px 0   ,0    8px,8px 0   }
    18.75% {background-size: 80px 8px,8px 40px,40px 8px,8px 0   ,0    8px,8px 0   ,0    8px,8px 0   }
    25%    {background-size: 80px 8px,8px 40px,40px 8px,8px 80px,0    8px,8px 0   ,0    8px,8px 0   }
    31.25% {background-size: 80px 8px,8px 40px,40px 8px,8px 80px,80px 8px,8px 0   ,0    8px,8px 0   }
    37.5%  {background-size: 80px 8px,8px 40px,40px 8px,8px 80px,80px 8px,8px 100%,0    8px,8px 0   }
    43.75% {background-size: 80px 8px,8px 40px,40px 8px,8px 80px,80px 8px,8px 100%,100% 8px,8px 0   }
    48%,
    52%    {background-size: 80px 8px,8px 40px,40px 8px,8px 80px,80px 8px,8px 100%,100% 8px,8px 80px}
    56.25% {background-size: 0    8px,8px 40px,40px 8px,8px 80px,80px 8px,8px 100%,100% 8px,8px 80px}
    62.5%  {background-size: 0    8px,8px 0   ,40px 8px,8px 80px,80px 8px,8px 100%,100% 8px,8px 80px}
    68.75% {background-size: 0    8px,8px 0   ,0    8px,8px 80px,80px 8px,8px 100%,100% 8px,8px 80px}
    75%    {background-size: 0    8px,8px 0   ,0    8px,8px 0   ,80px 8px,8px 100%,100% 8px,8px 80px}
    81.25% {background-size: 0    8px,8px 0   ,0    8px,8px 0   ,0    8px,8px 100%,100% 8px,8px 80px}
    87.5%  {background-size: 0    8px,8px 0   ,0    8px,8px 0   ,0    8px,8px 0   ,100% 8px,8px 80px}
    93.75% {background-size: 0    8px,8px 0   ,0    8px,8px 0   ,0    8px,8px 0   ,0    8px,8px 80px}
    100%   {background-size: 0    8px,8px 0   ,0    8px,8px 0   ,0    8px,8px 0   ,0    8px,8px 0   }
}

@keyframes l8-2 {
    0%,49.9% {background-position:0 76px, right 36px bottom 36px, right 36px top 36px,36px 36px,36px 100%,100% 100%,100% 0,0 0}
    50%,100% {background-position:right 36px bottom 36px, right 36px top 36px, 36px 36px,36px 100%,100% 100%,100% 0,0 0,bottom 36px left 0}
}
#custom-loader.show{
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    z-index: 3000;
}
#custom-loader.show .custom-loader {
    animation: 
        l8-1 4s infinite,
        l8-2 4s infinite;
}


/* Main Header (SVG Diagrama) */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    display: flex; /* Para centrar el diagrama de Mermaid */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--color-primary-dark);
    opacity: 0.8;
    background-image: radial-gradient(#e7e8ec 1px, var(--color-primary-dark) 1px);
    background-size: 20px 20px;
}
#mermaid-diagram-container {
    display: block;
    margin: auto;
    width: 100%;
    height: 100%;
    font-family: 'Inconsolata', monospace;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mermaid svg {
    background: transparent;
    margin: auto;
}
#mermaid-diagram-container .node {
    cursor: pointer;
}

.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon { /* Añadidos polygon por si los usas */
    fill: transparent !important; /* Color base para los nodos */
    stroke: var(--color-rep-yellow) !important; /* Borde para los nodos */
    stroke-width: 1.5px !important;
    transition: fill 0.3s ease, stroke 0.3s ease;
    filter: drop-shadow(0 0 5px rgba(255, 193, 7, 0.4)); /* Sombra para un efecto de brillo */
}

.mermaid .node .nodeLabel {
    fill: var(--color-primary-light); /* Texto claro */
    font-family: 'Inconsolata', monospace;
    font-size: 0.85rem !important; /* Ajusta este valor para la legibilidad. ¡important para sobrescribir mermaid*/
    font-weight: bold;
    transition: fill 0.3s ease;
}

.mermaid .node:hover rect,
.mermaid .node:hover circle,
.mermaid .node:hover ellipse,
.mermaid .node:hover polygon {
    fill: var(--color-section-secondary) !important;
    stroke: var(--color-primary-light); /* Borde blanco */
    filter: drop-shadow(0 0 8px rgba(229, 57, 53, 0.8)); /* Glow más intenso */
}

.mermaid .node:hover .nodeLabel {
    fill: var(--color-primary-dark) !important;
    color: var(--color-primary-dark) !important;
}
.mermaid .edge:hover path,
.mermaid .edge:hover .arrowheadPath {
    stroke: var(--color-rep-red); /* Línea también cambia a rojo */
    fill: var(--color-rep-red);
    stroke-width: 3px;
    filter: drop-shadow(0 0 4px rgba(229, 57, 53, 0.8));
}

.mermaid .node[data-id="G"]:hover polygon
{
    fill: #F4511E !important;
}

.mermaid .node[data-id="A"]:hover circle,
.mermaid .node[data-id="B"]:hover rect
{
    fill: var(--color-primary-dark) !important;
}
.mermaid .node[data-id="A"]:hover .nodeLabel,
.mermaid .node[data-id="B"]:hover .nodeLabel
{
    fill: var(--color-primary-light) !important;
    color: var(--color-primary-light) !important;
}

.mermaid .node[data-id="C"]:hover polygon,
.mermaid .node[data-id="C1"]:hover rect,
.mermaid .node[data-id="C2"]:hover rect
{
    fill: var(--color-section-about) !important;
}

.mermaid .node[data-id="C"]:hover .nodeLabel,
.mermaid .node[data-id="C1"]:hover .nodeLabel,
.mermaid .node[data-id="C2"]:hover .nodeLabel,
.mermaid .node[data-id="G"]:hover .nodeLabel
{
    fill: var(--color-primary-light) !important;
    color: var(--color-primary-light) !important;
}

.mermaid .node[data-id="D"]:hover polygon,
.mermaid .node[data-id="D1"]:hover rect,
.mermaid .node[data-id="D2"]:hover rect,
.mermaid .node[data-id="D3"]:hover rect,
.mermaid .node[data-id="D4"]:hover rect,
.mermaid .node[data-id="D5"]:hover rect,
.mermaid .node[data-id="D6"]:hover rect,
.mermaid .node[data-id="D7"]:hover rect
{
    fill: var(--color-section-services) !important;
}

.mermaid .node[data-id="E"]:hover polygon{
    fill: var(--color-section-portfolio) !important;
}

.mermaid .node[data-id="F"]:hover polygon,
.mermaid .node[data-id="F1"]:hover rect,
.mermaid .node[data-id="F2"]:hover rect
{
    fill: var(--color-section-contact) !important;
}

.mermaid .node[data-id="D"]:hover .nodeLabel,
.mermaid .node[data-id="E"]:hover .nodeLabel,
.mermaid .node[data-id="F"]:hover .nodeLabel
{
    fill: var(--color-primary-dark) !important;
    color: var(--color-primary-dark) !important;
}


.custom-dialog {
    opacity: 0;
    transform: scale(0.5);
    border: none;
    padding: 0;
    background-color: var(--color-primary-light);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    pointer-events: none;
    color: var(--color-primary-dark);
    width: 100%;
    max-width: 50rem;
    height: 100%;
    max-height: 37.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.custom-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(3px);
}

.custom-dialog[open] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.custom-dialog.closing {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: var(--color-primary-dark); /* Color de fondo oscuro */
    color: var(--color-primary-light); /* Texto claro */
    flex-shrink: 0; /* No se encoge */
}

.dialog-header h2 {
    margin: 0;
    font-size: 1.5em;
    color: inherit; /* Hereda el color del header */
}

.dialog-logo {
    display: inline-block; 
    width: 25px; /* Tamaño del logo */
    height: 25px;
    background-color: var(--logo-color-dialog-header); /* Color del logo dentro del header */
    /* Incrusta tu SVG Mono.svg como una máscara */
    -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 291.67836 332.78272" xmlns="http://www.w3.org/2000/svg"><path d="m 102.3969,-122.95507 v 2.94632 l -5.8712,-2.33842 v 2.83522 l 2.9789,0.39036 0.0223,1.86949 -3.00123,-0.61188 0.15069,2.82032 4.14586,1.58538 0.0451,2.57904 v 2.94632 h -8.9294 v -14.47822 l 0.0278,-10.33108 z" fill="currentColor"/><path d="m -260.8907,-197.62226 -0.0278,-10.33108 8.9294,2.1711 v 0 h -5.24515 v 2.83522 l 2.9789,0.39036 0.0223,1.86949 -3.00123,-0.61188 0.15069,2.82032 4.14586,1.58538 0.0451,2.57904 z" fill="currentColor"/><path d="m 271.17179,121.92887 c -1.18916,0 -2.30837,-0.22151 -3.35764,-0.66453 -1.02594,-0.44302 -1.9353,-1.11921 -2.72808,-2.02857 -0.79277,-0.90936 -1.42233,-2.06355 -1.88867,-3.46257 -0.44302,-1.39901 -0.66453,-3.06617 -0.66453,-5.00148 0,-1.70213 0.16322,-3.18276 0.48965,-4.44187 0.34976,-1.28243 0.8161,-2.35501 1.39902,-3.21774 0.58293,-0.88605 1.24746,-1.58556 1.9936,-2.09853 0.74614,-0.53629 1.52726,-0.92101 2.34335,-1.154184 0.81609,-0.256486 1.63219,-0.384729 2.44828,-0.384729 1.63219,0 3.01954,0.384731 4.16207,1.154193 1.16585,0.74614 0,0 0,0 v 0 0 0 c 0.0435,0.0274 -0.59461,3.35763 -0.59461,3.35763 v 0 c -0.86377,-0.431 -0.75651,-0.40483 -1.64385,-0.77358 -0.58116,-0.24152 -1.3825,-0.40094 -1.98874,-0.40094 -0.74614,0 -1.23335,0 -1.9285,0.0203 -0.65287,0.34975 -1.22414,0.87438 -1.71379,1.57389 -0.48966,0.69951 -0.87439,1.57389 -1.15419,2.62315 -0.27981,1.02595 -0.41971,2.21511 -0.41971,3.56749 0,1.30575 0.12824,2.48326 0.38473,3.53252 0.27981,1.02595 0.65288,1.91199 1.11921,2.65813 0.48966,0.72283 1.04927,1.28243 1.67882,1.67882 0.65287,0.37307 1.35238,0.5596 2.09853,0.5596 0.58292,0 2.37666,-0.002 2.86632,-0.1653 0.48965,-0.16322 8.65858,-0.76642 9.07828,-1.13949 0.4197,-0.39639 -0.32644,0.53629 0,0 v 0 c -0.76946,1.28243 -6.45037,2.92155 -7.52295,3.50447 -1.12813,0.26275 -2.98766,0.70328 -4.45663,0.70328 z" fill="currentColor"/></svg>');
    mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 291.67836 332.78272" xmlns="http://www.w3.org/2000/svg"><path d="m 102.3969,-122.95507 v 2.94632 l -5.8712,-2.33842 v 2.83522 l 2.9789,0.39036 0.0223,1.86949 -3.00123,-0.61188 0.15069,2.82032 4.14586,1.58538 0.0451,2.57904 v 2.94632 h -8.9294 v -14.47822 l 0.0278,-10.33108 z" fill="currentColor"/><path d="m -260.8907,-197.62226 -0.0278,-10.33108 8.9294,2.1711 v 0 h -5.24515 v 2.83522 l 2.9789,0.39036 0.0223,1.86949 -3.00123,-0.61188 0.15069,2.82032 4.14586,1.58538 0.0451,2.57904 z" fill="currentColor"/><path d="m 271.17179,121.92887 c -1.18916,0 -2.30837,-0.22151 -3.35764,-0.66453 -1.02594,-0.44302 -1.9353,-1.11921 -2.72808,-2.02857 -0.79277,-0.90936 -1.42233,-2.06355 -1.88867,-3.46257 -0.44302,-1.39901 -0.66453,-3.06617 -0.66453,-5.00148 0,-1.70213 0.16322,-3.18276 0.48965,-4.44187 0.34976,-1.28243 0.8161,-2.35501 1.39902,-3.21774 0.58293,-0.88605 1.24746,-1.58556 1.9936,-2.09853 0.74614,-0.53629 1.52726,-0.92101 2.34335,-1.154184 0.81609,-0.256486 1.63219,-0.384729 2.44828,-0.384729 1.63219,0 3.01954,0.384731 4.16207,1.154193 1.16585,0.74614 0,0 0,0 v 0 0 0 c 0.0435,0.0274 -0.59461,3.35763 -0.59461,3.35763 v 0 c -0.86377,-0.431 -0.75651,-0.40483 -1.64385,-0.77358 -0.58116,-0.24152 -1.3825,-0.40094 -1.98874,-0.40094 -0.74614,0 -1.23335,0 -1.9285,0.0203 -0.65287,0.34975 -1.22414,0.87438 -1.71379,1.57389 -0.48966,0.69951 -0.87439,1.57389 -1.15419,2.62315 -0.27981,1.02595 -0.41971,2.21511 -0.41971,3.56749 0,1.30575 0.12824,2.48326 0.38473,3.53252 0.27981,1.02595 0.65288,1.91199 1.11921,2.65813 0.48966,0.72283 1.04927,1.28243 1.67882,1.67882 0.65287,0.37307 1.35238,0.5596 2.09853,0.5596 0.58292,0 2.37666,-0.002 2.86632,-0.1653 0.48965,-0.16322 8.65858,-0.76642 9.07828,-1.13949 0.4197,-0.39639 -0.32644,0.53629 0,0 v 0 c -0.76946,1.28243 -6.45037,2.92155 -7.52295,3.50447 -1.12813,0.26275 -2.98766,0.70328 -4.45663,0.70328 z" fill="currentColor"/></svg>');
}

/* Colores de Header de Diálogos */
.dialog-header.color-blue { background-color: var(--color-section-about); }
.dialog-header.color-green { background-color: var(--color-section-services); }
.dialog-header.color-red { background-color: var(--color-section-portfolio); }
.dialog-header.color-yellow { background-color: var(--color-section-contact); }
.dialog-header.color-secondary { background-color: var(--color-section-secondary); }

.dialog-close-btn {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px;
    width: 32px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    transition: 0.2s background ease-in-out;
    border-radius: 100%;
}
button.dialog-close-btn:hover {
    background: var(--color-rep-red);    
}
.dialog-content {
    flex-grow: 1; 
    padding: 0.65rem;
    overflow-y: auto; /* Permite scroll si el contenido es largo */
    color: var(--color-primary-dark); /* Texto oscuro en fondo claro */
}

/* Estilos específicos para los sub-diálogos (opcional, pueden ser más pequeños o posicionados diferente) */
.sub-dialog {
    width: 60vw;
    max-width: 600px;
    height: 60vh;
    max-height: 400px;
    /* Puedes ajustar z-index si necesitas que aparezcan sobre otros diálogos */
    z-index: 1000; 
}

dialog details > summary {
    padding: 0.65rem 0;
}

dialog details > summary h3 {
    margin: 0;
    display: inline-block;
}
dialog details:not([open]) > summary {
    border-bottom: 1px solid #ddd;
}
dialog details[open] {
    border-bottom: 1px solid #ddd;
}


.services-grid-container {
    display: grid;
    /* Grid de 2 columnas en pantallas grandes, 1 en pequeñas */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Min 280px para tarjetas, flexible */
    gap: 20px; /* Espacio entre tarjetas */
    padding: 20px; /* Padding dentro del diálogo */
}

/* Estilos para cada tarjeta de servicio */
.service-card {
    background-color: var(--color-primary-light); /* Fondo claro para las tarjetas */
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-5px); /* Efecto de levantamiento al pasar el mouse */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
.service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(67,160,71,1), rgba(20,102,24,1));
    transition: left 0.5s ease;
    z-index: 0;
    opacity: 0.2;
}
.service-card:hover::before {
    left: 0;
}

.service-card * {
    position: relative;
    z-index: 1;
}
.service-card .service-icon {
    font-size: 3em; /* Tamaño grande para los iconos */
    color: var(--color-green); /* Color del icono, puedes variar por servicio o mantener uno */
    margin-bottom: 10px;
}

.service-card h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--color-primary-dark);
    font-size: 1.3em;
}

.service-card p {
    font-size: 0.95em;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Media Queries para pantallas más pequeñas si es necesario */
@media (max-width: 768px) {
    .services-grid-container {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
        padding: 15px;
    }
}
/* Estilos específicos para el diálogo de créditos (la ventana principal) */
.terminal-dialog {
    width: 90%;
    background-color: var(--terminal-bg-color); /* Fondo terminal: Negro principal */
    color: var(--terminal-text-color); /* Color de texto predeterminado: Verde REP98 */
    font-family: 'Inconsolata', monospace; /* Fuente de la terminal */
    border: 2px solid var(--terminal-border-color); /* Borde: Verde REP98 */
    box-shadow: 0 0 15px var(--terminal-shadow-color); /* Resplandor: Verde REP98 */
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
}

/* Encabezado del diálogo */
.terminal-dialog .dialog-header {
    background-color: var(--color-primary-dark);
    color: var(--color-primary-light); /* Texto blanco */
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--terminal-border-color); /* Borde que se mezcla con el terminal */
    font-family: Arial, sans-serif; /* Para que el título del diálogo no sea Inconsolata */
}

.terminal-dialog .dialog-header h2 {
    margin: 0;
    font-size: 1.5em;
    text-shadow: 0 0 5px var(--terminal-shadow-color); /* Resplandor del título: Verde REP98 */
}

.terminal-dialog .dialog-close-btn {
    background: none;
    border: none;
    color: var(--color-primary-light); /* Color del botón de cerrar: Blanco */
    font-size: 1.5em;
    cursor: pointer;
    transition: color 0.3s ease;
    text-shadow: 0 0 5px var(--terminal-shadow-color); /* Resplandor del botón: Verde REP98 */
}


/* Contenido principal del diálogo, donde va el terminal */
.terminal-dialog .dialog-content {
    padding: 0;
    background-color: var(--terminal-bg-color);
    color: var(--terminal-text-color);
}

/* Estilos de la barra superior de la "ventana" de terminal (puntos de control) */
.terminal-header {
    background-color: var(--terminal-header-bg); /* Un gris oscuro para la barra del terminal */
    padding: 8px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--terminal-header-border); /* Borde ligeramente más claro */
    gap: 8px;
}

.terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

/* Puntos de colores que imitan los controles de ventana */
.terminal-dot.red { background-color: var(--color-rep-red); }
.terminal-dot.yellow { background-color: var(--color-rep-yellow); }
.terminal-dot.green { background-color: var(--color-rep-green); }

.terminal-title {
    color: var(--color-section-secondary); /* Gris para el título de la terminal */
    font-size: 0.9em;
    flex-grow: 1;
    text-align: center;
}

/* Cuerpo principal del terminal (donde va el texto y la foto) */
.terminal-body {
    padding: 20px;
    line-height: 1.6;
    max-height: calc(100vh - 200px); /* Asegura que no se desborde */
}

.terminal-line {
    margin-bottom: 5px;
    white-space: pre-wrap;
    word-break: break-word;
}

.terminal-line span {
    color: var(--terminal-prompt-color); /* Color para el prompt '$>': Gris de la paleta */
    font-weight: bold;
    margin-right: 5px;
}

.terminal-line.status {
    font-weight: bold;
}

.terminal-line.status.success {
    color: var(--color-rep-green); /* Mensaje de éxito: Verde REP98 */
}

.terminal-line.status.info {
    color: var(--color-rep-blue); /* Mensaje de información: Azul REP98 */
}

/* Estilos para la información del autor (tu foto y detalles) */
.author-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    padding: 15px;
    /* Borde punteado usando el color verde de la paleta */
    border: 1px dashed var(--color-rep-green);
    border-radius: 5px;
    /* Fondo muy sutil con el verde de la paleta, muy transparente */
    background-color: rgba(67, 160, 71, 0.05);
}

.author-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    /* Borde verde alrededor de la foto */
    border: 3px solid var(--color-rep-green);
    /* Resplandor verde */
    box-shadow: 0 0 10px var(--terminal-shadow-color);
    flex-shrink: 0;
}

.author-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Opcional: Filtro para ajustar la imagen al estilo terminal */
    /* filter: grayscale(50%) brightness(1.2); */ /* Ejemplo: un poco desaturado y más brillante */
    /* filter: sepia(30%) hue-rotate(90deg) saturate(1.5) brightness(0.8); */ /* Ejemplo con tinte verdoso */
    /* filter: grayscale(100%); */ /* Blanco y negro */
}

.author-details {
    text-align: left;
    width: 100%;
}

.author-details p {
    margin-bottom: 3px;
    font-size: 1.05em;
    color: var(--terminal-text-color); /* Asegura que el texto de detalles sea verde */
}

.author-details p span {
    color: var(--terminal-prompt-color); /* Para el '#' */
}

/* Media Query para pantallas más grandes: fila para la información del autor */
@media (min-width: 768px) {
    .author-info {
        flex-direction: row;
        text-align: left;
    }
    .author-details {
        text-align: left;
        flex-grow: 1;
    }
}

#contact-dialog .dialog-content {
    background-color: var(--color-primary-dark);
}

#contact-dialog .text-social{
    background: #E53935;
    background: linear-gradient(to right, #E53935 10%, #FFC107 92%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    line-height: 1.2;
    font-size: calc(1.525rem + 3.3vw);
    text-align: center;
    width: 100%;
}
#contact-dialog .social-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.glow-on-hover {
    width: 4rem;
    height: 4rem;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    display: block;
    padding: 0.35rem;
    flex: 1 0 auto;
    max-width: 64px;
    aspect-ratio: 1;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* Footer */
.main-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    background-color: var(--color-primary-dark); 
    color: var(--color-primary-light); 
    padding: 10px 20px;
    font-size: 0.8em;
    text-align: center;
    z-index: 15; 
}

.footer-nav a {
    color: var(--color-primary-light);
    text-decoration: none;
    margin: 0 10px;
}

.footer-nav a:hover {
    text-decoration: underline;
}

#menu {
	background: #000000;
	border-radius: 20px;
}
#menu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
	text-align: center;
    max-width: 800px;
}
#menu li {
	display: inline-block;
	position: relative;
}
#menu a {
	display: block;
	line-height: clamp(20px, 4vw, 45px);
	padding: 0 14px;
	text-decoration: none;
	color: #FAFAFA;
	font-size: 12px;
	text-transform: capitalize;
}
#menu a.active {
    color: var(--color-rep-red);
}
#menu a.dropdown-arrow:after {
	content: "\23F7";
	margin-left: 5px;
}
#menu li a:hover {
	color: #FFC107;
	background: #000000;
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 45px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 45px;
	text-align: center;
	position: absolute;
	left: 35px
}
#menu label:before {
	font-size: 1.6em;
	color: #FAFAFA;
	content: "\2261"; 
	margin-left: 20px;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 170px;
	background: #1A1A1A;
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	text-align: left;
	width: 100%;
}
#menu ul.sub-menus a {
	color: #FAFAFA;
	font-size: 12px;
	text-transform: capitalize;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: #F2F2F2;
	color: #444444;
}


/* Modo Oscuro (Se activará con JS) */
body.dark-mode {
    background-color: var(--color-primary-dark);
    color: var(--color-primary-light);
}

body.dark-mode .center-circle,
body.dark-mode .node-path,
body.dark-mode .node-shape {
    stroke: var(--color-primary-light);
}

body.dark-mode #mono-logo path {
    fill: var(--logo-fill-dark-mode); /* El logo cambia a color claro en modo oscuro */
}

body.dark-mode #rep98-text,
body.dark-mode #slogan-text {
    fill: var(--color-primary-light);
}

/* El texto de los nodos en modo oscuro debe ser oscuro si el fondo del nodo es claro (amarillo) */
body.dark-mode .section-node.color-yellow:hover .node-text {
    fill: var(--color-primary-dark); /* Texto oscuro para contraste en amarillo brillante */
}

body.dark-mode .node-text {
    fill: var(--color-primary-light); /* Por defecto, texto claro sobre nodo oscuro */
}

body.dark-mode .macro-card {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-light);
}

body.dark-mode .macro-card-header {
    background-color: var(--color-primary-light); 
    color: var(--color-primary-dark);
}

body.dark-mode .macro-card-content {
    color: var(--color-primary-light);
}

body.dark-mode .main-footer {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

body.dark-mode .footer-nav a {
    color: var(--color-primary-dark);
}

body.dark-mode .macro-card-logo {
    background-color: var(--color-primary-dark); /* Fondo del logo en barra de tarjeta oscura */
}