/* Postly — «mesa editorial» en tonos de LinkedIn: área de trabajo clara, barra lateral azul marino, acento azul #0A66C2. El tema sigue al sistema; data-tema="claro|oscuro" en lo fija a mano. */ :root { --fondo: #F3F6F8; --superficie: #FFFFFF; --superficie-2: #EAF0F5; --borde: #DCE3EA; --borde-fuerte: #C0CBD6; --texto: #0F1B2D; --apagado: #56687A; --acento: #0A66C2; --acento-suave: #E2EEFB; --sobre-acento: #FFFFFF; --peligro: #C8323A; --peligro-suave: #FBE9EA; --aviso: #915907; --aviso-suave: #FCF1DC; --ok: #057642; --ok-suave: #E1F2E9; --lateral: #0B1F3A; --lateral-texto: #B4C3D6; --lateral-fuerte: #FFFFFF; --lateral-activo: rgba(255,255,255,.09); --lateral-acento: #70B5F9; --sombra: 0 1px 2px rgba(11,31,58,.05), 0 10px 28px -14px rgba(11,31,58,.18); --sombra-alta: 0 24px 64px -12px rgba(11,31,58,.35); --radio: 14px; --radio-campo: 10px; --titulos: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fondo: #0B1420; --superficie: #13202F; --superficie-2: #1B2B3D; --borde: #25384D; --borde-fuerte: #34495F; --texto: #E6EDF4; --apagado: #9FB0C2; --acento: #70B5F9; --acento-suave: rgba(112,181,249,.16); --sobre-acento: #0B1F3A; --peligro: #F0676B; --peligro-suave: rgba(229,72,77,.16); --aviso: #F5A524; --aviso-suave: rgba(245,165,36,.14); --ok: #5FD39A; --ok-suave: rgba(95,211,154,.14); --lateral: #07101B; --sombra: 0 1px 2px rgba(0,0,0,.3); --sombra-alta: 0 24px 64px -12px rgba(0,0,0,.7); color-scheme: dark; } } :root[data-tema="oscuro"] { --fondo: #0B1420; --superficie: #13202F; --superficie-2: #1B2B3D; --borde: #25384D; --borde-fuerte: #34495F; --texto: #E6EDF4; --apagado: #9FB0C2; --acento: #70B5F9; --acento-suave: rgba(112,181,249,.16); --sobre-acento: #0B1F3A; --peligro: #F0676B; --peligro-suave: rgba(229,72,77,.16); --aviso: #F5A524; --aviso-suave: rgba(245,165,36,.14); --ok: #5FD39A; --ok-suave: rgba(95,211,154,.14); --lateral: #07101B; --sombra: 0 1px 2px rgba(0,0,0,.3); --sombra-alta: 0 24px 64px -12px rgba(0,0,0,.7); color-scheme: dark; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; background: var(--fondo); color: var(--texto); font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--titulos); font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .5rem; } h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } a { color: var(--acento); text-underline-offset: 2px; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } /* Botones y campos */ .boton, button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font: inherit; font-weight: 600; font-size: .95rem; background: var(--acento); color: var(--sobre-acento); border: 1px solid transparent; border-radius: var(--radio-campo); padding: .55rem 1rem; cursor: pointer; text-decoration: none; transition: filter .15s, background .15s, border-color .15s; } .boton:hover, button:hover { filter: brightness(1.07); } button.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); } button.secundario:hover { filter: none; background: var(--superficie-2); } button.peligro { background: var(--peligro); color: #fff; } button:disabled { opacity: .5; cursor: default; filter: none; } .nota { color: var(--apagado); font-size: .9rem; } form.formulario { display: grid; gap: .85rem; } label { display: grid; gap: .3rem; font-size: .88rem; font-weight: 500; color: var(--apagado); } input, textarea, select { font: inherit; font-weight: 400; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-campo); padding: .55rem .7rem; width: 100%; transition: border-color .15s, box-shadow .15s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); } textarea { min-height: 8rem; resize: vertical; line-height: 1.5; } input[type="color"] { padding: .2rem; height: 2.6rem; cursor: pointer; } input[type="file"]::file-selector-button { font: inherit; font-weight: 600; font-size: .88rem; margin-right: .75rem; padding: .35rem .8rem; border-radius: 8px; border: 1px solid var(--borde-fuerte); background: var(--superficie-2); color: var(--texto); cursor: pointer; } label.casilla { display: flex; align-items: center; gap: .5rem; color: var(--texto); font-weight: 400; } label.casilla input { width: auto; } .contador { text-align: right; font-size: .8rem; color: var(--apagado); } .contador.exceso { color: var(--peligro); } .fila { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; } .fila > label { flex: 1; min-width: 12rem; } .acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; } progress { width: 100%; accent-color: var(--acento); } table { width: 100%; border-collapse: collapse; } td, th { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--borde); font-size: .9rem; } th { color: var(--apagado); font-weight: 500; } td code { font-size: .78rem; overflow-wrap: anywhere; } .dias { display: flex; gap: .35rem; flex-wrap: wrap; } .dias label { display: flex; flex-direction: row; align-items: center; gap: .3rem; padding: .3rem .6rem; border: 1px solid var(--borde-fuerte); border-radius: 999px; color: var(--texto); cursor: pointer; } .dias label:has(input:checked) { background: var(--acento-suave); border-color: var(--acento); } .dias input { width: auto; accent-color: var(--acento); } /* Estructura: barra lateral + área de trabajo */ .app { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); min-height: 100vh; } .lateral { background: var(--lateral); color: var(--lateral-texto); display: flex; flex-direction: column; gap: 1.25rem; padding: 1.4rem 1rem 1rem; position: sticky; top: 0; height: 100vh; } .marca { display: flex; align-items: center; gap: .6rem; padding: 0 .5rem; color: var(--lateral-fuerte); font-family: var(--titulos); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.03em; } .lateral .nueva { width: 100%; background: var(--lateral-acento); color: #0B1F3A; padding: .7rem 1rem; } nav.pestanas { display: grid; gap: .15rem; } nav.pestanas button { justify-content: flex-start; width: 100%; background: transparent; color: var(--lateral-texto); border: 0; border-radius: 10px; padding: .6rem .7rem; font-weight: 500; position: relative; } nav.pestanas button:hover { filter: none; background: var(--lateral-activo); color: var(--lateral-fuerte); } nav.pestanas button.activa { background: var(--lateral-activo); color: var(--lateral-fuerte); font-weight: 600; } nav.pestanas button.activa::before { content: ''; position: absolute; left: -1rem; top: 22%; bottom: 22%; width: 4px; border-radius: 0 4px 4px 0; background: var(--lateral-acento); } nav.pestanas svg { width: 1.2rem; height: 1.2rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } nav.pestanas .cuenta { margin-left: auto; min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: rgba(255,255,255,.12); color: var(--lateral-fuerte); font-size: .75rem; font-weight: 600; line-height: 1.5rem; text-align: center; } nav.pestanas .cuenta.alerta { background: #F5A524; color: #10122B; } nav.pestanas .cuenta:empty { display: none; } .lateral .pie { margin-top: auto; display: grid; gap: .6rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: .9rem; } .persona { display: flex; align-items: center; gap: .65rem; padding: 0 .3rem; min-width: 0; } .persona .inicial { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; background: rgba(255,255,255,.14); color: var(--lateral-fuerte); display: grid; place-items: center; font-weight: 700; } .persona strong { display: block; color: var(--lateral-fuerte); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .persona span { font-size: .78rem; } .persona > div { min-width: 0; } .lateral .pie .fila { flex-wrap: nowrap; } .lateral .pie button { flex: 1; background: transparent; color: var(--lateral-texto); border-color: rgba(255,255,255,.16); font-size: .85rem; padding: .45rem .6rem; } .lateral .pie button:hover { filter: none; background: var(--lateral-activo); color: var(--lateral-fuerte); } main.contenido { padding: 2rem clamp(1rem, 4vw, 3rem) 4rem; max-width: 62rem; width: 100%; margin: 0 auto; } section.panel { display: none; } section.panel.activa { display: block; } section.panel > h2, section.panel > .fila:first-child h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); margin-bottom: .25rem; } section.panel > .fila:first-child { align-items: center; margin-bottom: 1.25rem; } section.panel > h2 { margin-bottom: 1.25rem; } section.panel h3 { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--borde); } /* Avisos de la cabecera */ .avisos { display: grid; gap: .5rem; margin-bottom: 1.5rem; } .avisos:empty { display: none; } .aviso { background: var(--aviso-suave); color: var(--texto); border: 1px solid transparent; border-left: 4px solid var(--aviso); padding: .7rem .9rem; border-radius: 10px; font-size: .93rem; } .aviso.peligro { background: var(--peligro-suave); border-left-color: var(--peligro); } /* Publicaciones */ .lista { display: grid; gap: .8rem; } .dia { font-family: var(--titulos); font-weight: 650; font-size: 1rem; color: var(--texto); margin: 1.4rem 0 .1rem; } .dia::first-letter { text-transform: uppercase; } .lista > .dia:first-child { margin-top: 0; } .item { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem 1.2rem; box-shadow: var(--sombra); } .item .cabecera { display: flex; gap: .5rem .6rem; align-items: center; flex-wrap: wrap; } .item .cabecera strong { font-family: var(--titulos); font-size: 1.05rem; letter-spacing: -0.01em; } .item .estado, .sello { font-size: .74rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; background: var(--superficie-2); color: var(--apagado); white-space: nowrap; } .item .estado::first-letter { text-transform: uppercase; } .estado.agendada { background: var(--acento-suave); color: var(--acento); } .estado.publicada, .sello.ok { background: var(--ok-suave); color: var(--ok); } .estado.atrasada, .estado.por_verificar, .estado.publicando, .sello.falta { background: var(--aviso-suave); color: var(--aviso); } .estado.fallida { background: var(--peligro-suave); color: var(--peligro); } .item pre { white-space: pre-wrap; font: inherit; margin: .7rem 0; max-width: 46rem; overflow-wrap: anywhere; } .item pre.recortado { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; } .item .ver-mas { background: none; color: var(--acento); border: 0; padding: 0; font-size: .88rem; margin-bottom: .4rem; } .item .acciones { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--borde); } .vacio { border: 1.5px dashed var(--borde-fuerte); border-radius: var(--radio); padding: 2.5rem 1.5rem; text-align: center; color: var(--apagado); } .vacio strong { display: block; color: var(--texto); font-family: var(--titulos); font-size: 1.1rem; margin-bottom: .25rem; } /* Diálogos */ dialog { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: 18px; padding: 1.6rem; max-width: 38rem; width: calc(100% - 2rem); box-shadow: var(--sombra-alta); } dialog::backdrop { background: rgba(10,11,28,.55); backdrop-filter: blur(3px); } dialog[open] { animation: entra .18s ease-out; } dialog.ancho { max-width: 58rem; } dialog.mensaje { max-width: 30rem; } dialog.mensaje h2 { margin-bottom: .6rem; } dialog.mensaje p { margin: 0 0 1rem; white-space: pre-line; } dialog.mensaje label, dialog.mensaje .fila { margin-bottom: 1rem; } dialog.mensaje .fila input { flex: 1; min-width: 0; font-size: .85rem; } dialog.mensaje .acciones { justify-content: flex-end; margin-top: 0; } .dos-columnas { display: grid; gap: 1rem; align-items: start; } .vista-imagen { width: 100%; height: auto; max-height: 26rem; object-fit: contain; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie-2); } @keyframes entra { from { opacity: 0; transform: translateY(8px); } } /* Avisos breves */ #notificaciones { position: fixed; inset: auto 1.25rem 1.25rem auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; display: grid; gap: .6rem; width: min(24rem, calc(100vw - 2rem)); } #notificaciones:not(:popover-open) { display: none; } .toast { display: flex; gap: .75rem; align-items: start; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-left: 4px solid var(--ok); border-radius: 12px; padding: .85rem 1rem; box-shadow: var(--sombra-alta); animation: entra .22s ease-out; } .toast.error { border-left-color: var(--peligro); } .toast.info { border-left-color: var(--aviso); } .toast div { flex: 1; min-width: 0; } .toast strong { display: block; font-size: .85rem; margin-bottom: .1rem; } .toast p { margin: 0; font-size: .92rem; color: var(--apagado); overflow-wrap: anywhere; } .toast button { background: transparent; color: var(--apagado); border: 0; padding: 0 .25rem; font-size: 1.25rem; line-height: 1; } .toast.saliendo { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; } /* Selector de fecha y fichas */ .selector-fecha { display: grid; gap: .45rem; } .selector-fecha .etiqueta { font-size: .88rem; font-weight: 500; color: var(--apagado); } .fichas { display: flex; gap: .4rem; flex-wrap: wrap; } .fichas.deslizable { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .35rem; scrollbar-width: thin; scroll-snap-type: x proximity; } .ficha { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde-fuerte); border-radius: 10px; padding: .45rem .8rem; font-weight: 500; font-variant-numeric: tabular-nums; scroll-snap-align: center; } .ficha:hover { filter: none; border-color: var(--acento); } .ficha.elegida { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); font-weight: 700; } .dia-ficha { display: grid; justify-items: center; gap: .05rem; min-width: 3.7rem; padding: .4rem .5rem; flex: none; } .dia-ficha span { font-size: .72rem; text-transform: capitalize; opacity: .8; } .dia-ficha strong { font-family: var(--titulos); font-size: 1.15rem; } #zona-cambios { margin-top: 1rem; display: grid; gap: .5rem; } #resultado { margin-top: 1rem; } /* Páginas sueltas: privacidad, confirmación, entrada */ body.centrado { display: grid; place-items: center; min-height: 100vh; padding: 1rem; } .tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 1.75rem; max-width: 34rem; width: 100%; box-shadow: var(--sombra); } .tarjeta.texto { max-width: 44rem; } @media (min-width: 52rem) { .dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* Móvil: barra superior compacta y pestañas abajo, como una app. */ @media (max-width: 52rem) { .app { grid-template-columns: minmax(0, 1fr); } .lateral { position: sticky; top: 0; z-index: 3; height: auto; flex-direction: row; align-items: center; gap: .75rem; padding: .65rem 1rem; } .marca { font-size: 1.15rem; padding: 0; } .marca i { width: 1.6rem; height: 1.6rem; font-size: .95rem; } .lateral .nueva { width: auto; margin-left: auto; padding: .45rem .8rem; font-size: .88rem; } .lateral .pie { margin: 0; border: 0; padding: 0; } .lateral .pie .persona { display: none; } .lateral .pie button { padding: .4rem .55rem; } nav.pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; background: var(--lateral); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.08); } nav.pestanas button { flex-direction: column; gap: .15rem; font-size: .68rem; padding: .4rem .2rem; justify-content: center; border-radius: 8px; } nav.pestanas button.activa { background: transparent; color: var(--lateral-acento); } nav.pestanas button.activa::before { display: none; } nav.pestanas .cuenta { position: absolute; top: .1rem; left: 55%; min-width: 1.1rem; line-height: 1.1rem; font-size: .65rem; padding: 0 .25rem; } main.contenido { padding: 1.25rem 1rem 6rem; } #notificaciones { inset: auto .75rem 5rem .75rem; width: auto; } dialog { padding: 1.2rem; } dialog.mensaje .acciones { flex-direction: column-reverse; } dialog.mensaje .acciones button { width: 100%; } .item .acciones button { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { .toast, dialog[open] { animation: none; } * { transition: none !important; } } fieldset.bloque { border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.1rem; margin: .5rem 0 0; display: grid; gap: .7rem; background: var(--superficie); } fieldset.bloque legend { font-family: var(--titulos); font-weight: 650; padding: 0 .4rem; color: var(--texto); } .cuerpo-item { display: flex; gap: 1rem; align-items: flex-start; } .cuerpo-item pre { flex: 1; min-width: 0; } .miniatura { width: 9.5rem; height: 9.5rem; flex: none; object-fit: cover; border-radius: 12px; border: 1px solid var(--borde); margin: .7rem 0; cursor: zoom-in; } .tarjeta .vista-imagen { margin: .25rem 0 .5rem; max-height: none; } @media (max-width: 40rem) { .cuerpo-item { flex-direction: column; gap: 0; } .miniatura { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 0; } } .marca img { width: 1.9rem; height: 1.9rem; display: block; } @media (max-width: 52rem) { .marca img { width: 1.6rem; height: 1.6rem; } } /* Entrada: ocupa exactamente la pantalla (sin barra de desplazamiento), pensada primero para el celular. */ body.entrada { height: 100dvh; overflow: hidden; background: radial-gradient(70rem 42rem at 100% 0%, rgba(10,102,194,.16), transparent 62%), radial-gradient(40rem 30rem at 0% 100%, rgba(112,181,249,.14), transparent 60%), var(--fondo); } .entrada-marco { height: 100%; max-width: 74rem; margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) 1.25rem max(1rem, env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: clamp(.6rem, 2.2dvh, 1.4rem); } .entrada-marco > * { min-width: 0; } .entrada-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .entrada-marca { display: flex; align-items: center; gap: .55rem; margin: 0; font-family: var(--titulos); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.03em; } .entrada-marca img { width: 2rem; height: 2rem; } .entrada-de { margin: 0; font-size: .8rem; color: var(--apagado); text-align: right; } .entrada-relato h1 { font-size: clamp(1.55rem, 1rem + 3.1vw, 3.1rem); line-height: 1.06; letter-spacing: -0.035em; margin: 0 0 .55rem; text-wrap: balance; } .entrada-bajada { margin: 0; font-size: clamp(.95rem, .85rem + .45vw, 1.15rem); color: var(--apagado); max-width: 34rem; text-wrap: pretty; } .solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Demostración en tres tiempos, 12 s por vuelta: la IA redacta, tú apruebas, se publica. */ .demo { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(.5rem, 1.6dvh, 1rem); min-height: 0; } .demo-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--apagado); } .demo-pasos li { display: flex; align-items: center; gap: .4rem; padding-top: .55rem; border-top: 3px solid var(--borde-fuerte); animation: demo-paso 12s infinite; } .demo-pasos li span { width: 1.35rem; height: 1.35rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; background: var(--superficie-2); color: var(--apagado); animation: demo-numero 12s infinite; } .demo-pasos li:nth-child(2), .demo-pasos li:nth-child(2) span { animation-delay: 4s; } .demo-pasos li:nth-child(3), .demo-pasos li:nth-child(3) span { animation-delay: 8s; } .demo-escena { display: grid; place-items: center; min-height: 0; } .demo-tarjeta { grid-area: 1 / 1; width: min(100%, 27rem); max-height: 100%; overflow: hidden; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: clamp(.8rem, 2dvh, 1.25rem); box-shadow: var(--sombra-alta); display: grid; gap: .5rem; opacity: 0; animation: demo-tarjeta 12s infinite; } .demo-2 { animation-delay: 4s; } .demo-3 { animation-delay: 8s; } .demo-tarjeta p { margin: 0; } .demo-etiqueta { display: flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 600; color: var(--acento); } .demo-3 .demo-etiqueta { color: var(--ok); } .demo-titulo { font-family: var(--titulos); font-weight: 650; font-size: clamp(.98rem, .9rem + .4vw, 1.15rem); line-height: 1.2; letter-spacing: -0.015em; } .demo-linea { height: .55rem; border-radius: 999px; background: var(--superficie-2); transform-origin: left; animation: demo-escribe 12s infinite; } .demo-linea.corta { width: 58%; } .demo-1 .demo-linea:nth-of-type(4) { animation-delay: .25s; } .demo-1 .demo-linea:nth-of-type(5) { animation-delay: .5s; } .demo-2 .demo-linea { animation-delay: 4s; } .demo-3 .demo-linea { animation-delay: 8s; } .demo-pie { font-size: .8rem; color: var(--apagado); } .demo-botones { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .2rem; } .demo-boton { font-size: .78rem; font-weight: 600; padding: .4rem .75rem; border-radius: 8px; background: var(--acento); color: var(--sobre-acento); animation: demo-pulsa 12s 4s infinite; } .demo-boton.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde-fuerte); animation: none; } .demo-autor { display: flex; align-items: center; gap: .55rem; font-size: .78rem; color: var(--apagado); line-height: 1.25; } .demo-autor strong { color: var(--texto); font-size: .9rem; } .demo-avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: linear-gradient(135deg, #0A66C2, #70B5F9); flex: none; } @keyframes demo-tarjeta { 0% { opacity: 0; transform: translateY(14px) scale(.97); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-14px) scale(.97); } } @keyframes demo-paso { 0%, 33% { border-top-color: var(--acento); color: var(--texto); } 34%, 100% { border-top-color: var(--borde-fuerte); color: var(--apagado); } } @keyframes demo-numero { 0%, 33% { background: var(--acento); color: var(--sobre-acento); } 34%, 100% { background: var(--superficie-2); color: var(--apagado); } } @keyframes demo-escribe { 0%, 3% { transform: scaleX(0); } 12%, 100% { transform: scaleX(1); } } @keyframes demo-pulsa { 0%, 19% { transform: none; box-shadow: none; } 22% { transform: scale(.93); } 25%, 100% { transform: none; box-shadow: 0 0 0 6px var(--acento-suave); } } .entrada-acceso { display: grid; gap: .55rem; position: relative; } .entrada-boton { width: 100%; padding: .95rem 1rem; font-size: 1.05rem; border-radius: 999px; background: #0A66C2; color: #fff; box-shadow: 0 10px 24px -10px rgba(10,102,194,.7); } .entrada-boton:active { transform: scale(.985); } .entrada-invitacion { margin: 0; border-left: 3px solid var(--acento); padding: .45rem .7rem; background: var(--acento-suave); border-radius: 8px; font-size: .9rem; } .entrada-nota { margin: 0; text-align: center; font-size: .85rem; color: var(--apagado); } .entrada-permiso { font-size: .85rem; text-align: center; } .entrada-permiso summary { cursor: pointer; color: var(--acento); font-weight: 500; list-style: none; } .entrada-permiso summary::-webkit-details-marker { display: none; } /* El detalle se abre hacia arriba, sobre el contenido: la página nunca crece ni necesita desplazarse. */ .entrada-permiso p { position: absolute; left: 0; right: 0; bottom: calc(100% + .5rem); margin: 0; padding: .9rem 1rem; text-align: left; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra-alta); color: var(--texto); z-index: 2; animation: entra .18s ease-out; } .entrada-pie { margin: 0; display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; font-size: .75rem; color: var(--apagado); } @media (min-width: 60rem) { .entrada-marco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: 'cabecera cabecera' 'relato demo' 'acceso demo'; column-gap: 4.5rem; padding-block: 2rem; } .entrada-cabecera { grid-area: cabecera; } .entrada-relato { grid-area: relato; align-self: end; } .entrada-acceso { grid-area: acceso; align-self: start; max-width: 25rem; padding-bottom: 8dvh; } body.entrada .demo { grid-area: demo; align-self: center; height: min(100%, 30rem); } .demo-tarjeta { width: min(100%, 30rem); padding: 1.5rem; gap: .7rem; } body.entrada .entrada-nota, .entrada-permiso { text-align: left; } .demo-pasos { font-size: .9rem; } } /* Pantallas bajas (celular apaisado, ventanas chicas): primero se va el detalle, después la demostración. */ @media (max-height: 46rem) { body.entrada .demo-pie { display: none; } } @media (max-height: 40rem) { body.entrada .entrada-de { display: none; } body.entrada .demo-linea { height: .45rem; } } @media (max-height: 33rem) { body.entrada .demo { display: none; } body.entrada .entrada-marco { grid-template-rows: auto minmax(0, 1fr) auto; align-content: center; } } @media (prefers-reduced-motion: reduce) { .demo-tarjeta, .demo-pasos li, .demo-pasos li span, .demo-linea, .demo-boton { animation: none; } .demo-tarjeta { opacity: 0; } .demo-2 { opacity: 1; } .demo-pasos li { color: var(--texto); } } /* Inicio */ #saludo { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.5rem); margin-bottom: .2rem; } #saludo-bajada { font-size: 1.02rem; margin: 0 0 1.5rem; } .tarjeta-inicio { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 1.3rem 1.4rem; box-shadow: var(--sombra); margin-bottom: 1rem; } .tarjeta-inicio h3, section.panel .tarjeta-inicio h3 { margin: 0 0 .8rem; padding: 0; border: 0; } .tarjeta-inicio.listo { border-left: 4px solid var(--ok); } .progreso { height: .5rem; border-radius: 999px; background: var(--superficie-2); overflow: hidden; margin: .7rem 0 1rem; } .progreso span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--acento); transition: width .45s ease; } .pasos-inicio { list-style: none; margin: 0; padding: 0; display: grid; } .pasos-inicio li { display: flex; align-items: center; gap: .85rem; padding: .8rem 0; border-top: 1px solid var(--borde); } .pasos-inicio li > div { flex: 1; min-width: 0; display: grid; } .pasos-inicio li span { font-size: .9rem; color: var(--apagado); overflow-wrap: anywhere; } .marca-paso { width: 1.7rem; height: 1.7rem; flex: none; border-radius: 50%; border: 2px solid var(--borde-fuerte); display: grid; place-items: center; color: #fff; } .pasos-inicio li.listo .marca-paso { background: var(--ok); border-color: var(--ok); } .marca-paso svg { width: 1rem; height: 1rem; } .pasos-inicio li.listo strong { color: var(--apagado); font-weight: 500; } .rejilla-inicio { display: grid; gap: 1rem; } .rejilla-inicio .tarjeta-inicio { margin: 0; } .atajos { display: grid; gap: .5rem; } .atajos button { width: 100%; justify-content: flex-start; padding: .75rem 1rem; } .lista.compacta { gap: .4rem; } .fila-proxima { width: 100%; justify-content: space-between; gap: .75rem; background: var(--superficie-2); color: var(--texto); border-radius: 12px; padding: .7rem .85rem; text-align: left; font-weight: 400; } .fila-proxima:hover { filter: none; background: var(--acento-suave); } .fila-proxima > span:first-child { display: grid; min-width: 0; } .fila-proxima strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 52rem) { .rejilla-inicio { grid-template-columns: 1.4fr 1fr; } } /* Guía paso a paso: una decisión por pantalla, controles grandes. En celular ocupa toda la pantalla. */ dialog.guia { max-width: 38rem; padding: 0; } dialog.guia form { padding: 1.4rem 1.5rem 1.2rem; gap: 1rem; max-height: min(44rem, 92dvh); overflow-y: auto; scrollbar-width: thin; } .guia-cabecera { display: flex; align-items: center; gap: .8rem; } .guia-cabecera .progreso { flex: 1; margin: 0; } .guia-cabecera button { padding: .3rem .7rem; font-size: .85rem; } .guia-paso { display: grid; gap: .85rem; animation: entra .22s ease-out; } .guia-paso h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); margin: .3rem 0 0; text-wrap: balance; } .guia-paso > .nota { margin: 0; font-size: .97rem; } .guia-paso .etiqueta { font-size: .88rem; font-weight: 500; color: var(--apagado); } .opciones { display: grid; gap: .5rem; } .opcion { width: 100%; justify-content: flex-start; gap: .85rem; text-align: left; background: var(--superficie); color: var(--texto); border: 1.5px solid var(--borde-fuerte); border-radius: 14px; padding: .8rem .95rem; font-weight: 400; } .opcion:hover { filter: none; border-color: var(--acento); } .opcion > span { display: grid; gap: .1rem; min-width: 0; } .opcion > span > span { font-size: .88rem; color: var(--apagado); } .opcion.elegida { border-color: var(--acento); background: var(--acento-suave); box-shadow: 0 0 0 1px var(--acento); } .opcion:disabled { opacity: .55; } .opcion .muestra { width: 3.4rem; height: 3.4rem; flex: none; border-radius: 10px; } .aviso.ok { background: var(--ok-suave); border-left-color: var(--ok); } .guia-paso .aviso { margin: 0; } .guia-pie { position: sticky; bottom: -1.2rem; background: var(--superficie); padding: .8rem 0 .2rem; margin: 0; border-top: 1px solid var(--borde); align-items: center; } .barra-guardar { position: sticky; bottom: 0; z-index: 1; background: var(--fondo); padding: .8rem 0; margin: 0; border-top: 1px solid var(--borde); align-items: center; } @media (max-width: 52rem) { dialog.guia { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; } dialog.guia form { max-height: none; height: 100%; padding: max(1rem, env(safe-area-inset-top)) 1.1rem 1rem; grid-template-rows: auto 1fr auto; } .guia-paso { align-content: start; } .guia-pie { bottom: 0; padding-bottom: max(.4rem, env(safe-area-inset-bottom)); } .guia-pie button { padding: .8rem 1rem; } #guia-saltar { display: none; } .barra-guardar { bottom: 3.9rem; } .pasos-inicio li button { padding: .45rem .7rem; font-size: .85rem; } nav.pestanas button span:not(.cuenta) { font-size: .64rem; } } .otra-hora { display: flex; flex-direction: row; align-items: center; gap: .5rem; margin-top: .35rem; } .otra-hora input { width: auto; } /* Plan, pagos y métricas */ .plan-inicio { border-left: 4px solid var(--acento); } .plan-inicio.aviso-plan { border-left-color: var(--aviso); } .plan-inicio.peligro-plan { border-left-color: var(--peligro); } .plan-inicio .fila { align-items: center; } .plan-inicio button { white-space: nowrap; } .planes { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: .6rem; } .planes .opcion { padding: .85rem 1rem; } .planes .opcion > span > span { font-size: 1.05rem; color: var(--texto); font-weight: 600; } .planes .opcion small { display: block; font-size: .8rem; color: var(--apagado); font-weight: 400; } .sello.prueba, .sello.cortesia { background: var(--acento-suave); color: var(--acento); } .sello.activa, .sello.admin { background: var(--ok-suave); color: var(--ok); } .sello.vencida { background: var(--peligro-suave); color: var(--peligro); } .metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; margin: 0 0 1.25rem; } .metricas .metrica { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: .8rem .9rem; display: grid; gap: .1rem; } .metricas .metrica strong { font-family: var(--titulos); font-size: 1.45rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .metricas .metrica span { font-size: .8rem; color: var(--apagado); } .entrada-terminos { font-size: .78rem; } /* Landing (/entrar): página larga, misma paleta de LinkedIn, pensada primero para el celular. */ body.landing { background: var(--fondo); } .ld-ancho { max-width: 74rem; margin: 0 auto; padding: 0 1.25rem; } .ld-cabecera { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--fondo) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); } .ld-cabecera-fila { display: flex; align-items: center; gap: 1rem; padding-top: .7rem; padding-bottom: .7rem; } .ld-cabecera .entrada-marca { text-decoration: none; color: var(--texto); } .ld-nav { display: none; gap: 1.4rem; margin-left: 1.5rem; } .ld-nav a { color: var(--apagado); text-decoration: none; font-weight: 500; font-size: .95rem; } .ld-nav a:hover { color: var(--acento); } .ld-boton-chico { margin-left: auto; padding: .5rem 1rem; font-size: .9rem; border-radius: 999px; text-decoration: none; } .ld-etiqueta { margin: 0 0 .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); } .ld-portada { padding: clamp(2.2rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); background: radial-gradient(70rem 42rem at 100% 0%, rgba(10,102,194,.16), transparent 62%), radial-gradient(40rem 30rem at 0% 100%, rgba(112,181,249,.14), transparent 60%); } .ld-portada-rejilla { display: grid; gap: 2.5rem; align-items: center; } .ld-portada h1 { font-size: clamp(2.1rem, 1.2rem + 4vw, 3.9rem); line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 1rem; text-wrap: balance; } .ld-bajada { margin: 0 0 1.5rem; font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem); color: var(--apagado); max-width: 36rem; text-wrap: pretty; } .ld-bajada strong { color: var(--texto); } .ld-portada-acciones { display: grid; gap: .7rem; max-width: 28rem; } .ld-portada-acciones .entrada-nota { text-align: left; } .ld-portada .entrada-invitacion { max-width: 28rem; margin-top: .8rem; } .ld-garantias { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: .92rem; color: var(--apagado); } .ld-garantias li { display: flex; align-items: center; gap: .55rem; } .ld-garantias li::before { content: ''; width: 1.15rem; height: 1.15rem; flex: none; border-radius: 50%; background: var(--ok-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23057642' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/.7rem no-repeat; } .ld-portada .demo { height: clamp(18rem, 55vw, 26rem); } .ld-seccion { padding: clamp(2.6rem, 6vw, 5rem) 0; } .ld-seccion h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 .8rem; text-wrap: balance; max-width: 40rem; } .ld-seccion h3 { font-size: 1.08rem; margin: 0 0 .35rem; } .ld-seccion p { color: var(--apagado); margin: 0; text-wrap: pretty; } .ld-seccion h2 + p, .ld-bajada-seccion { font-size: 1.05rem; max-width: 40rem; } .ld-seccion .ld-bajada-seccion { margin-bottom: 2rem; } .ld-problema { background: var(--lateral); color: var(--lateral-fuerte); } .ld-problema h2 { color: #fff; } .ld-problema p { color: var(--lateral-texto); } .ld-problema-rejilla { display: grid; gap: 1.8rem; } .ld-lista-problema { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; } .ld-lista-problema li { padding: 1rem 1.1rem; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--lateral-texto); line-height: 1.5; } .ld-lista-problema strong { color: #fff; display: block; margin-bottom: .15rem; } .ld-pasos { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.2rem; } .ld-pasos li { position: relative; padding: 1.3rem 1.3rem 1.3rem 4.4rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); } .ld-numero { position: absolute; left: 1.2rem; top: 1.25rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); display: grid; place-items: center; font-family: var(--titulos); font-weight: 700; font-size: 1.1rem; } .ld-rejilla { display: grid; gap: 1rem; margin-top: 1.8rem; } .ld-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem 1.3rem; box-shadow: var(--sombra); } .ld-tarjeta h3::before { content: ''; display: block; width: 2.2rem; height: .3rem; border-radius: 999px; background: var(--acento); margin-bottom: .8rem; } .ld-incluye { background: var(--superficie-2); } .ld-quien { display: grid; gap: 1.6rem; } .ld-perfiles { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .ld-perfiles li { padding: .85rem 1rem; border-left: 4px solid var(--acento); background: var(--superficie); border-radius: 0 12px 12px 0; color: var(--texto); } .ld-precios { background: var(--lateral); color: var(--lateral-fuerte); } .ld-precios h2 { color: #fff; } .ld-precios .ld-bajada-seccion { color: var(--lateral-texto); } .ld-precios .ld-bajada-seccion strong { color: #fff; } .ld-precios .ld-etiqueta { color: var(--lateral-acento); } .ld-planes { display: grid; gap: 1.2rem; } .ld-plan { background: var(--superficie); color: var(--texto); border-radius: 18px; padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; border: 1px solid transparent; } .ld-plan.destacado { outline: 3px solid var(--lateral-acento); outline-offset: 0; position: relative; } .ld-plan.destacado::before { content: 'El más elegido'; position: absolute; top: -.85rem; left: 1.2rem; background: var(--lateral-acento); color: #0B1F3A; font-size: .75rem; font-weight: 700; padding: .25rem .7rem; border-radius: 999px; } .ld-plan-nombre { margin: 0; font-weight: 600; color: var(--apagado); } .ld-plan-precio { margin: 0; font-family: var(--titulos); font-weight: 750; font-size: 2.3rem; letter-spacing: -0.03em; line-height: 1; color: var(--texto); } .ld-plan-precio small { display: block; font-family: 'Instrument Sans', system-ui, sans-serif; font-weight: 500; font-size: .9rem; color: var(--apagado); letter-spacing: 0; margin-top: .4rem; } .ld-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; flex: 1; } .ld-plan li { padding-left: 1.5rem; position: relative; color: var(--texto); font-size: .95rem; } .ld-plan li::before { content: ''; position: absolute; left: 0; top: .3rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--ok-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23057642' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/.6rem no-repeat; } .ld-plan-boton { width: 100%; text-decoration: none; padding: .8rem 1rem; border-radius: 999px; } .ld-plan-boton.secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde-fuerte); } .ld-extras { display: grid; gap: 1rem; margin-top: 1.6rem; } .ld-extras > div { padding: 1.1rem 1.2rem; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); } .ld-extras h3 { color: #fff; font-size: 1rem; } .ld-extras p { color: var(--lateral-texto); font-size: .93rem; } .ld-extras strong { color: #fff; } .ld-confianza .ld-tarjeta h3::before { background: var(--ok); } .ld-nota-legal { margin-top: 1.6rem !important; font-size: .88rem; } .ld-faq details { border-bottom: 1px solid var(--borde); padding: .2rem 0; } .ld-faq details:first-of-type { border-top: 1px solid var(--borde); margin-top: 1.4rem; } .ld-faq summary { cursor: pointer; list-style: none; padding: .95rem 2.2rem .95rem 0; font-weight: 600; font-size: 1.02rem; position: relative; } .ld-faq summary::-webkit-details-marker { display: none; } .ld-faq summary::after { content: '+'; position: absolute; right: .2rem; top: .75rem; font-size: 1.4rem; color: var(--acento); font-weight: 400; } .ld-faq details[open] summary::after { content: '\2212'; } .ld-faq details p { padding: 0 0 1rem; max-width: 46rem; } .ld-faq code { font-size: .85em; background: var(--superficie-2); padding: .1rem .35rem; border-radius: 6px; } .ld-cierre-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: 22px; padding: clamp(1.8rem, 5vw, 3.2rem) clamp(1.2rem, 4vw, 3rem); text-align: center; box-shadow: var(--sombra); display: grid; gap: 1rem; justify-items: center; } .ld-cierre-caja h2 { max-width: 34rem; margin: 0 auto; } .ld-cierre-caja .entrada-boton { max-width: 26rem; } .ld-cierre-caja .entrada-nota { text-align: center; } .ld-pie { border-top: 1px solid var(--borde); padding: 1.6rem 0 calc(1.6rem + env(safe-area-inset-bottom)); font-size: .85rem; color: var(--apagado); } .ld-pie-fila { display: grid; gap: .5rem; } .ld-pie p { margin: 0; } .ld-pie a { color: var(--apagado); } @media (min-width: 48rem) { .ld-nav { display: flex; } .ld-problema-rejilla { grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; } .ld-rejilla { grid-template-columns: repeat(2, 1fr); } .ld-quien { grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: start; } .ld-planes { grid-template-columns: repeat(3, 1fr); } .ld-extras { grid-template-columns: repeat(3, 1fr); } .ld-pie-fila { grid-template-columns: 1fr auto; } } @media (min-width: 62rem) { .ld-portada-rejilla { grid-template-columns: 1.05fr 1fr; gap: 4rem; } .ld-portada .demo { height: 30rem; } .ld-rejilla { grid-template-columns: repeat(3, 1fr); } .ld-pasos { grid-template-columns: repeat(3, 1fr); } .ld-pasos li { padding: 4.4rem 1.4rem 1.5rem; } .ld-numero { left: 1.4rem; top: 1.4rem; } }