@charset "UTF-8"; /* ESTILOS GENERALES */

:root{/* Opcional pero recomendado: ayuda a formularios/scrollbars nativos, Le dice al navegador: “esta página soporta light y dark” para que los controles nativos se vean bien con tu tema: */
    color-scheme: light dark; }

/* ------------------------------------------
   LIGHT (default + forzado)
   ------------------------------------------
   - :root = light por defecto
   - :root[data-theme="light"] = light forzado (ignora el SO)
*/
:root, :root[data-theme="light"]{/*VARIABLES*/
    /* 🎨 Colores base */
    --color-white: 255,255,255;
    --color-black: 0,0,0;
    --color-graylight: 232,232,232;
    --color-fixed-white: 255,255,255;
    --color-fixed-black: 0,0,0;

    /* Colores Primarios y Secundarios - AHORA VA EN CONFIG.PHP*/ 
    /*--color-primary: 211, 47, 47; /* #D32F2F  */
    /*--color-primary-dark: 165, 41, 41; /* #A52929 */
    /*--color-secondary: 56, 142, 60;
    --color-accent: 92, 92, 92;  */

    /* 🎨 Colores de Fondo y Texto */
    --color-background: 236,239,244;
    --color-text: rgba(var(--color-black), 0.7) ;
    --color-border: rgba(var(--color-black), 0.2);
    
    /* 🎨 Colores de Estado */
    --color-success: 40, 167, 69;   /* success */
    --color-warning: 255, 193, 7;   /* warning */
    --color-error: 220, 53, 69;     /* error */

    --fontsize-scale: 1; /* para escalar en caso de accesibilidad*/
    /* Tamaños tipográficos de la fuente, relación aurea */
    --fontsize-tit: clamp(
        calc(2.1rem * var(--fontsize-scale)), 
        calc((1.4rem + 1.8vw) * var(--fontsize-scale)), 
        calc(2.7rem * var(--fontsize-scale)));  /* Título grande */
    --fontsize-sti: clamp(
        calc(1.2rem)*var(--fontsize-scale), 
        calc((0.9rem + 1vw)*var(--fontsize-scale)), 
        calc(1.56rem)*var(--fontsize-scale));   /* Subtítulo / h2 ... */
    --fontsize-nor: clamp(
        calc(0.85rem * var(--fontsize-scale)), 
        calc((0.82rem + 0.25vw) * var(--fontsize-scale)), 
        calc(0.9rem * var(--fontsize-scale)));   /* Texto normal */
    --fontsize-min: clamp(
        calc(0.65rem * var(--fontsize-scale)), 
        calc((0.62rem + 0.2vw) * var(--fontsize-scale)), 
        calc(0.7rem * var(--fontsize-scale)));    /* Texto pequeño */

    /*Sombras*/
    --shadow-soft: 0 4px 10px rgba(var(--color-primary), .15);
    --shadow-strong: 0 8px 32px rgba(var(--color-primary), .20);

    /*bordes*/
    --radius-max: 14px;
    --radius-nor: 7px;
    --radius-min: 4px;
    --radius-input: 99px;

    /*Efecto Easign*/
    --transition: 0.2s ease-out; /* 0.27s ease */
    }

/* ------------------------------------------
   DARK MODE 
   ------------------------------------------
   Este bloque se aplica en DOS escenarios:
   A) FORZADO: :root[data-theme="dark"] (siempre)
   B) SISTEMA: @media dark + :root:not([data-theme])
*/    
:root[data-theme="dark"] { /* 🌙 Modo Oscuro */    
    /* Colores base (suaves, neutrales) */
    --color-white: 22, 23, 25;
    --color-black: 255, 255, 255;
    --color-graylight: 71, 75, 77;
    --color-background: 29, 31, 33;
    --color-text: rgba(var(--color-black), 0.5) ;
    }

/* Dark por SISTEMA (solo si NO está forzado por data-theme) */
@media (prefers-color-scheme: dark){
    :root:not([data-theme]){
        /* Colores base (suaves, neutrales) */
        --color-white: 27, 27, 27;
        --color-black: 255, 255, 255;
        --color-graylight: 77, 77, 77;
        --color-background: 55,55,55;
        --color-border: rgba(var(--color-black), 0.5);
        }
    }


/* ------------------------------------------
   HIGH CONTRAST MODE
   Se activa con: data-contrast="high"
   Funciona encima de light o dark
   ------------------------------------------ */

:root[data-contrast="high"]{
    --color-text: rgba(var(--color-black), 0.9);
    --color-border: rgba(var(--color-black), 0.8);
    --color-graylight: rgba(var(--color-black), 0.08);
    --color-primary: 0, 0, 0; /* negro sólido */
    --color-primary-dark: 50, 50, 50; /* negro sólido también */
    --color-secondary: 0, 0, 0;
    --color-accent: 0, 0, 0;  
    }

/* Ajustes específicos cuando además es dark */
:root[data-theme="dark"][data-contrast="high"]{
  --color-text: rgba(var(--color-black), 1); /* blanco sólido */
  --color-border: rgba(var(--color-black), 0.9);
  --color-graylight: 55, 55, 55;
  /**/
} 

/* Imágenes raster normales */
:root[data-contrast="high"] img{ filter: grayscale(100%);}

/* Transición suave (opcional) */
img { transition: filter var(--transition); }

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

body {font-family:regular; font-size:var(--fontsize-nor); color: var(--color-text); background: rgb(var(--color-background));}
html, body{ transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition);

    }

/*PARA ESTRUTUCTURA GENERAL - TITULOS - número aureo: 1.61803398874*/
h1, h2, h3, h4{font-family: regular; font-weight: normal; line-height: 1.2; color: inherit; /*margin: 0 0 .75em;*/}
    h1{ font-size: var(--fontsize-tit); }
    h2{ font-size: var(--fontsize-sti); }
    h3{ font-size: var(--fontsize-nor); }

p{line-height: 1.5; font-size: inherit; font-family: regular; overflow-wrap: break-word; /*hyphens: auto; corta las palabras muy largas que no entren en input*/} /*Define un párrafo */
q{display: block; padding:1rem 0; color:rgba(var(--color-black), 0.5); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); 
    font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size: var(--fontsize-tit); } 	/*Define una cita corta*/

em{ line-height: 1; color:rgb(var(--color-primary)); font-style: inherit;} /*Define énfasis en un texto - lo ocuprameos para notas en linea de texto*/  
strong{font-family: bold; color:inherit; font-weight: inherit;} /*Define un texto en negrita - adiferencia de <b> es texto que engloba se tiene que reforzar.*/
mark {background-color: rgb(var(--color-primary)); color:rgb(var(--color-white)); font-family: bold; padding: 2px 7px; border-radius: var(--radius-min);} /*Define texto resaltado o marcado*/
small{font-size: var(--fontsize-min);}
/*address {font-style: normal;}     /*Define la información de contacto del autor / propietario del documento*/
/*<menu>        Define la lista de un menú*/
/*<option> 	    Define una opción en una lista desplegable*/
/*<sub> 	    Define un texto que es subíndice*/
/*<sup> 	    Define un texto que es superíndice*/


/* ESTILO DE LA FUENTE TIPOGRAFICA: Todas los estilos, estan basado en los mismos nombre: */
@font-face { font-family: 'regular';
    src: url('../sfont/Montserrat-Medium.woff2') format('woff2'),
         url('../sfont/Montserrat-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face { font-family: 'bold';
    src: url('../sfont/Montserrat-Bold.woff2') format('woff2'),
         url('../sfont/Montserrat-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face { font-family: 'black';
    src: url('../sfont/Montserrat-ExtraBold.woff2') format('woff2'),
         url('../sfont/Montserrat-ExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
    
@font-face { font-family: 'light';
    src: url('../sfont/Montserrat-Thin.woff2') format('woff2'),
         url('../sfont/Montserrat-Thin.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face { font-family: 'normal';
    src: url('../sfont/OpenSans-Medium.woff2') format('woff2'),
            url('../sfont/OpenSans-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
        
/*/////////////////////////////////////////////////////////////////////////////////////*/
button{display: flex; justify-content: center; align-items: flex-start; }

.backcolor_main{ background: radial-gradient(circle at top right, rgb(var(--color-primary)), rgb(var(--color-primary-dark))); }
/*.backcolor_gradient{ background: radial-gradient(circle at top right, var(--color-bcklight), var(--color-bcknormal), var(--color-bckdark)); }
.background_splita { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient( circle at right center,  var(--color-bcklight) 10%, transparent 50%); z-index: -1; }
.background_splitb { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient( circle at left bottom,  var(--color-bcklight) 10%, transparent 50%); z-index: -1;}*/

.radiusnor{border-radius: var(--radius-nor);}
.radiusmin{border-radius: var(--radius-min);}

.shadownsoft{ box-shadow: var(--shadow-soft);}
.shadownstrong{ box-shadow: var(--shadow-strong);}

.opacitynor{ opacity: 0.5;}
.opacitymin{ opacity: 0.8;}


/* MEDIDAS GENERALES /////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 1199px) {/* Laptops y escritorios pequeños (992px - 1199px) */}
@media only screen and (max-width: 991px) { /* Tablets (Pantallas medianas, 768px a 991px) */ } 
@media only screen and (max-width: 767px) { /* Teléfonos (Pantallas pequeñas, 0px a 767px) */ }


/*/////////////////////////////////////////////////////////////////////////////////////*/
/* HEAD MAIN/////////////////////////////////////////////////////////////////////////////////////*/



/*/////////////////////////////////////////////////////////////////////////////////////*/
/* PARA MOSTRAR CÓDIGO/////////////////////////////////////////////////////////////////////////////////////*/
.code_block{margin-top: 30px;}
/* Sección de código */
.code_section { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0px }

/* Estilos para los bloques de código */
    .code_container { background: var(--color-white); padding: 15px; position: relative; 
                    max-height: 300px; overflow-y: scroll;}

        pre { white-space: pre-wrap; word-wrap: break-word; margin: 0 }
        /* Botón de copiar */
        .sectionbtn { position: absolute; top: 15px; right: 15px; }

    /* Sección de resultado */
    .resultado_section {position: relative; background-color: var(--color-white); padding: 20px; margin-top: 15px; overflow: hidden;}

/*bloques que requieren un alto, deacuerdo al contenedor*/
.heightval{height: 800px; background-color: var(--gray-light);}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/* ICONS /////////////////////////////////////////////////////////////////////////////////////*/

/* Encabezado con línea */
.icons_header{  display:flex; align-items:center; gap: 1.7rem; margin:4rem 0rem 3rem 0rem;}
    .icons_title{ color: rgba(var(--color-black),0.3); flex-shrink:0; white-space:nowrap; }
    .icons_seperator{ height: 1px; background: rgba(var(--color-black), 0.1); flex:1;  }

/* Grid responsivo */
.icons_grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(97px, auto)); gap:.75rem; justify-content:flex-start; }
    /* Tarjeta de icono */
    .icon_item{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; padding: 1.3rem; border-radius: .5rem; border: 2px solid transparent; color: rgba(var(--color-black), .3); cursor: pointer; text-align: center; transition: background var(--transition); }
        .icon_item:hover{ background: rgba(var(--color-white),0.7); outline: none; }
        .icon_item.is_select{ background: rgba(var(--color-white),0.7); outline: none; border-color: rgba(var(--color-black),0.1); }
        .icon_svg{ background-color: rgba(var(--color-black), .7);}
        
#iconsvg{margin: 30px 0px;}

.stickyinspector{ background-color: rgba(var(--color-white),0.7); padding: 40px; color: var(--color-text);}
    .stickytitle{display: block; margin:1.5rem 0rem 0.3rem 0rem; color: rgba(var(--color-black), .30);}
    .stickylabel{display: block; margin-bottom:.15rem; color: rgba(var(--color-black), .60);}

/*/////////////////////////////////////////////////////////////////////////////////////*/
/* BACKGROUND COLORS/////////////////////////////////////////////////////////////////////////////////////*/

.color_backgrounds{--g:clamp(12px,2.5vw,24px);
                  --r:22px;
                  --chip:12px;
                  --shadow:0 2px 6px rgba(0,0,0,.08),0 10px 24px rgba(0,0,0,.06);
                  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(220px,24vw,320px)),1fr));gap:var(--g); ;max-width:1440px;margin-inline:auto;}
.color_background{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;isolation:isolate;aspect-ratio:1/1;background:#e9e9e9;border-radius:var(--r);box-shadow:var(--shadow);outline:1px solid rgba(0,0,0,.06);padding:clamp(14px,2.2vw,28px);transition:transform .25s ease,box-shadow .25s ease;will-change:transform}
@media(prefers-reduced-motion:reduce){.color_background{transition:none}}

    .color_buttons{display:flex; gap:8px; flex-wrap:wrap;}
    .color_buttons .clbto{display:inline-flex; align-items:center; gap:.5ch; padding:.45em .9em; border-radius:20px; outline:0; border:0; user-select:none; cursor:pointer;
        background:rgba(0,0,0,.55); color:#fff; font-size: 0.7rem;  transition:opacity .2s ease,transform .2s ease;}
    .color_buttons .clbto:hover{opacity:1;}

.color_namecolor00{background:linear-gradient(180deg,#ececec,#dcdcdc);}