:root { --blanco: #ffffff; --blanco30: rgba(255, 255, 255, 0.3); --blanco50: rgba(255, 255, 255, 0.5); --blanco70: rgba(255, 255, 255, 0.7); --blanco90: rgba(255, 255, 255, 0.9); --negro: #000000; --negro10: rgba(0, 0, 0, 0.1); --negro30: rgba(0, 0, 0, 0.3); --negro50: rgba(0, 0, 0, 0.5); --negro70: rgba(0, 0, 0, 0.7); --negro90: rgba(0, 0, 0, 0.9); --color1: #000033; --color1-90: #000033ea; --color1-75: #000033c9; --color1-50: #00003380; --color1-25: #00003346; --color2: #0033ff; --color2-90: #0033ffea; --color2-75: #0033ffc2; --color2-50: #0033ff80; --color2-25: #0033ff46; --color3: #00bbff; --color3-90: #00bbf9ea; --color3-75: #00bbfcc2; --color3-50: #00bbf980; --color3-25: #00bbf946; --grisblanco: #f8f8f8; --grislight: #f1f1f1; --grisclaro: #dedede; --gris: #a3a3a3; --grisoscuro: #555555; --grisdark: #333333; --error: #ff0000; --exito: #3dc53d; --selected: #3dc53d; --colorselected: #ffffff; --alerta: #FFD246; --pendiente: #ff3c00; --cancelada: #a3a3a3; --rechazada: #a3a3a3; --confirmada: #3dc53d; --gap-default: 8px; --bluelight: #f4f7ff; --bluelight-dark: #d4e0ff; } .toast { position: fixed; top: 15px; right: 15px; z-index: 999999; min-width: 250px; max-width: 400px; } .toast #exito, .toast #error { margin: 0 !important; box-shadow: 0 10px 30px var(--negro30); border-radius: 12px; border-left: 5px solid var(--exito); } @font-face { font-family: 'Metropolis'; src: url('https://igp.igna.site/fonts/Metropolis-Regular.eot'); src: url('https://igp.igna.site/fonts/Metropolis-Regular.eot?#iefix') format('embedded-opentype'), url('https://igp.igna.site/fonts/Metropolis-Regular.woff2') format('woff2'), url('https://igp.igna.site/fonts/Metropolis-Regular.woff') format('woff'), url('https://igp.igna.site/fonts/Metropolis-Regular.svg#Metropolis-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Simpel-Medium'; src: url('https://igp.igna.site/fonts/Simpel-Medium.otf'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Louis-George-Cafe'; src: url('https://igp.igna.site/fonts/Louis-George-Cafe.ttf'); font-weight: normal; font-style: normal; font-display: swap; } html { padding: 0; margin: 0; width: 100%; height: 100%; } body { display: block; font-family: 'Metropolis', 'Louis-George-Cafe', 'Simpel-Medium', arial, verdana, sans-serif; background: #eef1f8; line-height: 1.5; font-size: 14px; margin: 0; } * { z-index: 10; font-weight: normal; box-sizing: border-box; cursor: default; } b { font-weight: bold; } a, a > *, a > * > * { cursor: pointer; text-decoration: none; } .version { position: fixed; bottom: 6px; right: 8px; z-index: -1; font-size: 11px; color: var(--gris); letter-spacing: 0.3px; } #alerta, #error, #exito, a.exito { display: block; text-align: left; padding: 14px 18px; margin-bottom: 18px; font-size: 14px; border-radius: 8px; letter-spacing: 0.1px; border: 1px solid transparent; border-left: 4px solid transparent; } #alerta, .alerta, .tolerancia { background: #fffae6; color: #7C5703; border-color: var(--alerta); border-left-color: var(--alerta); } #error, .error, .vencido { background: #ffe6e6; color: #c0000a; border-color: var(--error); border-left-color: var(--error); } #exito, .exito, .vigente { background: #ecffec; color: #1e7e1e; border-color: var(--exito); border-left-color: var(--exito); } a.exito { border: 1px solid var(--exito); margin: 0 1%; } .alerta-boton { display: block; text-align: center; padding: 10px 10px; font-size: 16px; border-radius: 7px; letter-spacing: 0.2px; background: var(--pendiente); color: var(--blanco); border-color: var(--alerta); box-shadow: 0 2px 12px rgba(255, 210, 70, 0.25); } .grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .disable-group { opacity: 0.45; filter: grayscale(0.3); } .active-group { opacity: 1; } #divdemo, #divpromos, #aviso { display: block; text-align: center; padding: 16px 20px; margin-bottom: 16px; font-size: 16px; border-radius: 10px; background: var(--color2); color: var(--blanco); letter-spacing: 0.3px; box-shadow: 0 4px 18px rgba(0, 51, 255, 0.25); } #aviso.primerpaso { margin-top: 60px; padding: 24px 20px; font-size: 15.5px; -webkit-box-shadow: 0 6px 24px rgba(0, 51, 255, 0.3); -moz-box-shadow: 0 6px 24px rgba(0, 51, 255, 0.3); box-shadow: 0 6px 24px rgba(0, 51, 255, 0.3); border: solid 2px rgba(255,255,255,0.4); border-radius: 14px; } #aviso.inicio { position: relative; display: block; padding: 22px 24px; color: var(--blanco); max-width: 800px; width: calc(92% - 50px); margin: 25px auto; text-align: justify; background: var(--color2); border-radius: 14px; box-shadow: 0 8px 32px rgba(0, 51, 255, 0.25); line-height: 1.2; } #box404 { position: absolute; display: block; width: 80%; max-width: 460px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--blanco); color: var(--grisdark); padding: 36px 28px; text-align: center; border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 0, 51, 0.12); border-top: 5px solid var(--color2); } #box404 a { color: var(--color2); display: inline-block; padding: 5px 8px; border-bottom: none; font-weight: bold; } #box404 a:hover { text-decoration: underline; } .estilo1 { background: var(--color1); color: var(--blanco); } select.estilo1 { background: var(--color1) url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E') no-repeat right 14px center / 15px !important; } .estilo2 { background: var(--grislight); color: var(--grisoscuro); } .login a.estilo1 { display: block; padding: 13px 5px; text-align: center; border-radius: 8px; letter-spacing: 0.5px; font-weight: bold; transition: background 0.2s ease; } .boton-ayuda { display: block; width: max-content; padding: 7px 10px 5px 10px; margin-top: -12px; background-color: var(--color2); color: var(--blanco); border-radius: 5px; font-size: 12px; text-transform: uppercase; cursor: pointer; } .padrinos_secundarios { position: relative; padding: 10px; background: var(--grisblanco); border: 1px solid var(--grisclaro); border-radius: 6px; margin-bottom: 20px; } .remove_padrinos { position: absolute; right: -1px; top: -1px; background: var(--error); color: var(--blanco); border-radius: 4px; padding: 3px 4px; font-size: 11px; font-weight: bold; text-transform: uppercase; cursor: pointer; border: 0; z-index: 15; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } .galeria_slot { position: relative; } .remove_galeria { position: absolute; right: 5px; top: 3px; background: var(--error); color: var(--blanco); border-radius: 4px; padding: 5px; font-size: 11px; font-weight: 400; line-height: 1; cursor: pointer; border: 0; z-index: 15; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } .remove_galeria:hover { background: #cc0000; } .add_more_galeria { margin-top: 10px; } .info1 { position: relative; display: block; padding: 12px 16px; font-size: 13.5px; background: var(--bluelight); color: var(--grisdark); margin: 12px 0; border-left: solid 5px var(--color3); border-bottom: 1px solid var(--color3); border-radius: 8px; font-weight: normal; } .info1.infoayuda { display: none; margin-bottom: 50px; } .info1 ul { margin: 6px 0; padding: 0; list-style: none; } .info1 ul li { position: relative; margin-bottom: 8px; padding-left: 14px; line-height: 1.4; } .info1 ul li::before { position: absolute; left: 0; top: 2px; display: inline-block; content: '●'; color: var(--color3); font-weight: bold; font-size: 14px; line-height: 1; } .info2 { display: block; padding: 14px 10px; font-size: 13.5px; color: var(--grisoscuro); margin: 12px 0; border-radius: 8px; font-weight: normal; text-align: center; background: var(--grisblanco); border: 1px dashed var(--grisclaro); } .info3 { display: block; padding: 12px 16px; font-size: 13px; background: #fffbea; color: #7C5703; margin: 12px 0; border: 1px solid var(--alerta); border-left: solid 4px var(--alerta); border-radius: 8px; font-weight: normal; } form { position: relative; display: block; padding: 0px; margin: 0 auto; z-index: 0; } form.table { display: table; min-width: 680px; } form.login, form.registro { width: 70%; max-width: 360px; color: var(--color1); background: var(--blanco); padding: 32px 28px; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 51, 0.18), 0 2px 12px rgba(0, 51, 255, 0.1); border-top: 4px solid var(--color2); } form .titulo_box_login { display: block; background: none; color: var(--color1); padding: 0; margin: 0 auto; font-size: 16px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: bold; text-align: center; } form.registro .info1 { background: none; border: none; padding: 0; margin: 0 0 20px 0; font-size: 13px; color: var(--grisoscuro); text-align: center; font-weight: normal; } form.box { display: block; width: 90%; max-width: 800px; padding: 3%; background: var(--blanco); border-radius: 14px; box-shadow: 0 4px 20px rgba(0, 0, 51, 0.08); } form.shadow { background: var(--blanco); border-radius: 14px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1); } form input[type="text"], form input[type="number"], form input[type="date"], form input[type="password"], form input[type="email"], form select, form textarea { display: block; position: relative; padding: 10px 14px; margin: 6px 0; width: 100%; border: 1.5px solid var(--grisclaro); background: var(--grislight); outline: none; border-radius: 8px; color: var(--grisdark); font-family: inherit; font-size: 14px; box-sizing: border-box; transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease; } form input[type="text"], form input[type="number"], form input[type="password"], form input[type="email"], form textarea { cursor: text; } form select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 14px center; background-size: 15px; padding-right: 40px; } form input[type="text"]:focus, form input[type="number"]:focus, form input[type="date"]:focus, form input[type="password"]:focus, form input[type="email"]:focus, form select:focus, form textarea:focus { background-color: var(--blanco); border-color: var(--color2); box-shadow: 0 0 0 3px rgba(0, 51, 255, 0.05); } form label.file { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 7px ; border: 2px dashed var(--color3); border-radius: 14px; background: var(--color3-25); text-align: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; margin-top: 10px; width: 100%; font-size: 14px; overflow: hidden; } form label.file.alto { padding: 25px 7px; font-size: 15.5px; } form label.file:hover { transform: translateY(-2px); } form label.file.drag-over { border-color: var(--color2); background: var(--color3); box-shadow: 0 8px 24px rgba(0, 51, 255, 0.08); transform: scale(1.1); box-shadow: 0 0 12px 6px rgba(0, 51, 255, 0.1); } form label.file input[type="file"] { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; z-index: 20; } form label.file .file-nombre { font-weight: 600; color: var(--negro); display: block; width: 100%; white-space: normal; word-break: break-word; overflow-wrap: anywhere; line-height: 1.2; } form label.file.file-cargado { border-style: solid; border-color: var(--exito); background: #f4fff4; } form label.file.file-cargado .file-nombre { color: #1e7e1e; } form label.file .file-eliminar { position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; background: var(--error); color: var(--blanco); border-radius: 50%; display: none; z-index: 30; cursor: pointer; box-shadow: 0 4px 12px rgba(255, 0, 0, 0.25); transition: all 0.2s ease; } form label.file .file-eliminar::before, form label.file .file-eliminar::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2.5px; background-color: var(--blanco); border-radius: 2px; } form label.file .file-eliminar::before { transform: translate(-50%, -50%) rotate(45deg); } form label.file .file-eliminar::after { transform: translate(-50%, -50%) rotate(-45deg); } form label.file.file-cargado .file-eliminar { display: flex; } form label.file .file-eliminar:hover { transform: scale(1.15); background: #cc0000; } form label.file .file-img-preview { display: none; width: 100%; max-height: 140px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; pointer-events: none; } form label.file.file-cargado .file-img-preview { display: block; } form textarea { min-height: 100px; resize: none; } form .inputcolor { position: relative; display: block; height: 37px; margin: 5px 0; cursor: pointer; border-radius: 10px; padding: 15px 0; width: 70%; } form .inputcolor span { display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: var(--blanco); font-size: 14px; width: 100%; text-align: center; font-weight: bold; } form input[type="checkbox"], form input[type="radio"] { transform: scale(1.5); margin-right: 10px; } form label { display: block; cursor: pointer; width: 100%; color: var(--grisoscuro); font-size: 13.5px; font-weight: 500; margin-top: 12px; margin-bottom: 4px; letter-spacing: 0.1px; } form input[type="email"] { text-transform: lowercase; } form input[type="submit"], form input[type="button"], form .btn, form .botones { display: inline-block; margin: 8px 0; width: 100%; max-width: 260px; border: 0px; border-radius: 8px; background: var(--color1); color: var(--blanco); font-weight: bold; cursor: pointer; font-size: 13px; letter-spacing: 0.7px; transition: all 0.2s ease; box-shadow: 0 6px 20px rgba(0, 0, 51, 0.3); font-family: inherit; text-decoration: none; text-align: center; box-sizing: border-box; min-height: 40px; } .btn, .botones { box-shadow: 0 6px 20px rgba(0, 0, 51, 0.15); } .btn:hover, .botones:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 51, 255, 0.25); } form input[type="submit"]:hover { background: var(--color2); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 51, 255, 0.35); } form input[type="submit"].float { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); border: 2px solid var(--grisclaro); box-shadow: 0 8px 28px rgba(0, 0, 51, 0.25); } form .subbox { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } form .subbox.sino { width: 60%; max-width: 350px; } .logo_login { display: block; margin: 56px auto 24px auto; width: 110px; filter: drop-shadow(0 4px 16px rgba(0, 51, 255, 0.25)); } form input[type="submit"], .mostrar, .mostrar-solo { cursor: pointer; } #allbox { display: grid; grid-template-columns: 220px auto; min-height: 100vh; } #menu { position: sticky; top: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; margin: 0; z-index: 110; padding-top: 0; background: var(--color1); border-right: 1px solid rgba(255, 255, 255, 0.05); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; } #menu a:not(.inicio-salir a):not(.logo-enlace) { display: flex; align-items: center; color: var(--blanco70); border-radius: 6px; background: transparent; padding: 9px 14px; margin: 2px 12px; font-size: 14px; font-weight: normal; letter-spacing: 0.1px; border-left: 3px solid transparent; transition: all 0.18s ease; } #menu a:hover:not(.inicio-salir a):not(.logo-enlace):not(:has(.btn-feedback)) { background: rgba(255, 255, 255, 0.04); color: var(--blanco); border-left-color: var(--color3); padding-left: 16px; } #menu img { display: block; width: 80px; margin: 24px auto 16px auto; filter: brightness(0) invert(1); opacity: 0.95; } .icono-menu { position: fixed; display: none; top: 12px; left: 12px; width: 40px; z-index: 200; background: var(--color1); padding: 10px; border-radius: 8px; cursor: pointer; } .tituloMenu { display: block; margin: 10px 12px 14px 12px; padding: 12px 6px; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 11px; color: var(--blanco50); text-align: center; font-weight: bold; letter-spacing: 1.2px; text-transform: uppercase; } .saldoMenu { display: block; text-align: center; color: var(--color3); font-size: 13px; margin: 4px 0 0 0; text-transform: none; letter-spacing: 0.2; } .inicio-salir { display: grid; grid-template-columns: 1fr 1fr; justify-content: center; gap: 8px; padding: 10px 12px; text-align: center; } .inicio-salir a { background-color: rgba(255, 255, 255, 0.05); color: var(--blanco70); border-radius: 6px; font-size: 13px; padding: 8px 4px; margin: 0 auto; width: 100%; transition: all 0.18s ease; text-align: center; display: flex; justify-content: center; align-items: center; border: 1px solid rgba(255, 255, 255, 0.05); } .inicio-salir a:hover { background: rgba(255, 255, 255, 0.1); color: var(--blanco); border-color: rgba(255, 255, 255, 0.1); padding-left: 0; } .contenido { position: relative; min-height: 100vh; margin: 0; padding: 0 24px 80px 24px; background: #eef1f8; } .titulo1 { display: block; color: var(--color1); padding: 24px 4px 20px 4px; font-size: 26px; text-align: left; font-weight: 600; border-bottom: 1px solid rgba(0, 0, 51, 0.06); margin-bottom: 24px; letter-spacing: -0.2px; } .titulo1.centrado { font-size: 36px; position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); border-top: 1px solid rgba(0, 0, 51, 0.06); border-bottom: 1px solid rgba(0, 0, 51, 0.06); padding: 20px 32px; text-align: center; background: none; letter-spacing: -0.5px; } .columna-plataforma { background-color: var(--blanco); overflow: hidden; border: 1px solid rgba(0, 0, 51, 0.04); border-radius: 12px; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.01), 0 10px 30px rgba(0, 0, 51, 0.02); transition: all 0.22s ease; } .columna-plataforma:hover { box-shadow: 0 4px 20px rgba(0, 0, 51, 0.06); } .columna-plataforma a.editar { display: flex; align-items: center; padding: 12px 14px; margin: 8px 12px; color: var(--color1); background-color: var(--bluelight); border: 1px solid var(--color3-50); border-radius: 6px; font-size: 13.5px; transition: all 0.18s ease; } .columna-plataforma a.editar:hover { border-color: var(--color3); border-left: 4px solid var(--color3); padding-left: 16px; background-color: var(--bluelight); } .boton-big, a.boton-big { padding: 18px 28px !important; font-size: 16px !important; font-weight: bold; } .botones-inicio { width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 8px 0 32px 0; } .boton-plataforma-titulo { display: flex; align-items: center; padding: 18px 20px; background: transparent; color: var(--color1); text-align: left; font-size: 16px; font-weight: 600; letter-spacing: -0.1px; border-bottom: 1px solid var(--grislight); } .sin-servicio { display: block; font-size: 13.5px; padding: 20px 16px; text-align: center; color: var(--gris); font-style: italic; } .columna-plataforma a.crear-perfil { display: inline-block; padding: 10px 16px; background: var(--color2); color: var(--blanco); text-align: center; margin: 12px 12px 14px 12px; font-size: 12px; text-transform: uppercase; border-radius: 8px; border: 0px; letter-spacing: 0.6px; font-weight: bold; transition: all 0.18s ease; box-shadow: 0 4px 14px rgba(0, 51, 255, 0.3); } .columna-plataforma a.crear-perfil:hover { background: #0022cc; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 51, 255, 0.4); } .columna-plataforma a.crear-perfil.full { display: block; padding: 14px 16px; margin: 8px 12px 16px 12px; } .margin-top { display: block; width: 100%; height: 80px; } .sombra { -webkit-box-shadow: 0 8px 24px rgba(0, 0, 51, 0.15); -moz-box-shadow: 0 8px 24px rgba(0, 0, 51, 0.15); box-shadow: 0 8px 24px rgba(0, 0, 51, 0.15); } .sombra2 { -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .sombra3 { -webkit-box-shadow: 0 8px 24px rgba(0, 0, 51, 0.4); -moz-box-shadow: 0 8px 24px rgba(0, 0, 51, 0.4); box-shadow: 0 8px 24px rgba(0, 0, 51, 0.4); } .bgfull-fixed { position: fixed; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; opacity: 0.06; filter: saturate(0.2); } .boton_qr, .boton { display: block; width: 100%; margin: 0 auto; padding: 12px 0; background: var(--color1); text-align: center; color: var(--blanco); border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 13.5px; letter-spacing: 0.4px; transition: all 0.2s ease; box-shadow: 0 4px 16px rgba(0, 0, 51, 0.2); } .boton_qr:hover, .boton:hover { background: var(--color2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 51, 255, 0.3); } form.qr { width: 80%; max-width: 300px; } form.qr .qr_nuevo { width: 100%; } .menuperfil { position: fixed; display: none; width: 50%; max-width: 260px; left: 0; top: 0; text-align: center; color: var(--blanco); font-weight: bold; padding: 80px 12px 12px 12px; background: var(--color1); z-index: 200; } .menuperfil a { display: block; padding: 12px 14px; text-align: left; color: rgba(200, 215, 255, 0.85); text-decoration: none; background: rgba(255,255,255,0.06); font-weight: normal; font-size: 14px; margin: 5px 0; border-radius: 7px; border-left: 3px solid transparent; transition: all 0.18s ease; } .menuperfil a:hover { background: rgba(0, 51, 255, 0.3); border-left-color: var(--color3); color: var(--blanco); } .menumenu { position: fixed; display: none; width: 80%; max-width: 400px; height: 100%; top: 0; right: 0; text-align: center; color: var(--blanco); font-weight: bold; padding: 80px 12px 12px 12px; background: var(--color1); z-index: 220; } .menumenu a { display: block; padding: 13px 14px; text-align: left; color: rgba(200, 215, 255, 0.85); text-decoration: none; background: rgba(255,255,255,0.06); font-weight: normal; font-size: 14px; margin: 5px 0; border-radius: 7px; border-left: 3px solid transparent; transition: all 0.18s ease; } .menumenu a:hover { background: rgba(0, 51, 255, 0.3); border-left-color: var(--color3); color: var(--blanco); } #boxprincipal { display: block; margin: 0 auto 50px auto; width: calc(98% - 20px); max-width: 880px; background: var(--blanco); border-radius: 12px; padding: 32px 28px; border: 1px solid rgba(0, 0, 51, 0.04); box-shadow: 0 1px 3px rgba(0,0,0,0.01), 0 10px 40px rgba(0, 0, 51, 0.02); } #loader { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: var(--color1-90); } .loader { position: absolute; top: calc(50% - 40px); left: calc(50% - 40px); width: 80px; height: 80px; border: 7px solid rgba(255,255,255,0.15); border-top-color: var(--color3); border-right-color: var(--color2); border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 0.65s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #loader-status { position: absolute; top: calc(50% + 60px); left: 50%; transform: translateX(-50%); color: rgba(200, 215, 255, 0.7); font-weight: bold; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; width: 100%; text-align: center; } #loader-output { display: none; position: absolute; top: calc(50% + 90px); left: 50%; transform: translateX(-50%); color: var(--blanco50); font-size: 11px; width: 80%; max-width: 800px; max-height: 150px; overflow: hidden; white-space: pre-wrap; font-family: monospace; line-height: 1.2; text-align: center; } #loader svg { position: absolute; width: 50px; top: calc(50% - 64px); left: calc(50% - 24px); filter: brightness(0) invert(1); opacity: 0.8; } #loader svg .fill-animate { animation: fillAnimation .6s ease-in-out infinite; background: var(--blanco); } @keyframes fillAnimation { 0% { clip-path: inset(100% 0% 0% 0%); } 50% { clip-path: inset(0% 0% 0% 0%); } 100% { clip-path: inset(0% 0% 100% 0%); } } .logo_inicio_html { position: absolute; opacity: 0.04; max-width: 30vw; max-height: 30vh; top: 52%; left: 56%; transform: translate(-50%, -50%); } .ia_box_select { display: grid; grid-template-columns: 1fr 70px; gap: var(--gap-default); width: 100%; max-width: 500px; margin-bottom: 20px; } .ia_box_select input[type="submit"] { display: block; width: 100%; } form label.checkbox { position: relative; display: block; width: auto; border-radius: 50px; border-color: var(--grislight); padding: 8px 4px 8px 12px; } form label.checkbox.mini { width: 54px; height: 28px; margin: 0; padding: 0; } form label.checkbox.mini div { background-image: none !important; border-radius: 50px; transition: all 0.3s ease; } form label.checkbox.mini div::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--blanco); border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } form label.checkbox.mini input:checked ~ div { background: var(--exito) !important; border-color: var(--exito); } form label.checkbox.mini input:checked ~ div::after { left: calc(100% - 23px); } form label.checkbox.mini input:not(:checked) ~ div { background: var(--gris) !important; border-color: var(--gris); } form label.checkbox > *, form label.checkbox > * > * { cursor: pointer; } form label.checkbox.big { border-radius: 15px; } form label.checkbox.alto { padding: 12px 4px 12px 12px; } form label.checkbox span { display: block; max-width: 88%; color: var(--gris); } form label.checkbox div { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--grislight) url(https://igp.igna.site/!res1--icon--checkbox.svg?1) right 4px center / 25px no-repeat; opacity: 0.6; z-index: -1; border-radius: 50px; border: 1.5px solid var(--grisclaro); } form label.checkbox.big div { background: var(--grislight) url(https://igp.igna.site/!res1--icon--checkbox.svg?1) right 4px center / 34px no-repeat; } form label.checkbox.big div { border-radius: 15px; } form label.checkbox input:checked~div { background: var(--color2) url(https://igp.igna.site/!res1--icon--checkbox2.svg?1) right 4px center / 26px no-repeat; opacity: 1; border-color: var(--color2); } form label.checkbox.big input:checked~div { background: var(--color2) url(https://igp.igna.site/!res1--icon--checkbox2.svg?1) right 4px center / 34px no-repeat; } form label.checkbox input:checked~span { color: var(--blanco); font-weight: bold; } form label.checkbox input { display: none; } form label.checkbox.visible { border-color: var(--gris); } form label.checkbox.visible span { color: var(--grisoscuro); } form label.checkbox.blocked { } form label.checkbox.blocked input:checked~div { background: var(--alerta) url(https://igp.igna.site/!res1--icon--checkbox2.svg?1) right 4px center / 26px no-repeat; opacity: 0.4; } form label.checkbox.blocked input:checked~span { color: var(--gris); } form label.checkbox input:checked~span span { color: var(--blanco); } form label.checkbox.planes b { font-size: 17px; } form label.checkbox.planes .descripcion-plan { font-size: 14px; line-height: 1.3; } form .descripcion-modulo { display: block; font-size: 12.5px; line-height: 1.3; margin-bottom: 12px; padding: 0 2px; font-weight: normal; opacity: 0.8; color: var(--grisoscuro); } .info-modulo { background-color: var(--blanco); padding: 16px; border-radius: 14px; border: 2px solid var(--color3); transition: all 0.22s ease; } .info-modulo .alerta { font-size: 12px; padding: 10px; margin: 10px 0; text-align: left; line-height: 1.3; } .titulo-modulo { display: block; font-size: 14px; font-weight: bold; color: var(--color1); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .infoestatus { display: block; color: var(--grisdark); font-size: 12px; width: 100%; text-align: right; margin-bottom: 12px; } .infoestatus div { display: inline-block; padding: 3px 4px 2px 6px; text-align: left; margin-left: 6px; background-color: var(--bluelight); border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); } .infoestatus .correcto { border-bottom: 4px solid var(--exito); } .infoestatus .pendiente { border-bottom: 4px solid var(--pendiente); } .infoestatus .finalizado { border-bottom: 4px solid var(--cancelada); } .recuperar_pass { display: block; font-size: 12px; text-align: center; padding: 10px 0; margin-top: 20px; } .recuperar_pass.registros { display: grid; grid-template-columns: 1fr 1fr; width: 90%; max-width: 500px; margin: 16px auto; } .recuperar_pass a { display: inline-block; padding: 6px 8px; color: var(--color2); border-bottom: 2px solid rgba(0,51,255,0.2); margin: 10px 8px; transition: all 0.18s ease; } .recuperar_pass a:hover { color: var(--color1); border-bottom-color: var(--color1); } .logoConfig { display: block; background: var(--grislight); margin: 0; border-radius: 8px; overflow: hidden; } .logoConfig img { display: block; width: 50%; max-width: 200px; margin: 0 auto; } .infoLogo { display: block; font-size: 13px; color: var(--gris); font-style: italic; } .boxQR { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000; background: rgba(0, 0, 51, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .boxQR .boxCentral { position: relative; display: block; position: absolute; width: 80%; max-width: 260px; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; background-color: var(--blanco); color: var(--color1); padding: 16px; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .enlaceQR { display: block; padding: 12px; text-align: center; font-size: 14px; color: var(--grisdark); line-height: 1.4; } .url-copiar { display: block; margin-bottom: 10px; font-size: 16px; color: var(--color1); } .copiarqr { display: inline-block; padding: 8px 20px; background: var(--color3); color: var(--blanco); border-radius: 50px; font-size: 11px; font-weight: bold; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.22s ease; box-shadow: 0 4px 12px rgba(0,0,51,0.15); } .copiarqr:hover { background-color: var(--color2); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,51,0.25); } .copiarqr.copiado { background-color: var(--exito); padding: 8px 16px 8px 36px; background-image: url(https://igp.igna.site/!res1--icon--checkbox2.svg); background-position: left 10px center; background-size: 18px; background-repeat: no-repeat; } .boxQR .boxCentral img { display: block; max-width: 100%; max-height: 100%; margin: 0 auto; border-radius: 10px; } .downloadqr { position: absolute; top: 10px; right: 10px; display: block; padding: 10px 34px 8px 10px; color: var(--blanco); border-radius: 6px; border: none; background: var(--exito) url(https://igp.igna.site/!res1--icon--descargar.svg?1) right 8px center / 16px no-repeat; font-size: 12px; font-weight: bold; box-shadow: 0 4px 14px rgba(61, 197, 61, 0.35); transition: all 0.18s ease; } .downloadqr:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(61, 197, 61, 0.45); } .ver_qr { position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 51, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 1000; } img.qr_usuario { display: block; width: auto; height: auto; max-width: 88vw; max-height: 88vh; } .center_absolute { position: absolute; display: block; width: auto; height: auto; margin: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); } .enlaces_usuarios { display: block; margin-bottom: 12px; } .enlaces_usuarios a { display: inline-block; padding: 10px 40px; background: var(--color1); color: var(--blanco); border-radius: 8px; font-weight: bold; transition: all 0.18s ease; box-shadow: 0 4px 16px rgba(0,0,51,0.2); } .enlaces_usuarios a:hover { background: var(--color2); transform: translateY(-2px); } .cerrar { position: fixed; top: 20px; right: 20px; display: block; width: 44px; height: 44px; z-index: 50; border-radius: 100vw; transition: all 0.18s ease; } .cerrar { background: var(--color1) url(https://igp.igna.site/!res1--icon--cerrar.svg) center center / 55% no-repeat; box-shadow: 0 4px 16px rgba(0,0,51,0.3); } .cerrar:hover { background-color: #cc0000; transform: rotate(90deg) scale(1.05); } .noclick { cursor: default; } .bordervacios, form input.bordervacios, form label.bordervacios, form select.bordervacios { border: solid 1.5px #e00; background: #fff5f5; } .bordercorrectos, form input.bordercorrectos, form label.bordercorrectos, form select.bordercorrectos { border-bottom: solid 1.5px var(--exito); background: #f3fff3; } .editar { background: url(https://igp.igna.site/!res1--icon--editar.svg?0) right 8px center / 19px no-repeat; } .editar2 { background: url(https://igp.igna.site/!res1--icon--editar2.svg?0) right 8px center / 19px no-repeat; } .contar-caracteres { display: block; text-align: right; font-size: 13px; color: var(--grisoscuro); } .contar-caracteres span { font-weight: bold; color: var(--color2); } .admEm { display: block; padding: 7px; margin: 0; background: var(--grislight); border-radius: 6px; border: 1px solid var(--grisclaro); margin: 0 3px 6px 3px; } .linkWA { display: inline-block; padding: 2px 4px; font-size: 16px; font-weight: bold; color: var(--color2); border-bottom: 2px solid rgba(0,51,255,0.3); transition: color 0.18s ease; } .linkWA:hover { color: var(--color1); } .disabled { opacity: 0.4; pointer-events: none; } .titulo_nombrepass { display: block; text-align: center; background: var(--color1); color: var(--blanco); margin: 0; padding: 32px 8px; font-size: 20px; line-height: 1.3; font-weight: bold; letter-spacing: -0.3px; } .botones, .btn, .botonQR { display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; margin: 5px 0; border: none; border-radius: 8px; background: var(--color1); color: var(--blanco); font-weight: bold; cursor: pointer; min-width: 120px; text-align: center; font-size: 13px; letter-spacing: 0.3px; transition: all 0.2s ease; box-shadow: 0 4px 16px rgba(0, 0, 51, 0.22); box-sizing: border-box; min-height: 42px; } .botonQR { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); background: var(--color2); } .botones:hover, .btn:hover, .botonQR:hover { background: var(--color2); box-shadow: 0 8px 24px rgba(0, 51, 255, 0.35); } .botones.pagar { padding: 14px 12px; font-size: 17px; display: block; max-width: calc(220px - 20px); margin-top: 10px; background: var(--exito); box-shadow: 0 4px 14px rgba(61, 197, 61, 0.3); } .botones.pagar:hover { background: #2da82d; box-shadow: 0 8px 22px rgba(61, 197, 61, 0.4); } .preciospago s { font-size: 12px; color: var(--gris); } .botonQR.gr, .btn.big, .botones.big { padding: 13px 28px; font-size: 18px; } .info-big { font-size: 20px; font-weight: bold; text-align: center; color: var(--blanco); background: var(--color1); padding: 20px 10px; border-radius: 10px; } .titulo_box { display: block; text-align: left; font-size: 20px; margin: 0 0 24px 0; letter-spacing: -0.2px; background: transparent; color: var(--color1); padding: 0 0 12px 0; font-weight: 600; border-bottom: 2px solid var(--grisclaro); position: relative; } .titulo_box::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 50px; height: 2.5px; background: var(--color2); } .titulo_box.hidenewvisita { margin: 10px 0 16px 0; } .subtitulo_box { display: block; background: transparent; padding: 12px 0 12px 10px; font-size: 17px; color: var(--blanco); background-color: var(--color3); margin-top: 28px; margin-bottom: 16px; font-weight: bold; border-radius: 5px; } .subtitulo_box.center { text-align: center; } .uno { display: block; padding: 12px 16px; color: var(--grisdark); background-color: var(--grisblanco); border: 1px solid var(--grisclaro); transition: all 0.2s ease; border-radius: 8px; box-shadow: none; margin-bottom: 6px; } .border-exito { border-left: 4px solid var(--exito); } .border-error { border-left: 4px solid var(--error); } .border-alerta { border-left: 4px solid var(--alerta); } .border-azul { border-left: 4px solid var(--color2); } .border-gris { border-left: 4px solid var(--gris); } .border-negro { border-left: 4px solid var(--negro); } .uno.lista-pagar { background-color: var(--bluelight); color: var(--grisdark); } .uno:hover:not(.lista-pagar) { background-color: var(--blanco); border-color: var(--color3); box-shadow: 0 4px 12px rgba(0,0,0,0.03); transform: translateY(-1px); } .uno.total-pagar { background-color: var(--grisdark); color: var(--blanco); border-radius: 7px 0 0 7px; } .info_left.total-pagar-monto { background-color: var(--color2); color: var(--blanco); border-radius: 0 7px 7px 0; font-size: 15px; height: 44.5px; } .uno.reserva { border-left: solid 4px var(--color2); margin-bottom: 10px; } .uno.big { font-size: 14px; padding: 12px 14px; } .uno.alto, .dos.alto { padding: 12px 6px; } .uno.alto2, .dos.alto2 { padding: 11px 10px; min-height: 42px; display: flex; align-items: center; box-sizing: border-box; } .uno .mini_info, label .mini_info { display: block; padding: 0 0 3px 0; font-size: 11px; color: var(--color2-75); font-weight: bold; } .uno .nombre, .uno .titulo { display: block; padding: 1px 0 0 0; color: var(--color); font-size: 14px; font-weight: bold; } .dos { display: flex; align-items: center; font-size: 12px; color: var(--grisdark); background-color: var(--grisblanco); border: 1px solid var(--grisclaro); padding: 0 10px; text-align: left; border-radius: 8px; box-shadow: none; } .dos span { display: inline-block; padding: 4px 10px; background: var(--grisdark); color: var(--blanco); border-radius: 4px; font-size: 11px; font-weight: bold; text-transform: uppercase; } .status-exito span { background: var(--exito); } .status-error span { background: var(--error); } .status-alerta span { background: var(--alerta); } .status-azul span { background: var(--color1); } .dos.dark { color: var(--blanco); background: var(--color1); } .dos.center, .center { text-align: center; } .dos span, .dos div { display: block; width: 100%; } span.top, div.top { display: block; padding: 10px 10px; border: 0px; font-size: 11.5px; color: var(--grisoscuro); font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; text-align: left; border-bottom: 3px dotted var(--grisclaro); border-radius: 2px; } span.top.center, div.top.center { text-align: center; } span.minw, div.minw { min-width: 20px; } .grid-auto-1fr, .detalles { display: grid; grid-template-columns: auto 1fr; gap: 5px 0; align-items: stretch; } .grid-1fr-auto { display: grid; grid-template-columns: 1fr auto; gap: 5px 0; align-items: stretch; } .grid-auto-auto { display: grid; grid-template-columns: auto auto; gap: 5px 0; } .grid-1fr-auto-auto { display: grid; grid-template-columns: 1fr auto auto; gap: 5px 0; } .grid-auto-1fr-auto { display: grid; grid-template-columns: auto 1fr auto; gap: 5px 0; } .grid-auto-1fr-1fr { display: grid; grid-template-columns: auto 1fr 1fr; gap: 5px 0; } .info_right { display: block; padding: 10px 14px; background: var(--bluelight); line-height: 1.4; border-radius: 6px; border: 1px solid var(--bluelight-dark); color: var(--grisdark); margin: 2px 0; } .info_left { display: flex; align-items: center; padding: 10px 12px; color: var(--color1); background: transparent; font-size: 12px; font-weight: bold; border-radius: 0; border-bottom: none; text-transform: uppercase; letter-spacing: 0.5px; } .info_left.flex, .flex { display: flex; align-items: center; text-align: left; } .info_left.flex-center, .flex-center { display: flex; align-items: center; justify-content: center; text-align: center; } #grid2, .grid2, .grid2-movil { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-default); } #grid3, .grid3 { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-default); } #grid4, .grid4 { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--gap-default); } .izq { order: 2;} .der { order: 1;} #grid2.gap10, #grid3.gap10, .grid2.gap10, .grid3.gap10, .gap10 { gap: 10px; } #grid2.gap5, #grid3.gap5, .grid2.gap5, .grid3.gap5, .gap5 { gap: var(--gap-default); } .gap10-alto { gap: 20px 10px; } .gap-alto { gap: 10px 0; } .gap-medio { gap: 12px 0; } span b.infostatus, span.infostatus, div.infostatus { text-align: center; border-radius: 300px; font-weight: bold; width: auto; padding: 10px 16px; font-size: 12px; letter-spacing: 0.4px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; } div.activa, span.activa { border-right: solid 5px var(--exito); } div.inactiva, span.inactiva { border-right: solid 5px var(--grisoscuro); } .infostatus.true { background: var(--exito); color: var(--blanco); } .infostatus.false { background: var(--grislight); color: var(--grisoscuro); } .border-vigente { border-left: 8px solid var(--exito); } .border-tolerancia { border-left: 8px solid var(--error); } .border-vencido { border-left: 8px solid var(--grisclaro); } .box-grid-perfiles { border: 1.5px solid var(--grisclaro); padding: 6px 12px; margin-bottom: 10px; border-radius: 8px; } .grid-perfiles-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: stretch; background: var(--blanco); overflow: hidden; } .grid-perfiles-row > * { display: flex; align-items: center; } .grid-perfiles-row a span { font-weight: bold; } .grid-perfiles-row > a { display: flex; align-items: stretch; transition: background-color 0.18s ease; } .grid-perfiles-row a:hover .uno { background-color: var(--bluelight); border-radius: 6px; } .grid-perfiles-row .uno { background: transparent; border: none; box-shadow: none; margin-bottom: 0; padding: 8px 12px; } .grid-perfiles-row .uno:hover { background: transparent; border: none; box-shadow: none; transform: none; } .grid-perfiles-row .total-modulos { font-weight: 600; color: var(--color1); } .grid-perfiles-row .uno, .grid-perfiles-row .info_left { margin: 0; height: 100%; display: flex; align-items: center; width: 100%; box-sizing: border-box; } .grid-perfiles-row .btn { display: block; padding: 12px 12px; font-size: 12px; min-width: 0; white-space: nowrap; margin: 0; } .grid-perfiles-row .total-modulos, .uno.total-modulos { text-align: center; font-size: 13px; font-weight: bold; min-width: 80px; color: var(--color1); background: var(--bluelight); border: 1px solid var(--bluelight-dark); cursor: default; border-radius: 6px; box-shadow: none; } .grid-perfiles-row .total-modulos:hover, .uno.total-modulos:hover { color: var(--color1); background: var(--bluelight); border: 1px solid var(--bluelight-dark); box-shadow: none; transform: none; } #lista_subcategorias div { margin-bottom: 8px; } .ver-imgPopup { display: block; } .ver-imgPopup img { display: block; width: 80%; max-width: 400px; margin: 0 auto 50px auto; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.12); } .boxFotoProducto { position: fixed; display: block; display: none; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 51, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 10; } .boxFotoProducto img { position: absolute; top: 50%; left: 50%; transform: translate(-37%, -50%); max-width: 60%; max-height: 60%; border: 3px solid var(--blanco); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .allBoxProducto { border: 1px solid var(--grisclaro); padding: 8px; background: var(--blanco); border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); } .gridFotoProducto { display: grid; grid-template-columns: 1fr 3fr; gap: 0 6px; padding: 0 10px; text-align: center; align-items: center; } .iconoCamara { display: block; width: 70px; padding: 2px 15px; margin: 0 auto; background: var(--grislight); border-radius: 6px; } #grid_comentarios { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 12px 5px; } #grid_recompensas { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--gap-default); } .boxvalidar { display: block; padding: 14px; background: var(--bluelight); border: 1.5px solid rgba(0,51,255,0.15); border-left: 4px solid var(--color2); font-weight: normal; border-radius: 8px; } #grid_encuestas { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 7px 0px; align-items: top; } .total_calificacion { display: block; text-align: center; font-size: 52px; color: var(--color1); font-weight: bold; line-height: 1; letter-spacing: -2px; } .resumen_totales { display: grid; grid-template-columns: auto 40px; max-width: 500px; margin: 0 auto; gap: 5px 5px; font-size: 14px; font-weight: normal; } .resumen_totales span { display: block; padding: 10px 12px; background: var(--blanco); border-bottom: 2px solid var(--grisclaro); border-radius: 6px; box-shadow: 0 1px 6px rgba(0,0,0,0.04); } .box_fortaleza { display: block; padding: 4px; border: 2px solid var(--grisclaro); border-radius: 10px; background: var(--blanco); margin-bottom: 12px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.06); } .grid_EncuestaIndividual { display: grid; grid-template-columns: 1fr auto; gap: 5px 0; } .grid_EncuestaIndividual span { padding: 8px 4px 3px 4px; font-size: 12.5px; } #grid_preguntas { display: grid; grid-template-columns: auto 1fr; gap: 5px 0; } .star-rating { display: block; position: relative; max-width: 320px; margin: 0 auto; } .star-rating.inline { display: inline-block; vertical-align: bottom; } .stars-outer { position: relative; width: 100%; padding-bottom: 20%; background: url('https://igp.igna.site/!res1--icon--star1.svg?x') repeat-x; background-size: contain; } .stars-inner { position: absolute; top: 0; left: 0; height: 100%; background: url('https://igp.igna.site/!res1--icon--star2.svg?x') repeat-x; background-size: contain; } .origenes, .segmentos { display: block; } .porcentual { display: block; width: 0%; min-width: 3px; height: 7px; background: linear-gradient(90deg, var(--color2), var(--color3)); margin-top: 4px; border-radius: 3px; } .editar-reserva { display: block; margin: 0 0 24px 0; background: var(--blanco); border: 1px solid var(--grisclaro); border-top: 4px solid var(--color2); padding: 16px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.07); } .botoneditarreserva, .vertodasrsv { display: block; width: 150px; padding: 12px 8px; background-color: var(--grislight); border: 1.5px solid var(--grisclaro); margin-bottom: 24px; border-radius: 8px; font-size: 13.5px; text-align: left; color: var(--grisdark); transition: all 0.18s ease; } .botoneditarreserva:hover, .vertodasrsv:hover { background-color: #eef4ff; border-color: rgba(0, 51, 255, 0.3); } .estatusPendiente { border-left: 5px solid var(--pendiente); background: #fff9f7; } .estatusCancelada { border-left: 5px solid var(--cancelada); background: var(--grislight); } .estatusConfirmada { border-left: 5px solid var(--confirmada); background: #f0fbf0; } .estatusRechazada { border-left: 5px solid var(--cancelada); background: var(--grislight); } .grid-horarios { display: grid; grid-template-columns: 65px 1fr 1fr; gap: 10px; padding: 12px 14px; background: var(--bluelight); border: 1px solid rgba(0,51,255,0.1); border-left: 4px solid var(--color2); border-radius: 8px; margin-bottom: 14px; } #grid_promos { position: relative; display: grid; grid-template-columns: auto 1fr auto auto auto auto; gap: 5px 4px; margin: 0 auto 0 auto; padding: 0; } #grid_promos div.inf { background: var(--grislight); padding: 0 8px; font-size: 12.5px; cursor: default; border-radius: 5px; border: 1px solid var(--grisclaro); } .pasos { display: flex; justify-content: space-between; border-top: 2px solid var(--grisclaro); padding: 16px 6px 12px 6px; margin-top: 14px; } .pasos .botonregistro { display: block; font-size: 12.5px; width: 110px; padding: 13px 10px; background: var(--grisdark); color: var(--blanco); border-radius: 8px; cursor: pointer; text-align: center; transition: all 0.18s ease; font-weight: bold; letter-spacing: 0.3px; } .pasos .botonregistro:hover { background: var(--color2); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,51,255,0.3); } .sumatotal { display: block; width: calc(100% - 34px); max-width: calc(400px - 34px); padding: 22px 17px 18px 17px; background: #f0f4ff; color: var(--color1); border-radius: 12px; border-bottom: solid 4px var(--color2); border: 1px solid rgba(0,51,255,0.15); text-align: center; box-shadow: 0 4px 18px rgba(0,51,255,0.1); } .sumatotal span.promoOK { font-size: 22px; color: var(--exito); font-weight: bold; } #desc { display: none; } .sumatotal div { display: inline-block; height: 10px; width: 7px; } #respuesta-codigo { display: block; padding: 4px; color: var(--color1); } .grid-validar { display: grid; grid-template-columns: 1fr 100px; align-items: center; } .grid-validar span.validar-codigo { line-height: 17px; background: var(--color1); color: var(--blanco); border-radius: 6px; font-weight: bold; } .box-respuestacodigo { display: block; padding: 12px; background: var(--bluelight); border: 1.5px solid rgba(0,51,255,0.15); border-radius: 8px; } #respuesta-codigo .invalido { display: inline-block; color: var(--error); font-weight: bold; } #respuesta-codigo .valido { display: inline-block; color: var(--exito); font-weight: bold; } #cale1, #cale2 { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); display: block; width: 88%; max-width: 460px; margin: 0 auto; border: 2px solid var(--color2); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,51,255,0.2); } .boxfecha { display: block; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 51, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 100; } .infosalida { display: block; padding: 20px 12px; background: var(--color2-75); text-align: center; } .grid-calendarios { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .box-calendarios { position: relative; display: block; max-width: 440px; margin: 0 auto; } .prevMes { display: block; position: absolute; top: 1px; left: -8px; width: 44px; height: 44px; z-index: 10; border-radius: 100px; border: 3px solid var(--blanco); background: var(--color1) url(https://igp.igna.site/!res1--icon--arrowleft.svg?1) center center / 22px no-repeat; transition: all 0.18s ease; box-shadow: 0 4px 14px rgba(0,0,51,0.2); } .prevMes:hover { background-color: var(--color2); transform: translateX(-2px); } .nextMes { display: block; position: absolute; top: 1px; right: -8px; width: 44px; height: 44px; z-index: 10; border-radius: 100px; border: 3px solid var(--blanco); background: var(--color1) url(https://igp.igna.site/!res1--icon--arrowright.svg?1) center center / 22px no-repeat; transition: all 0.18s ease; box-shadow: 0 4px 14px rgba(0,0,51,0.2); } .nextMes:hover { background-color: var(--color2); transform: translateX(2px); } .calendario { padding: 4px; max-width: 950px; background: var(--blanco); border: 2px solid rgba(0,51,255,0.2); border-radius: 12px; font-size: 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.07); } .calendario.reservas { background: var(--blanco); border: 1px solid rgba(0,51,255,0.15); } .calendario.reservas > div { cursor: default; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0px; } .cal-mes { display: block; text-align: center; font-size: 16px; margin-bottom: 4px; padding: 14px 8px; color: var(--blanco); font-weight: bold; background: var(--color1); border-radius: 8px 8px 0 0; letter-spacing: 0.3px; } .calendario.reservas .cal-mes { font-weight: bold; color: var(--blanco); background: var(--color1); padding: 16px 8px; } .cal-header { display: inline-block; text-align: center; padding: 7px 4px 5px 4px; background: var(--color2); color: var(--blanco); margin: 2px 2px 4px 2px; font-size: 12px; border-radius: 4px; font-weight: bold; letter-spacing: 0.5px; } .cal-dia { padding: 4px 3px 2px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--grislight); margin: 1px; border-radius: 4px; transition: background 0.15s ease; } .cal-dia.border { border: 1px solid var(--grisclaro); } .cal-dia.today { border: 2px solid var(--color2); background: #eef4ff; } form .cal-dia label, .cal-dia label { margin-bottom: 5px; font-weight: bold; color: var(--grisdark); } form .cal-dia input, .cal-dia input { width: 100%; text-align: center; padding: 7px 2px; box-sizing: border-box; background: var(--blanco); border-color: var(--grisclaro); margin-top: 0; } form .cal-dia .dia-reservas, .cal-dia .dia-reservas { width: 100%; text-align: center; padding: 7px 2px 3px 2px; box-sizing: border-box; margin-top: 0; background: var(--grisclaro); color: var(--grisoscuro); } form .cal-dia span { width: 100%; text-align: center; padding: 5px 2px 2px 2px; box-sizing: border-box; margin-top: 0; background: var(--grisclaro); color: var(--grisoscuro); font-size: 12.5px; } form .cal-dia .total-reservas, .cal-dia .total-reservas { width: 100%; text-align: center; padding: 7px 2px 3px 2px; box-sizing: border-box; margin-top: 0; color: var(--grisdark); } .cal-dia.today1 .dia-reservas { background: var(--grisoscuro); color: var(--blanco); } .cal-dia.today .dia-reservas { background: var(--color2); color: var(--blanco); } .cal-dia.today .total-reservas { color: var(--color1); font-weight: bold; } .cal-vacio { background-color: transparent; border: none; } .asignar-mes { display: grid; grid-template-columns: 1fr auto 70px; align-items: center; margin: 5px 0; background-color: var(--bluelight); padding: 10px 8px; text-align: right; border-radius: 8px; border: 1px solid rgba(0,51,255,0.1); color: var(--grisdark); } form .asignar-mes input { padding: 7px 5px; margin: 0 3px; width: 100px; background: var(--blanco); } .scrollfechas span { font-weight: bold; color: var(--color2); } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance:textfield; } .regPaso3 .gridpaso3 { display: grid; grid-template-columns: 1fr auto; gap: var(--gap-default); align-items: start; font-size: 14px; color: var(--grisdark); } .grid_altaPrecios { display: grid; grid-template-columns: 1fr auto; gap: var(--gap-default); align-items: start; font-size: 14px; color: var(--grisdark); } .regPaso3 .gridpaso3 .regprecio, .grid_altaPrecios .regprecio { display: block; background: var(--color1); color: var(--blanco); padding: 0 8px; width: calc(100% - 8px); line-height: 40px; text-align: center; font-weight: bold; font-size: 13px; border-radius: 6px; } .grid_altaPrecios .regprecio { background: var(--grisoscuro); padding: 0 12px; width: calc(100% - 24px); } .xmlprimario { margin-left: 0; padding-left: 5px; } .xmlsecundario { margin-left: 20px; padding-left: 5px; } .subtitulo_box.xmltree { padding: 8px 10px 4px 10px; background: var(--grislight); color: var(--color2); font-size: 15px; margin-top: 15px; border-left: 0px; display: flex; align-items: center; justify-content: space-between; } .xmltree .derecha { margin-right: 10px; font-weight: bold; font-size: 25px; line-height: 1; } .tree_toggle { margin-bottom: 50px; } .node-group-builder.xmlprimario > .subtitulo_box.xmltree { color: var(--blanco); background: var(--color3); padding: 12px 10px; text-transform: uppercase; border-left: 5px solid var(--grisclaro); } .node-group-builder.xmlprimario .node-group-builder.xmlsecundario > .subtitulo_box.xmltree { background: var(--grislight); color: var(--color2); padding: 12px 10px; border-left: 0px; } .node-group-builder.xmlprimario .node-group-builder.xmlsecundario .node-group-builder.xmlsecundario > .subtitulo_box.xmltree { background: var(--blanco); color: var(--color3); font-size: 15px; padding: 6px 10px 4px 10px; border-bottom: 0; border-left: 4px solid var(--color3); margin-top: 20px; margin-bottom: -5px; border-radius: 3px; } .node-group-builder.xmlprimario .node-group-builder.xmlsecundario .node-group-builder.xmlsecundario .node-group-builder.xmlsecundario > .subtitulo_box.xmltree { background: var(--blanco); color: var(--negro); font-size: 14px; padding: 6px 10px 6px 2px; border-bottom: 0px; margin-bottom: -12px; margin-top: 10px; border-left: 0px; } .modo-tree { margin-bottom: 25px; } .centrar { display: block; margin-left: auto; margin-right: auto; width: fit-content; } .popup { display: block; position: fixed; width: 100%; height: 100%; background: var(--blanco); left: 0; top: 0; z-index: 10000; } .popup.absolute { position: absolute; } .popup.relative { position: relative; height: auto; min-height: 10%; } .popup > div.guia_text { position: relative; width: 92%; max-width: 550px; margin: 0 auto; padding: 20px 10px; background: var(--blanco); border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.07); font-size: 15px; line-height: 1.2; letter-spacing: 0; } .popup .circulo { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color1); color: var(--blanco); text-align: center; font-weight: bold; font-size: 15px; width: 30px; height: 30px; flex-shrink: 0; } .item-guia { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; line-height: 1.1; background: var(--grislight); border-radius: 8px; padding: 4px 8px; } .costo_dominio { display: block; margin: 0; padding: 0; } .costo_dominio li { margin: 0 0 5px 0; padding: 4px; list-style: none; background-color: var(--blanco); } div.oculto, .oculto, #hide, #redvacios, #subir, #redirige, #vacios, #correctos, form input.oculto, #show, #resetform { display: none; } .popup.nobg, div.nobg, .nobg { background: none !important; box-shadow: none !important; } .timeline-steps { display: flex; justify-content: space-between; align-items: flex-start; margin: 40px 0; position: relative; padding: 0 10px; } .timeline-steps::before { content: ''; position: absolute; top: 20px; left: 10%; right: 10%; height: 3px; background: var(--grisclaro); z-index: 1; } .step-item { position: relative; z-index: 2; width: 32%; text-align: center; } .step-number { width: 42px; height: 42px; background: var(--blanco); border: 3px solid var(--grisclaro); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 15px auto; font-weight: bold; color: var(--gris); transition: all 0.3s ease; font-size: 16px; } .step-title { font-size: 15px; font-weight: bold; color: var(--gris); margin-bottom: 20px; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; } .step-content { min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .step-item.active .step-number { background: var(--color2); border-color: var(--color2); color: var(--blanco); box-shadow: 0 0 15px rgba(0, 51, 255, 0.4); } .step-item.active .step-title { color: var(--color1); } .step-item.completed .step-number { background: var(--exito); border-color: var(--exito); color: var(--blanco); } .step-item.completed .step-title { color: var(--exito); } .step-item.disabled { opacity: 0.5; } .step-item.disabled .boton-big, .step-item.disabled .boton-big:hover { pointer-events: none !important; background: var(--gris) !important; box-shadow: none !important; transform: none !important; } .margin0 { margin: 0 !important; } .margin5 { margin: 5px !important; } .margin10 { margin: 10px !important; } .margin15 { margin: 15px !important; } .margin20 { margin: 20px !important; } .margin25 { margin: 25px !important; } .padding0 { padding: 0 !important; } .padding5 { padding: 5px !important; } .padding10 { padding: 10px !important; } .padding15 { padding: 15px !important; } .padding20 { padding: 20px !important; } .padding25 { padding: 25px !important; } .width25 { width: 25% !important; } .width50 { width: 50% !important; } .width75 { width: 75% !important; } .width100 { width: 100% !important; } .radius5 { border-radius: 5px !important; } .radius10 { border-radius: 10px !important; } .radius15 { border-radius: 15px !important; } .radius20 { border-radius: 20px !important; } .radius25 { border-radius: 25px !important; } .radius50 { border-radius: 50% !important; } .radius100 { border-radius: 100% !important; } .block, .infoayuda.visible { display: block; } .center { display: flex; justify-content: center; align-items: center; } .center.block { display: block; text-align: center; } .center.block > * { margin: 0 auto; } b.bono_saldo { color: var(--exito); font-size: 14px; } form label.checkbox input:checked ~ span b.bono_saldo { color: var(--blanco70); } .max200 { max-width: 200px !important; } .max300 { max-width: 300px !important; } .max400 { max-width: 400px !important; } .max500 { max-width: 500px !important; } .max600 { max-width: 600px !important; } .max700 { max-width: 700px !important; } .max800 { max-width: 800px !important; } label.checkbox.disabled { opacity: 0.6; cursor: not-allowed !important; } label.checkbox.disabled * { cursor: not-allowed !important; } label.checkbox.disabled input[type="checkbox"] { opacity: 0.7; } form input[type="submit"]:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } form input[type="submit"]:disabled:hover { background: var(--color1); transform: none; box-shadow: none; } body.noscroll { overflow: hidden; } .btn-flotante-ayuda { position: fixed; bottom: 20px; right: 20px; z-index: 2000; background: var(--color2); color: var(--blanco); padding: 10px 18px; border-radius: 50px; font-weight: bold; cursor: pointer; box-shadow: 0 5px 20px var(--negro50); transition: background 0.3s, transform 0.2s; border: 2px solid var(--color3) } .btn-flotante-ayuda:hover { background: var(--color1); } .modal-ayuda-completa { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--color1-90); z-index: 10000; display: flex; flex-direction: column; backdrop-filter: blur(10px); } .modal-ayuda-contenedor { max-width: 1100px; width: 100%; height: 100%; margin: 0 auto; display: flex; flex-direction: column; background: transparent; } .modal-ayuda-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px 5px 20px; border-bottom: 1px solid var(--blanco30); } .modal-ayuda-titulo { font-size: 1.25rem; color: var(--blanco); font-weight: bold; } .btn-cerrar-ayuda { font-size: 3rem; color: var(--blanco70); cursor: pointer; transition: color 0.2s; } .btn-cerrar-ayuda:hover { color: var(--blanco); } .modal-ayuda-body { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 24px 20px; } .chat-ayuda-conversacion { max-width: 100%; width: 100%; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; height: 100%; padding-right: 8px; } .chat-bienvenida { font-size: 1.05rem; color: var(--blanco70); text-align: center; line-height: 1.1; margin-top: auto; margin-bottom: auto; max-width: 600px; align-self: center; padding: 40px 20px; background: rgba(255, 255, 255, 0.02); border-radius: 16px; border: 2px dashed var(--blanco30); } .chat-pregunta { font-size: 0.95rem; color: var(--blanco); text-align: left; align-self: flex-end; background: var(--color2); padding: 12px 18px; border-radius: 18px 18px 4px 18px; max-width: 75%; line-height: 1.4; box-shadow: 0 4px 12px var(--negro10); } .chat-respuesta { font-size: 1.05rem; color: var(--blanco90); text-align: left; align-self: flex-start; line-height: 1.6; max-width: 85%; white-space: pre-wrap; background: rgba(255, 255, 255, 0.05); padding: 16px 20px; border-radius: 18px 18px 18px 4px; box-shadow: 0 4px 12px var(--negro10); border: 1px solid rgba(255, 255, 255, 0.08); } .chat-respuesta b, .chat-respuesta strong, .chat-bienvenida strong { color: var(--color3); font-weight: normal; } .chat-cargando { display: flex; align-items: center; gap: 6px; height: 15px; padding: 4px 0 0 0; } .chat-cargando span { width: 6px; height: 6px; background: var(--blanco70); border-radius: 50%; display: inline-block; animation: brincarPuntos 1.2s infinite ease-in-out; } .chat-cargando span:nth-child(1) { animation-delay: 0s; } .chat-cargando span:nth-child(2) { animation-delay: 0.15s; } .chat-cargando span:nth-child(3) { animation-delay: 0.3s; } @keyframes brincarPuntos { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .modal-ayuda-footer { padding: 24px 20px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(to top, var(--color1) 70%, transparent); } #modal-ayuda-completa .form-ayuda-chat { max-width: 100%; width: 100%; display: flex; gap: 12px; align-items: center; background: rgba(255, 255, 255, 0.07); padding: 8px 8px 8px 18px; border-radius: 10px; border: 1px solid var(--blanco30); transition: border-color 0.3s, box-shadow 0.3s; } #modal-ayuda-completa .form-ayuda-chat:focus-within { border-color: var(--color3); box-shadow: 0 0 10px var(--color3-25); } #modal-ayuda-completa .form-ayuda-chat input { flex: 1; background: var(--blanco); border: none; color: var(--grisdark); font-size: 1.0rem; padding: 8px; font-family: 'Metropolis', sans-serif; cursor: text; border-radius: 6px; } #modal-ayuda-completa .form-ayuda-chat input:focus { outline: none; } #modal-ayuda-completa .form-ayuda-chat button { background: var(--color2); color: var(--blanco); border: none; padding: 12px 10px; font-size: 0.95rem; font-family: 'Metropolis', sans-serif; font-weight: bold; border-radius: 7px; cursor: pointer; transition: background 0.3s, transform 0.1s; } #modal-ayuda-completa .form-ayuda-chat button:hover { background: var(--color3); } #modal-ayuda-completa .form-ayuda-chat button:active { transform: scale(0.97); } #modal-ayuda-completa .form-ayuda-chat button:disabled { background: var(--grisoscuro); color: var(--gris); cursor: not-allowed; opacity: 0.6; } .ayuda-contador-caracteres { font-family: 'Metropolis', sans-serif; font-size: 0.8rem; color: var(--blanco50); text-align: right; padding-right: 20px; transition: color 0.3s; } .ayuda-contador-caracteres.cumplido { color: var(--exito); } .modal-ayuda-body { position: relative; } .chat-ayuda-scroll-indicador { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); background: var(--color2); color: var(--blanco); width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); z-index: 10; animation: rebote-ayuda 2s infinite ease-in-out; } .chat-ayuda-scroll-indicador:active { transform: translateX(-50%) scale(0.95); } .chat-ayuda-scroll-indicador svg { display: block; } .chat-ayuda-scroll-indicador.oculto { opacity: 0; visibility: hidden; pointer-events: none; } @keyframes rebote-ayuda { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } } .campo-solo-lectura { opacity: 0.5; cursor: default; } .center-margin { margin-left: auto; margin-right: auto; } .margin-b5 { margin-bottom: 5px; } .margin-b10 { margin-bottom: 10px; } .margin-t20 { margin-top: 20px; } .btn-feedback { background-color: var(--color2); color: var(--blanco); padding: 8px 10px 5px 10px; border-radius: 5px; display: block; font-size: 12.5px; width: 100%; text-align: center; letter-spacing: 0; } .log-item, .log-item * { cursor: pointer; } .log-item { display: block; text-decoration: none; background: var(--blanco); border: 1.5px solid var(--grisclaro); border-radius: 8px; padding: 15px 20px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: all 0.2s ease; } .log-item:hover { background-color: var(--grislight); border-color: var(--color2); box-shadow: 0 4px 8px rgba(0,0,0,0.05); } .log-item.border-error { border-left: 4px solid var(--error); } .log-message { font-size: 15px; font-weight: 500; color: var(--negro); margin-bottom: 8px; line-height: 1.4; } .log-meta { font-size: 12px; color: var(--grisoscuro); display: flex; gap: 15px; align-items: center; } .log-user { color: var(--color2); font-weight: 600; background: var(--bluelight); padding: 2px 8px; border-radius: 4px; } .log-date { color: var(--grisoscuro); } .chat-container { display: flex; flex-direction: column; gap: 20px; padding: 20px; background: var(--grisblanco); border-radius: 12px; border: 1px solid var(--grisclaro); margin-bottom: 30px; } .chat-bubble-wrapper { display: flex; flex-direction: column; max-width: 100%; } .chat-bubble-wrapper.user { align-self: flex-end; align-items: flex-end; } .chat-bubble-wrapper.bot { align-self: flex-start; align-items: flex-start; } .chat-container .chat-pregunta { background: var(--color2); color: var(--blanco); font-size: 0.95rem; } .chat-container .chat-respuesta { background: var(--blanco); color: var(--negro90); border: 1px solid var(--grisclaro); font-size: 0.95rem; } .chat-container .chat-respuesta strong { color: var(--color2); font-weight: bold; } .chat-container .chat-meta { font-size: 11px; color: var(--grisoscuro); margin-top: 4px; padding: 0 8px; } .chat-container .chat-reasoning { font-size: 12px; background: rgba(255, 210, 70, 0.08); border-left: 3px solid var(--alerta); padding: 10px 14px; border-radius: 4px; color: var(--grisoscuro); margin-bottom: 8px; align-self: flex-start; max-width: 85%; } @media (max-width: 768px) { .grid5 { grid-template-columns: repeat(2, 1fr); } .botones-inicio { grid-template-columns: repeat(2, 1fr); } #grid3, .grid3 { grid-template-columns: 1fr 1fr; } #grid2, .grid2, #grid3, .grid3 { grid-template-columns: 1fr; } .izq { order: 1;} .der { order: 2;} #grid2.separador, .grid2.separador, #grid3.separador .grid3.separador { gap: 30px; } .rightstars { display: block; width: 100%; text-align: right; } #usuarios_inicio { font-size: 13px; } .botones-inicio { grid-template-columns: repeat(1, 1fr); } .regPaso3 .gridpaso3 { font-size: 12px; font-weight: normal; } .info1 { font-size: 12px; line-height: 1.1; } #allbox { display: grid; grid-template-columns: 1fr; } #menu { display: none; position: fixed; width: calc(100% - 0px); max-width: 280px; padding: 0; height: 100%; background: var(--color1); left: 0%; top: 0; z-index: 190; border-right: none; } .icono-menu { display: block; } .titulo1 { font-size: 20px; letter-spacing: -0.2px; max-width: 100%; margin: 0 auto; padding-top: 54px; padding-bottom: 16px; } .titulo1.centrado { font-size: 28px; } #boxprincipal { margin: 0 10px 50px 10px; padding: 20px 16px; } .boxFotoProducto img { transform: translate(-50%, -50%); } .cal-grid, .cal-grid input { font-size: 11.5px; } .cal-grid input { padding: 5px 1px; } .grid-calendarios { display: grid; grid-template-columns: 1fr; gap: 20px 5px; } form input.botonfloat { right: 50%; transform: translateX(50%); } .contenido { padding: 0 12px 60px 12px; } .timeline-steps { flex-direction: column; align-items: center; gap: 30px; } .timeline-steps::before { display: none; } .step-item { width: 100%; max-width: 300px; } .step-content { min-height: auto; } .modal-ayuda-header { padding: 15px 20px 5px 20px; } .modal-ayuda-titulo { font-size: 1.1rem; } .btn-cerrar-ayuda { font-size: 2.5rem; } .modal-ayuda-body { padding: 15px 20px; } .chat-bienvenida { font-size: 0.92rem; padding: 20px 15px; } .chat-pregunta { font-size: 0.9rem; max-width: 90%; padding: 10px 14px; } .chat-respuesta { font-size: 0.95rem; max-width: 100%; line-height: 1.45; padding: 12px 16px; } .modal-ayuda-footer { padding: 15px 20px; } #modal-ayuda-completa .form-ayuda-chat { gap: 10px; padding: 6px 6px 6px 14px; } #modal-ayuda-completa .form-ayuda-chat input { font-size: 0.9rem; padding: 6px 0; } #modal-ayuda-completa .form-ayuda-chat button { padding: 10px 8px; font-size: 0.85rem; } .ayuda-contador-caracteres { padding-right: 10px; font-size: 0.75rem; } }