No database selected
SELECT * FROM hv_config ORDER BY id asc LIMIT 0,200
No database selected
SELECT * FROM hv_config WHERE name = 'pais_parametrizacion'
No database selected
SELECT * FROM hv_config WHERE name = 'pais_parametrizacion'
No database selected
SELECT * FROM hv_config WHERE name = 'pais_parametrizacion'
No database selected
SELECT * FROM hv_config WHERE name = 'pais_parametrizacion'
No database selected
SELECT * FROM hv_config WHERE name = 'eval_langs_adicionales'
No database selected
SELECT value FROM hv_config WHERE name = 'locale'
No database selected
SELECT name FROM hv_config WHERE name = 'locale'
No database selected
SELECT * FROM hv_config WHERE name = 'formateo_decimales'
No database selected
SELECT * FROM hv_config WHERE name = 'pais_parametrizacion'
No database selected
SELECT * FROM hv_config WHERE name = 'eval_styles'
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
/* === Fuerza la fuente Inter en TODO el sistema === */
/* Vence:
- estilos por default del browser
- (atributo HTML legacy)
- style="font-family:..." inline (sin !important)
- inputs/selects/textareas que no heredan font-family por default
Si algun inline tiene !important explicito, ese gana — son casos raros */
*,
*::before,
*::after,
font,
font[face],
input,
select,
textarea,
button,
optgroup,
option,
[style*="font-family"] {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, Tahoma, Arial, sans-serif !important;
}
/* COMODIN */
*{
font-size: 12px ;
color: #415D6D; /// prueba
}
body, html, td, span, div {
font-family: 'Inter', sans-serif;
font-size:11px;
}
html, body {
height: 100%;
margin: 0px;
width:100%;
}
body{
height: 100%;
width:100%;
font-size: 12px ;
line-height: 1.5;
font-weight: 400;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin: 0px;
scrollbar-arrow-color: #077598;
scrollbar-shadow-color: white;
scrollbar-base-color: #077598;
scrollbar-track-color: #F0F0F0;
scrollbar-face-color: #BED2EA;
scrollbar-highlight-color: white;
scrollbar-dark-shadow-color:#D8D9DE;
scrollbar-3d-light-color:#D8D9DE;
}
a:link:after, a:visited:after {
content: normal;
}
html, body, td, div, span
{
font-family:'Inter';
}
.bg {
width: 170px;
height: 20px;
background-image: url(https://alumnos.doinglobal.com/server20200601/theme/standard/images/butt_blank.jpg);
}
a
{
color: #000000;
font-size: 12px ;
text-decoration:none;
}
a:link,
a:visited,
a:active{
background: transparent;
color: #000000;
text-decoration: none;
}
a:hover{
background: transparent;
color: #666666;
text-decoration: underline;
}
p,h1,h2,h3,h4,h5,h6 {
text-decoration:none;
padding:0; margin:0;
font-size: 12px;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
color: #1f2937;
letter-spacing: -0.01em;
line-height: 1.3;
}
hr {
border: 1px dashed #cccccc;
}
table{
font-size: 12px ;
font-weight: 400;
color: #00000;
line-height: 1.5;
}
td
{
padding:1px;
padding-left:3px;
padding-right:3px;
font-size: 12px ;
}
tr
{
min-height:35px;
}
input[type="button"]
{
color: #fff;
background-color: #2d5a3d;
background-image: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.04));
border: 1px solid transparent;
display: inline-block;
padding: 8px 16px;
margin-bottom: 0;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.2px;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
user-select: none;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(16,24,40,0.08), 0 1px 1px rgba(16,24,40,0.04);
transition: filter .15s ease, box-shadow .15s ease, transform .05s ease;
margin-left:5px;
margin-bottom:5px;
margin-top:5px;
}
input[type="button"]:hover
{
filter: brightness(1.08);
box-shadow: 0 4px 10px rgba(45,90,61,0.25), 0 2px 4px rgba(16,24,40,0.06);
text-decoration: none;
}
input[type="button"]:active
{
transform: translateY(1px);
filter: brightness(0.94);
box-shadow: 0 1px 1px rgba(16,24,40,0.08);
}
input[type="button"]:focus-visible
{
outline: none;
box-shadow: 0 0 0 3px rgba(45,90,61,0.30);
}
input[type="button"]:disabled
{
filter: grayscale(0.4) brightness(1.05);
cursor: not-allowed;
box-shadow: none;
}
input[type="submit"]
{
color: #fff;
background-color: #2d5a3d;
background-image: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.04));
border: 1px solid transparent;
display: inline-block;
padding: 8px 16px;
margin-bottom: 0;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.2px;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
user-select: none;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(16,24,40,0.08), 0 1px 1px rgba(16,24,40,0.04);
transition: filter .15s ease, box-shadow .15s ease, transform .05s ease;
}
input[type="submit"]:hover
{
filter: brightness(1.08);
box-shadow: 0 4px 10px rgba(45,90,61,0.25), 0 2px 4px rgba(16,24,40,0.06);
text-decoration: none;
}
input[type="submit"]:active
{
transform: translateY(1px);
filter: brightness(0.94);
box-shadow: 0 1px 1px rgba(16,24,40,0.08);
}
input[type="submit"]:focus-visible
{
outline: none;
box-shadow: 0 0 0 3px rgba(45,90,61,0.30);
}
input[type="submit"]:disabled
{
filter: grayscale(0.4) brightness(1.05);
cursor: not-allowed;
box-shadow: none;
}
input[type="text"]
{
font-size: 12px ;
/* width: 70%; */
height: 34px;
padding: 6px 12px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
input[type="number"]
{
font-size: 12px ;
/* width: 70%; */
height: 34px;
padding: 6px 12px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
input[type="password"]
{
font-size: 12px ;
/* width: 70%; */
height: 34px;
padding: 6px 12px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
input[type="file"]
{
font-size: 12px ;
/* width: 70%; */
height: 34px;
padding: 6px 12px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
textarea
{
font-size: 12px ;
/* width: 70%; */
padding: 6px 12px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
height:80px;
}
select[multiple]{
font-size: 12px ;
/* width: 70%; */
padding: 6px 12px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
height:300px;
}
select{
font-size: 12px ;
/* width: 70%; */
min-width:90px !important;
height: 34px;
padding: 6px 12px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="file"]:focus,
textarea:focus,
select:focus,
select[multiple]:focus
{
outline: none;
border-color: #2d5a3d;
box-shadow: 0 0 0 3px rgba(45,90,61,0.18);
}
input[type="checkbox"]
{
padding:0px;
border: 0px #D8D9DE solid;
line-height: 15px;
}
input[type="radio"]
{
padding:0px;
border: 0px #D8D9DE solid;;
}
/*
* ========================================
* global hyperlink styles
* ========================================
*/
a:link,
a:visited,
a:active{
background: transparent;
/* color: #9C3400; ELIMINAR ESTO PARA DAR ESTILI DE L I N K A TODOS */
text-decoration: none;
}
a:hover{
background: transparent;
color: #FF5A07;
text-decoration: underline;
}
/*
* ========================================
* menues y otros varios
* ========================================
*/
.nav_menu{
color: #003162;
font: bold 12px;
}
a.nav_menu:link, a.nav_menu:visited, a.nav_menu:active{text-decoration: none;}
.menu_blanco{
color: #FFFFFF;
font: bold 12px;
}
a.menu_blanco:link, a.menu_blanco:visited, a.menu_blanco:active{text-decoration: none;}
a.menu_blanco:hover{ color: #FFFFFF;}
.nav_menu2{
color: #cc9933;
font: bold 12px;
}
a.nav_menu2:link, a.nav_menu2:visited, a.nav_menu2:active{text-decoration: none;}
a.nav_menu2:hover{ color: #FFFFFF;}
/*CLASES PARA CAMBIAR LETRAS*/
.font_letras{
font: bold 12px;
color: #003162;}
.letras_verdes{
font: bold 12px;
color: #669933;}
.letras_azules{
font: bold 12px;
color: #000099;}
.letras_rojas{
font: bold 15px;
color: #FF0000;}
/*
* ========================================
* OTROS TEXTOS USADOS
* ========================================
*/
.tit_fo1{ font-weight: bold;}
.texto_normal{color:#003162;font-size: 12px ;}
.texto_menu{color:#003162;font-size:12px ;}
.texto_secundario{color:#999999;font-size:12px ;}
.letras_rojas{
color:#CC0033;
font-size:12px ;
}
.texto_linkmenu{color:#003162; font-size:12px ; text-decoration: none}
.tabla_menu2 { }
.Tit_global{ font: bold 14px; text-transform: uppercase; color: #003162;}
.minitext{color:#666666;font-size:8; }
.reportetext{color:black;font-size:9; }
/*
* ========================================
* BOTONES
* ========================================
*/
/* Botones legacy .btn1 / .btn2 modernizados.
Mantengo los selectores _izq/_der (son de 3px) pero les saco el sprite */
.btn1, .btn2 {
cursor: pointer;
height: auto;
background: transparent !important;
}
input.btn1, button.btn1,
input.btn2, button.btn2 {
border: 1px solid #d1d5db;
background: #ffffff !important;
color: #4b5563;
font-weight: 500;
font-size: 11px;
text-align: center;
padding: 6px 14px;
border-radius: 8px;
letter-spacing: 0.2px;
box-shadow: 0 1px 2px rgba(16,24,40,0.04);
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease, color .15s ease;
}
input.btn1:hover, button.btn1:hover,
input.btn2:hover, button.btn2:hover {
background: #f9fafb !important;
border-color: #9ca3af;
color: #1f2937;
box-shadow: 0 4px 10px rgba(16,24,40,0.08);
transform: translateY(-1px);
}
input.btn1:active, button.btn1:active,
input.btn2:active, button.btn2:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.btn1_izq, .btn1_der,
.btn2_izq, .btn2_der {
cursor: pointer;
width: 3px;
background: transparent !important;
}
/**/
.spc_1{
width: 10px;
}
/*
* ========================================
* TABLAS Y BORDES
* ========================================
*/
table.ipbtable,
tr.ipbtable,
td.ipbtable
{ /* required for text in tables, because tables do not inherit from body */
background: transparent;
color: #222;
font-size: 12px;
line-height: 135%;
}
.gridbackground1{
height: 25px;
padding: 0px 0px 0px 0px;
background: #ffffff;
}
.gridbackground2{
-height: 25px;
padding: 0px 0px 0px 0px;
background: #FBFBFB;}
.gridbackground3{
height: 25px;
padding: 0px 0px 0px 0px;
background:#EEE ;
}
.gridbackground-1{
min-height: 20px;
padding: 0px 3px 0px 3px;
background:#F9F9F9;
}
.gridbackground-2{
min-height: 20px;
padding: 0px 3px 0px 3px;
background:#F3F3F3;
}
/*CABECERAS*/
/*formulario*/
.cabecera_general{
padding: 3px;
min-height: 23px;
font-weight: bold;
font-size: 12px;
color: #FFFFFF;
background: #E4E4E4;}
.cabecera_general-1{
padding: 3px;
min-height: 23px;
font-weight: bold;
font-size: 12px;
color: #FFFFFF;
background: #99CCCC;}
.cabecera_general-2{
padding: 3px;
min-height: 23px;
font-weight: bold;
font-size: 12px;
color: #FFFFFF;
background: #CCCCCC;}
/*
background: #ECD8B7 url(https://alumnos.doinglobal.com/server20200601/theme/standard/images/cab_bg.jpg) repeat-x top left;}
*/
/*grilla1*/
.cabecera_grilla{
padding: 3px;
height: 23px;
font-weight: bold;
font-size: 12px;
//color: #000000;
background:#FBFBFB ;
}
.fila_grilla{
border-bottom: solid 1px #F9F9F9;
height:25px;
}
.tablaborde {
/* background-color:#E4E4E4;
-moz-box-shadow: 2px 2px 5px 0px #e1e1e1;
-webkit-box-shadow: 2px 2px 5px 0px #e1e1e1; */
border-top: 4px solid #D7D7D7;
border-bottom: 2px solid #D7D7D7;
}
.tablaborde td
{
border-bottom: 1px solid #F9F9F9;
}
.tablaborde table td
{
border-bottom: 0px ;
}
.tablabordecontent{
height: 20px;
padding: 0px 3px 0px 3px;
background: #E7E7E7;}
.tablaborde1{
background-color: #669999;}
/*
* ========================================
* AJAX CLASES
* ========================================
*/
.ac_results li {
margin: 0px;
cursor: default;
display: block;
font: menu;
font-size: 12px;
overflow: hidden;
padding: 10px 5px;
border-bottom: 1px solid #e1e1e1;
}
.ac_over {
background-color: Highlight;
color: HighlightText;
}
.ac_input {
}
.ac_results {
background: #FBFBFB;
cursor: pointer;
position: absolute;
left: 0;
z-index: 101;
}
.ac_results ul {
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results iframe
{
display:none;/*sorry for IE5*/
display/**/:block;/*sorry for IE5*/
position:absolute;
top:0;
left:0;
z-index:-1;
filter:mask();
}
.ac_loading {
background:url(https://alumnos.doinglobal.com/server20200601/theme/loading.gif) right center no-repeat !important;
height: 50%;
background-size: cover;
}
.over {
background: yellow;
}
/*
* ========================================
*SOLAPAS
* ========================================
*/
/* Tabs modernas: inactiva en gris, activa en color marca con linea inferior gruesa.
Las celdas _izq/_der se neutralizan (eran sprites GIF de los 2000). */
.solapa, .solapaon {
cursor: pointer;
height: auto;
min-height: 38px;
padding: 10px 18px;
font-weight: 500;
font-size: 13px;
text-align: center;
background: transparent !important;
color: #6b7280;
border-bottom: 3px solid transparent;
letter-spacing: 0.2px;
transition: color .2s ease, border-color .2s ease, background-color .2s ease;
user-select: none;
}
.solapa:hover {
color: #1f2937;
background-color: #f9fafb !important;
}
.solapaon {
color: #2d5a3d !important;
border-bottom-color: #2d5a3d;
font-weight: 600;
background-color: rgba(45,90,61,0.06) !important;
}
input.solapa, button.solapa,
input.solapaon, button.solapaon {
cursor: pointer;
border: none;
padding: 0;
background: transparent;
color: inherit;
font-weight: inherit;
font-size: inherit;
letter-spacing: inherit;
}
/* Celdas laterales legacy: dejarlas transparentes, conservar 3px para no romper layout */
.solapa_izq, .solapa_der,
.solapaon_izq, .solapaon_der {
width: 3px;
height: auto;
background: transparent !important;
}
a.jms-link{
color: #fff;
text-transform: uppercase;
background: #1f3d28; /* Old browsers */
background: -moz-linear-gradient(top, #1f3d28 0%, #1f3d28 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#969696), color-stop(100%,#1f3d28)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1f3d28 0%,#1f3d28 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1f3d28 0%,#1f3d28 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1f3d28 0%,#1f3d28 100%); /* IE10+ */
background: linear-gradient(top, #1f3d28 0%,#1f3d28 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f3d28', endColorstr='#1f3d28',GradientType=0 ); /* IE6-9 */
padding: 6px 13px;
display: inline-block;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 4px;
opacity: 1;
clear: both;
-webkit-transition: all 0.4s ease-in-out 1s;
-moz-transition: all 0.4s ease-in-out 1s;
-ms-transition: all 0.4s ease-in-out 1s;
-o-transition: all 0.4s ease-in-out 1s;
transition: all 0.4s ease-in-out 1s;
}
a.jms-link2{
color: #fff;
text-transform: uppercase;
background: #A61100; /* Old browsers */
background: -moz-linear-gradient(top, #A61100 0%, #A61100 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#969696), color-stop(100%,#A61100)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #A61100 0%,#A61100 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #A61100 0%,#A61100 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #A61100 0%,#A61100 100%); /* IE10+ */
background: linear-gradient(top, #A61100 0%,#A61100 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A61100', endColorstr='#A61100',GradientType=0 ); /* IE6-9 */
padding: 6px 13px;
display: inline-block;
font-size: 14px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 4px;
opacity: 1;
clear: both;
-webkit-transition: all 0.4s ease-in-out 1s;
-moz-transition: all 0.4s ease-in-out 1s;
-ms-transition: all 0.4s ease-in-out 1s;
-o-transition: all 0.4s ease-in-out 1s;
transition: all 0.4s ease-in-out 1s;
}
/*
table table
{
display: table;
max-width:100% !important;
}
table table td
{
display: table-cell;
}
*/
.tabla_no_responsive
{
display: table;
white-space:normal;
border-collapse:separate;
}
.tabla_no_responsive td
{
display: table-cell;
white-space:normal;
border-collapse:separate;
}
#tabla_no_responsive
{
display: table;
white-space:normal;
border-collapse:separate;
}
#tabla_no_responsive td
{
display: table-cell;
white-space:normal;
border-collapse:separate;
}
#tablaresponsiva caption div {
font-size: 1.5em;
}
#tablecontenedor25 { width:30%; float:left }
#tablecontenedor30 { width:30%; float:left }
#tablecontenedor33 { width:33%; float:left }
#tablecontenedor40 { width:40%; float:left }
#tablecontenedor50 { width:50%; float:left }
#tablecontenedor60 { width:60%; float:left }
#tablecontenedor70 { width:70%; float:left }
/* === Cabecera moderna tipo banner con icono monograma === */
.gp-cabecera-banner
{
background: linear-gradient(135deg, #14301c 0%, #1f3d28 35%, #2d5a3d 70%, #4a7d57 100%);
border-radius: 20px;
padding: 30px 44px;
box-shadow: 0 12px 32px rgba(31,61,40,0.35), 0 4px 12px rgba(45,90,61,0.25);
display: flex;
align-items: center;
gap: 24px;
margin: 4px 8px 14px;
position: relative;
overflow: hidden;
}
/* Brillo decorativo radial arriba a la derecha */
.gp-cabecera-banner::after
{
content: "";
position: absolute;
top: -50%;
right: -20%;
width: 60%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 60%);
pointer-events: none;
}
/* Cuadrado de icono con SVG (mapeado por primera letra del titulo) */
.gp-cabecera-icon
{
width: 64px;
height: 64px;
flex-shrink: 0;
border-radius: 16px;
background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.25);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
box-shadow:
0 4px 14px rgba(0,0,0,0.15),
inset 0 1px 0 rgba(255,255,255,0.25),
inset 0 -1px 0 rgba(0,0,0,0.10);
position: relative;
z-index: 1;
user-select: none;
}
.gp-cabecera-icon svg
{
width: 32px;
height: 32px;
color: #ffffff !important;
fill: currentColor;
stroke: currentColor;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.20));
}
.gp-cabecera-icon svg * {
color: #ffffff !important;
}
.gp-cabecera-text
{
flex: 1;
min-width: 0;
position: relative;
z-index: 1;
}
#titulo_cabecera
{
font-family: 'Inter', sans-serif;
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
color: #ffffff !important;
line-height: 1.2;
display: block;
text-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
#titulo_cabecera_des
{
background: transparent;
font-size: 14px;
color: rgba(255,255,255,0.88);
font-weight: 400;
letter-spacing: 0;
padding: 0;
margin: 6px 0 0;
border-radius: 0;
box-shadow: none;
display: block;
}
/* === Tablas modernas: tipografía Inter, hover, headers en mayúscula gris === */
.cabecera_grilla
{
padding: 12px 16px !important;
height: auto;
min-height: 42px;
font-weight: 600 !important;
font-size: 11px !important;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #6b7280 !important;
background: #f9fafb !important;
border-bottom: 1px solid #e5e7eb;
}
.fila_grilla
{
border-bottom: 1px solid #f3f4f6;
height: auto;
min-height: 42px;
transition: background-color .15s ease;
}
.fila_grilla:hover,
.gridbackground1:hover,
.gridbackground2:hover,
.gridbackground3:hover,
.gridbackground-1:hover,
.gridbackground-2:hover
{
background-color: #eef5f0 !important;
}
.gridbackground1, .gridbackground2 {
transition: background-color .15s ease;
}
/* .tablaborde como card moderna */
.tablaborde
{
border-top: none;
border-bottom: none;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
overflow: hidden;
}
.tablaborde td
{
border-bottom: 1px solid #f3f4f6;
padding: 10px 14px;
}
/* Filtro plegable: link con icono lupa + panel oculto */
a[onclick*="divdatosfiltro"]
{
display: inline-flex !important;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #eef5f0 0%, #dcebe1 100%);
color: #1f3d28 !important;
padding: 7px 16px;
border-radius: 999px;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.2px;
border: 1px solid #c9ddd0;
box-shadow: 0 1px 2px rgba(31,61,40,0.06), inset 0 1px 0 rgba(255,255,255,0.45);
transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
a[onclick*="divdatosfiltro"]:hover
{
background: linear-gradient(135deg, #2d5a3d 0%, #4a7d57 100%);
color: #ffffff !important;
text-decoration: none;
transform: translateY(-1px);
border-color: #1f3d28;
box-shadow: 0 4px 12px rgba(45,90,61,0.30), 0 2px 4px rgba(31,61,40,0.18);
}
a[onclick*="divdatosfiltro"]:hover img
{
filter: brightness(0) invert(1);
opacity: 1 !important;
}
a[onclick*="divdatosfiltro"] img
{
width: 14px;
height: 14px;
vertical-align: middle;
opacity: 0.75;
transition: filter .2s ease, opacity .2s ease;
}
#divdatosfiltro
{
background: linear-gradient(180deg, #f5faf6 0%, #ecf3ee 100%) !important;
border: 1px solid #d6e4dc;
border-left: 3px solid #2d5a3d;
border-radius: 12px;
padding: 18px 20px !important;
margin-top: 14px !important;
box-shadow: 0 2px 6px rgba(31,61,40,0.06), inset 0 1px 0 rgba(255,255,255,0.55);
animation: filtroFadeIn .25s ease;
}
@keyframes filtroFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Contenido para las burbujas */
/* Contenedor principal de las burbujas */
#burbuja-wrapper {
display: flex; /* Los pongo uno al lado del otro */
flex-wrap: wrap; /* Las burbujas se muevan a la siguiente l�nea si no entran en una sola */
justify-content: center;
gap: 30px;
padding: 40px 20px;
align-items: flex-start;
}
/* Contenedor de la burbuja mas su estiqueta */
.widget-contenedor {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 380px ;
}
/* Burbuja: glassmorphism iOS-style sobre fondo wallpaper oscuro */
.burbuja {
background-color: rgba(255, 255, 255, 0.06);
background-image: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.45),
0 8px 16px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.10),
inset 0 -1px 0 rgba(0, 0, 0, 0.20);
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: min-content;
grid-auto-flow: dense;
gap: 15px;
padding: 20px 15px;
width: 100%;
min-width: 360px;
max-width: 420px;
min-height: 355px;
box-sizing: border-box;
align-content: start;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
/* Fix anti-ghosting durante scroll: fuerza capa de compositing GPU */
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
isolation: isolate;
}
.burbuja:hover {
border-color: rgba(255, 255, 255, 0.20);
box-shadow:
0 28px 64px rgba(0, 0, 0, 0.55),
0 12px 24px rgba(0, 0, 0, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}
.icono-burbuja {
width: 100 %;
aspect-ratio: 1 / 1;
background-color: rgba(240, 240, 240, 0.8);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
padding: 4px;
box-sizing: border-box;
overflow: hidden;
flex-shrink: 0;
}
/* Enlace del icono */
.icono-link {
text-decoration: none;
color: #333;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 8px;
position: relative;
height: 100%;
padding-bottom: 10px;
}
.icono-link:hover .icono-burbuja {
transform: scale(1.05);
background-color: rgba(255, 255, 255, 1);
text-decoration: none;
color: #FFFFFF;
}
/* Para sacar el subrayado rojo de los iconos con hover */
.icono-link:hover {
text-decoration: none !important;
}
.etiqueta {
color: white;
font-weight: 600;
font-size: 18px;
text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/* Ocultar los iconos extra */
.icono-link.hidden {
display: none;
}
/* === Botones "Mas" / "Menos": rediseño lineal glass === */
.icono-link.more-button,
.icono-link.less-button {
grid-column: span 3;
grid-row: span 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-decoration: none;
}
.icono-link.more-button .icono-burbuja,
.icono-link.less-button .icono-burbuja {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 18px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 !important;
box-sizing: border-box;
overflow: hidden;
position: relative;
background: rgba(255, 255, 255, 0.05) !important;
background-image: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 100%) !important;
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 4px 12px rgba(0,0,0,0.18),
inset 0 1px 0 rgba(255,255,255,0.10);
transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
/* Ocultar el PNG original adentro: lo reemplazamos por CSS */
.icono-link.more-button .icono-burbuja img,
.icono-link.less-button .icono-burbuja img {
display: none !important;
}
/* + dibujado con dos lineas (more-button) */
.icono-link.more-button .icono-burbuja::before,
.icono-link.more-button .icono-burbuja::after {
content: "";
position: absolute;
background: rgba(255, 255, 255, 0.88);
border-radius: 999px;
transition: background-color 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.icono-link.more-button .icono-burbuja::before {
top: 50%;
left: 28%;
width: 44%;
height: 2px;
transform: translateY(-50%);
}
.icono-link.more-button .icono-burbuja::after {
top: 28%;
left: 50%;
width: 2px;
height: 44%;
transform: translateX(-50%);
}
/* − dibujado con una linea (less-button) */
.icono-link.less-button .icono-burbuja::before {
content: "";
position: absolute;
top: 50%;
left: 28%;
width: 44%;
height: 2px;
background: rgba(255, 255, 255, 0.88);
border-radius: 999px;
transform: translateY(-50%);
transition: background-color 0.2s ease;
}
/* Hover: vidrio mas iluminado + lift sutil */
.icono-link.more-button:hover .icono-burbuja,
.icono-link.less-button:hover .icono-burbuja {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(255, 255, 255, 0.34);
transform: scale(1.05);
box-shadow:
0 8px 22px rgba(0,0,0,0.28),
inset 0 1px 0 rgba(255,255,255,0.20);
}
.icono-link.more-button:hover .icono-burbuja::before,
.icono-link.more-button:hover .icono-burbuja::after,
.icono-link.less-button:hover .icono-burbuja::before {
background: #ffffff;
}
.icono-link.more-button:active .icono-burbuja,
.icono-link.less-button:active .icono-burbuja {
transform: scale(0.98);
}
.icono-link.more-button .icono-texto-debajo,
.icono-link.less-button .icono-texto-debajo {
visibility: hidden;
height: 3.6em;
line-height: 1.2;
font-size: 10px;
margin: 0;
padding: 0 4px;
}
.icono-imagen {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
}
.icono-burbuja.con-imagen {
padding: 0;
background-color: transparent;
}
.icono-link:hover .icono-texto-debajo {
color: #FFFFFF;
text-decoration: none;
}
.icono-texto-debajo {
font-size: 11px;
color: #FFFFFF;
text-align: center;
font-weight: 400;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
line-height: 1.3;
margin-bottom: 2px;
margin: 0;
padding: 0 4px;
}
.icono-link-large {
grid-column: span 4;
grid-row: span 4;
}
.icono-link-small {
grid-column: span 3;
grid-row: span 3;
}
.icono-link-large .icono-texto-debajo {
width: 100%;
font-size: 12px;
height: 3.6em;
-webkit-line-clamp: 3;
}
.icono-link-small .icono-texto-debajo {
width: 100%;
font-size: 10px;
line-height: 1.2;
height: 3.6em;
-webkit-line-clamp: 3;
}
.icono-link-large .icono-texto {
font-size: 12px;
}
.icono-origen-burbuja {
display: none;
font-size: 9px;
color: rgba(255,255,255,0.55);
margin-top: 0px !important;
font-style: italic;
letter-spacing: 0.2px;
text-align: center;
width: 100%;
}
#widget-favoritos .icono-origen-burbuja,
#widget-frecuentes .icono-origen-burbuja {
display: block !important;
}
#widget-frecuentes .icono-link,
#widget-favoritos .icono-link {
padding-bottom: 2px !important;
gap: 4px !important;
}
#widget-frecuentes .icono-texto-debajo,
#widget-favoritos .icono-texto-debajo {
margin-bottom: 0px !important;
line-height: 1.1 !important;
}
#widget-frecuentes .icono-link-large .icono-texto-debajo,
#widget-favoritos .icono-link-large .icono-texto-debajo {
height: 3.6em;
-webkit-line-clamp: 3;
}
#widget-frecuentes .icono-link-small .icono-texto-debajo,
#widget-favoritos .icono-link-small .icono-texto-debajo {
height: 2.2em !important; /* Altura fija para 2 l�neas */
max-height: 2.2em !important;
line-height: 1.1 !important;
margin-top: 2px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !vertical;
overflow: hidden !important;
}
/* Contenido para el modo de selecci�n */
/* Buscador como bloque normal en el flujo de la página (NO sticky, NO fixed).
Antes era position:sticky y quedaba "volando" en resoluciones intermedias */
#selection-bar-wrapper {
background-color: #1c1c1e;
padding: 10px 20px;
border-bottom: 1px solid #333;
}
/* Layout responsive en mobile/tablet (<=800px): apilar buscador + botones */
@media screen and (max-width: 800px) {
#selection-bar-wrapper {
padding: 8px 12px;
}
#selection-bar {
flex-wrap: wrap;
gap: 8px;
}
#search-bar-container {
width: 100%;
order: 1;
}
#module-search-input {
width: 100%;
}
#right-buttons-container {
order: 2;
width: 100%;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
#select-mode-button,
#back-to-netflix {
white-space: nowrap;
flex-shrink: 0;
font-size: 13px;
padding: 7px 12px;
}
}
#selection-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
#selection-buttons {
display: flex;
align-items: center;
gap: 10px;
}
#right-buttons-container {
display: flex;
align-items: center;
gap: 15px;
margin-left: auto;
}
/* Boton para volver a la anterior interfaz */
#back-button-container {
display: flex;
align-items: center;
}
#back-to-netflix {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
#back-to-netflix:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
transform: translateX(-2px);
}
/* Estilos para el input de b�squeda */
#module-search-input {
background-color: #3a3a3c;
color: white;
border: 1px solid #555;
border-radius: 8px;
padding: 8px 12px;
font-size: 14px;
width: 250px;
outline: none;
}
#module-search-input::placeholder {
color: #999;
}
body.search-is-active .icono-link.hidden {
display: flex;
}
body.search-is-active .icono-link.oculto-por-busqueda {
display: none !important;
}
body.search-is-active .etiqueta,
body.search-is-active .more-button {
display: none !important;
}
body.search-is-active .icono-origen-burbuja {
display: block;
}
body.search-is-active #burbuja-wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-auto-flow: row dense;
gap: 18px;
align-items: start;
}
body.search-is-active .widget-contenedor {
display: contents;
width: auto;
gap: 0;
}
body.search-is-active .burbuja {
display: contents;
}
body.search-is-active .widget-contenedor.oculto-por-busqueda {
display: none;
}
body.search-is-active .icono-link-large,
body.search-is-active .icono-link-small {
grid-column: span 1 !important;
grid-row: span 1 !important;
}
body.search-is-active .icono-texto-debajo {
display: inline !important;
width: auto !important;
height: auto !important;
line-height: 1.1 !important;
margin: 0 !important;
padding: 0 !important;
-webkit-line-clamp: unset !important;
}
body.search-is-active .icono-origen-burbuja {
display: inline !important;
width: auto !important;
margin-left: 5px !important;
font-size: 9px;
color: #999;
vertical-align: middle;
}
/* Estilos de los botones y dropdown */
#select-mode-button,
#apply-action-button {
background: linear-gradient(135deg, #2d5a3d 0%, #1a3d28 100%);
color: #fff;
border: 1px solid rgba(255,255,255,0.10);
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.2px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(45,90,61,0.40), 0 1px 3px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.18);
transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
#select-mode-button:hover,
#apply-action-button:hover {
transform: translateY(-1px);
filter: brightness(1.10);
box-shadow: 0 8px 22px rgba(45,90,61,0.55), 0 2px 6px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.22);
}
#select-mode-button:active,
#apply-action-button:active {
transform: translateY(0);
filter: brightness(0.95);
}
#actions-dropdown {
font-size: 14px;
padding: 8px;
border-radius: 8px;
border: 1px solid #555;
background-color: #333;
color: white;
}
/* El checkbox sobre el icono */
.icon-checkbox-wrapper {
position: absolute;
top: 6px;
right: 6px;
z-index: 5;
/* Oculto por defecto */
display: none;
transform: scale(0.5);
opacity: 0;
transition: all 0.2s ease;
}
.icon-checkbox {
width: 20px;
height: 20px;
cursor: pointer;
}
/* Cuando el modo selecci�n est� activo */
body.selection-mode-active .icon-checkbox-wrapper {
display: block;
transform: scale(1);
opacity: 1;
}
/* Deshabilita el popup cuando estamos en modo selecci�n */
body.selection-mode-active .icono-link {
pointer-events: none; /* Bloquea el 'onclick' de abrir el popup */
}
body.selection-mode-active .icon-checkbox {
pointer-events: all;
}
@media screen and (max-width: 580px) {
.gp-cabecera-banner
{
padding: 18px 20px;
border-radius: 16px;
gap: 14px;
}
.gp-cabecera-icon
{
width: 48px;
height: 48px;
border-radius: 12px;
}
.gp-cabecera-icon svg
{
width: 24px;
height: 24px;
}
#titulo_cabecera
{
font-size: 20px;
color: #ffffff !important;
}
#titulo_cabecera_des
{
background: transparent;
font-size: 11px;
color: rgba(255,255,255,0.85);
font-weight: 400;
padding: 4px 0 0;
margin: 4px 0 0;
}
#tablecontenedor25,#tablecontenedor30,#tablecontenedor33,#tablecontenedor40,#tablecontenedor50,#tablecontenedor60,#tablecontenedor70 { width:50%; margin-bottom:10px;padding-left:8px; }
#tabla_no_responsive
{
display: table;
white-space:normal;
border-collapse:separate;
}
#tabla_no_responsive td
{
display: table-cell;
white-space:normal;
border-collapse:separate;
}
.tabla_no_responsive
{
display: table;
white-space:normal;
border-collapse:separate;
}
.tabla_no_responsive td
{
display: table-cell;
white-space:normal;
border-collapse:separate;
}
table th {
/* display: none; */
}
table td {
display: block;
text-align: left !important;
align: left !important;
height:auto;
min-height:20px !important;
valign:middle !important;
position: relative;
padding-bottom:5px !important;
}
/* En mobile, los td vacios no deben generar espacio al apilarse vertical */
table td:empty {
display: none !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/*
table tr {
display: block;
text-align: left !important;
align: left !important;
padding-bottom:5px !important;
}
*/
table tr
{
border-bottom: 3px solid #ddd;
}
.gridbackground1{
height:auto;
}
.gridbackground2{
height:auto;
}
.gridbackground3{
height:auto;
}
.cabecera_grilla{
height:auto;
}
.fila_grilla{
height:auto;
background:none;
border-bottom: 3px solid #ddd;
}
#tablaresponsiva {
border: 0;
}
#tablaresponsiva thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
#tablaresponsiva thead th {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
#tablaresponsiva tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
#tablaresponsiva td {
border-bottom: 1px solid #ddd;
display: block;
text-align: right;
}
#tablaresponsiva td:before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
#tablaresponsiva td:last-child {
border-bottom: 0;
}
/* Agrego esto para hacerlo responsivo */
#selection-bar {
flex-wrap: wrap;
gap: 8px;
}
#search-bar-container {
width: 100%;
order: 1;
}
#module-search-input {
width: 100%;
}
#right-buttons-container {
order: 2;
width: 100%;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
#select-mode-button,
#back-to-netflix {
white-space: nowrap;
flex-shrink: 0;
font-size: 13px;
padding: 7px 12px;
}
} |