: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-75: #000033c9; --color1-50: #00003380; --color1-90: #000033ea; --color2: #0033ff; --color3: #00bbff; --color3-25: #00bbff46; --grisblanco: #f7f7f7; --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; } @font-face { font-family: 'Metropolis'; src: url('https://igpush.com/fonts/Metropolis-Regular.eot'); src: url('https://igpush.com/fonts/Metropolis-Regular.eot?#iefix') format('embedded-opentype'), url('https://igpush.com/fonts/Metropolis-Regular.woff2') format('woff2'), url('https://igpush.com/fonts/Metropolis-Regular.woff') format('woff'), url('https://igpush.com/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://igpush.com/fonts/Simpel-Medium.otf'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Louis-George-Cafe'; src: url('https://igpush.com/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; } .center { display: flex; justify-content: center; align-items: center; } .center.block { display: block; text-align: center; } .center.block > * { margin: 0 auto; } .version { position: fixed; bottom: 6px; right: 8px; z-index: -1; font-size: 11px; color: var(--gris); letter-spacing: 0.3px; } #alerta, #error, #exito { display: block; text-align: center; padding: 12px 10px; margin-bottom: 14px; font-size: 16px; border-radius: 7px; letter-spacing: 0.2px; border-left: 7px solid transparent; border-bottom: 1px solid transparent; } #alerta, .alerta, .tolerancia { background: #fffae6; color: #7C5703; border-color: var(--alerta); box-shadow: 0 2px 12px rgba(255, 210, 70, 0.25); } #error, .error, .vencido { background: #ffe6e6; color: #c0000a; border-color: var(--error); box-shadow: 0 2px 12px rgba(255, 0, 0, 0.12); } #exito, .exito, .vigente { background: #ecffec; color: #1e7e1e; border-color: var(--exito); box-shadow: 0 2px 12px rgba(61, 197, 61, 0.18); } .grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .disable-group { opacity: 0.45; filter: grayscale(0.3); } .active-group { opacity: 1; } @media screen and (max-width: 800px) { .grid5 { grid-template-columns: repeat(2, 1fr); } } #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); } .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; } .info1 { display: block; padding: 10px 14px; font-size: 14px; background: #eef4ff; color: #1a2a80; margin: 8px 0; border-bottom: 2px solid #a0b4f0; border-left: solid 4px var(--color2); border-radius: 6px; font-weight: normal; } .info2 { display: block; padding: 12px 8px; font-size: 14px; color: var(--grisoscuro); margin: 10px 0; border-radius: 6px; font-weight: normal; text-align: center; background: var(--grislight); border: 1px dashed var(--grisclaro); } .info3 { display: block; padding: 10px 14px; font-size: 12.8px; background: #fffbea; color: #7C5703; margin: 8px 0; border-bottom: 2px solid rgba(255,210,70,0.6); border-left: solid 4px var(--alerta); border-radius: 6px; 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 { 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.registro { width: calc(94% - 48px); max-width: 800px; color: var(--color1); background: var(--blanco); padding: 28px 24px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 51, 0.1); border-top: 4px solid var(--color2); } 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 label, form textarea { display: block; position: relative; padding: 11px 12px; margin: 7px 0; width: calc(100% - 12px); width: 100%; border: 1.5px solid var(--color3); background: var(--blanco); outline: none; border-radius: 8px; color: var(--grisdark); font-family: inherit; font-size: 14px; transition: border-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 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 { border-color: var(--color2); box-shadow: 0 0 0 3px rgba(0, 51, 255, 0.1); } form label.file { width: calc(100% - 12px); } 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 input[type="email"] { transform: lowercase; } form label { cursor: pointer; width: calc(100% - 16px); width: 99.5%; color: var(--grisoscuro); font-size: 13px; letter-spacing: 0.2px; } form input[type="submit"] { display: inline-block; padding: 13px 28px; margin: 8px 0; width: 55%; 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; } 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 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; background: var(--blanco) url(https://igpush.com/!res1--icon--select.svg?0) right 10px center / 13px no-repeat; } 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: none; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; } #menu a:not(.inicio-salir a) { display: flex; align-items: center; color: var(--blanco70); border-radius: 8px; background: transparent; padding: 10px 10px; margin: 2px 10px; font-size: 15px; font-weight: normal; letter-spacing: 0.2px; border-left: 3px solid transparent; transition: all 0.2s ease; } #menu a:hover:not(.inicio-salir a) { background: rgba(0, 51, 255, 0.3); color: var(--blanco); border-left-color: var(--color3); padding-left: 20px; } #menu img { display: block; width: 90px; margin: 28px auto 20px auto; filter: brightness(0) invert(1); opacity: 0.92; } .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; text-align: left; margin: 0 0 10px 0; padding: 10px 5px; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 12px; color: var(--blanco30); text-align: center; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; } .inicio-salir { display: grid; grid-template-columns: 1fr 1fr; justify-content: center; gap: 6px; padding: 10px 5px; text-align: center; } .inicio-salir a { background-color: var(--negro50); color: var(--gris); border-radius: 6px; font-size: 14px; padding: 9px 4px; margin: 0 auto; width: 100%; transition: all 0.18s ease; text-align: center; display: flex; justify-content: center; align-items: center; } .inicio-salir a:hover { background: var(--negro); color: var(--blanco); border: 0px; 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: 30px 4px 28px 4px; font-size: 30px; text-align: left; font-weight: 700; text-transform: uppercase; border-bottom: 2px solid var(--grisclaro); margin-bottom: 28px; letter-spacing: -0.5px; } .titulo1.centrado { font-size: 44px; position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); border-top: 3px solid var(--grisclaro); border-bottom: 3px solid var(--grisclaro); padding: 24px 36px; text-align: center; background: none; letter-spacing: -1px; } .columna-plataforma { background-color: var(--blanco); overflow: hidden; border: none; border-radius: 16px; padding: 0; box-shadow: 0 4px 24px rgba(0, 0, 51, 0.1); transition: all 0.22s ease; } .columna-plataforma:hover { box-shadow: 0 12px 40px rgba(0, 51, 255, 0.18); } .columna-plataforma a.editar { display: flex; align-items: center; padding: 10px 6px 10px 6px; margin: 10px; color: var(--color1); background-color: var(--bluelight-dark); border-bottom: 1px solid var(--grislight); border-left: 5px solid transparent; border-radius: 6px; font-size: 14px; transition: all 0.18s ease; } .columna-plataforma a.editar:hover { border-left-color: var(--color2); padding-left: 12px; } .boton-big, a.boton-big { padding: 18px 28px; font-size: 16px; 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: 14px ; background: var(--color1); color: var(--blanco); text-align: left; font-size: 15.5px; font-weight: bold; letter-spacing: 0.3px; border-bottom: 3px solid var(--color2); } .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); } .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: 16px; padding: 28px 24px; border: none; box-shadow: 0 4px 24px rgba(0, 0, 51, 0.08); } #boxprincipal.max200, .max200 { max-width: 200px; } #boxprincipal.max300, .max300 { max-width: 300px; } #boxprincipal.max400, .max400 { max-width: 400px; } #boxprincipal.max500, .max500 { max-width: 500px; } #boxprincipal.max600, .max600 { max-width: 600px; } #boxprincipal.max700, .max700 { max-width: 700px; } #boxprincipal.max800, .max800 { max-width: 800px; } #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); } 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://igpush.com/!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://igpush.com/!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://igpush.com/!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://igpush.com/!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://igpush.com/!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; } .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); } div.margin0, .margin0, label.margin0, form input.margin0 { margin: 0; } .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; } .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://igpush.com/!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://igpush.com/!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://igpush.com/!res1--icon--editar.svg?0) right 8px center / 19px no-repeat; } .editar2 { background: url(https://igpush.com/!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-block; 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); } .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; } .titulo_box { display: block; text-align: center; font-size: 15px; margin: 0 0 20px 0; text-transform: uppercase; letter-spacing: 0.8px; background: var(--color1); border-radius: 12px; color: var(--blanco); padding: 22px 14px; font-weight: bold; } .titulo_box.hidenewvisita { margin: 10px 0 10px 0; } .subtitulo_box { display: block; padding: 12px 14px; font-size: 15px; border-radius: 8px; color: var(--blanco); background: var(--color3); margin-bottom: 14px; border-left: 4px solid var(--color2); font-weight: bold; letter-spacing: 0.2px; } .subtitulo_box.center { text-align: center; } .uno { display: block; padding: 12px 14px; color: var(--grisdark); border: 1px solid var(--grisclaro); transition: all 0.18s ease; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.05); } .uno { background-color: var(--grisblanco); } .uno.lista-pagar { background-color: var(--bluelight); color: var(--grisdark); } .uno:hover:not(.lista-pagar) { background-color: var(--bluelight); box-shadow: 0 4px 10px rgba(0, 51, 255, 0.1); } .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; } .uno.reserva { border-left: solid 4px var(--color2); margin-bottom: 10px; } .uno.big { font-size: 15px; padding: 14px 14px; } .uno.alto, .dos.alto { padding: 12px 6px; } .uno.alto2, .dos.alto2 { padding: 12px 6px; } .uno .mini_info, label .mini_info { display: block; padding: 1px 0 3px 0; font-size: 11px; color: var(--gris); } .uno .nombre, .uno .titulo { display: block; padding: 2px 0 0 2px; color: var(--color1); font-size: 14px; font-weight: bold; } .dos { display: flex; align-items: center; font-size: 12px; color: var(--grisoscuro); background: var(--grislight); border: 1px solid var(--grisclaro); padding: 0 8px; text-align: left; border-radius: 6px; } .dos.dark { color: var(--blanco); background: var(--grisdark); } .dos.center, .center { text-align: center; } .dos span, .dos div { display: block; width: 100%; } span.top, div.top { display: block; padding: 10px 8px; border: 0px; font-size: 12px; color: var(--gris); margin-bottom: 6px; text-align: left; border-bottom: 2px solid var(--grisclaro); border-left: 3px solid 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; } .grid-1fr-auto { display: grid; grid-template-columns: 1fr auto; gap: 5px 0; } .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: 12px 10px; background: var(--grislight); line-height: 1.25; border-radius: 6px; color: var(--grisdark); } .info_left { display: block; padding: 10px 10px; color: var(--blanco); background: var(--grisdark); font-size: 12px; border-radius: 6px; } .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 { 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: 3px 10px; font-size: 11px; letter-spacing: 0.4px; } div.activa, span.activa { border-right: solid 5px var(--exito); } div.inactiva, span.inactiva { border-right: solid 5px var(--grisoscuro); } .infostatus.true { background: #e8fbe8; color: #1a7a1a; border: 1px solid rgba(61,197,61,0.35); } .infostatus.false { background: var(--grislight); color: var(--grisoscuro); border: 1px solid var(--grisclaro); } .border-vigente { border-left: 5px solid var(--exito); } .border-tolerancia { border-left: 5px solid var(--error); } .border-vencido { border-left: 5px solid var(--grisclaro); } .grid-perfiles-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; margin-bottom: 6px; } .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 { text-align: center; font-size: 13px; font-weight: bold; min-width: 80px; color: var(--blanco); background: var(--color1); cursor: default; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,51,255,0.25); } #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: 34px; 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 0px; } #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://igpush.com/!res1--icon--star1.svg?x') repeat-x; background-size: contain; } .stars-inner { position: absolute; top: 0; left: 0; height: 100%; background: url('https://igpush.com/!res1--icon--star2.svg?x') repeat-x; background-size: contain; } .origenes, .segmentos { display: block; } .porcentual { display: block; width: 0%; min-width: 3px; height: 5px; 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-80); 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://igpush.com/!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://igpush.com/!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; border-left: 3px solid var(--negro10); padding-left: 5px; } .xmlsecundario { margin-left: 20px; border-left: 1px solid var(--negro10); padding-left: 5px; } .subtitulo_box.xmltree { padding: 8px 0 4px 8px; background: var(--grislight); color: var(--color2); font-size: 15px; margin-top: 15px; } .node-group-builder.xmlprimario > .subtitulo_box.xmltree { color: var(--blanco); background: var(--color1); padding: 15px 10px; } .node-group-builder.xmlprimario > .structure-tree-builder > .node-group-builder.xmlsecundario > .subtitulo_box.xmltree { background: var(--color3); border-left: 3px solid var(--color3-25); color: var(--blanco); padding: 8px 10px; } .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: 80%; max-width: 650px; margin: 0 auto; padding: 20px; background: var(--blanco); border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.07); font-size: 15px; } .popup .circulo { display: inline-block; border-radius: 50%; background: var(--color1); color: var(--blanco); text-align: center; font-weight: bold; font-size: 15px; padding: 5px; width: 30px; height: 30px; } .costo_dominio { display: block; margin: 0; padding: 0; } .costo_dominio li { margin: 0 0 5px 0; padding: 3px; list-style: none; background-color: var(--blanco); border-left: 2px solid var(--color1); } 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; } @media screen and (max-width: 920px) { .botones-inicio { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 850px) { #grid3, .grid3 { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 750px) { #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; } .icono-menu { display: block; } .titulo1 { font-size: 22px; letter-spacing: -0.5px; max-width: 100%; margin: 0 auto; padding-top: 54px; padding-bottom: 20px; } .titulo1.centrado { font-size: 34px; } #boxprincipal { margin: 0 10px 50px 10px; padding: 16px 14px; } .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; } } @media screen and (max-width: 600px) { } .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; } @media screen and (max-width: 800px) { .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; } }