@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

/* de BASE.CSS */

/* **********
A (more) Modern CSS Reset by Andy Bell
Published: 18 September 2023 https://piccalil.li/blog/a-more-modern-css-reset/
********** */

/* Box sizing rules */
*,*::before,*::after{box-sizing:border-box;}
/* Prevent font size inflation */
html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
/* Remove default margin in favour of better control in authored CSS */
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0;}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],ol[role="list"]{list-style:none;}
/* Set core body defaults */
body{min-height:100vh;line-height:1.5;}
/* Set shorter line heights on headings and interactive elements */
h1,h2,h3,h4,button,input,label{line-height:1.1;}
/* Balance text wrapping on headings */
h1,h2,h3,h4{text-wrap:balance;}
/* A elements that don't have a class get default styles */
a:not([class]){text-decoration-skip-ink:auto;color:currentColor;}
/* Make images easier to work with */
img,picture{max-width:100%;display:block;}
/* Inherit fonts for inputs and buttons */
input,button,textarea,select{font-family:inherit;font-size:inherit;}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]){min-height:10em;}
/* Anything that has been anchored to should have extra scroll margin */
:target{scroll-margin-block:5ex;}



/* **********
Escala tipográfica bien temperada - 2025, Santiago Bustelo
********** */

/* root font size */
html{font-size:16px;}

/* root sizes */
:root {--pt-6:0.5rem;--pt-7:0.574rem;--pt-8:0.66rem;--pt-9:0.758rem;--pt-10:0.871rem;--pt-11:0.935rem;--pt-12:1rem;--pt-14:1.149rem;--pt-16:1.32rem;--pt-18:1.516rem;--pt-21:1.741rem;--pt-24:2rem;--pt-28:2.297rem;--pt-32:2.639rem;--pt-36:3.031rem;--pt-42:3.482rem;--pt-48:4rem;--pt-56:4.595rem;--pt-64:5.278rem;--pt-72:6.063rem;--pt-84:6.964rem;--pt-96:8rem;--pt-112:9.19rem;--pt-128:10.556rem;--pt-144:12.126rem;}

/* class sizes */
.pt-6{font-size:var(--pt-6);}.pt-7{font-size:var(--pt-7);}.pt-8{font-size:var(--pt-8);}.pt-9{font-size:var(--pt-9);}.pt-10{font-size:var(--pt-10);}.pt-11{font-size:var(--pt-11);}.pt-12{font-size:var(--pt-12);}.pt-14{font-size:var(--pt-14);}.pt-16{font-size:var(--pt-16);}.pt-18{font-size:var(--pt-18);}.pt-21{font-size:var(--pt-21);}.pt-24{font-size:var(--pt-24);}.pt-28{font-size:var(--pt-28);}.pt-32{font-size:var(--pt-32);}.pt-36{font-size:var(--pt-36);}.pt-42{font-size:var(--pt-42);}.pt-48{font-size:var(--pt-48);}.pt-56{font-size:var(--pt-56);}.pt-64{font-size:var(--pt-64);}.pt-72{font-size:var(--pt-72);}.pt-84{font-size:var(--pt-84);}.pt-96{font-size:var(--pt-96);}.pt-112{font-size:var(--pt-112);}.pt-128{font-size:var(--pt-128);}.pt-144{font-size:var(--pt-144);}

/* Modificadores de escala tipográfica */
.size-minus-5 { font-size: 0.5000em; }
.size-minus-4 { font-size: 0.5743em; }
.size-minus-3 { font-size: 0.6598em; }
.size-minus-2 { font-size: 0.7579em; }
.size-minus-1 { font-size: 0.8706em; }
.size-plus-1 { font-size: 1.1487em; }
.size-plus-2 { font-size: 1.3195em; }
.size-plus-3 { font-size: 1.5157em; }
.size-plus-4 { font-size: 1.7411em; }
.size-plus-5 { font-size: 2.0000em; }





/* **** Screen reader / mobile / desktop only *** */
.if-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

@media (max-width: 479px) {
.if-not-mobile{ display:none; }
}
@media (min-width: 480px) {
.if-mobile{ display:none; }
}
@media (max-width: 767px) {
.if-desktop{ display:none; }
}

.nobr{
    white-space: nowrap;
}




/* ************* */

html {
    scroll-behavior: smooth;
	    font-size: 16px;
}


body {
	margin:0; padding:0;
	
	font-family: 'Montserrat', sans-serif; 
		font-size: 1,.rem;
		font-weight: 400;
		line-height: 1.6em;
	
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;

/* Para que footer quede en el bottom */
display: flex;
flex-direction: column;
min-height: 100vh;  /* Ocupa al menos toda la altura de la ventana */
margin: 0;

}



.nobr{ white-space: nowrap; }

H2.light{ font-weight: 400; }


.main{
}



/* **** HOME **** */

.mainbody, #mainbody{
	margin:0 auto 0 0;
	padding:40px;

	/* Para que footer quede en el bottom */
	flex: 1;

}

.colCtnt{
	
	}

.mainfoot{
position: fixed; 
bottom:0px; right:40px;
line-height:0;
z-index: 9999;
}

#sb-3{
}


/* S M */
@media (max-width:1023px){
	.colCtnt{
		padding-right:0;
		/* line-height: 3em; */
		}
	.mainfoot{
		position:relative;
		bottom:0; right:0;
		margin:1em auto 0;
		text-align:center;		
		}
	#sb-3{
		width:560px;
		}
	}

/* L XL */
@media (min-width:1024px){
	.colCtnt{
		max-width:768px;
		padding-right:420px;
		}
	}






/* **** internas: header */

#mainhead {
    background: #000;
    padding: 20px 20px 15px;
}

#mainhead NAV {
    max-width: 1110px;
    margin: 0 auto;
    color:white;
}

#mainhead NAV A{
	text-decoration:none;
	color:white;
}


.container{
max-width:695px; margin:0 auto; padding:20px;
clear:both;
}

/* **** especificas para BOOKMARKLETS */


.bookmarklet{
background:#eee; padding:10px 20px; border-radius: 8px;
    border-width:1px;
    border-style:solid;
    border-bottom-color:#aaa;
    border-right-color:#aaa;
    border-top-color:#ddd;
    border-left-color:#ddd;
    cursor: pointer;
}
.bookmarklet:active{
	cursor: move;
}

@media only screen and (min-width: 768px) {
  .ifmobile {
    display: none; /* Mostrar sólo en dispositivos móviles */
  }
}

.warning{ background-color: yellow; border:1px solid #fc0; }

.nav-lista{ padding: 0; }
.nav-lista A{color:#000; text-decoration:none}
.nav-lista STRONG{ text-decoration: underline; }
.nav-lista LI{ 
	padding:0;
	background: #eee; margin:8px 0; padding:10px 20px;
	list-style:none;
	border-radius: 8px;
	}

	
.lang-switcher {
    margin-left: 1em;
    font-size: 0.85em;
    opacity: 0.8;
}
.lang-switcher strong {
    color: white; /* o el color activo que uses en el nav */
}


/* =========================================================================
   ACCENT COLOR SYSTEM
   Tricontrast AA: --color-accent is accessible against both white and black.
   JS (themechooser.js) overrides these via setProperty on :root.
   ========================================================================= */

:root {
    --color-accent: #c100fa;
    --color-hover:  #dd00ff;
}

a.strong {
    color: var(--color-accent);
    font-weight: 700;
}

/* Accent block: use as section bg with white or black text on top */
.accent-block {
    background: var(--color-accent);
    color: white;
    padding: 1.5em 2em;
}
.accent-block--dark-text {
    color: black;
}


/* =========================================================================
   HEADER NAV — flex layout for breadcrumb + lang-switcher + theme-toggle
   ========================================================================= */

#mainhead NAV {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    max-width: none;
}

/* Breadcrumb trail takes all available space */
.bc-trail {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.bc-current {
    opacity: 0.75;
}

/* Lang switcher: pushed right, gap from trail via margin */
.lang-switcher {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 1.5em;
    white-space: nowrap;
    font-size: 0.85em;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 0.25em;
}
.lang-switcher strong {
    color: white;
    font-weight: 700;
    opacity: 1;
}
.lang-switcher a {
    color: white;
    opacity: 0.6;
    text-decoration: none;
}
.lang-switcher a:hover {
    opacity: 1;
}

/* Mobile: allow breadcrumb to shrink, lang-switcher stays visible */
@media (max-width: 599px) {
    .bc-trail {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .lang-switcher {
        padding-left: 0.75em;
    }
}


/* =========================================================================
   THEME TOGGLE — three-circle button, fixed top-right
   Positioned to the left of where the panel opens.
   ========================================================================= */

.theme-toggle {
    flex: 0 0 auto;
    position: fixed;
    top: 16px;
    right: 20px;
    width: 50px;
    padding-left: 20px;
    padding-bottom: 20px;
    cursor: pointer;
    z-index: 200;
    background: none;
    border: none;
    box-shadow: none;
}

.color-circle {
    position: absolute;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    border: 2px solid #999;
    transition: right 0.3s ease;
    box-shadow: 0 3px 2px 0 rgba(0,0,0,0.2);
}

.circle-back   { background: white;                  right: 0;  z-index: 1; }
.circle-middle { background: black;                  right: 8px; z-index: 2; }
.circle-front  { background: var(--color-accent);    right: 16px; z-index: 3; }

.theme-toggle:hover .circle-middle,
.theme-toggle.opened .circle-middle { right: 12px; }
.theme-toggle:hover .circle-front,
.theme-toggle.opened .circle-front  { right: 24px; }

/* Lang switcher sits to the left of the fixed theme-toggle */
/* Adjust right offset if lang-switcher is also present — handled via flex in nav */


/* =========================================================================
   THEME CHOOSER PANEL
   Sourced from sb-home/css/ui.css — keep in sync.
   ========================================================================= */

.theme-chooser {
    position: fixed;
    top: 70px;
    right: 30px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 20px;
    width: 380px;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    display: none;
    font-size: 16px;
    line-height: 1.5;
    cursor: grab;
    transition: transform 0.1s ease;
}

@media (max-width: 479px) {
    .theme-chooser {
        top: 60px;
        width: auto;
        left: 20px;
        right: 20px;
    }
}

.theme-chooser INPUT  { font-size: 14px; }
.theme-chooser LABEL  { line-height: 140%; }

.theme-options   { width: 100%; }

.option-group    { margin-top: 30px; margin-bottom: 25px; }

.option-title {
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
    font-size: 16px;
    color: inherit;
}

.option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.two-columns { display: flex; gap: 20px; margin-bottom: 25px; }
.column      { flex: 1; }

.slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.font-weight-slider,
.font-size-slider { flex: 1; }

.mode-selector { display: flex; gap: 10px; }

.mode-selector button {
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 18px;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.mode-selector button.active {
    background-color: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

.mode-selector button:hover {
    background-color: var(--color-hover);
    color: white;
}

.color-palette {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.color-option {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #ccc;
    cursor: pointer;
    transition: transform 0.2s;
}

@media (max-width: 479px) {
    .color-option { width: 50px; height: 50px; }
}

.color-option:hover,
.color-option:focus       { transform: scale(1.1); }
.color-option.active      { border-color: #000; box-shadow: 0 0 0 2px var(--color-accent); }

.circle--spectrum {
    background: conic-gradient(
        from 0deg at center,
        #f20000 0deg,   #d14e00 39.6deg, #ab6a00 72deg,
        #288b01 108deg, #238b01 144deg,  #008974 180deg,
        #0075f0 216deg, #8955ff 252deg,  #c118ff 288deg,
        #da00c3 324deg, #f20000 360deg
    );
}

.hsb-controls { margin-top: 15px; }

.hsb-slider {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.hsb-slider label {
    width: 80px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hsb-slider input[type="range"] { flex: 1; margin: 0 10px; }

.hsb-input {
    width: 50px;
    padding: 6px 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
}

.accessibility-option {
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.accessibility-option input[type="checkbox"] { margin: 0; }
.accessibility-option label { font-size: 13px; cursor: pointer; }

.close-button {
    cursor: pointer;
    font-size: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: none;
    padding: 0;
    background: #333;
    color: white;
    border: none;
}
.close-button:hover { background: var(--color-hover); }

.reset-icon {
    cursor: pointer;
    font-size: 16px;
    opacity: 0.75;
    padding: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /* back.svg lives in sb-content/lib-extras/img/ */
    background: #666 url("img/back.svg") no-repeat center / 12px 12px;
    margin: 2px 0 -4px 2px;
    border: none;
    box-shadow: none;
}
.reset-icon:hover { opacity: 1; }

.no-options {
    color: #777;
    font-style: italic;
    padding: 20px 0;
    text-align: center;
}

.theme-chooser.dragging {
    cursor: grabbing;
    transform: scale(1.01);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.no-selection,
.no-selection * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Focus states */
button:focus-visible,
input:focus-visible,
.color-option:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Screen-reader only */
.if-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}


/* =========================================================================
   DARK MODE — base for internal pages
   ========================================================================= */

BODY.theme-option-dark {
    background-color: #111;
    color: #fff;
}

BODY.theme-option-dark #mainhead {
    background: #000;
}

BODY.theme-option-dark .theme-chooser {
    background-color: #222222cc;
    border-color: #666;
    color: #f0f0f0;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 20px #000000cc;
}

BODY.theme-option-dark .option-title        { color: #f0f0f0; }
BODY.theme-option-dark .slider-label        { color: #f0f0f0; }
BODY.theme-option-dark .hsb-slider label    { color: #f0f0f0; }
BODY.theme-option-dark .no-options          { color: #aaa; }

BODY.theme-option-dark .mode-option {
    border-color: #555;
    color: #f0f0f0;
}

BODY.theme-option-dark .color-option        { border-color: #666; }
BODY.theme-option-dark .color-option.active { border-color: white !important; }

BODY.theme-option-dark .hsb-input {
    background-color: #3a3a3a;
    border-color: #555;
    color: #f0f0f0;
}

BODY.theme-option-dark input[type="range"] { background: #3a3a3a; }

BODY.theme-option-dark input[type="range"]::-webkit-slider-thumb { background: var(--color-accent); }
BODY.theme-option-dark input[type="range"]::-moz-range-thumb     { background: var(--color-accent); }

BODY.theme-option-dark a.strong { text-shadow: 0px 1px 4px black; }


/* =========================================================================
   FOOTER
   ========================================================================= */

#mainfoot {
    background-color: var(--color-accent);
    color: white;
}

#mainfoot a {
    color: white;
    text-decoration: underline;
}

.sb-footer-inner {
    max-width: 1110px;
    margin: 0 auto;
    padding: 16px 20px 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 0.85em;
}

.sb-footer-inner img {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}

BODY.theme-option-dark #mainfoot {
    background-color: #111;
    color: #ccc;
}

BODY.theme-option-dark #mainfoot a {
    color: var(--color-accent);
}