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

:root{/*VARIABLES*/
    /* Colores Primarios y Secundarios */
    --color-primary: #d32f2f; 
    --color-primary-dark: #b71c1c; 
    --color-secondary: #388e3c; 
    --color-accent: #5c5c5c;

    /*Color de sombras*/
    --color-shadown: rgba(0, 0, 0, 0.2);
    --color-shadown-max: rgba(0, 0, 0, 0.5);

    /* 🎨 Colores de Fondo Degradado*/
    --color-bcklight: #E4F8F9;
    --color-bcknormal: #C0F2EA;
    --color-bckdark: #91bac0;

    /* 🎨 Colores de Fondo y Texto */
    --color-background: #f5f7f9;
    --color-text: #3c3d3e;
    --color-border: #ddd;

    /* 🎨 Colores base */
    --color-white: #ffffff;
    --color-black: #000000;
    /* 🎨 Colores Fijos (No Cambian en Modo Oscuro) */
    --color-static-white: #ffffff;
    --color-static-black: #000000;

    /* 🎨 Colores de Estado */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-error: #dc3545;

    /* 🎨 Escala de Grises con Transparencias */
    --gray-light: rgba(255, 255, 255, 0.2); /* Equivalente a gris claro */
    --gray-medium: rgba(0, 0, 0, 0.3); /* Equivalente a gris medio */
    --gray-dark: rgba(0, 0, 0, 0.6); /* Equivalente a gris oscuro */

    /* 🎨 Colores de Redes Sociales */
    --facebook: #1877f2;
    --messenger: #0084ff;
    --whatsapp: #25d366;
    --instagram: #e4405f;
    --youtube: #ff0000;
    --tiktok: #000000;
    --x: #000000; /*twitter*/
    --linkedin: #0077b5;
    --pinterest: #e60023;
    --snapchat: #fffc00;
    --telegram: #0088cc;
    --reddit: #ff4500;
    --discord: #5865f2;
    --twitch: #9146ff;
    --github: #181717;
    --dribbble: #ea4c89;
    --behance: #1769ff;
    }

._facebook  { background-color: var(--facebook);}
._messenger { background-color: var(--messenger);}
._whatsapp  { background-color: var(--whatsapp);}
._instagram { background-color: var(--instagram);}
._youtube   { background-color: var(--youtube);}
._tiktok    { background-color: var(--tiktok);}
._x         { background-color: var(--x);}
._linkedin  { background-color: var(--linkedin);}
._pinterest { background-color: var(--pinterest);}
._snapchat  { background-color: var(--snapchat);}
._telegram  { background-color: var(--telegram);}
._reddit    { background-color: var(--reddit);}
._discord   { background-color: var(--discord);}
._twitch    { background-color: var(--twitch);}
._github    { background-color: var(--github);}
._dribbble  { background-color: var(--dribbble);}
._behance   { background-color: var(--behance);}

.dark-mode { /* 🌙 Modo Oscuro */
    --color-background: #212529;
    --color-text: #dee2e6;
    /* Escala de grises ajustada en modo oscuro */
    --gray-light: rgba(255, 255, 255, 0.3);
    --gray-medium: rgba(255, 255, 255, 0.5);
    --gray-dark: rgba(255, 255, 255, 0.7);
    }

/* 3.33333333vw, 1.33vw y 0.83333333vw*/
body {font-family:regular; font-size:0.95em; color: var(--color-text); background: var(--color-background);}

/*PARA ESTRUTUCTURA GENERAL - TITULOS*/
h1, h2, h3, h4{font-weight: normal; line-height: 1.2; color: inherit;}
    h1{ font-size: 2.48713em; font-family: bold;}
    h2{ font-size: 2.48713em; font-family: regular; }
    h3{ font-size: 1.53713em; font-family: bold; } 

    @media (max-width: 767px) { /* Teléfonos */
        h1 { font-size: 2.0em; }
        h2 { font-size: 1.5em; }
        h3 { font-size: 1.0em; }
        }

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

em{ line-height: 1; color: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: var(--color-primary); color:var(--color-white); font-family: bold; padding: 2px 7px;} /*Define texto resaltado o marcado*/
/*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*/

/* FUENTE TIPOGRÁFICA DE LA WEBPAGE /////////////////////////////////////////////////////////////////////// ../font/ */
  @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;}

/*Iconos desarrollados por icon.softsites*/
@font-face { font-family: 'softicon';
    src: url('../sfont/softsitesfont_iconsb.woff2') format('woff2'),
         url('../sfont/softsitesfont_iconsb.woff') format('woff');
    font-weight: normal;
    font-style: normal;}


/* EXTRUCTURA GENERALES BASE /////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Clase para cambiar la fuente por iconos, y puedan ocparse como logos o iconos en diferentes lugares*/
.classIcon{display:flex; align-items:center; justify-content:center; font-family:softicon;}

/* Sección que se ecarga de poner el 100x100 de la pagina*/
.section_all { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; position: relative;}

/* Contenedor base para secciones. Define el ancho estándar (74%) y centra el contenido. 
Se usa como base para cualquier sección que necesite una estructura uniforme en la página. */
.section_container { width: 100%; padding: 5% 13% 0 13%; }

.section_subcontainer { width: 100%; margin: 0 auto; padding: 3% 3% 0% 3%;}

/* Agrega un margen superior del 7%. Útil para separar secciones sin afectar el ancho o el padding. */
.section_margin_top { margin-top: 7%; }

/* Usa el 100% del ancho disponible, eliminando márgenes laterales. 
Ideal para secciones que deben ocupar todo el espacio disponible, como banners o encabezados. */
.section_full_width { width: 100%; margin: 0; padding: 3% 5% 0 5%; }

/* Aplica márgenes laterales del 13%, sin afectar la parte superior e inferior. 
Útil para centrar contenido sin modificar el espacio entre secciones. */
.section_side_margin { margin: 0 13%; }

/* Aplica un padding interno del 3% en la parte superior y 13% en los lados.
Se usa para separar el contenido interno del borde del contenedor. */
.section_padding { padding: 3% 13% 0 13%; }

/* Combina margen superior (7%) con padding lateral (13%). 
Útil para secciones que requieren espacio alrededor pero mantienen un ancho definido. */
.section_margin_padding { margin-top: 7%; padding: 5% 13% 0 13%; }

/* Adaptación para pantallas medianas (tablets y laptops pequeñas).
Reduce el ancho y ajusta los márgenes para mejorar la legibilidad en dispositivos más pequeños. */
@media (max-width: 1024px) {
    /*.section_container { width: 100%; padding: 5% 5% 0 5%; }*/
    .section_side_margin { margin: 0 8%; }
    .section_padding { padding: 5% 8% 0 8%; }
    .section_margin_padding { padding: 6% 8% 0 8%; }
}

/* Adaptación para pantallas pequeñas (móviles). 
Maximiza el ancho y reduce los márgenes laterales para aprovechar mejor el espacio en pantallas estrechas. */
@media (max-width: 768px) {
    /*.section_container { width: 100%; padding: 6% 5% 0 5%; }*/
    .section_side_margin { margin: 0 5%; }
    .section_padding { padding: 6% 5% 0 5%; }
    .section_margin_padding { padding: 7% 5% 0 5%; }
}
/*
.sectionPadding{ padding:3% 13% 0% 13%; width: 74%;}
.sectionMargin{ margin: 7% 13% 0% 13%; }
.sectionMarginSimple{ margin: 7% 0% 0% 0%; }
.sectionMarginInvested{ margin: 0% 13% 0% 13%; width: 74%;}
.sectionMarginPadding{ margin: 7% 0% 0% 0%; padding: 5% 13% 0% 13%; }
*/
.backcolor_gradient{ background: radial-gradient(circle at top right, var(--color-bcklight), var(--color-bcknormal), var(--color-bckdark)); }
.backcolor_main{ background: radial-gradient(circle at top right, var(--color-primary), var(--color-primary-dark)); }

.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;}

.border_radius{border-radius: 7px;}
.border_radius_min{border-radius: 7px;}

.borderShadown{ box-shadow: 0px 0px 20px 5px var(--color-shadown);}
.borderShadownMax{ box-shadow: 0px 0px 15px 0px var(--color-shadown-max);}

.padding_botton{padding-bottom: 40px;}
.opacity_normal{ opacity: 0.5;}
.opacity_min{ opacity: 0.8;}


input { width: 100%; padding: 11px; border: 1px solid var(--color-border); border-radius: 7px; margin-bottom: 15px; font-size: 1em; transition:0.2s Ease-in-out;}
button { width: 100%; padding: 12px; background:var(--color-primary); color: var(--color-white); border: none; border-radius: 7px; font-size: 1em; cursor: pointer; transition:0.2s Ease-in-out;}
button:hover { background:var(--color-primary-dark); }


/* 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) */ }


























/* BORRAR  /////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*FORMULARIOS*/
/*._form{display: block; width: 100%; margin-bottom:5%;}
    ._text { width: 100%; padding: 12px; border: 1px solid var(--color-gray-300); border-radius: 4px; box-sizing: border-box; margin-bottom: 10px; font-family:regular; font-size:1em;}
    ._submit {background-color: var(--color-prim); color: white; padding: 12px 30px; border-radius: 4px; cursor: pointer; font-family:regular; font-size: 1em; transition: 0.3s; margin-bottom:10px;}
    ._submit:hover{background-color: var(--color-prim-dark)}

        ._all{width: 100%;}

    ._textF{ width: 100%; padding: 5px; border: 1px solid #ccc; border-radius:4px; box-sizing: border-box; margin-bottom: 5px; font-size:0.9em;}

para los checkbox
.CBoxs{ display: inline-block; margin: 55px 0px 22px 0px;} 
    .CBoxLbl{ display: inline-block; font-size: 1.2em; color: #00AFEF; margin-left: 7px;} 
/*OBJETOS DE FORMULARIO DE LA CONFIGURACION /////////////
.conftextbox{background:var(--color-white); padding:5px 5%; font-family:regular; font-size:1em; color:#212121; resize:none; border: 1px solid #ddd; width: 90%; } */

._form-container {
    display: block;
    width: 100%;
    max-width: 600px; /* Controla el ancho en pantallas grandes */
    margin-bottom: 5%;
}

/* 🔤 Campos de Entrada (input, textarea, select) */
._form-input, ._form-textarea, ._form-select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--gray-light);
    border-radius: 6px;
    box-sizing: border-box;
    font-family: var(--font-primary, 'Montserrat'), sans-serif;
    font-size: 1em;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* 🔎 Efecto al enfocarse */
._form-input:focus, ._form-textarea:focus, ._form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 5px rgba(24, 88, 238, 0.3); outline: none }

/* 🎭 Área de Texto */
._form-textarea { resize: vertical; min-height: 120px; max-height: 300px }

/* 🔘 Botón de Envío */
._form-button { background-color: var(--color-primary); color: var(--color-static-white); padding: 12px 30px; border-radius: 6px; cursor: pointer; font-family: regular; font-size: 1em; border: none; transition: 0.3s; display: inline-block; text-align: center }
._form-button:hover { background-color: var(--color-prim-dark); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) }

/* 🎯 Checkbox */
._form-checkbox-container { display: flex; align-items: center; gap: 10px; /* Espacio entre checkbox y label */ margin: 10px 0 }

._form-checkbox { width: 18px; height: 18px; accent-color: var(--color-primary); }

/* 🏷️ Label de Checkbox */
._form-label { font-size: 1em; color: var(--color-primary) }

/* 📏 Estructura general de los elementos */
._form-field { margin-bottom: 16px }

/* 📄 Mensajes de Validación */
._form-error { color: var(--color-error); font-size: 0.9em; margin-top: 5px; display: none }
._form-success { color: var(--color-success); font-size: 0.9em; margin-top: 5px; display: none }

/*ESTRUCTURA DE LAS TABLAS /////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.table {
    width: 100%;
    max-width: 100%;
    background-color: var(--color-white);
    color: var(--gray-800);
    border-spacing: 0;
    border-collapse: separate;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

/* 🔠 Encabezados */
.table-header { background-color: var(--color-primary); color: var(--color-static-white); padding: 12px; text-align: left; font-weight: bold; text-transform: uppercase }

/* 📋 Celdas */
.table-cell { padding: 10px; border-bottom: 1px solid var(--gray-light) }

/* 🔄 Filas alternas */
.table-row:nth-child(even) { background-color: var(--gray-light) }

/* 🎯 Efecto Hover con Animación */
.table-row:hover { background-color: var(--color-primary-dark); color: var(--color-static-white); transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out; transform: scale(1.02) }

/* 📐 Centrar contenido */
.text-center { text-align: center }

/* 📏 Ocultar columnas específicas (para columnas opcionales) */
.hide-col { display: none; }

/* 📱 Estilo Responsivo */
@media (max-width: 767px) {
    .table { display: block; width: 100%; overflow-x: auto; }
    }