@font-face {
    font-family: "Noto";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Noto_Sans/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");
}

@font-face {
    font-family: "OpenSans";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
}

@font-face {
    font-family: "FiraSans";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Fira_Sans_Condensed/FiraSansCondensed-Regular.ttf") format("truetype");
}

@font-face {
  font-family: 'Inter'; /* Nombre que usarás en tu CSS */
  font-style: normal;
  font-weight: 400; /* Regular */
  font-display: swap; /* Estrategia recomendada para la carga */
  src: local('Inter Regular'), /* Uso de la versión local si existe */
       url('../fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype')
       
}

@font-face {
  font-family: 'InterTitulos'; /* Nombre que usarás en tu CSS */
  font-style: normal;
  font-weight: 400; /* Regular */
  font-display: swap; /* Estrategia recomendada para la carga */
  src: local('InterTitulos'), /* Uso de la versión local si existe */
       url('../fonts/Inter/static/Inter_18pt-SemiBold.ttf ') format('truetype')
       
}


/* Fuente General de la página */
* {
font-family: 'FiraSans', 'OpenSans', 'Noto', 'Arial', 'Sans Serif';
}


:root{
--translucid-white: rgba(255,255,255,0.6);
--lightaquamarine: #ccffee;
--aqua: #01526dff; // #007399;

--translucid-tbox: rgba(160, 160, 160, 0.4);
--translucid-tbox-dark: rgba(220, 220, 220, 0.5 );

--translucid-lbox: rgba(230, 230, 230, 0.4);
--grafito: #444746;
--nievesucia: #eeeeee;
--casinegro: #202020;
--negroclaro: #101010;
--fondo-botones: #055874ff;
--bg-gray-100: #f3f4f6;

--rosa-muy-palido: #ffe5e9;
--verde-agua-claro: ghostwhite;
--verde-agua: #bff3f4;
--aqua-dark: rgb(0, 62, 87);
--aqua-darker: rgb(0, 29, 39);

}
:root {        
/* Elementos Generales */
--body-back: var(--aqua);
--normal-text-color: var(--nievesucia);

/* Brillo iconos de herramientas y formularios */
/* Los íconos son grises, pero en temas oscuros */
/* deberían cambiar a más claros. */
/* Las clases gridactionbutton y modalwinactionbutton */
/* modifican la brightness de los íconos con los valores */
/* indicados debajo, para aclararlos u oscurecerlos */

--tool-icons-bright: 0;
--modalwin-icons-bright: 0;
--header-logo-invert: 0;

/* Menú */
--menu-background-color: var(--translucid-tbox-dark);
--menu-text-color: Black;
--menu-border: Silver;

--menu-link-background-color: transparent;
--menu-link-text-color: var(--grafito);

--menu-link-hover-background-color: var(--nievesucia);
--menu-link-hover-text-color: var(--grafito);


--menu-summary-back: transparent;
--menu-summary-border: Black;
--menu-summary-text: var(--grafito);
--menu-summary-hover-back: var(--grafito);
--menu-summary-hover-text: White;

--menu-off-shadow: var(--translucid-tbox);
--menu-activator-background: transparent;


/* Enlaces normales (barra navegación, artículos) */
--normal-link-back: Transparent;
--normal-link-border: Transparent;
--normal-link-color: PaleGreen;

/* Tarjetas de productos */
--single-product-card-background: var(--aqua-dark);/* var(--translucid-white); */
--single-product-card-text: var(--nievesucia);/* var(--casinegro); */
--single-product-card-border: var(--translucid-white);

/* Botón en tarjeta de productos */
--single-product-card-button-background: White;
--single-product-card-button-background-active: palegreen; //var(--verde-agua);
--single-product-card-button-text: var(--aqua);
--single-product-card-button-border: var(--aqua);
/* Para regiones destacadas dentro del botón */
--secondary-single-product-card-button-background: var(--grafito);

/* Carrito de Compras */
--cart-text: var(--aqua);

/* Formularios */
--modalwin-back: var(--fondo-botones);
--modalwin-border: var(--nievesucia);

--modalwin-disabled-back: Gainsboro;
--modalwin-disabled-color: var(--grafito);

--modalwin-edithistory-back: var(--nievesucia);
--modalwin-edithistory-border: transparent;
--modalwin-edithistory-text: var(--grafito);

--modalwin-input-back: White;
--modalwin-input-text: Black;
--modalwin-input-border: Gainsboro;

--modalwin-inputlabel-back: transparent;
--modalwin-inputlabel-color: var(--grafito);

--modalwin-title-back: transparent;
--modalwin-title-color: Black;
--modalwin-title-border: SkyBlue;

--normal-toolbar-back: transparent;
--normal-toolbar-border: Silver;
--normal-toolbar-text: var(--grafito);

--fieldset-border: Lightseagreen;


--page-footer-background: var(--translucid-tbox);


/* COLORES PARA BLOG */
--blockquote-text: var(--grafito);
--blockquote-back: PowderBlue;
--blockquote-border: var(--nievesucia);

--table-back: var(--aqua-dark);
--table-header-back: var(--casinegro);




/* TERCER NIVEL */
/* Se definen todos los estilos (no sólo el color)
para distintos elementos.
Para el color se utilizan las etiquetas definidas en el segundo nivel.
Si sólo se desea modificar el color de los elementos, se recomienda
modificar las etiquetas de segundo nivel, que indican el tipo de elemento
que controlan.
*/


/* Clases básicas */
/* Estas clases aportan características individuales */


/* Clase para negrilla */
.bold {
font-weight: bold;
}

/* Clase para reducir el tamaño de fuente a un 75% de su entorno */
.size75 {
font-size: 75%;
}

/* Clase para reducir el tamaño de fuente a un 85% de su entorno */
.size85 {
font-size: 85%;
}

/* Clase para aumentar el tamaño de fuente a un 125% de su entorno */
.size125 {
font-size: 125%;
}


/* Clase ancho 100% de su contenedor */
.width100 {
    width: 100%;
}

/* Clase ancho 30% de su contenedor */
.width30 {
    width: 30%;
}

/* Clase ancho 60% de su contenedor */
.width60 {
    width: 60%;
}


/* Clase para fijar cualquier elemento */
.fixed {
position: fixed;
}

/* Clase para que el puntero sea una mano */
.pointer {
cursor: pointer;
}

/* Clase para ubicar a la derecha */
.right {
right: 1em;
}

/* Clase para ALINEAR contenido a la derecha */
.contright {
text-align: right;
}

/* Clase para CENTRAR contenido */
.contcenter {
text-align: center;
}

/* Clase para ALINEAR contenido a la izquierda */
.contleft {
text-align: left;
}


/* Clase para que el contenido de una celda no se rompa en varias filas */
/* Es que si de todos modos va a haber que desplazar la tabla para ver todas */ 
/* sus columnas, por lo menos que las líneas sean de alto uniforme */
.nowrap{
    white-space: nowrap;
}

/* Clase para centrar elementos, en especial imagenes */
.center {
display: block;
margin: auto;
max-width: 90%;
text-align: center;
}

/* Clase para bordes redondeados */
.roundedcorner {
border-radius: .5em;
}

/* Clase para dejar espacio alrededor */
/* (usa margin, es REALMENTE alrededor) */
.somespacearound {
margin: 1em;
}

/* Clase para dejar espacio interno */
/* (usa padding, es margen interno) */
.somespaceinternal {
padding: 1em;
}

/* Clase para que al hacer click en un enlace a un elemento,
éste no quede ubicado en el margen superior (hay casos que una
toolbar lo ocultaría */

.nopagetop {
    scroll-margin-top: 80px;
}


/* Clase para que un elemento se quede fijo
a 82 px del borde de pantalla. 52px es una cantidad
arbitraria, puede adaptarse según el alto del
encabezado de página */
.sticky {
    top: 100px;
    position: sticky;
}

/* Clase para que un elemento deje ver (pero desenfocado)
lo que queda detrás */
.translucido {
    background-color: rgba(255, 255, 255, 0.5); /* Semitransparencia es CLAVE */
    backdrop-filter: blur(10px); /* ¡Aquí está la magia! */
}

/* Clase para que un elemento (como un div) oculte
lo que queda detrás */
.opaco {
    background-color: var(--body-back); // rgba(255, 255, 255);
}

/* Clase para que un elemento (como un div) oculte
lo que queda detrás, pero con un color distinto al fondo */
.opaco_color {
    background-color: var(--aqua-dark);
}


/* Clase para anular cualquier espacio alrededor */
.nospacearound {
margin: 0px;
padding: 0px;
}

/* Clase para que el elemento esté siempre encima del resto */
/* (Excepto del menú) */
.ontop{
z-index: 77;
}

/* Clase para que el elemento esté siempre encima del resto */
/* (Incluso del menú) */
.onsupertop{
z-index: 9999;
}

/* Clase para que un elemento (como una imagen en medio de un texto) */
/* quede alineado exactamente en la linea media de los otros */
.centrosalineados {
vertical-align: middle;
}

/* Clase para modificar color de texto y fondo de un elemento */
/* considerado "Advertencia". Su 1er uso fue darle este estilo a */
/* input text con valores incorrectos o sospechosos */
.generic-alert {
    background-color: var(--generic-alert-background);
    color: var(--generic-alert-text);
    visibility: hidden;
}

/* Clase para atenuar al 35% (casi invisible) */
.atenuado {
    opacity: 0.35;
}

/* Clase para poner en escala de grises */
.grayscale{
  filter: grayscale(60%);
  opacity: 0.35;
}

/* Clase para mostrar miniatura */
.thumbnail {
height: 12vh;
width: auto;
transition: .2s linear;
}

/* Animación de la miniatura */
.thumbnail:hover {
transform: scale(5) translate(40%);
box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.47);
}

/* Clase para imagen icono con efecto hover */
.beatingicon {
transition: .25s linear;
}

/* Animación de la miniatura */
.beatingicon:hover {
transform: scale(1.25);
filter: drop-shadow(.2em .2em .1em rgba(20,20,20,0.40));
/* La siguiente línea es necesaria para que el cambio de brillo que se hace */
/* a los íconos se mantenga en la animación, si no salen con el color original */
filter: invert(var(--tool-icons-bright));
}


/*
Características de BODY
*/
body {
background-color: var(--body-back);
color: var(--normal-text-color);
margin: 0px;
font-size: 16px;
}

a {
    text-decoration: none;
    color: var(--normal-link-color);
}


.tbox {
    background-color: var(--page-footer-background);
    padding: 1em;
    border-radius: .5em;
    margin-top: 16px;
}

/*
DIV de contenido general,
ubicado dentro de BODY
*/
#major {
/*border: 1px dashed black;*/
/*margin-left: 340px;*/
margin-left: 0px;
padding: 1em;
position: absolute;
width: 100%;
box-sizing: border-box;
}

/*
Esta clase podría haber tenido otro nombre pero la dejamos
así para facilitar la reutilización.
En definitiva se aplica al botón "Ir arriba" que se ubica abajo
a la derecha.

.fixed-bottom-right {
position: fixed;
right: 1em;
bottom: 2em;
opacity: 1.0;
z-index: 90;
cursor: pointer;
}
*/

.fixed-bottom-right {
  position: fixed;
  /* Usamos calc para asegurar que se mantenga dentro de la pantalla visible */
  right: 1rem;
  bottom: 2rem;
  
  /* Esto evita que el botón empuje el ancho de la página */
  max-width: calc(100vw - 2rem); 
  
  opacity: 1.0;
  z-index: 100; /* Subimos un poco el nivel por seguridad */
  cursor: pointer;

  /* OPCIONAL: Para iPhones modernos con notch o barras de navegación inferiores */
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  right: calc(1rem + env(safe-area-inset-right, 0px));
}


/* Estilos para div "header" que contiene encabezado de página */
#header {
    position: sticky;
    top: 0;
    display: flex; /* Habilita el layout flexible */
    flex-direction: column; /* Apila hijos */
    justify-content: space-between; /* Distribuye el espacio entre los tres elementos */
    align-items: center; /* Centra verticalmente */
    /*position: relative;*/
    box-sizing: border-box;
    z-index: 80;
    width: 100%; /*calc(100% - 32px);*/
    margin-top: -1em;
    background-color: var(--body-back);
}

.header-fila-1{
    display: flex;
    justify-content: space-between; /* Distribuye los 3 sectores de manera uniforme */
    width: 100%; /* Ocupa todo el ancho dentro del header-container */
    padding: 0;
}

.header-fila-2{
    margin-top: 8px;
    margin-bottom: 8px;
    display: flex;
    flex-grow: 1;
    width: 100%; /* Ocupará todo el ancho dentro del header-container */
}

.header-izq {
}

.header-cent {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    margin: 0;
}

.header-der {
    display: flex;
    align-items: center;  /* Centrado en altura */
    font-size: 16px;
}

/* Clase para logo en encabezado */
.header_logo {
height: 30px;
width: auto;
cursor: pointer;
/* El margen izquierdo de 16px es para dejar lugar */
/* para el botón de menú */
margin: 4px 0px 0px 16px;
filter: invert(var(--modalwin-icons-bright));
}









/*
Estilo para menú de navegación
Es un DIV que contiene enlaces a secciones
*/
#menu {
background-color: var(--menu-background-color);
/*box-shadow: -.2em .0 .5em .2em var(--black);*/
color: var(--menu-text-color);
height: 100vh;
overflow: auto;
padding: 1em;
text-align: left;
position: fixed;
/*right: 0px;*/
/*border-left: 1px solid var(--menu-border);*/
left: 0px;
border-right: 1px solid var(--menu-border);
top: 0px;
visibility: hidden;
width: 450px;
z-index: 8000;
}

@media (max-width: 500px) {
#menu {
width: 92vw;
}
}

.menu_button {
position: fixed;
top: 1em;
/*right: 1em;*/
left: 1em;
height: 24px;
width: auto;
cursor: pointer;
z-index: 7999;
filter: drop-shadow(0em 0em .4em rgba(255,255,255,1));
border: 1px solid lightgray;
padding: 2px;
}


.menuactivatorbutton {
position: fixed;
top: calc(50vh - 25px);
left: 0px;
cursor: pointer;
z-index: 78;
}


#pr_closemenu, #pr_closecart {
display: block;
margin: auto;
cursor: pointer;
}

/* Las opciones del menú son enlaces */
#menu a {
display: block;
align-content: center;
text-decoration: none;
background-color: var(--menu-link-background-color);
color: var(--menu-link-text-color);
font-size: 1.1em;
padding: .2em 0 0 1em;
border: none;
border-radius: .2em;
min-height: 2em;
margin-bottom: 0em;
}

#menu a:hover {
background-color: var(--menu-link-hover-background-color);
color: var(--menu-link-hover-text-color);
}


#menu details a {
margin-left: 2em;
}

#menu details summary::after {
content: "▶";
font-size: .6em;
margin-left: .5em;
}



#menu details details summary{
margin-left: 2em; 
}

#menu details details summary::after {
content: "▶";
font-size: .6em;
margin-left: .5em; 
}

#menu details details a {
margin-left: 4em;
}



#menu details details details summary{
margin-left: 4em; 
}

#menu details details details summary::after {
content: "▶";
font-size: .6em;
margin-left: .5em; 
}

#menu details details details a {
margin-left: 6em;
}


/* Los summary se emplean como títulos de secciones */
#menu summary {
display: block;
cursor: pointer;
text-decoration: none;
background-color: var(--menu-summary-back);
color: var(--menu-summary-text);
font-size: 1.3em;
padding: .2em 0 0 1em;
/* Borde: en este caso es una línea por debajo, pero podría ser un recuadro*/
/*border-bottom: 1px solid var(--menu-summary-border);*/
/*border-radius: .3em;*/
min-height: 1.5em;
margin-bottom: 0.15em;
border-radius: .3em;
font-weight: normal;
/*text-transform: uppercase;*/
}

#menu summary:hover {
background-color: var(--menu-summary-hover-back);
color: var(--menu-summary-hover-text);
}


/*
Este DIV captura clicks en cualquier parte de la
pantalla y el evento click oculta el menu.
Sólo aparece y funciona cuando se despliega el menú.
*/

/* DIVS de "bloqueo de pantalla" con desenfoque */
#menudeactivator_div, #cartdeactivator_div, #overlay_div {
    position: fixed;
    background-color: var(--menu-off-shadow);
    backdrop-filter: blur(4px);
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 79;
    display: none;

    /* Centrar el spinner (en overlay_div) u otros elementos */
    justify-content: center;
    align-items: center;

    /* Nota: para mostrar overlay_div hay que ponerle display:flex */
    /* y no display:inline para que se comporte como flex y centre el spinner */

}


/* Clase para el spinner que va dentro de overlay_div */

.overlay_spinner {
    width: 219px;
    height: 219px;
    border-radius: 50%; /* Hace que sea un círculo perfecto */
    overflow: hidden;
}

#menuactivator_div {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 10px;
    z-index: 78;
    background-color: var(--menu-activator-background);
}


/*
Estilo para pie de página
*/
#footer {
margin-top: 2em;
/*border-top: 3px sol   id var(--lightseagreen);*/
}

#footer p {
font-size: .8em;
/*font-weight: bold;*/
}

.footer_user_image {
max-height: 2em;
width: auto;
vertical-align: middle;
border-radius: 50%;
/*border: 0px solid var(--modalwin-back);*/
padding: .2em;
/*box-shadow: 0px 0px 2px 2px var(--modalwin-back);*/
margin-right: .5em;
}



/* Espacio para todo el Catálogo */
/* (tarjetas) */
.espacio-catalogo {
    margin: 5px auto 5px auto;
    width: calc(100% - 20px);
}


/* FlexBox para tarjetas de productos*/

/* Contenedor */
.espacio-cards {
    display: flex; /* Usa FlexBox */ 
    flex-wrap: wrap; /* Los elementos fluyen a la siguiente línea */
    justify-content: space-between;
    gap: 20px;
    }


/* Clase para tarjeta de rubro o subrubro */
.single-card {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(33.333% - 20px);
    box-sizing: border-box;
}


@media (min-width: 800px ) and (max-width: 1199px) {
.single-card {
    flex-basis: calc(50% - 10px);
}    
}  

@media (max-width: 799px) {
.single-card {
    flex-basis: calc(100%);
}

}  

.single-card-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1.77;
    object-fit: cover;
    object-position: center;
    display: block;
    flex-shrink: 0;
    border-radius: 8px;
    box-shadow: 0px 0px 3px 2px var(--single-product-card-border);
    transition: transform 0.3s ease-in-out; 
}

.single-card-img:hover {
  /* Amplía la imagen al 105% (1.05) de su tamaño original */
  transform: scale(1.05); 
}

.single-product-card {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(30% - 10px);
    box-sizing: border-box;
    background-color: var(--single-product-card-background);
    box-shadow: 0px 0px 3px 2px var(--single-product-card-border);
    padding: 0 .5em 0 .5em;
    z-index: 0;
}


.single-product-card-one-line {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;
    box-sizing: border-box;
    background-color: var(--single-product-card-background);
    box-shadow: 0px 0px 1px 1px var(--single-product-card-border);
    padding: 0 .5em 0 1em;
    z-index: 0;
    border-radius: .5em;
}


@media (min-width: 800px) and (max-width: 1199px) {
.single-product-card {
    flex-basis: calc(50% - 10px);
}
}

@media (max-width: 799px) {
.single-product-card {
    flex-basis: calc(100%);
}
}

.single-product-card-img {
    max-width: 25%;
    height: auto;
    float: left;
    margin-right: 1em;
}


/* Area de Botones en tarjeta de Producto. */
.single-product-card-button-zone {
position: relative;
    bottom: 45%;
    left: calc(25% + 1em);
    z-index: 0;
}

/* Botones en tarjeta de Producto. Ej: Agregar al Carrito */
.single-product-card-button {
    padding: .5em;
    background-color: var(--single-product-card-button-background);
    color: var(--single-product-card-button-text);
    border: 1px solid var(--single-product-card-button-border);
}

/* Botones en tarjeta de producto (HOVER y ACTIVE) */
.single-product-card-button:hover, .single-product-card-button:active {
        background-color: var(--single-product-card-button-background-active);
}


/* Etiqueta de botones en tarjeta de Producto. Ej: Agregar al Carrito */
.single-product-card-label {
    z-index: 0;
}


.single-product-card a, .single-product-card-one-line a {
    text-decoration: none;
    color: var(--single-product-card-text);
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Clase para íconos de barra de herramientas en ModalWin */
.actionbuttonicon {
height: 24px;
width: auto;
cursor: pointer;
filter: invert(var(--modalwin-icons-bright));
}

/* Clase para banners de portada */
.home_ban {
    width: 100%;
    aspect-ratio: 2.66;
    object-fit: cover;
    object-position: center;
    display: block;
    margin-bottom: 20px;
    flex-shrink: 0;
    border-radius: 20px;
    /* 1. Definición del Gradiente Vertical (Arriba y Abajo) */
    /* Crea transparencia desde Arriba (to bottom) y desde Abajo (to top) */
    --vertical-fade: linear-gradient(
        to bottom, 
        transparent 0%, /* Totalmente transparente en el borde superior */
        black 20%,      /* Opaco a partir del 10% */
        black 80%,      /* Opaco hasta el 90% */
        transparent 100% /* Totalmente transparente en el borde inferior */
    );
        /* 2. Definición del Gradiente Horizontal (Izquierda y Derecha) */
    /* Crea transparencia desde Izquierda (to right) y desde Derecha (to left) */
    --horizontal-fade: linear-gradient(
        to right, 
        transparent 0%, /* Totalmente transparente en el borde izquierdo */
        black 20%,      /* Opaco a partir del 10% */
        black 80%,      /* Opaco hasta el 90% */
        transparent 100% /* Totalmente transparente en el borde derecho */
    );
    /* 3. Combinación de los dos gradientes (El que se superpone es el más restrictivo) */
    mask-image: var(--vertical-fade), var(--horizontal-fade);
    /* 4. Modo de Máscara (Importante) */
    /* 'luminosity' o 'multiply' se usa para combinar los gradientes de manera uniforme */
    mask-mode: luminosity;
}

@media (max-width: 799px) {
.home_ban {
    aspect-ratio: 1.25;

} 
} 

@media (min-width: 1400px) {
.home_ban {
    aspect-ratio: 3.2;
} 
} 

/* Estilo para botones e íconos dentro de tarjeta de rubro, sub rubro o producto */ 
.card-icon {
    height: 1.2em;
    width: auto;
}

h2 {
    font-weight: normal;
    font-size: 1.5em;
}

/* Clase para el contenedor general de imagen y datos */
/* en pantalla completa */
.full_screen_product {
    display: flex;
    gap: 20px;
    flex-direction: row;
    box-sizing: border-box;
    background-color: var(--single-product-card-background);
    box-shadow: 0px 0px 5px 5px var(--single-product-card-border);
    padding: .5em;
    z-index: 0;
} 

/* Clase para la imagen de producto en pantalla completa */
.full_screen_product_img {
    width: 30%;
    max-width: 100%;
    object-fit: contain;
    height: auto;
    margin: 1em;
    float: left;
}

@media (max-width: 799px){

.full_screen_product {
    flex-direction: column;
}

.full_screen_product_img {
    width: 90%;
}

}


/* Botones pantalla completa. Ej: Agregar al Carrito */
.full-screen-product-button {
    z-index: 0;
    padding: .5em;
    background-color: var(--single-product-card-button-background);
    color: var(--single-product-card-button-text);
    border: 1px solid var(--single-product-card-button-border);
    cursor: pointer;
}

/* Botones en pantalla completa (HOVER y ACTIVE) */
.full-screen-product-button:hover, .single-product-card-button:active {
        background-color: var(--single-product-card-button-background-active);
}


/* Input Number en pantalla completa. Ej: Cantidad */
.full-screen-product-number {
    font-size: 1.5 em;
    width: 6ch;
}


/*
Estilo para Carrito de Compras
Es un DIV similar al del menú pero alineado a la derecha.
Muestra productos en carro de compras.
*/
#cart {
background-color: var(--menu-background-color);
/*box-shadow: -.2em .0 .5em .2em var(--black);*/
color: var(--cart-text);
height: 100vh;
overflow: auto;
padding: 1em;
text-align: left;
position: fixed;
right: 0px;
border-left: 1px solid var(--menu-border);
top: 0px;
visibility: hidden;
min-width: 550px;
width: 45vw;
z-index: 9999;
}

@media (max-width: 500px) {
#cart {
  min-width: initial;
  width: 92vw;
}
}

/* Estilo para el contador de productos (número) en el botón de Carrito de Compras */
#cart_counter {
    font-size: 2em;
    margin-left: 12px;
    padding: .15em;
    background-color: var(--secondary-single-product-card-button-background);
    border-radius: 10%;
}

/* Estilo para la zona que muestra los productos en carrito */
#carrito_products_list{
    padding: .5em;
    border: none;
    border-radius: .25em;
    box-shadow: 0px 0px 3px 1px var(--translucid-tbox);
}


/* Estilo para la tabla que contiene los productos del carrito */
.cartcontent {
    width: 100%;
}

/* Inputs en Carrito de Compras */
input.publicform, textarea.publicform{
    font-size: 1.3em;
    background-color: var(--aqua);
    color: var(--normal-text-color);
    border: 2px solid var(--modalwin-border);
    box-sizing: border-box;
    padding: .5em 0 .5em .25em;
    border: none;
    border-radius: .25em;
    box-shadow: 0px 0px 3px 1px var(--translucid-tbox);
}

input.publicform:focus, textarea.publicform:focus{
    box-shadow: 0px 0px 3px 1px var(--menu-border);
}




/* ESTILOS PARA IMAGENES MOSTRADAS EN GRILLAS DE DATOS */
/* EN HOJA DE ESTILOS PARA INFORMES IMPRESOS (PRTSTYLE.CSS) */ 
/* TAMBIEN ESTÁN. DEBERÍAN MANTENERSE IGUALES SI SE CAMBIA ALGO. */
/* 2025-10-27 las agregué a hoja de estilos de tienda, pensando en usar */
/* el estilo .thumb2 para imágenes en carrito */
.thumb1 {
    height: 32px;
    width: auto;
    margin-right: 1em;
}

.thumb2 {
    height: 64px;
    width: auto;
    margin-right: 1em;
}

.thumb3 {
    height: 96px;
    width: auto;
    margin-right: 1em;
}


/* Estilos para los 2 DIVS que sirven para crear diálogos */
/* de Mensajes (1 botón aceptar) o de Consultas (1 botón Aceptar y 1 Cancelar) */
#dialogMensajes, #dialogConsultas {
    border: none;
    padding: 2em;
    box-shadow: 0px 0px 12px 1px DarkGray;
    border-radius: 8px;
}

/* Estilo para un contenedor general dentro del dialog */
/* Es flex para que organice DIV con ícono y DIV con texto y botones */
#dialogMain {
    display: flex;
}


/*
ESTILOS PARA EL FORMULARIO DE LOGIN
*/
.loginform {
background-color: var(--modalwin-back);
color: var(--normal-text-color);
border: 2px solid var(--modalwin-border);
height: auto;
width: 40vw;
border-radius: 1em;
margin: 15vh auto 15vh auto;
padding: 5% 5% 5%;

}

@media (max-width: 799px) {
.loginform {
height: auto;
width: auto;
padding: 2%;
margin: 35vh auto;
}
}

div[class="loginform"] input {
font-size: 1.2em;
border-radius: .3em;
padding: .3em;
margin-bottom: .3em;
border: 1px solid var(--modalwin-input-border);
background-color: var(--modalwin-input-back);
color: var(--modalwin-input-text);

}

div[class="loginform"] input[type="button"] {
background-color: var(--normal-link-back);
color: var(--normal-link-color);
}

/* Estilos para los paneles que forman la página de contacto */

.single-contact-card {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(33% - 10px);
    box-sizing: border-box;
    background-color: var(--modalwin-back);
    color: var(--normal-text-color);
    box-shadow: 0px 0px 3px 2px var(--single-product-card-border);
    padding: 1em;
    border-radius: 8px;
    z-index: 0;
}

@media (min-width: 800px) and (max-width: 1199px) {
.single-contact-card {
    flex-basis: calc(50% - 10px);
}
}

@media (max-width: 799px) {
.single-contact-card {
    flex-basis: calc(100%);
}
}


/* Clase para íconos de barra de herramientas en ModalWin */
/* Aunque en la tienda no hay barras de herramientas, la clase */
/* Sirve para algunos botones como el de cerrar sesión */
.modalwinactionbutton {
height: 32px;
width: auto;
cursor: pointer;
filter: invert(var(--modalwin-icons-bright));
}



/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/*   ESTILOS PARA REPRODUCTOR DE RADIO ON LINE   */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

.player_button{
    height: 48px;
    width: auto;
}

.on-air{
    color: red;
    text-shadow: 0 0 8px #ffaaaa;
}

.off-air{
    color: #505050;
}


.song-title {
    color: white;
    font-size: 1.5em;
}

.artist-name {
    color: cadetblue;
    font-size: 1.1em;
    font-variant: small-caps;
}


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/*   ESTILOS PARA DIV "contenido_articulo" BLOG   */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

.contart * {
    font-family: 'Inter', Helvetica, Arial, sans-serif;    }

.contart {
    margin: 48px auto;
    width: 60%;
    font-size: 14px; /* Rango útil: 10px - 40px */
    box-shadow: -10px 0px 10px -2px rgba(0, 0, 0, 0.5), 
                 2px 0px 5px -1px rgba(0, 0, 0, 0.3);
    padding: .5em 3em;
    background-color: rgba(0,0,0,0.40);
    line-height: 1.6;
    }



@media (max-width: 800px) {
    .contart {
        width: calc(100% - 24px);
        padding: 1em 1em;
        box-shadow: -10px 0px 10px -2px rgba(0, 0, 0, 0.3), 
                 2px 0px 5px -1px rgba(0, 0, 0, 0.1);
    }
}

@media (min-width: 801px) and (max-width: 1280px) {
    .contart {
        width: 80%;
    }
}

.h1doctitle {
    margin: auto;
    font-family: 'InterTitulos';
    font-size: 3em;
    width: 60%;
}

.h2doctitle {
    margin: 24px auto;
    font-family: 'InterTitulos';
    font-size: 1.25em;
    width: 60%;
}


@media (max-width: 800px) {
    .h1doctitle {
        width: calc(100% - 24px);
    }

    .h2doctitle {
        width: calc(100% - 24px);
    }
}

@media (min-width: 801px) and (max-width: 1280px) {
    .h1doctitle {
        width: 80%;
    }

    .h2doctitle {
        width: 80%;
    }
}







.contart h1, .contart h2, .contart h3, .contart h4, .contart h5, .contart h6 {
    font-family: 'InterTitulos';
    line-height: 1.2;
    margin-top: 2.5em;
    margin-bottom: 1em;
}

.contart p, .contart li, .contart dd, .contart dt  {
    line-height: 1.5em;
    text-align: justify;
}

.contart p {
    text-indent: 2ch;
}

.contart dt {
    font-weight: bold;
}

.contart dd {
    margin-bottom: 1em;
}

.contart blockquote a {
    color: teal;
}

.contart blockquote {
    background-color: var(--blockquote-back);
    padding: .25em 1em .25em 1em;
    color: var(--blockquote-text);
    /*font-size: 1.1em;*/
    border-radius: .25em;
    box-shadow: 0px 0px 3px 2px var(--blockquote-border);
    text-align: left;
}


.contart table {
    background-color: var(--table-back);
    border-collapse: collapse;
}


@media (max-width: 500px) {

.contart blockquote {
margin: 0px 5%;
}

.contart table {
    display: block;       /* Convierte la tabla en un bloque */
    width: 100%;          /* Asegura que no se pase del ancho del padre */
    overflow-x: auto;     /* Activa el scroll horizontal */
    white-space: nowrap;  /* Evita que el texto se amontone en las celdas */
}

}


.contart thead {
    background-color: var(--table-header-back);
    font-weight: bold;
}

.contart th {
    padding: .5em;
    border-bottom: 2px solid white;
}

.contart td {
    padding: .5em;
    border-bottom: 2px solid white;
}

.contart code, .contart pre {
    font-family: 
    ui-monospace,             /* Safari en macOS/iOS */
    SFMono-Regular,           /* macOS (San Francisco Mono) */
    Menlo,                    /* macOS antiguo */
    Monaco,                   /* macOS muy antiguo */
    "Cascadia Mono",          /* Windows (Terminal moderna) */
    "Segoe UI Mono",          /* Windows (Propuesta futura) */
    "Roboto Mono",            /* Android / ChromeOS */
    "Source Code Pro",        /* Linux (Adobe) */
    "Liberation Mono",        /* Linux (Alternativa a Courier) */
    "Courier New",            /* Windows antiguo / Fallback universal */
    monospace;                /* Genérico (siempre al final) */
}

.contart pre, .contart pre code {
    background-color: var(--aqua-darker);
}

.contart pre {
    padding: 1em;
    border-radius: .5em;

    overflow-x: auto; /* Muestra scroll horizontal solo si el texto es muy ancho */
    white-space: pre; /* Mantiene los espacios y saltos de línea originales */
    word-wrap: normal;

}

.contart code {
    padding: 0 .5em 0 .5em;
    background-color: var(--aqua-darker);
    color: Silver;
    border-radius: .05em;
}

.contart img {
    display: block;
    max-height: 120vh;
    width: auto;
    max-width: 90%;
    margin: auto;
 }


/* Cualquier destino de enlace en .contart se posiciona en los 220px, */
/* para que no quede tapado por encabezado de página */
.contart :target {
    scroll-margin-top: 220px;
}

.table-of-contents a {
    color: Silver;
    font-size: 0.95em;
    display: block;   /* O inline-block */
    text-align: left; /* Ahora sí responderán */
    width: fit-content; /* Para que el área clickable no sea infinita */
}

.table-of-contents {
    background-color: rgba(0,0,0,0.4);
    padding: .5em 1em;
    text-align: left;
    margin-bottom: 64px;
    border-radius: .5em;
}