/* ============ Kalma PWA — sistema de diseño "app nativa" ============ Paleta oficial: verde palmera #4F8C70, salvia #78AB8E, sol #F6A552, tinta #202225. Filosofía: calma, cercanía, vida. Grande, respirado, con presencia — nunca una tabla plana. Animaciones suaves y con intención, nunca estridentes. */ :root { --bg: #F5F5EC; --card: #FFFFFF; --card-2: #FBFBF6; /* Fondo de hojas y paneles que se apoyan sobre tarjetas blancas. Varios componentes (detalle de métricas, música, leads) lo usaban sin estar definido y quedaban transparentes. */ --canvas: var(--bg); --ink: #202225; --muted: #6C7B71; --faint: #9AA69B; --line: #E7E7DB; --line-soft: #F0F0E7; --green: #4F8C70; --green-deep: #3B6E56; --green-soft: #E7F0EA; --sage: #78AB8E; --sun: #F6A552; --sun-deep: #B4741C; --sun-soft: #FBEBD5; --danger: #C4483A; --danger-soft: #F9E4E1; /* Tokens de la Home. Existen porque el rediseño de la Home se escribió con colores fijos de tema claro sobre un sistema basado en variables: en un móvil en MODO OSCURO salía la página en blanco con las tarjetas en negro y el texto invisible (captura de José, 2026-07-24). Todo color de la Home pasa por aquí para que los dos temas se mantengan solos. */ --home-bg: #FFFFFF; --line-strong: #E8E1D2; --chip: #F0EDE4; --ring-track: #EFEDE4; --shadow-tint: rgba(78, 74, 62, .09); --on-sun: #2C302B; /* el naranja es claro en ambos temas */ --radius: 22px; --radius-lg: 28px; --shadow-sm: 0 3px 10px -4px rgba(32, 60, 44, .14); --shadow: 0 14px 34px -14px rgba(32, 60, 44, .22); --shadow-lg: 0 24px 50px -18px rgba(32, 60, 44, .28); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-out: cubic-bezier(.22, .8, .36, 1); --ease-swift: cubic-bezier(.4, 0, .2, 1); } @media (prefers-color-scheme: dark) { :root { --bg: #121713; --card: #1A231D; --card-2: #1F2A22; --ink: #EAF1EB; --muted: #9DAFA3; --faint: #75857A; --line: #27332B; --line-soft: #202B24; --green: #6FB394; --green-deep: #8FC7AC; --green-soft: #1E2C25; --sun: #F6B266; --sun-deep: #F2C68F; --sun-soft: #2A2016; --danger: #E07A6E; --danger-soft: #3A2320; --home-bg: #101512; --line-strong: #2E3A32; --chip: #232E27; --ring-track: #26302A; --shadow-tint: rgba(0, 0, 0, .45); --on-sun: #241F16; --shadow-sm: 0 3px 10px -4px rgba(0, 0, 0, .4); --shadow: 0 14px 34px -14px rgba(0, 0, 0, .55); --shadow-lg: 0 24px 50px -18px rgba(0, 0, 0, .65); } } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { height: 100%; } body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif; font-size: 16.5px; line-height: 1.48; overscroll-behavior-y: none; padding-top: env(safe-area-inset-top); -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; } h2 { font-size: 26px; } h3 { font-size: 18px; } p { margin: 0; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea { font-family: inherit; font-size: 16px; color: var(--ink); } .muted { color: var(--muted); } .faint { color: var(--faint); } ::selection { background: var(--green-soft); } /* ---------- App shell ---------- */ #app { max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; position: relative; } .subscription-readonly-notice { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:10px 20px 0; padding:13px 14px; border:1.5px solid var(--sun); border-radius:18px; background:var(--sun-soft); box-shadow:var(--shadow-sm); } .subscription-readonly-notice[hidden] { display:none; } .subscription-readonly-notice b { display:block; font-size:13px; } .subscription-readonly-notice p { margin-top:3px; color:var(--muted); font-size:11.5px; line-height:1.35; } .subscription-readonly-notice .btn { flex:none; width:auto; padding:9px 12px; border-radius:13px; font-size:12px; } .admin-preview-notice { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:10px 20px 0; padding:13px 14px; border:1.5px solid #9b7bd3; border-radius:18px; background:#f2ecfb; box-shadow:var(--shadow-sm); position:sticky; top:8px; z-index:90; } .admin-preview-notice[hidden] { display:none; } .admin-preview-notice b { display:block; font-size:13px; color:#5d3f91; } .admin-preview-notice p { margin-top:3px; color:var(--muted); font-size:11.5px; } .admin-preview-notice .btn { flex:none; width:auto; padding:9px 12px; border-radius:13px; font-size:12px; background:#5d3f91; color:white; } /* Modo consulta: las pantallas siguen abiertas para leer el trabajo, pero los controles que escriben, generan, editan o publican quedan atenuados y no aceptan pulsaciones. Los enlaces de navegación (data-go) se mantienen. */ body.paywall-active .screen.active .btn:not([data-go]), body.paywall-active .screen.active .k-btn:not([data-go]), body.paywall-active .screen.active .k-row:not([data-go]), body.paywall-active .screen.active .path-step:not([data-go]), body.paywall-active .screen.active .library-add, body.paywall-active .screen.active .library-sources button, body.paywall-active .screen.active .gallery-quick-actions button, body.paywall-active .screen.active .dm-reply-form button, body.paywall-active .screen.active [data-autodm-action], body.paywall-active .post-sheet button.btn:not([id*="close"]):not([id*="back"]):not(#sheet-download-btn), body.paywall-active .post-sheet .k-btn, body.paywall-active .post-sheet [data-lifecycle-retry], body.paywall-active .post-sheet [data-lifecycle-cancel] { opacity:.45; filter:grayscale(.35); cursor:not-allowed; pointer-events:none; } body.admin-preview-readonly .screen.active .btn:not([data-go]), body.admin-preview-readonly .screen.active .k-btn:not([data-go]), body.admin-preview-readonly .screen.active .path-step:not([data-go]), body.admin-preview-readonly .screen.active .library-add, body.admin-preview-readonly .screen.active .library-sources button, body.admin-preview-readonly .screen.active .gallery-quick-actions button, body.admin-preview-readonly .screen.active .dm-reply-form button, body.admin-preview-readonly .screen.active [data-autodm-action], body.admin-preview-readonly .post-sheet button.btn:not([id*="close"]):not([id*="back"]):not(#sheet-download-btn), body.admin-preview-readonly .post-sheet .k-btn, body.admin-preview-readonly .post-sheet [data-lifecycle-retry], body.admin-preview-readonly .post-sheet [data-lifecycle-cancel] { opacity:.45; filter:grayscale(.35); cursor:not-allowed; pointer-events:none; } body.paywall-active .screen.active #messages-refresh, body.paywall-active .screen.active #messages-retry, body.paywall-active .screen.active #cal-prev, body.paywall-active .screen.active #cal-next, body.paywall-active .screen.active #cal-today { opacity:1; filter:none; pointer-events:auto; } /* El hueco inferior deja pasar la barra Y el botón flotante: con 92 px la última tarjeta quedaba permanentemente medio tapada por el botón de crear. */ .screen { flex: 1; padding: 20px 20px calc(136px + env(safe-area-inset-bottom)); display: none; transition: opacity .16s var(--ease-swift), transform .16s var(--ease-swift); } .screen.active { display: block; animation: screen-in .42s var(--ease-out); } .screen.leave { opacity: 0 !important; transform: translateY(-10px) scale(.984); } .screen.no-tabbar { padding-bottom: 32px; } @keyframes screen-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } } /* Entrada escalonada de los hijos marcados */ .stagger > * { opacity: 0; animation: rise .5s var(--ease-out) forwards; } .stagger > *:nth-child(1) { animation-delay: .02s; } .stagger > *:nth-child(2) { animation-delay: .07s; } .stagger > *:nth-child(3) { animation-delay: .12s; } .stagger > *:nth-child(4) { animation-delay: .17s; } .stagger > *:nth-child(5) { animation-delay: .22s; } .stagger > *:nth-child(6) { animation-delay: .27s; } .stagger > *:nth-child(7) { animation-delay: .32s; } .stagger > *:nth-child(8) { animation-delay: .37s; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ---------- Skeleton (carga, look nativo) ---------- */ .skel { background: linear-gradient(100deg, var(--line-soft) 30%, var(--card) 50%, var(--line-soft) 70%); background-size: 220% 100%; animation: shimmer 1.3s ease-in-out infinite; border-radius: 12px; } @keyframes shimmer { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } } .skel-card { height: 96px; border-radius: var(--radius); margin-bottom: 12px; } .skel-line { height: 14px; margin-bottom: 8px; width: 70%; } /* ---------- Componentes ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); } .btn { width: 100%; border-radius: 18px; padding: 17px; font-size: 16.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform .12s var(--ease-spring), filter .15s, opacity .2s, box-shadow .2s; } .btn:active { transform: scale(.965); } .btn:disabled { opacity: .55; pointer-events: none; } .btn-green { background: var(--green); color: #fff; box-shadow: 0 10px 24px -10px rgba(79, 140, 112, .55); } .btn-green:active { filter: brightness(.94); } .btn-sun { background: var(--sun); color: #fff; box-shadow: 0 10px 24px -10px rgba(246, 165, 82, .55); } .btn-ghost { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); } .btn-danger { background: var(--danger-soft); color: var(--danger); } .input { width: 100%; border: 1.5px solid var(--line); border-radius: 16px; padding: 15px; background: var(--card); outline: none; transition: border-color .2s, box-shadow .2s; } .input:focus { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); } .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; } .pill-green { background: var(--green-soft); color: var(--green-deep); } .pill-sun { background: var(--sun-soft); color: var(--sun-deep); } .bar { height: 9px; border-radius: 6px; background: var(--line-soft); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--green); border-radius: 6px; width: 0; transition: width 1s var(--ease-out); } /* ---------- Cabecera / logo ---------- */ .logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 25px; letter-spacing: -.5px; } .logo svg { width: 34px; height: 34px; } /* ---------- Barra de pestañas ---------- Anclada al borde inferior real (como una tab bar nativa), no flotando con hueco debajo: el fondo llega hasta el final y el padding-bottom absorbe el home indicator de iOS por dentro. */ /* Barra inferior con proporciones de app nativa: 44 px de zona táctil por pestaña (mínimo de las guías de Apple), icono de línea y etiqueta pequeña. */ #tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 520px; height: calc(72px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--card) 88%, transparent); border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; display: flex; justify-content: space-around; align-items: center; padding-left: 6px; padding-right: 6px; box-shadow: var(--shadow-lg); z-index: 40; backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); transition: transform .3s var(--ease-out), opacity .3s; } @supports not (background: color-mix(in srgb, red 50%, blue)) { #tabbar { background: var(--card); } } #tabbar.hidden { transform: translateX(-50%) translateY(130px); opacity: 0; pointer-events: none; } @media (min-width: 768px) { #tabbar { max-width: 720px; } } @media (min-width: 1200px) { #tabbar { max-width: 800px; } } .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--faint); flex: 1; min-width: 0; min-height: 56px; padding: 8px 0 6px; border-radius: 16px; position: relative; transition: color .2s, transform .15s var(--ease-spring); } .tab:active { transform: scale(.92); } .tab.on { color: var(--green-deep); } .tab svg { width: 26px; height: 26px; transition: transform .25s var(--ease-spring), stroke-width .2s; } .tab.on svg { transform: translateY(-1px); stroke-width: 2.3; } .tab-label { line-height: 1; letter-spacing: .1px; } /* Punto de posición: en una app nativa la pestaña activa se reconoce de un vistazo, sin tener que leer la etiqueta. */ .tab.on::after { content: ""; position: absolute; bottom: 1px; width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: tabDot .3s var(--ease-spring); } @keyframes tabDot { from { transform: scale(0); } to { transform: scale(1); } } /* «Crear» en el centro de la barra: la acción principal, sin botón flotante. */ .tab-create { color: var(--green-deep); } .tab-create .tab-create-plus { width: 44px; height: 44px; margin-top: -14px; border-radius: 50%; background: var(--sun); color: var(--on-sun); display: grid; place-items: center; box-shadow: 0 10px 22px -10px rgba(124, 79, 22, .55); transition: transform .2s var(--ease-spring); } .tab-create .tab-create-plus svg { width: 24px; height: 24px; stroke-width: 2.6; } .tab-create:active .tab-create-plus { transform: scale(.9) rotate(90deg); } .tab-create::before, .tab-create::after { display: none !important; } /* Piloto Rebeldía Tech: el backend decide si el acceso existe; estos estilos solo diferencian el nuevo motor de los formatos tradicionales. */ .optimizer-feature-list{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px} .optimizer-feature-list span{font-size:11.5px;font-weight:750;padding:6px 9px;border-radius:999px;background:var(--green-soft);color:var(--green-deep)} .optimizer-upload{display:grid;grid-template-columns:42px 1fr;column-gap:10px;padding:15px;border:1.5px dashed #aab9b0;border-radius:16px;background:var(--card);cursor:pointer;margin-bottom:17px} .optimizer-upload>span{grid-row:1/3;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--green-soft);color:var(--green-deep);font-size:20px;font-weight:900} .optimizer-upload b{align-self:end;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.optimizer-upload small{color:var(--muted);font-size:11.5px;margin-top:3px}.optimizer-upload.ready{border-style:solid;border-color:var(--green)}.optimizer-upload.uploading{opacity:.72;pointer-events:none} .optimizer-copy-label{display:flex;flex-direction:column;gap:3px;margin:0 0 7px}.optimizer-copy-label b{font-size:13.5px}.optimizer-copy-label small{font-size:11.5px;color:var(--muted);line-height:1.4} #optimizer-copy{width:100%;resize:vertical;min-height:132px;line-height:1.5;margin-bottom:13px} .optimizer-check{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;background:var(--sun-soft);cursor:pointer}.optimizer-check input{margin-top:3px;accent-color:var(--green)}.optimizer-check span{display:flex;flex-direction:column;gap:3px}.optimizer-check b{font-size:12.5px}.optimizer-check small{font-size:11.5px;color:var(--muted);line-height:1.35}.optimizer-note{font-size:11.5px;color:var(--muted);margin:12px 2px 3px} .platform-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 17px; font-weight: 900; } .platform-mark.instagram { background: linear-gradient(135deg,#7b3fbd,#e5487e,#f6a43c); } .platform-mark.tiktok { background: #111; text-shadow: 2px 0 #ef436b,-2px 0 #38e8df; } .platform-mark.linkedin { background: #0a66c2; font: 800 14px Arial,sans-serif; } .dropbox-icon, .dropbox-mark { color:#fff; background:#06f !important; font-family:Arial,sans-serif; } .creation-flow-backdrop{position:fixed;inset:0;z-index:102;display:flex;align-items:flex-end;justify-content:center; padding:0;background:rgba(13,20,16,.58);opacity:0;pointer-events:none;transition:opacity .2s ease} .creation-flow-backdrop.show{opacity:1;pointer-events:auto} .creation-flow-sheet{width:100%;max-width:720px;max-height:min(88dvh,820px);overflow:auto;background:var(--bg); border-radius:28px 28px 0 0;padding:20px 18px calc(22px + env(safe-area-inset-bottom)); transform:translateY(100%);transition:transform .28s var(--ease-out);box-shadow:0 -18px 60px rgba(12,25,17,.2)} .creation-flow-backdrop.show .creation-flow-sheet{transform:none} .creation-flow-sheet>header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px} .creation-flow-sheet>header small{display:block;color:var(--green-deep);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px} .creation-flow-sheet>header h2{font-size:22px;line-height:1.15;margin:0}.creation-flow-sheet>header button{width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--line);font-size:25px;color:var(--muted);flex:none} .creation-paths{display:grid;gap:10px}.creation-path{display:grid;grid-template-columns:48px 1fr 20px;gap:12px;align-items:center;width:100%;padding:16px;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:19px;box-shadow:var(--shadow-sm)} .creation-path:hover,.creation-path:focus-visible{border-color:var(--green)}.creation-path-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:var(--green-soft);font-size:22px}.creation-path-copy{display:block;min-width:0}.creation-path b{display:block;font-size:15px;line-height:1.25;margin-bottom:4px}.creation-path small{display:block;color:var(--muted);font-size:12px;line-height:1.4}.creation-path i{font-size:26px;color:var(--sage);font-style:normal;text-align:right}.creation-path.stock{border-color:#d7c4a1;background:linear-gradient(110deg,var(--card),#fffaf0)}.creation-path.stock .creation-path-icon{background:#fff0d4} .brief-lead,.creation-flow-lead{font-size:13px;line-height:1.5;color:var(--muted);margin:-5px 0 12px}.creation-flow-foot,.brief-privacy{font-size:11.5px;line-height:1.45;color:var(--muted);margin:10px 2px}.brief-label{display:block;font-size:12px;font-weight:850;color:var(--ink);margin:0 0 6px}.brief-idea{width:100%;min-height:132px;resize:vertical;padding:14px;border:1.5px solid var(--line);border-radius:17px;background:var(--card);font:inherit;font-size:14px;line-height:1.5;color:var(--ink);outline:none}.brief-idea:focus{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 12%,transparent)} .brief-literal-notice{display:flex;align-items:flex-start;gap:10px;margin:9px 0;padding:11px 12px;border:1px solid color-mix(in srgb,var(--green) 32%,var(--line));border-radius:14px;background:var(--green-soft);color:var(--green-deep)}.brief-literal-notice>span{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--card);font-size:13px;font-weight:950}.brief-literal-notice div{min-width:0}.brief-literal-notice b,.brief-literal-notice small{display:block}.brief-literal-notice b{font-size:12.5px;line-height:1.3}.brief-literal-notice small{margin-top:2px;font-size:11px;line-height:1.4;color:var(--muted)}.brief-literal-notice.empty{background:var(--card);border-color:var(--line)}.brief-literal-notice.empty>span{color:var(--muted)} .brief-kalma-rewrite{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;margin:9px 0;border:1.5px solid var(--green);border-radius:15px;background:var(--card);text-align:left;color:var(--ink)}.brief-kalma-rewrite svg{flex:none;width:34px;height:34px;padding:4px;border-radius:11px;background:var(--green-soft)}.brief-kalma-rewrite span{display:block}.brief-kalma-rewrite b,.brief-kalma-rewrite small{display:block}.brief-kalma-rewrite b{font-size:12.5px}.brief-kalma-rewrite small{margin-top:2px;font-size:10.5px;line-height:1.35;color:var(--muted)}.brief-kalma-rewrite:disabled{opacity:.5}.brief-kalma-rewrite.loading svg{animation:creation-spin 1.5s linear infinite}.brief-rewrite-status{min-height:0;margin:0 2px;font-size:11.5px;line-height:1.4}.brief-rewrite-status.ok{margin-bottom:8px;color:var(--green-deep)}.brief-rewrite-status.error{margin-bottom:8px;color:var(--danger)} .brief-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}.brief-tools button{min-width:0;padding:11px 7px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-size:11.5px;font-weight:800;color:var(--ink)}.brief-tools button.recording{background:#ffe8e4;border-color:#dc604e;color:#9c2f20}.brief-tools button span{display:block;font-size:20px;margin-bottom:3px} .brief-style-required{font-size:11.5px;font-weight:750;color:var(--sun-deep);margin:-2px 2px 9px} .brief-url-row,.brief-link-row{display:flex;gap:7px;margin:8px 0}.brief-url-row input,.brief-link-row input{min-width:0;flex:1;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);font:inherit;font-size:13px}.brief-url-row button,.brief-link-row button{padding:0 13px;border-radius:12px;background:var(--green);color:#fff;font-weight:800}.brief-link-row[hidden]{display:none} .brief-resources{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.brief-resource{display:flex;align-items:center;gap:6px;max-width:100%;padding:7px 9px;background:var(--green-soft);border-radius:999px;font-size:11px;color:var(--green-deep)}.brief-resource b{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brief-resource button{font-size:15px;color:inherit}.brief-empty{font-size:11.5px;color:var(--muted)} .material-source-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 14px}.material-source-buttons button{padding:12px 10px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-size:11.5px;font-weight:800;color:var(--ink)}.material-files{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;min-height:116px}.material-file{position:relative;min-width:0;padding:6px;border:1px solid var(--line);border-radius:15px;background:var(--card)}.material-file-preview{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:10px;background:var(--soft)}.material-file-preview img,.material-file-preview video{width:100%;height:100%;object-fit:cover;display:block}.material-file-preview>span{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:22px;background:rgba(0,0,0,.2)}.material-file>small{position:absolute;top:10px;left:10px;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);font-weight:900}.material-file-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;margin-top:5px}.material-file-actions button{height:28px;border-radius:8px;background:var(--soft);color:var(--ink);font-weight:900}.material-file-actions button:last-child{color:#9c2f20;background:#ffe8e4}.material-file-actions button:disabled{opacity:.3}.material-empty{grid-column:1/-1;min-height:116px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:15px;border:1px dashed var(--line);border-radius:16px;color:var(--muted)}.material-empty span{font-size:28px}.material-empty b{font-size:13px;color:var(--ink);margin:4px 0}.material-empty small{font-size:11px}.material-paths .creation-path-icon{background:var(--sun-soft)} .brief-primary{width:100%;padding:13px 16px;margin-top:10px;border-radius:15px;background:var(--green);color:#fff;font-size:14px;font-weight:850}.brief-primary:disabled{opacity:.45}.brief-secondary{width:100%;padding:11px;margin-top:7px;color:var(--muted);font-size:13px} .creation-review{display:grid;gap:11px}.creation-review-card{padding:15px;background:var(--card);border:1px solid var(--line);border-radius:17px}.creation-review-card>small{display:block;color:var(--muted);font-size:10.5px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}.creation-review-card textarea{width:100%;min-height:92px;border:0;background:transparent;resize:vertical;font:inherit;font-size:14px;line-height:1.45;color:var(--ink);outline:none}.creation-review-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.creation-review-grid .creation-review-card{min-width:0}.creation-review-card b{font-size:13px}.creation-review-card p{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:4px}.creation-cost-note{padding:11px 13px;border-radius:13px;background:var(--sun-soft);color:var(--sun-deep);font-size:12px;line-height:1.4} .review-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.review-grid>div,.review-material,.strategy-reason{padding:13px 14px;background:var(--card);border:1px solid var(--line);border-radius:15px}.review-grid small,.review-material small{display:block;color:var(--muted);font-size:10.5px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}.review-grid b{font-size:13px}.review-material p,.strategy-reason p{font-size:12.5px;line-height:1.45;color:var(--muted);margin:3px 0}.brief-cost-note{padding:11px 13px;border-radius:13px;background:var(--sun-soft);color:var(--sun-deep);font-size:12px;line-height:1.4}.creation-flow-actions{display:flex;gap:9px;margin-top:16px}.creation-flow-actions .btn{flex:1}.creation-flow-actions .btn:disabled{opacity:.45}.creation-empty{text-align:center;padding:12px 4px}.creation-empty>span{font-size:34px}.creation-empty h3{font-size:17px;margin:8px 0 5px}.creation-empty p{font-size:13px;line-height:1.5;color:var(--muted);max-width:480px;margin:0 auto}.strategy-thinking{min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}.strategy-thinking small{font-size:12px;color:var(--muted)}.strategy-kicker{display:inline-block;padding:6px 9px;border-radius:999px;background:var(--green-soft);color:var(--green-deep);font-size:10.5px;font-weight:850;margin-bottom:12px}.strategy-proposal{display:grid;gap:10px}.strategy-reason b{font-size:12px} .review-audio-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--card)}.review-audio-choice legend{padding:0 4px;font-size:10.5px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.review-audio-choice label{display:flex;align-items:flex-start;gap:8px;padding:10px;border:1.5px solid var(--line);border-radius:13px;cursor:pointer;background:var(--canvas)}.review-audio-choice label.selected{border-color:var(--green);background:var(--green-soft)}.review-audio-choice input{position:absolute;opacity:0;pointer-events:none}.review-audio-choice label>span{font-size:20px}.review-audio-choice label div{min-width:0}.review-audio-choice label b,.review-audio-choice label small{display:block}.review-audio-choice label b{font-size:11.5px;line-height:1.25}.review-audio-choice label small{margin-top:3px;color:var(--muted);font-size:9.5px;line-height:1.35}.review-audio-choice>p{grid-column:1/-1;margin:1px 2px 0;color:var(--muted);font-size:10px;line-height:1.35} .creation-flow-sheet>header button:disabled{opacity:.35;cursor:not-allowed} .creation-live-progress{min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px 8px 8px} .creation-live-progress-orb{width:82px;height:82px;display:grid;place-items:center;border-radius:50%;font-size:30px;background:var(--card);box-shadow:0 0 0 9px var(--green-soft);position:relative;margin-bottom:25px} .creation-live-progress-orb::before{content:"";position:absolute;inset:-10px;border:3px solid transparent;border-top-color:var(--green);border-right-color:var(--sun);border-radius:50%;animation:creation-spin 1.5s linear infinite} @keyframes creation-spin{to{transform:rotate(360deg)}} .creation-live-progress-copy{max-width:480px}.creation-live-progress-percent{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--green-soft);color:var(--green-deep);font-size:12px;font-weight:900;font-variant-numeric:tabular-nums} .creation-live-progress h3,.creation-result h3{font-size:20px;margin:12px 0 6px}.creation-live-progress p,.creation-result p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0 auto;max-width:470px} .creation-live-progress-track{width:min(100%,480px);height:10px;border-radius:999px;background:color-mix(in srgb,var(--green) 14%,var(--card));overflow:hidden;margin:24px 0 14px}.creation-live-progress-track i{display:block;width:4%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--sun));transition:width .8s var(--ease-out)} .creation-live-progress-note{width:min(100%,480px);display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:11.5px;color:var(--muted)}.creation-live-progress-note b{font-size:12px;color:var(--ink)} .creation-live-progress.error .creation-live-progress-orb{box-shadow:0 0 0 9px color-mix(in srgb,var(--danger) 10%,var(--card))}.creation-live-progress.error .creation-live-progress-orb::before{animation:none;border-color:var(--danger)}.creation-live-progress.error .creation-live-progress-percent{background:color-mix(in srgb,var(--danger) 12%,var(--card));color:var(--danger)}.creation-live-progress.error .creation-live-progress-track i{background:var(--danger)}.creation-live-progress.error .creation-live-progress-note{border-color:color-mix(in srgb,var(--danger) 28%,var(--line));background:color-mix(in srgb,var(--danger) 7%,var(--card))} .creation-result{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 6px}.creation-result-icon{width:70px;height:70px;display:grid;place-items:center;border-radius:50%;font-size:32px;font-weight:900;background:var(--green-soft);color:var(--green-deep)}.creation-result.error .creation-result-icon{background:color-mix(in srgb,var(--danger) 12%,var(--card));color:var(--danger)}.creation-result .creation-flow-actions{width:min(100%,440px);margin-top:22px} @media(min-width:768px){.creation-flow-backdrop{align-items:center;padding:24px}.creation-flow-sheet{border-radius:28px;padding:24px;transform:translateY(18px) scale(.98)}.creation-flow-backdrop.show .creation-flow-sheet{transform:none}.creation-paths{grid-template-columns:1fr 1fr}.brief-tools{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}} .media-source-backdrop { position:fixed; inset:0; z-index:96; display:flex; align-items:flex-end; justify-content:center; background:rgba(13,20,16,.58); opacity:0; pointer-events:none; transition:opacity .2s ease; } .media-source-backdrop.show { opacity:1; pointer-events:auto; } .media-source-sheet { width:100%; max-width:520px; background:var(--bg); padding:10px 18px calc(18px + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; transform:translateY(100%); transition:transform .28s var(--ease-out); } .media-source-backdrop.show .media-source-sheet { transform:none; } .media-source-sheet h2 { font-size:20px; margin:8px 0 3px; } .media-source-sheet > p { color:var(--muted); font-size:13px; margin:0 0 16px; } .media-source-sheet > button:not(.media-source-cancel) { width:100%; display:grid; grid-template-columns:42px 1fr; column-gap:11px; text-align:left; align-items:center; padding:13px; margin:8px 0; border:1px solid var(--line); border-radius:16px; background:var(--card); } .media-source-sheet > button > span { grid-row:1/3; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--green-soft); font-size:19px; } .media-source-sheet > button b { font-size:14px; } .media-source-sheet > button small { color:var(--muted); font-size:11.5px; margin-top:2px; } .media-source-cancel { width:100%; padding:12px; color:var(--muted); font-weight:700; } .template-picker-backdrop { position:fixed; inset:0; z-index:85; display:flex; align-items:flex-end; justify-content:center; background:rgba(13,20,16,.58); opacity:0; pointer-events:none; transition:opacity .22s ease; } .template-picker-backdrop.show { opacity:1; pointer-events:auto; } .template-picker { width:100%; max-width:760px; max-height:88vh; overflow:auto; background:var(--bg); border-radius:26px 26px 0 0; padding:20px 18px calc(24px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .28s var(--ease-out); } .template-picker-backdrop.show .template-picker { transform:none; } .template-picker-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; } .template-picker-head h2 { font-size:20px; } .template-picker-head p { color:var(--muted); font-size:12.5px; line-height:1.4; margin-top:4px; } #template-picker-close { width:42px;height:42px;border-radius:50%;background:var(--card);border:1px solid var(--line); flex:none;font-size:28px;line-height:1;box-shadow:var(--shadow-sm); } .template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .template-card { min-width:0; padding:0; overflow:hidden; border:2px solid transparent; border-radius:18px; background:var(--card); box-shadow:var(--shadow-sm); text-align:left; transition:.18s ease; } .template-card:active { transform:scale(.98); } .strategy-favorite { display:flex; gap:10px; align-items:flex-start; padding:12px 13px; margin-bottom:10px; border:1px solid var(--line); border-radius:15px; background:var(--card); cursor:pointer; } .strategy-favorite input { width:19px; height:19px; margin-top:1px; accent-color:var(--green); flex:none; } .strategy-favorite span { display:flex; flex-direction:column; gap:2px; } .strategy-favorite b { font-size:13px; } .strategy-favorite small { color:var(--muted); font-size:10.5px; line-height:1.35; } .template-card-preview { position:relative; aspect-ratio:9/16; max-height:48vh; background:linear-gradient(145deg,#dce9e1,#f8d8ad); display:grid;place-items:center;overflow:hidden; } .template-card-preview video { width:100%;height:100%;object-fit:cover;display:block; } .template-card-preview.design { aspect-ratio:4/5; max-height:48vh; background:#fff; } .template-card-preview img { width:100%;height:100%;object-fit:cover;display:block; } .template-card-preview.kalma-auto { background:linear-gradient(145deg,#e5f1ea 0%,#fff7e9 54%,#f9d6b1 100%); } .kalma-auto-art { position:relative; width:78%; height:74%; display:block; } .kalma-auto-art i { position:absolute; width:62%; height:72%; border-radius:14px; border:2px solid rgba(54,119,91,.28); background:rgba(255,255,255,.86); box-shadow:0 12px 28px rgba(31,69,52,.12); } .kalma-auto-art i:nth-child(1) { left:0; top:16%; transform:rotate(-8deg); } .kalma-auto-art i:nth-child(2) { right:0; top:13%; transform:rotate(8deg); background:rgba(247,231,204,.9); } .kalma-auto-art i:nth-child(3) { left:19%; top:0; background:linear-gradient(155deg,#fff 0 46%,#75a98f 47% 100%); } .kalma-auto-art b { position:absolute; inset:0; display:grid; place-items:center; font-size:42px; filter:drop-shadow(0 5px 8px rgba(31,69,52,.18)); } .template-card-preview .template-play { width:48px;height:48px;border-radius:50%;display:grid;place-items:center; color:#fff;background:rgba(15,20,17,.58);font-size:20px;backdrop-filter:blur(8px); } .template-card-copy { padding:11px 12px 13px; display:flex; flex-direction:column; gap:3px; } .template-card-copy b { font-size:13px; white-space:nowrap; overflow:hidden;text-overflow:ellipsis; } .template-card-copy small { color:var(--muted);font-size:10.5px;line-height:1.35; } .template-feature-row { display:flex;gap:5px;flex-wrap:wrap;margin-top:5px; } .template-feature { padding:3px 6px;border-radius:999px;background:var(--green-soft);color:var(--green-deep);font-size:9px;font-weight:750; } .template-empty { grid-column:1/-1;padding:28px 18px;text-align:center;background:var(--card);border-radius:18px;color:var(--muted); } .strategy-style-choice { width:100%; margin-top:12px; padding:13px 15px; border:1px solid var(--green); border-radius:14px; background:var(--green-soft); color:var(--green-deep); font-weight:800; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:12px; } .strategy-style-choice span { display:flex; flex-direction:column; gap:2px; min-width:0; } .strategy-style-choice small { font-size:8.5px; letter-spacing:.05em; } .strategy-style-choice b { color:var(--ink); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .strategy-style-choice em { font-size:11px; font-style:normal; white-space:nowrap; } @media (min-width:768px) { .template-picker-backdrop { align-items:center; padding:24px; } .template-picker { border-radius:28px; max-height:90vh; padding:24px; } .template-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .template-card:hover { border-color:var(--green); transform:translateY(-2px); } } /* Baja del negocio en Perfil: visible, pero separada de lo cotidiano. La barra inferior FLOTA sobre el contenido, así que el último bloque de esta pantalla necesita más hueco del estándar: sin él, el botón quedaba asomando por debajo de la barra y parecía que no existía (José, 27-jul-2026). */ #s-profile { padding-bottom: calc(150px + env(safe-area-inset-bottom)); } /* DOS BOTONES POR FILA. En una columna la pantalla medía casi el doble y el último bloque —la baja del negocio— caía detrás de la barra flotante. */ .profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .profile-actions .btn { width: 100%; margin: 0; } .profile-network-manager { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .profile-network-manager-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .profile-network-manager-head small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; } .profile-network-manage-btn { width: auto; padding: 10px 14px; border-radius: 14px; font-size: 13px; flex: 0 0 auto; } .profile-network-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; } .profile-network-chip { display: inline-flex; align-items: center; gap: 3px; padding: 7px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green-deep); font-size: 12px; } .network-manager-copy { padding: 14px; border-radius: 16px; background: var(--green-soft); color: var(--ink); } .network-manager-copy p { font-size: 13.5px; line-height: 1.5; margin: 0; } .network-manager-copy small { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 12px; } /* Borde propio: como fantasma se leía igual que "Gestionar mis redes" y se confundía con un elemento más del menú. */ #p-delete-biz { color: var(--danger); font-weight: 700; background: transparent; border: 1.5px solid color-mix(in srgb, var(--danger) 45%, transparent); } .profile-delete-hint { font-size: 12px; margin-top: 8px; line-height: 1.45; } .upload-progress { display: flex; align-items: center; gap: 9px; margin: 10px 0 2px; padding: 11px 13px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); color: var(--green-deep); font-size: 13.5px; font-weight: 700; } .dots { display: inline-flex; gap: 4px; } .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); animation: dot 1.2s infinite; } .dots i:nth-child(2) { animation-delay: .18s; } .dots i:nth-child(3) { animation-delay: .36s; } @keyframes dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } } @keyframes progress-breathe { 0%,100%{transform:scale(.92) rotate(0);filter:saturate(.85)} 50%{transform:scale(1.05) rotate(180deg);filter:saturate(1.2)} } /* En móvil el botón de crear es un círculo sólido de 60 px, alineado sobre la barra y con margen suficiente: antes flotaba a 76 px, se solapaba con la pestaña «Datos» y con la última tarjeta de la lista. */ /* Siete destinos caben también en los móviles estrechos sin hacer que «Perfil» desaparezca fuera de la barra. */ @media(max-width:380px){ .tab { gap: 3px; font-size: 9px; padding-top: 7px; } .tab svg { width: 23px; height: 23px; } } .comp-btn { width: 46px; height: 46px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .15s var(--ease-spring), background .2s; } .comp-btn:active { transform: scale(.86); } .comp-btn.mic { background: var(--sun); } .comp-btn.mic.recording { animation: mic-pulse 1.6s infinite; background: var(--danger); } @keyframes mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(196, 72, 58, .4); } 70% { box-shadow: 0 0 0 14px rgba(196, 72, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(196, 72, 58, 0); } } /* ---------- Home ---------- */ .tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; min-height: 138px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease-spring), border-color .2s, box-shadow .2s; } .tile:active { transform: scale(.955); box-shadow: var(--shadow-sm); } .tile .ic { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; } .tile .ic svg { width: 26px; height: 26px; } .tile b { font-size: 16.5px; font-weight: 800; } .tile span { font-size: 12.5px; color: var(--muted); font-weight: 600; } .flame { display: inline-flex; align-items: center; gap: 5px; background: var(--sun-soft); color: var(--sun-deep); font-weight: 800; font-size: 14px; padding: 7px 14px; border-radius: 999px; animation: flame-pop .5s var(--ease-spring) .3s backwards; } @keyframes flame-pop { from { transform: scale(0); } to { transform: scale(1); } } /* ---------- Onboarding ---------- */ .trait { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; } .trait:last-child { border-bottom: none; } .check { width: 24px; height: 24px; border-radius: 50%; background: var(--green); flex: none; display: flex; align-items: center; justify-content: center; animation: check-pop .4s var(--ease-spring); } @keyframes check-pop { from { transform: scale(0); } to { transform: scale(1); } } /* Anillo de puntuación (diagnóstico) */ /* ---------- Calendario ---------- */ .cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; font-size: 11px; font-weight: 800; color: var(--faint); text-align: center; margin-bottom: 8px; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; } .cal-d { aspect-ratio: 1; border-radius: 14px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700; transition: transform .15s var(--ease-spring); } .cal-d.dim { opacity: .32; } .cal-d.today { border: 2.5px solid var(--green); color: var(--green-deep); } .cal-d .dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 4px; } .cal-d:active { transform: scale(.9); } .calendar-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:8px 0 16px} .calendar-toolbar h2{font-size:22px}.calendar-toolbar p{font-size:12px;color:var(--muted);margin-top:2px} .calendar-nav{display:flex;align-items:center;gap:7px}.calendar-nav button,.calendar-nav strong{height:38px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:var(--card);display:grid;place-items:center;font-size:13px}.calendar-nav button{cursor:pointer}.calendar-nav strong{min-width:145px} .calendar-legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.calendar-legend span,.calendar-status{font-size:10.5px;font-weight:800;padding:5px 8px;border-radius:999px}.calendar-legend span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.calendar-legend .draft::before{background:#9aa29c}.calendar-legend .scheduled::before{background:var(--sun)}.calendar-legend .published::before,.calendar-legend .planned::before{background:var(--green)}.calendar-legend .failed::before{background:var(--danger)} .cal-d{min-width:0;overflow:hidden}.cal-d>time{font-weight:850}.cal-d>div{width:100%;min-width:0}.cal-event{display:flex;align-items:center;gap:4px;width:100%;padding:3px 5px;margin-top:3px;border-radius:6px;font-size:9px;line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--line-soft);color:var(--ink)}.cal-event b{flex:none}.cal-event.scheduled{background:var(--sun-soft);color:var(--sun-deep)}.cal-event.published,.cal-event.planned,.cal-event.done{background:var(--green-soft);color:var(--green-deep)}.cal-event.failed,.cal-event.partial{background:#fde5e1;color:var(--danger)}.cal-d.selected{box-shadow:0 0 0 3px color-mix(in srgb,var(--sun) 38%,transparent)}.cal-d small{font-size:8px;color:var(--muted)} .calendar-list-item{display:flex;gap:12px;align-items:center;margin-bottom:9px;padding:12px 14px;width:100%;text-align:left;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:14px}.calendar-list-item:hover{border-color:var(--green)}.calendar-status{white-space:nowrap;background:var(--line-soft)}.calendar-status.scheduled{background:var(--sun-soft);color:var(--sun-deep)}.calendar-status.published,.calendar-status.planned,.calendar-status.done{background:var(--green-soft);color:var(--green-deep)}.calendar-status.failed,.calendar-status.partial{background:#fde5e1;color:var(--danger)} .sheet-post-stats{margin:12px 0 18px;padding:15px;background:var(--card-2);border:1px solid var(--line);border-radius:17px}.sheet-stats-head{display:flex;justify-content:space-between;gap:10px;align-items:end;margin-bottom:12px}.sheet-stats-head span{font-size:10px;color:var(--muted)}.sheet-platform-stats{padding:12px 0;border-top:1px solid var(--line)}.sheet-platform-title{display:flex;justify-content:space-between;margin-bottom:9px}.sheet-platform-title a{font-size:11px;color:var(--green-deep);font-weight:800}.sheet-platform-stats>p{font-size:12px;color:var(--muted)}.sheet-metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.sheet-metric-grid span{padding:9px 5px;text-align:center;background:var(--green-soft);border-radius:10px}.sheet-metric-grid b,.sheet-metric-grid small{display:block}.sheet-metric-grid b{font-size:16px}.sheet-metric-grid small{font-size:9px;color:var(--green-deep);margin-top:2px} @media(max-width:600px){.calendar-toolbar{align-items:flex-start;flex-direction:column}.calendar-nav{width:100%}.calendar-nav strong{flex:1}.cal-event{font-size:0;height:7px;padding:0;margin-top:2px}.cal-event b{display:none}.cal-d{aspect-ratio:1}.calendar-status{font-size:9px}.sheet-metric-grid{grid-template-columns:repeat(2,1fr)}.calendar-strategy-stats{gap:5px}.calendar-strategy-stats span{padding:8px}.calendar-strategy-stats small{font-size:9px}} @media(min-width:768px){#s-cal{max-width:none}.cal-head,.cal-grid{max-width:none}.cal-d{aspect-ratio:auto;min-height:112px;align-items:flex-start;justify-content:flex-start;padding:8px}.cal-d>time{align-self:flex-end}.calendar-list-item{max-width:900px}} /* ---------- Métricas ---------- */ .metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .metric { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); } .metric .n { font-size: 26px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .metric .l { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-top: 2px; } /* Selector de negocios (multi-negocio por usuario) */ .biz-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); margin-bottom: 9px; transition: transform .12s var(--ease-spring); } .biz-row:active { transform: scale(.98); } .biz-row.on { border-color: var(--green); background: var(--green-soft); } .biz-row.locked { opacity: .68; cursor: not-allowed; } .biz-row.locked:active { transform: none; } .biz-row-action { color:var(--green-deep); font-size:11px; font-weight:850; white-space:nowrap; } .pay-business-card { display:flex; align-items:center; justify-content:space-between; gap:12px; } .biz-add { border:1.5px dashed var(--green) !important; background:var(--green-soft) !important; color:var(--green-deep) !important; } .biz-avatar { width: 40px; height: 40px; border-radius: 13px; background: var(--green); color: #fff; font-weight: 800; font-size: 17px; display: grid; place-items: center; flex: none; } /* Gráfico de línea con área (mismo lenguaje que el panel de upload-post) */ .stats-line { width: 100%; height: 150px; display: block; } .stats-line .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 5; } .stats-line .area { fill: var(--green); opacity: .13; } .stats-line .line { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .stats-line .dot { fill: var(--green); stroke: var(--card); stroke-width: 1.5; } .stats-line .axis { fill: var(--faint); font-size: 11px; font-family: inherit; } .stats-note { display: block; color: var(--muted); font-size: 10.5px; line-height: 1.3; margin-top: 7px; } /* ---------- Logros ---------- */ .badges { display: flex; flex-wrap: wrap; gap: 12px; } .badge { width: 58px; height: 58px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 25px; background: var(--green-soft); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease-spring); } .badge:active { transform: scale(1.15) rotate(-6deg); } .badge.locked { background: var(--line-soft); filter: grayscale(1); opacity: .4; box-shadow: none; } /* ---------- Chips de red (stats/comentarios) ---------- */ .chips { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; } .chip { border: 1.5px solid var(--line); background: var(--card); color: var(--muted); font-size: 13.5px; font-weight: 700; padding: 9px 16px; border-radius: 999px; transition: all .2s var(--ease-spring); } .chip:active { transform: scale(.94); } .chip.on { background: var(--green); border-color: var(--green); color: #fff; box-shadow: var(--shadow-sm); } /* ---------- Tu camino con Kalma (checklist guiado) ---------- */ .path-step { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); width: 100%; text-align: left; transition: transform .15s var(--ease-spring); } .path-step:active { transform: scale(.98); } .path-step:last-child { border-bottom: none; } .path-dot { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--line-soft); color: var(--faint); font-weight: 800; transition: all .3s var(--ease-spring); } .path-step.done .path-dot { background: var(--green); color: #fff; } .path-step.next .path-dot { background: var(--sun); color: #fff; animation: next-pulse 2s infinite; } @keyframes next-pulse { 0% { box-shadow: 0 0 0 0 rgba(246, 165, 82, .45); } 70% { box-shadow: 0 0 0 11px rgba(246, 165, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(246, 165, 82, 0); } } .path-step b { font-size: 15px; } .path-step.done b { text-decoration: line-through; color: var(--muted); font-weight: 600; } .path-step span.why { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; } .strategy-day-clarity>span{display:grid;grid-template-columns:72px minmax(0,1fr);gap:7px;text-align:left} .strategy-day-clarity>span>b{font-size:.88em;text-transform:uppercase;letter-spacing:.035em;color:var(--sun-deep)} .path-step .strategy-day-clarity{color:var(--muted)} /* ---------- Confeti (logros) ---------- */ .confetti { position: fixed; top: -12px; z-index: 90; font-size: 20px; pointer-events: none; animation: confetti-fall 2.4s ease-in forwards; } @keyframes confetti-fall { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(540deg); opacity: .4; } } /* ---------- Tour ---------- */ /* ---------- Tarjeta de preview de borrador (en el chat) ---------- */ .network-preview { margin: 2px 16px 14px; } .preview-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .preview-heading b { font-size:13px; } .preview-heading small { color:var(--muted); font-size:10.5px; } .preview-tabs { display:flex; gap:6px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none; } .preview-tab { flex:none; padding:8px 11px; border-radius:999px; border:1px solid var(--line); background:var(--card-2); color:var(--muted); font-size:11.5px; font-weight:800; } .preview-tab.on { background:var(--ink); color:#fff; border-color:var(--ink); } .social-preview { overflow:hidden; border:1px solid #d9ddd9; border-radius:16px; background:#fff; color:#171918; box-shadow:0 8px 25px -20px rgba(0,0,0,.55); } .social-preview-top { display:flex; align-items:center; gap:9px; padding:11px 12px; font-size:11px; } .social-avatar { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--green-soft); color:var(--green-deep); font-weight:900; } .social-preview-media { position:relative; width:100%; aspect-ratio:4/5; display:grid; place-items:center; overflow:hidden; background:#edf0ed; } .social-preview-media img,.social-preview-media video { width:100%;height:100%;object-fit:contain;display:block; } .social-preview-media .skel { width:100%;height:100%; } .social-preview-copy { padding:11px 12px 13px; font-size:12px; line-height:1.45; white-space:pre-wrap; } .social-preview-meta { display:flex;justify-content:space-between;gap:8px;padding:0 12px 10px;color:#69736d;font-size:9.5px; } .social-preview.tiktok { background:#101010;color:#fff;border-color:#222; } .social-preview.tiktok .social-preview-media { aspect-ratio:9/16;background:#050505; } .social-preview.tiktok .social-preview-copy { background:linear-gradient(transparent,rgba(0,0,0,.92)); margin-top:-74px;position:relative;padding-top:30px; } .social-preview.tiktok .social-preview-meta { color:#bbb; } .social-preview.linkedin .social-preview-media { aspect-ratio:1.91/1; } .social-preview.linkedin .social-preview-copy { order:2; } .preview-validation { margin-top:8px; padding:9px 10px; border-radius:11px; background:var(--green-soft); color:var(--green-deep); font-size:10.5px; line-height:1.4; } .draft-carousel { position: relative; } .draft-media-item { flex: 0 0 78%; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; scroll-snap-align: center; background: var(--line-soft); } /* contain, no cover: la imagen se ve ENTERA, nunca recortada en cuadrado */ .draft-media-item img { width: 100%; height: 100%; object-fit: contain; display: block; } .draft-media-item { position: relative; border: 0; padding: 0; cursor: zoom-in; } .media-zoom-hint { position: absolute; right: 10px; bottom: 10px; padding: 6px 9px; border-radius: 999px; background: rgba(20,25,22,.72); color: #fff; font-size: 11px; font-weight: 700; opacity: 0; transition: opacity .2s; backdrop-filter: blur(8px); } .draft-media-item:hover .media-zoom-hint, .draft-media-item:focus-visible .media-zoom-hint { opacity: 1; } .vid-loading, .vid-error { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12.5px; font-weight: 600; text-align: center; padding: 12px; } .sheet-media-slide video { width: 100%; height: 100%; object-fit: contain; display: block; background: #0d130f; } .media-lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(10,14,12,.94); padding: 64px 90px 48px; } .media-lightbox-stage { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; } .media-lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 70px #000; } .media-lightbox-stage .skel { width: min(70vw,700px); height: min(70vh,700px); } .media-lightbox-close, .media-lightbox-nav { position: absolute; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; backdrop-filter: blur(10px); } .media-lightbox-close { right: 24px; top: 20px; width: 48px; height: 48px; border-radius: 50%; font-size: 34px; } .media-lightbox-nav { top: 50%; transform: translateY(-50%); width: 54px; height: 70px; border-radius: 18px; font-size: 44px; } .media-lightbox-nav.prev { left: 22px; } .media-lightbox-nav.next { right: 22px; } .media-lightbox-nav:disabled { opacity: .2; } .media-lightbox-edit { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); padding: 11px 18px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 800; box-shadow: 0 8px 30px rgba(0,0,0,.4); } .media-lightbox-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(255,255,255,.14); padding: 7px 14px; border-radius: 999px; font-weight: 700; } /* ---------- Galería de publicaciones ---------- */ .gallery-item { aspect-ratio: 1; border-radius: 8px; overflow: hidden; position: relative; background: var(--line-soft); transition: transform .15s var(--ease-spring); } .gallery-item:active { transform: scale(.94); } .gallery-item img, .gallery-item video { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-preview { width:100%;height:100%;background:var(--line-soft); } .gallery-preview img { width:100%;height:100%;object-fit:cover;display:block; } .gallery-item .g-badge { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; } .gallery-item .g-status { position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 999px; color: #fff; text-transform: uppercase; letter-spacing: .02em; } /* Distintivo de secuencia: la tarjeta representa varias historias seguidas. */ .gallery-item .g-series { position: absolute; left: 6px; top: 6px; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 999px; color: #fff; background: rgba(20,30,24,.72); backdrop-filter: blur(4px); letter-spacing: .01em; } .gallery-empty-tile { background: var(--card-2); border: 1.5px dashed var(--line); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 36px 20px; text-align: center; } .gallery-delete-bar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 13px; } .gallery-delete-bar[hidden] { display: none; } .gallery-delete-btn { width: auto; padding: 9px 15px; background: var(--danger); color: #fff; font-size: 13px; } .g-select { display: none; position: absolute; right: 7px; top: 7px; width: 25px; height: 25px; border-radius: 50%; border: 2px solid #fff; background: rgba(20,30,24,.6); color: transparent; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; box-shadow: 0 1px 5px rgba(0,0,0,.25); } .selecting .gallery-item { opacity: .42; } .selecting .gallery-draft { opacity: 1; } .selecting .g-select { display: flex; } .selecting .gallery-item.selected { outline: 3px solid var(--green); outline-offset: -3px; } .selecting .gallery-item.selected .g-select { color: #fff; background: var(--green); } /* Sheet de detalle (post) */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(20,30,24,.5); z-index: 70; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-out); } .sheet-backdrop.show { opacity: 1; pointer-events: auto; } .sheet { width: 100%; max-width: 520px; background: var(--bg); border-radius: 28px 28px 0 0; padding: 10px 22px calc(28px + env(safe-area-inset-bottom)); max-height: 82vh; overflow-y: auto; transform: translateY(100%); transition: transform .32s var(--ease-out); box-shadow: 0 -20px 50px -20px rgba(0,0,0,.3); } .sheet-backdrop.show .sheet { transform: translateY(0); } .sheet-handle { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 16px; } .sheet-detail-header { position: sticky; top: -10px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px -6px 14px; padding: 6px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); } .sheet-close { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 30px; font-weight: 300; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } .sheet-close:active { transform: scale(.92); } /* Creación de avatar: pantalla amplia, legible y pensada para material visual. */ #post-sheet-backdrop.avatar-creation-active { align-items: stretch; padding: 0; background: rgba(19,29,23,.72); } #post-sheet-backdrop.avatar-creation-active #post-sheet { box-sizing: border-box; width: 100%; max-width: none; height: 100dvh; max-height: none; padding: 0; border-radius: 0; overflow: hidden; background: var(--bg); } #post-sheet-backdrop.avatar-creation-active #post-sheet-body { box-sizing: border-box; height: 100%; overflow: auto; padding: clamp(22px,4vw,48px) clamp(18px,6vw,88px) calc(32px + env(safe-area-inset-bottom)); } .avatar-create-shell { width: min(1160px,100%); margin: 0 auto; } .avatar-create-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:24px; border-bottom:1px solid var(--line); } .avatar-create-header h2 { margin:10px 0 4px; font-size:clamp(26px,4vw,42px); letter-spacing:-.035em; } .avatar-create-header p { margin:0; color:var(--muted); font-size:14px; } .avatar-create-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,350px); gap:clamp(24px,5vw,72px); align-items:start; padding-top:28px; } .avatar-create-main { min-width:0; max-width:720px; } .avatar-create-intro { display:flex; gap:14px; align-items:flex-start; padding:18px; margin-bottom:24px; border:1px solid #c8dfcc; border-radius:20px; background:linear-gradient(135deg,#e8f4e9,#f8fbf5); } .avatar-create-intro>span { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:13px; background:#fff; font-size:20px; } .avatar-create-intro h3 { margin:1px 0 5px; font-size:17px; } .avatar-create-intro p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; } .avatar-create-main .library-field { margin-bottom:20px; font-size:13px; } .avatar-create-main .input { min-height:50px; padding:12px 14px; border-radius:14px; font-size:15px; } .avatar-file-picker { display:flex; align-items:center; gap:13px; min-height:82px; padding:16px; border:1.5px dashed #9abda4; border-radius:16px; background:#fbfdf9; cursor:pointer; transition:.2s ease; } .avatar-file-picker:hover,.avatar-file-picker:focus-within,.avatar-file-picker.has-file { border-color:var(--green); background:var(--green-soft); } .avatar-file-picker input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .avatar-file-picker>span:nth-child(2) { display:grid; gap:4px; min-width:0; } .avatar-file-picker b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; } .avatar-file-picker small { color:var(--muted); font-size:11px; } .avatar-file-icon { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:12px; background:var(--green); color:#fff; font-size:24px; font-weight:300; } .avatar-consent { margin:8px 0 20px; padding:16px 0; font-size:14px; } .avatar-consent input { width:20px; height:20px; flex:none; accent-color:var(--green); } .avatar-create-submit { width:100%; min-height:54px; font-size:15px; } .avatar-create-summary { position:sticky; top:0; padding:24px; border:1px solid #c8dfcc; border-radius:22px; background:#fff; box-shadow:0 14px 32px rgba(31,61,48,.08); } .avatar-summary-badge { display:grid; place-items:center; width:46px; height:46px; border-radius:15px; background:var(--green-soft); font-size:23px; } .avatar-create-summary h3 { margin:16px 0 6px; font-size:20px; } .avatar-create-summary>p { font-size:13px; line-height:1.45; } .avatar-summary-stat { display:flex; justify-content:space-between; gap:10px; padding:13px 0; border-top:1px solid var(--line-soft); } .avatar-summary-stat:first-of-type { margin-top:19px; } .avatar-summary-stat b { font-size:14px; } .avatar-summary-stat span { color:var(--muted); font-size:12px; text-align:right; } .avatar-summary-note { margin-top:11px; padding:12px; border-radius:13px; background:var(--sun-soft); color:var(--muted); font-size:11.5px; line-height:1.4; } @media (max-width: 760px) { #post-sheet-backdrop.avatar-creation-active #post-sheet-body { padding:18px 16px calc(24px + env(safe-area-inset-bottom)); } .avatar-create-header { padding-bottom:18px; } .avatar-create-header h2 { font-size:29px; } .avatar-create-layout { display:block; padding-top:20px; } .avatar-create-summary { position:static; margin-top:24px; } } .strategy-context-intro { display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin: 2px 0 14px; border-radius: 17px; background: linear-gradient(135deg, var(--green-soft), var(--sun-soft)); } .strategy-context-intro > span { flex: none; width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: var(--green-deep); color: #fff; font-size: 18px; } .strategy-context-intro h3 { margin: 1px 0 4px; font-size: 17px; } .strategy-context-intro p { color: var(--muted); font-size: 12.5px; line-height: 1.45; } .strategy-context-question { display: block; padding: 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); } .strategy-context-question > span { display: flex; align-items: flex-start; gap: 9px; } .strategy-context-question > span b { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: var(--sun-soft); color: var(--sun-deep); font-size: 11px; } .strategy-context-question strong { padding-top: 2px; font-size: 13.5px; line-height: 1.35; } .strategy-context-question small { display: block; margin: 5px 0 9px 33px; color: var(--muted); font-size: 11px; line-height: 1.35; } .strategy-context-examples { margin: 7px 0 9px 33px; padding: 9px 11px; border-radius: 10px; background: var(--sun-soft); color: var(--ink); font-size: 11px; line-height: 1.45; } .strategy-context-examples b { color: var(--sun-deep); } .strategy-context-skip { width: auto; margin: 8px 0 0 33px; padding: 7px 10px; font-size: 11px; } .strategy-context-question textarea:disabled { opacity: .55; background: var(--soft); } .strategy-context-question textarea { width: 100%; resize: vertical; min-height: 76px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; line-height: 1.45; outline: none; } .strategy-context-question textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent); } .strategy-context-question textarea.invalid { border-color: #c65d50; background: #fff5f3; } .strategy-context-promise { display: grid; gap: 3px; padding: 12px 14px; margin: 12px 0 14px; border-radius: 14px; background: var(--green-soft); color: var(--green-deep); } .strategy-context-promise b { font-size: 12px; } .strategy-context-promise span { font-size: 11.5px; line-height: 1.4; } .sheet-media-wrap { position: relative; margin-bottom: 14px; } /* 4:5 por defecto (formato foto de IG); se ajusta por JS al ratio real de la primera imagen para que nada se vea "cuadrado" ni recortado */ .sheet-media-carousel { display: flex; width: 100%; aspect-ratio: 4 / 5; overflow-x: auto; overflow-y: hidden; border-radius: 16px; background: var(--line-soft); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sheet-media-nav { display: none; position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: var(--shadow); font-size: 30px; line-height: 1; color: var(--ink); } .sheet-media-nav.prev { left: 10px; } .sheet-media-nav.next { right: 10px; } .sheet-media-carousel::-webkit-scrollbar { display: none; } .sheet-media-slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; overflow: hidden; } .sheet-media-slide img, .sheet-media-slide video { width: 100%; height: 100%; object-fit: contain; display: block; } .sheet-media-count { position: absolute; top: 10px; right: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(20,30,24,.68); color: #fff; font-size: 12px; font-weight: 750; pointer-events: none; } .sheet-media-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 5px; padding: 5px 7px; border-radius: 999px; background: rgba(20,30,24,.42); pointer-events: none; } .sheet-media-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); } .sheet-media-dots span.on { width: 16px; border-radius: 4px; background: #fff; } /* ---------- Toast ---------- */ #toast { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 13px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: all .3s var(--ease-out); z-index: 2100; max-width: 88%; text-align: center; box-shadow: var(--shadow-lg); } #toast.show { opacity: 1; transform: translateX(-50%); } .publish-feedback { display: flex; align-items: flex-start; gap: 11px; margin: 4px 0 14px; padding: 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; } .publish-feedback span { display: block; } .publish-feedback.working { background: var(--sun-soft); color: var(--ink); } .publish-feedback.success { background: var(--green-soft); color: var(--green-deep); border: 1px solid var(--green); } .publish-feedback.error { background: #FDECEA; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); } .publish-result-icon { width: 25px; height: 25px; flex: none; border-radius: 50%; color: #fff; display: flex !important; align-items: center; justify-content: center; font-weight: 900; } .publish-feedback.success .publish-result-icon { background: var(--green-deep); } .publish-feedback.error .publish-result-icon { background: var(--danger); } .publish-result-icon.pending { background: var(--sun-deep); } .publish-spinner { width: 22px; height: 22px; flex: none; border: 3px solid rgba(0,0,0,.12); border-top-color: var(--sun-deep); border-radius: 50%; animation: publish-spin .8s linear infinite; } @keyframes publish-spin { to { transform: rotate(360deg); } } /* ---------- Overlay de carga ---------- */ #splash { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; z-index: 100; transition: opacity .4s, visibility .4s; } #splash.hide { opacity: 0; visibility: hidden; pointer-events: none; } #splash svg { width: 74px; height: 74px; animation: breathe 2.2s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ---------- Instalación iOS: ilustración ---------- */ .ios-illustration { position: relative; background: var(--card); border-radius: var(--radius-lg); padding: 24px 20px 20px; box-shadow: var(--shadow); overflow: hidden; } .ios-toolbar { display: flex; align-items: center; justify-content: center; gap: 26px; background: #F1F1F1; border-radius: 16px; padding: 14px 10px; position: relative; } .ios-toolbar .ios-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: #8A8A8E; } .ios-toolbar .ios-icon.highlight { color: #007AFF; position: relative; } .ios-ring { position: absolute; width: 52px; height: 52px; border: 3px solid var(--sun); border-radius: 16px; animation: ios-pulse 1.6s ease-in-out infinite; pointer-events: none; } @keyframes ios-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .6; } } .ios-arrow { display: flex; justify-content: center; margin: 10px 0; color: var(--sun-deep); animation: ios-bounce 1.4s ease-in-out infinite; } @keyframes ios-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } } .ios-sheet-mock { background: #F7F7F7; border-radius: 14px; padding: 10px; } .ios-sheet-row { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-radius: 10px; } .ios-sheet-row.highlight { background: #fff; box-shadow: var(--shadow-sm); } .ios-sheet-row .ios-sq { width: 30px; height: 30px; border-radius: 8px; background: #E5E5E5; display: flex; align-items: center; justify-content: center; flex: none; } .ios-sheet-row.highlight .ios-sq { background: var(--green); color: #fff; } .ios-sheet-row span { font-size: 14px; font-weight: 600; color: #1c1c1e; } /* ============ Responsive: escritorio y tablet (≥768px) ============ El móvil es la base; en pantallas grandes la app vive en un lienzo centrado con aire, rejillas más anchas y estados hover (solo en dispositivos con ratón). */ @media (min-width: 768px) { body { background: #ECEDDE; } #app { max-width: 1120px; background: var(--bg); min-height: 100vh; box-shadow: 0 0 70px -18px rgba(32, 60, 44, .28); border-inline: 1px solid var(--line); } .screen { padding-left: 44px; padding-right: 44px; padding-top: 8px; } /* Onboarding/login: llenar el alto del dispositivo (nada de mares vacíos): contenido centrado en vertical, más ancho y con tipografía mayor. */ .screen.no-tabbar { max-width: 580px; margin: 0 auto; width: 100%; } .screen.no-tabbar.active { display: flex; flex-direction: column; justify-content: safe center; min-height: calc(100vh - 40px); } .screen.no-tabbar h2 { font-size: 30px !important; } .screen.no-tabbar p.muted { font-size: 16.5px !important; } .screen.no-tabbar .btn { padding: 18px; font-size: 17px; } .screen.no-tabbar .trait { font-size: 15.5px; padding: 14px 0; } #soul-summary { max-height: 360px !important; font-size: 15px !important; } #tour-card { min-height: 360px !important; } .tile { min-height: 150px; padding: 22px 20px; } .metric-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } .cal-grid, .cal-head { max-width: 560px; } #tabbar { width: min(760px, calc(100% - 24px)); } .social-preview, .preview-validation { max-width: 390px; margin-left: auto; margin-right: auto; } .draft-media-item { flex-basis: min(68%, 620px); aspect-ratio: 4 / 5; } .draft-media-item img { object-fit: contain; background: var(--line-soft); } .sheet-media-nav { display: grid; place-items: center; } h2 { font-size: 27px !important; } .card { padding: 24px; } } @media (min-width: 768px) and (prefers-color-scheme: dark) { body { background: #0C100D; } #app { box-shadow: 0 0 70px -18px rgba(0, 0, 0, .75); } } /* Pantallas muy anchas: un pelín más de lienzo para stats/calendario */ @media (min-width: 1200px) { #app { max-width: 1280px; } .screen { padding-left: 64px; padding-right: 64px; } } /* Hover solo donde hay puntero real (evita hovers pegajosos en táctil) */ @media (hover: hover) and (pointer: fine) { .tile:hover { transform: translateY(-4px); border-color: var(--green); box-shadow: var(--shadow); } .card:hover.gallery-empty-tile { border-color: var(--green); } .btn-green:hover, .btn-sun:hover { filter: brightness(1.06); } .btn-ghost:hover { border-color: var(--green); } .tab:hover { color: var(--green-deep); } .badge:hover { transform: scale(1.12) rotate(-4deg); } .comp-btn:hover { filter: brightness(1.08); } .cal-d:hover { border-color: var(--sage); transform: translateY(-2px); } .metric:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .gallery-item:hover { transform: scale(1.03); box-shadow: var(--shadow); } .path-step:hover .path-dot { transform: scale(1.08); } .chip:hover { border-color: var(--green); } } /* Móvil: el onboarding también centra su contenido en vertical */ @media (max-width: 767px) { .screen.no-tabbar.active { display: flex; flex-direction: column; justify-content: safe center; min-height: calc(100dvh - 40px); } .media-lightbox { padding: 70px 8px 54px; } .media-lightbox-nav { width: 44px; height: 58px; font-size: 36px; background: rgba(0,0,0,.42); } .media-lightbox-nav.prev { left: 8px; } .media-lightbox-nav.next { right: 8px; } .media-zoom-hint { opacity: 1; } } /* Móviles muy pequeños (≤340px) */ @media (max-width: 340px) { .screen { padding-left: 14px; padding-right: 14px; } .tile { min-height: 116px; padding: 16px 14px; } .tile b { font-size: 14.5px; } h2 { font-size: 21px !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } } /* ---------- Identidad de marca (onboarding v2) ---------- */ .mood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .mood { position: relative; aspect-ratio: 1; border-radius: 16px; border: 2.5px solid transparent; overflow: hidden; padding: 0; cursor: pointer; background: var(--line); transition: transform .16s, border-color .16s, box-shadow .16s; } .mood:active { transform: scale(.95); } .mood.on { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); } .mood.on::after { content: ""; position: absolute; right: 7px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px #fff; } /* El tick, dibujado con bordes: el glifo ✓ no existe en todas las fuentes de sistema. */ .mood.on::before { content: ""; position: absolute; right: 13px; top: 11px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(42deg); z-index: 2; } .mood img { width: 100%; height: 100%; object-fit: cover; display: block; } .mood b { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10.5px; font-weight: 700; color: #fff; padding: 16px 6px 5px; text-align: center; background: linear-gradient(transparent, rgba(0,0,0,.66)); } .path-card { display: block; width: 100%; text-align: left; background: var(--card); color: var(--ink); border: 1.5px solid var(--line); border-radius: 18px; padding: 15px 16px; margin-bottom: 10px; cursor: pointer; transition: border-color .16s, background .16s; } .path-card.on { border-color: var(--green); background: var(--green-soft); } .path-card b { display: block; font-size: 15.5px; font-weight: 800; margin-bottom: 2px; } .path-card span { font-size: 12.5px; color: var(--muted); font-weight: 600; } .brand-import-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; } .brand-import-btn { min-width: 0; min-height: 72px; padding: 10px 5px; border-radius: 16px; flex-direction: column; gap: 5px; line-height: 1.1; } .brand-import-btn > span { font-size: 20px; line-height: 1; } .brand-import-btn > b { font-size: 11.5px; white-space: normal; text-align: center; } .canva-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font: 800 15px/1 Georgia, serif !important; background: linear-gradient(135deg, #00c4cc, #7d2ae8); } .mini-spin { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .canva-design-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: min(66vh, 620px); overflow: auto; padding: 4px 2px 16px; } .canva-design { min-width: 0; text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 15px; padding: 8px; color: var(--ink); } .canva-design img, .canva-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; margin-bottom: 7px; background: var(--green-soft); } .canva-design b, .canva-design small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .canva-design b { font-size: 13px; }.canva-design small { color: var(--muted); font-size: 11px; margin-top: 2px; } .canva-design.loading { border-color: var(--green); background: var(--green-soft); } .strategy-requirements .trait { margin-bottom: 6px; } .strategy-files { display: grid; gap: 6px; margin-top: 10px; } .strategy-file { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--line-soft); } .strategy-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; } .strategy-file button { width: 28px; height: 28px; border-radius: 50%; color: var(--danger); background: var(--card); font-size: 19px; line-height: 1; } .pal-row { display: flex; gap: 9px; margin-bottom: 14px; } .pal { flex: 1; height: 52px; border-radius: 14px; border: 2.5px solid transparent; cursor: pointer; padding: 0; transition: transform .16s, border-color .16s; } .pal.on { border-color: var(--ink); transform: scale(1.04); } /* Tipografías propias del negocio (marca y asistente de identidad). */ .brand-fonts-card .brand-font { padding: 11px; margin-bottom: 9px; border: 1.5px solid var(--line); border-radius: 13px; background: var(--card-2); } .brand-fonts-card .brand-font-sample { overflow: hidden; border-radius: 9px; background: #f5f0e6; } .brand-fonts-card .brand-font-sample img { display: block; width: 100%; height: auto; } .brand-fonts-card .brand-font-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 9px 0 7px; } .brand-fonts-card .brand-font-meta b { font-size: 13.5px; } .brand-fonts-card .brand-font-meta small { color: var(--muted); font-size: 11px; } .brand-fonts-card .brand-font-roles { margin: 0 0 6px; } .brand-fonts-card .brand-font-roles .chip { font-size: 11.5px; padding: 6px 10px; } .brand-fonts-card .brand-font-del { padding: 0; border: 0; background: none; color: var(--danger); font-size: 12px; font-weight: 700; cursor: pointer; } .font-card { display: block; width: 100%; text-align: left; background: var(--card); color: var(--ink); border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 15px; margin-bottom: 9px; cursor: pointer; } .font-card.on { border-color: var(--green); background: var(--green-soft); } .font-card em { font-style: normal; font-size: 19px; display: block; } .font-card small { color: var(--faint); font-size: 11.5px; font-weight: 600; } .q-label { font-size: 13px; font-weight: 800; margin: 18px 0 8px; } .q-label:first-child { margin-top: 0; } /* Calibración rápida de identidad verbal: tarjetas y decisiones visibles, sin pedirle al negocio que sepa nombrar su tono antes de poder elegirlo. */ .id-long-input { width: 100%; resize: vertical; min-height: 88px; line-height: 1.45; } .values-explainer { margin-bottom: 16px; padding: 14px 16px; border: 1px solid rgba(79,140,112,.25); border-radius: 16px; background: var(--green-soft); color: var(--ink); } .values-explainer b { display: block; font-size: 13.5px; } .values-explainer p, .values-explainer small { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; } .values-explainer p { margin-top: 5px; } .values-explainer small { margin-top: 7px; font-size: 11px; } .goal-grid, .cause-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .goal-card, .cause-card { position: relative; min-height: 112px; padding: 15px; text-align: left; border: 1.5px solid var(--line); border-radius: 17px; background: var(--card); color: var(--ink); cursor: pointer; transition: .16s ease; } .goal-card:hover, .cause-card:hover { transform: translateY(-1px); } .goal-card.on, .cause-card.on { border-color: var(--green); background: var(--green-soft); box-shadow: 0 0 0 3px rgba(161,231,0,.16); } .goal-card span, .goal-card small, .cause-card b, .cause-card small { display: block; } .goal-card span { font-size: 14px; font-weight: 800; padding-right: 18px; } .goal-card small, .cause-card small { margin-top: 6px; color: var(--muted); font-size: 11.5px; line-height: 1.35; } .goal-card i { display: none; position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--green); color: white; font-style: normal; font-size: 12px; } .goal-card.on i { display: grid; } .cause-card { min-height: 126px; text-align: center; } .cause-card strong { display: block; font-size: 29px; margin-bottom: 7px; } .cause-card b { font-size: 13px; } .cause-other { padding-bottom: 12px; } .cause-other input { width: 100%; margin-top: 9px; padding: 8px 10px; border-radius: 10px; background: var(--card-2); text-align: center; font-size: 11.5px; } .mode-choice .path-card { margin-bottom: 8px; } .voice-calibration { display: grid; gap: 10px; margin-bottom: 16px; } .voice-card { padding: 14px; border: 1.5px solid var(--line); border-radius: 17px; background: var(--card); } .voice-card.positive { border-color: #75c96b; background: #f1fae9; } .voice-card.negative { border-color: #e8b079; background: #fff7eb; } .voice-card p { font-size: 14px; line-height: 1.42; margin: 0 0 11px; } .voice-card > div { display: flex; gap: 8px; } .voice-card button { flex: 1; padding: 9px 8px; border-radius: 11px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink); font-size: 11.5px; font-weight: 750; cursor: pointer; } .voice-card.positive button:first-child { background: var(--green); color: white; border-color: var(--green); } .voice-card.negative button:last-child { background: var(--sun-soft); color: var(--sun-deep); border-color: var(--sun); } .voice-add-card { width: 100%; border-style: dashed; } .voice-dimensions { display: grid; gap: 9px; margin-bottom: 15px; } .voice-dimension { display: grid; grid-template-columns: 84px minmax(0, 1fr) 84px; gap: 7px; align-items: center; } .voice-dimension > span { font-size: 10.5px; color: var(--muted); font-weight: 700; } .voice-dimension > span:last-child { text-align: right; } .voice-dimension > div { display: flex; gap: 5px; } .voice-dimension button { flex: 1; padding: 8px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--muted); font-size: 10.5px; cursor: pointer; } .voice-dimension button.on { border-color: var(--green); background: var(--green-soft); color: var(--ink); font-weight: 800; } .real-material-section { margin-top: 4px; } .real-material-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .real-material { min-width: 0; padding: 5px; border: 1.5px solid var(--line); border-radius: 13px; background: var(--card); text-align: left; cursor: pointer; } .real-material.on { border-color: var(--green); box-shadow: 0 0 0 3px rgba(161,231,0,.16); } .real-material > span { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 9px; background: var(--line-soft); } .real-material img { width: 100%; height: 100%; object-fit: cover; } .real-material small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 5px 2px 2px; font-size: 10px; color: var(--muted); } /* Objetivo primero: la decisión de estrategia queda visible y accionable. */ .onboarding-goals { margin: 12px 0 16px; } .onboarding-goals .goal-card { min-height: 126px; } .onboarding-goal-preview { display: flex; align-items: center; gap: 14px; padding: 12px; margin-bottom: 16px; background: var(--green-soft); } .onboarding-goal-preview > div { flex: 1; } .onboarding-goal-preview b { display: block; font-size: 13.5px; } .onboarding-goal-preview p { margin-top: 4px; font-size: 12px; line-height: 1.35; } .onboarding-goal-preview img { width: 94px; height: 72px; border-radius: 11px; object-fit: cover; flex: none; } .onboarding-name-label { display: block; margin: 2px 0 7px; font-size: 12.5px; font-weight: 800; } .onboarding-name-label span { color: var(--muted); font-weight: 500; } .onboarding-path-choice { margin-top: 15px; } .onboarding-path-choice .q-label { margin-top: 0; }.audience-calibration { display: grid; gap: 10px; margin-bottom: 16px; } .audience-example-card { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px; border: 1.5px solid var(--line); border-radius: 17px; background: var(--card); transition: .16s ease; } .audience-example-card.positive { border-color: var(--green); background: var(--green-soft); } .audience-example-card.negative { border-color: var(--sun); background: var(--sun-soft); } .audience-example-card p { font-size: 14px; line-height: 1.4; } .audience-example-actions { display: flex; gap: 7px; } .audience-example-actions button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card-2); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; } .audience-example-actions button:first-child { color: var(--danger); } .audience-example-actions button:last-child { color: var(--green-deep); } .audience-example-card.negative .audience-example-actions button:first-child { background: var(--sun); color: #fff; border-color: var(--sun); } .audience-example-card.positive .audience-example-actions button:last-child { background: var(--green); color: #fff; border-color: var(--green); } .strategy-manual-card { display: grid; grid-template-columns: minmax(150px, .7fr) 1fr; gap: 18px; align-items: center; padding: 14px; } .strategy-manual-card img { width: 100%; height: 190px; object-fit: cover; border-radius: 15px; } .strategy-manual-card h3 { font-size: 19px; line-height: 1.18; } .strategy-manual-card .btn { width: auto; padding: 12px 16px; } @media (max-width: 560px) { .strategy-manual-card { grid-template-columns: 1fr; } .strategy-manual-card img { height: 150px; } } /* ---------- Grabación visible (feedback prueba Rebeldía) ---------- */ #rec-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; width: min(480px, calc(100% - 28px)); z-index: 300; display: flex; align-items: center; gap: 10px; background: var(--danger); color: #fff; font-size: 14px; font-weight: 600; border-radius: 999px; padding: 13px 18px; box-shadow: 0 14px 34px -10px rgba(196,72,58,.6); cursor: pointer; animation: pop .25s cubic-bezier(.2,.7,.3,1.2); } .rec-dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; flex: none; animation: rec-blink 1s infinite; } @keyframes rec-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } } button.recording { border-color: var(--danger) !important; background: color-mix(in srgb, var(--danger) 12%, transparent) !important; } /* ---------- Escritorio: el onboarding y la identidad a lo ancho ---------- */ @media (min-width: 768px) { /* El login se queda estrecho (formulario); el resto del recorrido respira. */ .screen.no-tabbar { max-width: 900px; } #s-login { max-width: 520px; } .mood-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } .mood b { font-size: 12px; } #id-body .chips { gap: 10px; } #id-body .chip { font-size: 15px; padding: 12px 18px; } .goal-grid, .cause-grid { gap: 13px; } .goal-card, .cause-card { min-height: 126px; padding: 18px; } .voice-calibration { grid-template-columns: repeat(2, minmax(0, 1fr)); } .voice-card { min-height: 150px; } .path-card { padding: 18px 20px; } .brand-import-row { gap: 12px; } .brand-import-btn { min-height: 82px; } .brand-import-btn > b { font-size: 14px; } .canva-design-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pal { height: 62px; } #s-identity .font-card img { max-width: 300px !important; } /* Mi marca: los bloques en dos columnas */ #brand-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; } #brand-body > .card:first-child, #brand-body > .card:last-of-type, #brand-body > #brand-delete { grid-column: 1 / -1; } } @media (min-width: 1200px) { .screen.no-tabbar { max-width: 1040px; } .mood-grid { grid-template-columns: repeat(5, 1fr); } } @media(min-width:768px){#s-cal .cal-head,#s-cal .cal-grid{width:100%;max-width:none}} /* --- Logotipo del negocio en "Mi marca" ------------------------------- */ .brand-logo-frame { flex: none; width: 92px; height: 92px; border-radius: 16px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden; } .brand-logo-frame img { max-width: 100%; max-height: 100%; object-fit: contain; } @media (prefers-color-scheme: dark) { .brand-logo-frame { background: #f4f4ef; } } /* --- Aviso de cobro fallido -------------------------------------------- */ .billing-alert { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 16px; padding: 16px 17px; border-radius: 20px; border: 2px solid var(--sun); background: var(--sun-soft); } .billing-alert .ba-ic { font-size: 26px; line-height: 1; flex: none; } .billing-alert b { display: block; font-size: 15px; } .billing-alert p { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin: 4px 0 12px; } .billing-alert .btn { min-height: 48px; font-size: 15px; } .trial-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 10px 12px 10px 16px; border-radius: 16px; background: var(--green-soft); font-size: 13.5px; color: var(--ink); } .trial-note .btn { width: auto; flex: none; padding: 8px 14px; font-size: 13px; min-height: 0; } /* Botón de añadir material cuando el estilo ya no admite más archivos */ .material-source-buttons button.is-full { opacity: .55; cursor: not-allowed; } /* Biblioteca multimedia y centro de control (julio 2026) */ .library-back{font-size:32px;line-height:1;padding:0 7px;color:var(--muted)}.library-add{background:var(--green);color:white;border-radius:13px;padding:10px 13px;font-weight:750}.library-categories{display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}.library-categories button{white-space:nowrap;padding:9px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:12px;font-weight:650}.library-categories button.on{background:var(--ink);color:white;border-color:var(--ink)}.library-categories span{opacity:.65;margin-left:3px}.library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding-bottom:110px}.library-empty{grid-column:1/-1;text-align:center;padding:36px 20px;background:var(--card);border:1px dashed var(--line);border-radius:20px}.library-empty>span{font-size:34px}.library-empty h3{margin:10px 0 5px}.library-empty p{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:14px}.library-empty.compact{padding:18px}.library-edit-preview{width:100%;max-height:260px;object-fit:contain;background:#edf0eb;border-radius:15px;margin:10px 0 15px}.library-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:750;margin-bottom:12px}.library-field .input{background:var(--card)}.library-limit{background:var(--sun-soft);padding:11px 13px;border-radius:13px;font-size:12.5px;line-height:1.4;margin:12px 0}.library-sources{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.library-sources button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:15px 5px;border:1px solid var(--line);border-radius:15px;background:var(--card)}.library-sources span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--green-soft);font-size:20px}.library-sources b{font-size:12.5px}.library-sources small{font-size:9.5px;color:var(--muted);text-align:center}.cloud-resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:65vh;overflow:auto}.cloud-resource-grid button{display:flex;flex-direction:column;text-align:left;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}.cloud-resource-grid button>img,.cloud-resource-grid button>span{width:100%;aspect-ratio:1.3;object-fit:cover;display:grid;place-items:center;font-size:30px;background:#edf0eb}.cloud-resource-grid b{font-size:12px;padding:8px 8px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.cloud-resource-grid small{font-size:10px;color:var(--muted);padding:0 8px 8px}.cloud-resource-grid button:disabled{opacity:.45} .control-empty{padding:17px;text-align:center;font-size:12px;color:var(--muted);background:var(--card);border-radius:15px}.strategy-library-title{display:flex;justify-content:space-between;align-items:end;margin:17px 0 8px}.strategy-library-title b{font-size:12.5px}.strategy-library-title small{font-size:10px;color:var(--muted)}.strategy-library-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:310px;overflow:auto}.strategy-resource{position:relative;display:flex;flex-direction:column;border:2px solid transparent;border-radius:14px;background:var(--card);overflow:hidden;text-align:left}.strategy-resource.selected{border-color:var(--green)}.strategy-resource img{width:100%;aspect-ratio:1.25;object-fit:cover}.strategy-resource b{font-size:11.5px;padding:7px 7px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.strategy-resource small{font-size:9.5px;color:var(--muted);padding:0 7px 8px;line-height:1.3}.strategy-resource em{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.65);color:white;border-radius:7px;padding:3px 5px;font-size:9px;font-style:normal}.strategy-resource-check{position:absolute;right:6px;top:6px;z-index:1;width:24px;height:24px;border-radius:50%;background:white;display:grid;place-items:center;color:var(--green-deep);font-weight:900;box-shadow:0 1px 6px rgba(0,0,0,.18)}.strategy-file small{margin-left:auto;font-size:9.5px;color:var(--muted)} @media(min-width:720px){.library-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.strategy-library-picker{grid-template-columns:repeat(3,minmax(0,1fr))}} /* ═══════════════════════════════════════════════════════════════════════════ KALMA COMPACT — sistema de diseño de paneles (30-jul-2026) Referencia: paneles densos tipo "bento" (tarjetas pequeñas, mucha información por pantalla, jerarquía por tamaño y color, no por hueco). Reglas del sistema, válidas para TODAS las pantallas de aquí en adelante: · Una tarjeta = un dato o una decisión. Nada de tarjetas contenedoras. · Densidad antes que aire: padding 14-18px, radios 16-22px, filas de 52px. · Etiqueta pequeña en mayúsculas + valor grande. El ojo salta al valor. · Color con intención: verde profundo = estrategia, sol = acción pendiente, crema = superficie secundaria. El resto, tinta sobre papel. · Todo lo tocable se mueve al tocarlo (scale/translate <150ms). ═══════════════════════════════════════════════════════════════════════════ */ :root { --k-gap: 12px; --k-r-lg: 22px; --k-r: 18px; --k-r-sm: 12px; --k-pad: 15px; --k-rail: 0px; --k-dark: linear-gradient(142deg, #16382B 0%, #2B5A47 52%, #3C7259 100%); --k-elev: 0 1px 2px rgba(30,50,40,.05), 0 10px 26px -20px rgba(22,55,43,.55); --k-elev-up: 0 2px 6px rgba(30,50,40,.07), 0 20px 42px -24px rgba(22,55,43,.62); --k-surface: var(--card); --k-cream: #F3F0E4; } @media (prefers-color-scheme: dark) { :root { --k-cream: #202A23; --k-elev: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px -20px rgba(0,0,0,.8); --k-elev-up: 0 2px 8px rgba(0,0,0,.4), 0 20px 42px -24px rgba(0,0,0,.9); } } @property --kp { syntax: ""; initial-value: 0deg; inherits: false; } /* ---------- Barra lateral de escritorio (sustituye a la inferior) ---------- */ #k-rail { position: fixed; left: 0; top: 0; bottom: 0; width: var(--k-rail); z-index: 46; display: none; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 12px; background: var(--card); border-right: 1px solid var(--line); } #k-rail .k-rail-logo { width: 42px; height: 42px; border-radius: 14px; background: var(--green-soft); display: grid; place-items: center; margin-bottom: 14px; flex: none; } #k-rail .k-rail-logo svg { width: 26px; height: 26px; } .k-rail-item { position: relative; width: 52px; min-height: 50px; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--faint); font-size: 9px; font-weight: 800; letter-spacing: .02em; transition: color .18s, background .18s, transform .16s var(--ease-spring); } .k-rail-item svg { width: 21px; height: 21px; } .k-rail-item:active { transform: scale(.9); } .k-rail-item.on { color: var(--green-deep); background: var(--green-soft); } .k-rail-item.on::before { content: ""; position: absolute; left: -10px; width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: var(--green); animation: railDot .3s var(--ease-spring); } @keyframes railDot { from { transform: scaleY(0); } to { transform: scaleY(1); } } .k-rail-spacer { flex: 1; } #k-rail.hidden { display: none !important; } @media (min-width: 1024px) { :root { --k-rail: 78px; --k-gap: 14px; --k-pad: 17px; } body { padding-left: var(--k-rail); } #k-rail { display: flex; } #tabbar { display: none !important; } .screen { padding-bottom: 92px; } } /* ---------- Cabecera compacta de la Home ---------- */ #s-home { max-width: none; width: 100%; padding: 10px 16px calc(120px + env(safe-area-inset-bottom)); } .kh-top { display: flex; align-items: center; gap: 10px; padding: 6px 0 14px; } .kh-biz { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 11px 7px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); box-shadow: var(--k-elev); transition: transform .15s var(--ease-spring), border-color .2s; } .kh-biz:active { transform: scale(.97); } .kh-biz .kh-mark { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--green-deep); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; } .kh-biz-copy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; line-height:1.12; } .kh-biz-copy small { color:var(--green-deep); font-size:8.5px; font-weight:850; letter-spacing:.035em; text-transform:uppercase; } .kh-biz b { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kh-biz-switch-icon { width:24px; height:24px; border-radius:9px; display:grid; place-items:center; flex:none; color:var(--green-deep); background:var(--green-soft); font-size:15px; font-weight:900; } .kh-when { text-align: right; line-height: 1.25; min-width: 0; } .kh-when b { display: block; font-size: 12.5px; font-weight: 800; text-transform: capitalize; } .kh-when span { font-size: 10.5px; color: var(--faint); font-weight: 600; } /* ---------- Rejilla bento ---------- */ .kh-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--k-gap); } .kh-grid > * { grid-column: 1 / -1; } .kh-grid > *:not(.kh-plain) { animation: kcIn .44s var(--ease-out) both; } .kh-grid > *:nth-child(1) { animation-delay: .01s } .kh-grid > *:nth-child(2) { animation-delay: .05s } .kh-grid > *:nth-child(3) { animation-delay: .09s } .kh-grid > *:nth-child(4) { animation-delay: .13s } .kh-grid > *:nth-child(5) { animation-delay: .17s } .kh-grid > *:nth-child(6) { animation-delay: .21s } .kh-grid > *:nth-child(7) { animation-delay: .25s } .kh-grid > *:nth-child(8) { animation-delay: .29s } @keyframes kcIn { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } } .kc { position: relative; background: var(--k-surface); border: 1px solid var(--line); border-radius: var(--k-r); padding: var(--k-pad); box-shadow: var(--k-elev); overflow: hidden; } .kc-context-intake { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; color: #173d31; background: linear-gradient(125deg, #fff7e9 0%, #f8e2bd 100%); border-color: #ebc98f; } .kc-context-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--sun); color: var(--on-sun); font-size: 20px; box-shadow: 0 10px 20px -14px #80501d; } .kc-context-intake .k-eyebrow { color: #93601f; } .kc-context-intake h3 { margin: 4px 0 3px; font-size: 15.5px; } .kc-context-intake p { color: #705d43; font-size: 11.5px; line-height: 1.4; } #strat-body > .kc-context-intake { margin-bottom: 16px; } @media (max-width: 600px) { .kc-context-intake { grid-template-columns: auto minmax(0,1fr); gap: 10px; } .kc-context-intake .k-btn { grid-column: 1 / -1; width: 100%; } } .kc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .kc-head h3 { font-size: 15.5px; letter-spacing: -.02em; } .kc-head p { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; } .kc-count { flex: none; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 9px; background: var(--chip); color: var(--muted); font-size: 12px; font-weight: 800; display: grid; place-items: center; } .kc-count.attention { background: var(--sun); color: var(--on-sun); } .k-eyebrow { display: block; font-size: 9.5px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); } .kc-link { flex: none; font-size: 11.5px; font-weight: 800; color: var(--green-deep); display: inline-flex; align-items: center; gap: 3px; transition: gap .18s; } .kc-link:active { gap: 7px; } /* ---------- Tarjeta oscura (estrategia) ---------- */ .kc-dark { background: var(--k-dark); border-color: transparent; color: #EAF5EE; padding: 18px; } .kc-dark .k-eyebrow { color: #9FD9BC; } .kc-dark h1 { font-size: clamp(20px, 4.4vw, 27px); line-height: 1.08; margin: 7px 0 6px; color: #fff; } .kc-dark p { font-size: 12.5px; line-height: 1.5; color: #CFE6D9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .kc-mark { position: absolute; right: -22px; bottom: -26px; width: 168px; height: 168px; opacity: .1; pointer-events: none; } .kc-dark::after { content: ""; position: absolute; right: -70px; top: -70px; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; pointer-events: none; } .kc-dark .k-bar { background: rgba(255,255,255,.16); } .kc-dark .k-bar > i { background: var(--sun); } .kc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; position: relative; z-index: 1; } .k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 15px; border-radius: 13px; font-size: 13px; font-weight: 800; transition: transform .15s var(--ease-spring), filter .2s, background .2s; } .k-btn:active { transform: scale(.96); } .k-btn.sun { background: var(--sun); color: var(--on-sun); } .k-btn.green { background: var(--green-deep); color: #fff; } .k-btn.light { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.22); } .k-btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); } .k-btn.wide { width: 100%; } /* ---------- Barra de progreso y anillo ---------- */ .k-bar { height: 6px; border-radius: 99px; background: var(--ring-track); overflow: hidden; position: relative; z-index: 1; } .k-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--green); width: 0; transition: width 1.1s var(--ease-out); } .k-barlabel { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 12px 0 6px; position: relative; z-index: 1; } .k-barlabel small { font-size: 11px; font-weight: 700; opacity: .85; } .k-ring { position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--sun) var(--kp), var(--ring-track) 0); display: grid; place-items: center; transition: --kp 1.2s var(--ease-out); } .k-ring > span { width: 66px; height: 66px; border-radius: 50%; background: var(--card); display: grid; place-content: center; text-align: center; line-height: 1.1; } .k-ring b { font-size: 19px; font-weight: 850; letter-spacing: -.03em; } .k-ring small { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; } /* ---------- Métricas (KPI) ---------- */ .k-spark { display: block; width: 100%; height: 26px; margin-top: 8px; overflow: visible; } .k-spark path.line { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: sparkDraw 1.1s var(--ease-out) .15s forwards; } .k-spark path.area { fill: url(#kspark); stroke: none; opacity: 0; animation: fadeIn .6s .8s forwards; } .k-spark circle { fill: var(--green); opacity: 0; animation: fadeIn .4s 1.1s forwards; } @keyframes sparkDraw { to { stroke-dashoffset: 0; } } @keyframes fadeIn { to { opacity: 1; } } @keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* ---------- Filas compactas (listas de trabajo) ---------- */ .k-rows { display: flex; flex-direction: column; gap: 7px; } .k-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; min-height: 54px; padding: 9px 11px; border-radius: var(--k-r-sm); background: var(--card-2); border: 1px solid transparent; transition: transform .14s var(--ease-spring), background .2s, border-color .2s; } .k-row:active { transform: scale(.985); } .k-row > i { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--green-soft); color: var(--green-deep); font-size: 15px; font-style: normal; font-weight: 800; } .k-row > i.sun { background: var(--sun-soft); color: var(--sun-deep); } .k-row > span { flex: 1; min-width: 0; } .k-row b { display: block; font-size: 13px; font-weight: 750; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .k-row small { display: block; font-size: 11px; color: var(--muted); line-height: 1.3; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .k-row em { flex: none; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--muted); background: var(--chip); border-radius: 8px; padding: 4px 8px; white-space: nowrap; } .k-row em.sun { background: var(--sun-soft); color: var(--sun-deep); } .k-row em.green { background: var(--green-soft); color: var(--green-deep); } .k-row.done { opacity: .62; } .k-row.done > i { background: var(--green); color: #fff; } .k-row .k-chev { flex: none; color: var(--faint); font-size: 15px; font-weight: 700; } .k-row.two b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .k-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--chip); color: var(--muted); } .k-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .k-pill.needs_material { background: var(--sun-soft); color: var(--sun-deep); } .k-pill.preparing { background: var(--green-soft); color: var(--green-deep); } .k-pill.material_selected { background: var(--green-soft); color: var(--green-deep); } .k-pill.ready_for_review { background: var(--green); color: #fff; } /* ---------- Selector de red (segmentado) ---------- */ .k-seg { display: flex; gap: 5px; padding: 4px; border-radius: 14px; background: var(--chip); overflow-x: auto; scrollbar-width: none; } .k-seg::-webkit-scrollbar { display: none; } .k-seg button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 12px; border-radius: 10px; font-size: 12px; font-weight: 800; color: var(--muted); transition: background .2s, color .2s, transform .15s var(--ease-spring); } .k-seg button:active { transform: scale(.95); } .k-seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--k-elev); } .k-seg .platform-mark { width: 17px; height: 17px; border-radius: 5px; font-size: 10px; display: grid; place-items: center; } /* ---------- Semana (chips de día) ---------- */ /* ---------- Mini calendario del mes ---------- */ /* ---------- Tarjeta de próxima publicación ---------- */ .kc-next { display: flex; flex-direction: column; gap: 10px; } .kc-next .kc-next-top { display: flex; align-items: center; gap: 11px; } .kc-next .kc-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--sun-soft); display: grid; place-items: center; font-size: 21px; } .kc-next h2 { font-size: 16px; letter-spacing: -.02em; } .kc-next .kc-when { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: capitalize; } .kc-next p { font-size: 12.5px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Accesos y estados vacíos ---------- */ .kc-cta { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; background: var(--sun-soft); border-color: color-mix(in srgb, var(--sun) 40%, transparent); } .kc-cta > span { flex: none; width: 42px; height: 42px; border-radius: 14px; background: var(--card); display: grid; place-items: center; font-size: 20px; } .kc-cta b { display: block; font-size: 13.5px; } .kc-cta small { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; } .kc-cta em { flex: none; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--sun-deep); } .k-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 18px 12px; border: 1px dashed var(--line-strong); border-radius: var(--k-r-sm); color: var(--muted); font-size: 12px; line-height: 1.45; } .k-empty span { font-size: 22px; } .k-empty.ok { border-style: solid; border-color: color-mix(in srgb, var(--green) 34%, transparent); background: var(--green-soft); color: var(--green-deep); font-weight: 650; } .kh-error { text-align: center; padding: 30px 18px; } .kh-error b { display: block; font-size: 16px; margin-bottom: 6px; } .kh-error p { font-size: 13px; color: var(--muted); margin-bottom: 14px; } /* ---------- Lo que sé / me falta (marca incompleta) ---------- */ .k-known { display: flex; flex-wrap: wrap; gap: 6px; } .k-known span { font-size: 11.5px; font-weight: 650; color: var(--green-deep); background: var(--green-soft); border-radius: 9px; padding: 6px 9px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kc-hero-brand { display: flex; align-items: center; gap: 16px; } .kc-hero-brand > div { flex: 1; min-width: 0; } /* ---------- Escritorio: la Home se convierte en panel ---------- */ @media (min-width: 760px) { #s-home { padding: 14px clamp(18px, 3vw, 34px) 110px; } .kh-grid > .span7 { grid-column: span 7; } .kh-grid > .span5 { grid-column: span 5; } .kh-grid > .span6 { grid-column: span 6; } .kh-grid > .span8 { grid-column: span 8; } .kh-grid > .span4 { grid-column: span 4; } .kc-dark h1 { font-size: 26px; } .kh-top { padding: 10px 0 16px; } .kh-biz b { font-size: 16px; } .kh-when b { font-size: 13.5px; } } @media (min-width: 1024px) { #s-home { max-width: 1460px; margin: 0 auto; padding: 16px clamp(20px, 2.4vw, 40px) 96px; } .kc { padding: 18px; border-radius: var(--k-r-lg); } .kc-dark { padding: 22px 24px; } .kc-dark h1 { font-size: 30px; } .kc-dark p { font-size: 13.5px; -webkit-line-clamp: 2; } .k-row { min-height: 58px; padding: 10px 13px; } } @media (min-width: 1400px) { #s-home { padding-left: 44px; padding-right: 44px; } } /* Orden en móvil: primero lo que hay que decidir hoy, luego el contexto. */ @media (max-width: 759px) { .kh-grid { gap: 11px; } .kc-dark { padding: 17px 16px; } } @media (hover: hover) and (pointer: fine) { .kc:not(.kh-plain):hover { box-shadow: var(--k-elev-up); } .k-row:hover { background: var(--chip); border-color: var(--line); } .k-btn:hover { filter: brightness(1.07); } .k-rail-item:hover { color: var(--green-deep); background: var(--green-soft); } .kh-biz:hover { border-color: var(--green); } .kc-cta:hover { transform: translateY(-2px); } .kc-link:hover { gap: 7px; } } @media (prefers-reduced-motion: reduce) { .kh-grid > * { animation: none !important; } .k-spark path.line { stroke-dashoffset: 0 !important; animation: none; } .k-spark path.area, .k-spark circle { opacity: 1; animation: none; } } /* ---------- Piezas de la Home compacta ---------- */ .kh-bar { display: flex; align-items: center; gap: 10px; } .kh-bar .kc-link { margin-left: auto; white-space: nowrap; } .kc h1 { font-size: clamp(19px, 4.2vw, 25px); line-height: 1.12; margin: 5px 0 7px; } .kc-p { font-size: 12.5px; line-height: 1.5; color: var(--muted); } .kc-p b { color: var(--ink); } .kc-note { font-size: 10.5px; color: var(--faint); line-height: 1.4; margin-top: 9px; text-align: center; } .kc-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; } .kc-foot .k-btn { margin-left: auto; } .kc-next .kc-ic { transition: transform .3s var(--ease-spring); } .kc-next:hover .kc-ic { transform: rotate(-6deg) scale(1.06); } .k-phases { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; position: relative; z-index: 1; } .k-phases b { font-size: 10.5px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.12); color: #DCEDE3; } .k-phases b.on { background: var(--sun); color: var(--on-sun); } .k-row em[data-go] { cursor: pointer; } /* La tarjeta de la próxima publicación reparte el alto: el pie queda abajo. */ .kc-next { justify-content: space-between; } /* ---------- Correcciones tras la revisión visual (30-jul-2026) ---------- */ /* Bento de verdad: cada tarjeta con su alto natural. Sin esto, la tarjeta más alta de la fila estiraba a su vecina y dejaba medio panel en blanco. */ .kh-grid { align-items: start; } /* Cabecera: identidad a la izquierda, herramientas a la derecha. En móvil el negocio y la fecha se apilan; en pantallas anchas van en la misma línea. */ .kh-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; } .kh-when { display: flex; align-items: baseline; gap: 5px; text-align: left; white-space: nowrap; overflow: hidden; padding-left: 4px; } .kh-when b { font-size: 12px; } .kh-when span { font-size: 11px; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 760px) { .kh-id { flex-direction: row; align-items: center; gap: 16px; } .kh-when { margin-left: auto; padding-left: 0; } .kh-when b { font-size: 13.5px; } } @media (max-width: 599px) { .kh-bar .kc-link { display: none; } } /* El anillo es un círculo: sin flex:none heredaba el flex:1 del bloque de texto y salía como una elipse (revisión de capturas). */ .kc-hero-brand > .k-ring { flex: none; } .kh-brand-copy { flex: 1; min-width: 0; } .k-known .k-empty { width: 100%; } /* Acción principal en la barra lateral: en escritorio el botón flotante se sentaba encima del calendario, así que su sitio es la propia navegación. */ .k-rail-cta { display: none; width: 52px; min-height: 52px; border-radius: 16px; background: var(--sun); color: var(--on-sun); font-size: 9px; font-weight: 850; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: 0 10px 22px -12px rgba(124,79,22,.75); margin-bottom: 10px; flex: none; transition: transform .16s var(--ease-spring), filter .2s; } .k-rail-cta span { font-size: 17px; line-height: 1; font-weight: 500; } .k-rail-cta:active { transform: scale(.9); } @media (min-width: 1024px) { .k-rail-cta { display: flex; } } @media (hover: hover) and (pointer: fine) { .k-rail-cta:hover { filter: brightness(1.06); transform: translateY(-1px); } } /* Línea de fases del plan propuesto: un camino, no una lista. */ .k-phaseline { display: grid; gap: 8px; grid-template-columns: 1fr; } .k-phaseline > div { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--k-r-sm); background: var(--card-2); } .k-phaseline b { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: var(--chip); color: var(--muted); font-size: 12px; font-weight: 850; } .k-phaseline span { flex: 1; min-width: 0; font-size: 13px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .k-phaseline small { flex: none; font-size: 10.5px; font-weight: 700; color: var(--faint); } .k-phaseline > div.on { background: var(--green-soft); } .k-phaseline > div.on b { background: var(--green); color: #fff; } .k-phaseline > div.on small { color: var(--green-deep); } @media (min-width: 760px) { .k-phaseline { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .k-phaseline > div { flex-wrap: wrap; } .k-phaseline small { width: 100%; padding-left: 36px; margin-top: -2px; } .kh-grid > .span12 { grid-column: 1 / -1; } } /* ---------- Columnas del centro operativo ---------- En pantalla ancha, dos columnas que crecen por separado (bento real, sin huecos). En móvil `display:contents` las deshace y el orden lo manda la prioridad de trabajo: qué toca hoy → qué falta → contexto. */ .kh-col { display: contents; } .kh-grid > *, .kh-col > * { grid-column: 1 / -1; } .kh-col > * { animation: kcIn .44s var(--ease-out) both; } .kh-col-main > *:nth-child(1) { animation-delay: .03s } .kh-col-main > *:nth-child(2) { animation-delay: .07s } .kh-col-main > *:nth-child(3) { animation-delay: .11s } .kh-col-main > *:nth-child(4) { animation-delay: .15s } .kh-col-side > *:nth-child(1) { animation-delay: .05s } .kh-col-side > *:nth-child(2) { animation-delay: .09s } .kh-col-side > *:nth-child(3) { animation-delay: .13s } .kh-col-side > *:nth-child(4) { animation-delay: .17s } /* Orden en móvil (las dos columnas se deshacen): primero lo que pide acción. */ .kc-order-next { order: 1 } .kc-order-needs { order: 2 } .kc-order-hero { order: 3 } .kc-order-kpis { order: 4 } .kc-order-activity { order: 5 } @media (min-width: 760px) { .kh-col { display: flex; flex-direction: column; gap: var(--k-gap); min-width: 0; } .kh-col-main { grid-column: span 7; } .kh-col-side { grid-column: span 5; } .kh-col > * { order: 0 !important; } } @media (prefers-reduced-motion: reduce) { .kh-col > * { animation: none !important; } } /* ---------- Contraste sobre verde en tema oscuro ---------- En oscuro el verde de marca se aclara (para separarse del fondo), así que el texto blanco encima se vuelve ilegible: sobre verde claro va tinta oscura. Un solo token para no volver a fallar en cada componente nuevo. */ :root { --on-green: #FFFFFF; } @media (prefers-color-scheme: dark) { :root { --on-green: #10201A; } } .k-btn.green { background: var(--green-deep); color: var(--on-green); } .k-pill.ready_for_review { background: var(--green); color: var(--on-green); } .k-row.done > i { background: var(--green); color: var(--on-green); } @media (prefers-color-scheme: dark) { .k-btn.green { background: var(--green); } /* Las barras apagadas casi desaparecían sobre la tarjeta oscura. */ } /* ---------- Portada viva de la estrategia ---------- El visual sale del material recomendado para la próxima pieza y cambia al cambiar de red. Si la biblioteca está vacía, se usa el visual editorial. */ @keyframes kcProofFloat { 50% { transform: translateY(-5px); } } /* ═══════════════════════════════════════════════════════════════════════════ MÉTRICAS CON CONTEXTO — cada cifra explica el impacto de una publicación. ═══════════════════════════════════════════════════════════════════════════ */ #s-stats { width: 100%; max-width: none; padding-top: 14px; } .stats-screen-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; } .stats-screen-head > div:first-child > span, .stats-section-head > div > span, .stats-impact-copy > span, .stats-story-chart header span { display: block; color: var(--sun-deep); font-size: 9.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } .stats-screen-head h2 { margin-top: 4px; font-size: clamp(23px, 3vw, 34px) !important; letter-spacing: -.035em; } .stats-screen-head p { margin-top: 3px; color: var(--muted); font-size: 12.5px; } .stats-live { flex: none; display: grid; grid-template-columns: 7px auto; align-items: center; gap: 1px 7px; min-width: 118px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); } .stats-live i { grid-row: 1 / 3; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 15%, transparent); animation: statsPulse 2.4s ease-in-out infinite; } .stats-live span { font-size: 11.5px; font-weight: 850; } .stats-live small { color: var(--muted); font-size: 9px; } @keyframes statsPulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--green) 4%, transparent); } } #s-stats > .chips { gap: 7px; margin-bottom: 13px; } #s-stats > .chips .chip { min-height: 37px; padding: 0 14px; border-radius: 12px; font-size: 12px; } .stats-loading { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .stats-loading .skel { height: 118px; border-radius: 18px; } .stats-loading .skel:first-child { grid-column: 1 / -1; height: 230px; } .stats-impact-hero { position: relative; display: grid; gap: 15px; padding: 21px; overflow: hidden; border-radius: 23px; background: linear-gradient(136deg, #173A2C 0%, #2D604A 64%, #43745A 100%); color: #F5FBF7; box-shadow: 0 18px 38px -25px rgba(20,56,42,.72); isolation: isolate; } .stats-impact-hero::before, .stats-impact-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); pointer-events: none; } .stats-impact-hero::before { width: 250px; height: 250px; right: -95px; top: -130px; } .stats-impact-hero::after { width: 130px; height: 130px; right: 45px; bottom: -92px; } .stats-impact-copy h3 { max-width: 690px; margin: 8px 0 8px; color: #fff; font: 700 clamp(25px, 4.8vw, 44px)/1.03 Georgia, "Times New Roman", serif; letter-spacing: -.035em; } .stats-impact-copy h3 b { color: #FFB664; font: inherit; } .stats-impact-copy p { max-width: 690px; color: #D4E8DC; font-size: 12.5px; line-height: 1.5; } .stats-impact-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; } .stats-impact-pills span { padding: 6px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.08); color: #E8F4ED; font-size: 10px; font-weight: 700; } .stats-impact-pills span:first-child { color: #BAE5CC; } .stats-impact-hero aside { align-self: stretch; padding: 15px; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .stats-impact-hero aside > span { color: #FFBE76; font-size: 9px; font-weight: 900; letter-spacing: .11em; } .stats-impact-hero aside b { display: block; margin: 7px 0 11px; color: #fff; font-size: 13px; line-height: 1.42; } .stats-impact-hero aside small { display: inline-flex; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.1); color: #CBE1D4; font-size: 9.5px; } .stats-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 11px; } .impact-kpi { position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--card); box-shadow: var(--k-elev); animation: statsRise .42s var(--ease-out) both; transition: transform .16s var(--ease-spring), box-shadow .2s; } .impact-kpi:nth-child(2) { animation-delay: .05s; }.impact-kpi:nth-child(3) { animation-delay: .1s; }.impact-kpi:nth-child(4) { animation-delay: .15s; } .impact-kpi > i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--chip); color: var(--muted); font-style: normal; font-size: 15px; font-weight: 900; } .impact-kpi.green > i { background: var(--green-soft); color: var(--green-deep); } .impact-kpi.sun > i { background: var(--sun-soft); color: var(--sun-deep); } .impact-kpi.cream { background: var(--k-cream); } .impact-kpi > div { min-width: 0; } .impact-kpi span, .impact-kpi b, .impact-kpi small { display: block; } .impact-kpi span { color: var(--muted); font-size: 9.5px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; } .impact-kpi b { margin: 2px 0 1px; font-size: clamp(21px, 4vw, 29px); font-weight: 850; letter-spacing: -.04em; } .impact-kpi small { overflow: hidden; color: var(--faint); font-size: 9.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } @keyframes statsRise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } .stats-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 24px 2px 10px; } .stats-section-head h3 { margin-top: 3px; font-size: 17px; letter-spacing: -.02em; } .stats-section-head > small { max-width: 230px; color: var(--muted); font-size: 10.5px; text-align: right; } .stats-insight-grid { display: grid; gap: 9px; } .stats-insight { display: flex; align-items: flex-start; gap: 11px; min-height: 92px; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--card); box-shadow: var(--k-elev); } .stats-insight > i { flex: none; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 12px; background: var(--green-soft); color: var(--green-deep); font-size: 15px; font-style: normal; font-weight: 900; } .stats-insight.opportunity { background: var(--sun-soft); border-color: color-mix(in srgb, var(--sun) 32%, transparent); } .stats-insight.opportunity > i { background: var(--card); color: var(--sun-deep); } .stats-insight.action { background: var(--green-deep); border-color: transparent; } .stats-insight.action > i { background: rgba(255,255,255,.12); color: #fff; } .stats-insight span { min-width: 0; } .stats-insight small { display: block; margin-bottom: 5px; color: var(--faint); font-size: 8.5px; font-weight: 900; letter-spacing: .1em; } .stats-insight b { display: block; font-size: 12px; line-height: 1.43; } .stats-insight.action small { color: #A7C9B7; }.stats-insight.action b { color: #fff; } .stats-story-chart { margin-top: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--k-elev); } .stats-story-chart header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .stats-story-chart header h3 { margin-top: 3px; font-size: 17px; }.stats-story-chart header p { margin-top: 2px; color: var(--muted); font-size: 10.5px; } .stats-story-chart header em { flex: none; padding: 5px 8px; border-radius: 8px; background: var(--green-soft); color: var(--green-deep); font-size: 10.5px; font-style: normal; font-weight: 850; } .stats-story-chart header em.down { background: var(--sun-soft); color: var(--sun-deep); } .stats-line-story { height: 178px; margin-top: 10px; overflow: visible; } .stats-line-story .line { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: statsDraw 1.2s var(--ease-out) forwards; } .stats-line-story .area { animation: statsArea .6s .55s both; } .stats-post-marker line { stroke: var(--sun); stroke-width: 1.2; stroke-dasharray: 3 4; } .stats-post-marker circle { fill: var(--sun); stroke: var(--card); stroke-width: 3; } @keyframes statsDraw { to { stroke-dashoffset: 0; } } @keyframes statsArea { from { opacity: 0; } to { opacity: .13; } } .stats-story-chart footer { display: flex; flex-wrap: wrap; gap: 9px 17px; padding-top: 9px; border-top: 1px solid var(--line); } .stats-story-chart footer span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9.5px; } .stats-story-chart footer i { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); } .stats-story-chart footer b { color: var(--ink); } .stats-post-grid { display: grid; gap: 10px; } .stats-post-card-v2 { display: grid; grid-template-columns: 105px minmax(0, 1fr); min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: var(--card); box-shadow: var(--k-elev); cursor: pointer; transition: transform .18s var(--ease-spring), box-shadow .2s; } .stats-post-card-v2:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 58%, transparent); outline-offset: 3px; } .stats-post-visual { position: relative; min-height: 148px; overflow: hidden; background: linear-gradient(145deg, var(--green-soft), var(--k-cream)); } .stats-post-visual img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .7s var(--ease-out); } .stats-post-visual > span { width: 100%; height: 100%; display: grid; place-items: center; color: var(--green-deep); font-size: 30px; font-weight: 850; } .stats-post-visual em { position: absolute; left: 7px; bottom: 7px; padding: 5px 7px; border-radius: 8px; background: rgba(255,255,255,.9); color: var(--green-deep); font-size: 8.5px; font-style: normal; font-weight: 850; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .stats-post-visual em.high { background: var(--green-deep); color: #fff; }.stats-post-visual em.medium { color: var(--sun-deep); } .stats-post-visual em.learning { color: var(--muted); } .stats-post-copy { min-width: 0; padding: 15px; } .stats-post-copy > span { display: block; color: var(--sun-deep); font-size: 8.5px; font-weight: 850; text-transform: uppercase; } .stats-post-copy h4 { margin: 6px 0 10px; font-size: 14px; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .stats-post-metrics-v2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 6px; } .stats-post-metrics-v2 span { min-width: 0; padding: 9px 5px; border-radius: 10px; background: var(--card-2); text-align: center; } .stats-post-metrics-v2 b, .stats-post-metrics-v2 small { display: block; overflow: hidden; text-overflow: ellipsis; } .stats-post-metrics-v2 b { font-size: 16px; line-height: 1.1; }.stats-post-metrics-v2 small { margin-top: 3px; color: var(--muted); font-size: 8.5px; white-space: nowrap; } .stats-post-copy > p { margin-top: 9px; color: var(--muted); font-size: 10.5px; line-height: 1.4; } .stats-post-copy > p b { color: var(--ink); }.stats-post-copy > p.waiting { padding: 8px; border-radius: 9px; background: var(--sun-soft); color: var(--sun-deep); } .stats-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; } .stats-card-footer a { color: var(--green-deep); font-size: 10px; font-weight: 850; } .stats-card-footer span { color: var(--green-deep); font-size: 9px; font-weight: 900; } /* Detalle ampliado de una publicación */ .stats-detail-backdrop { position: fixed; inset: 0; z-index: 114; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: rgba(10,18,13,.68); opacity: 0; pointer-events: none; transition: opacity .2s; } .stats-detail-backdrop.show { opacity: 1; pointer-events: auto; } .stats-detail-sheet { width: 100%; max-width: 820px; max-height: 92dvh; overflow: auto; padding: 20px; border-radius: 28px 28px 0 0; background: var(--canvas); box-shadow: 0 -20px 60px rgba(8,20,13,.24); transform: translateY(24px); transition: transform .26s var(--ease-out); } .stats-detail-backdrop.show .stats-detail-sheet { transform: none; } .stats-detail-sheet > header { position: sticky; top: -20px; z-index: 4; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: -2px -2px 14px; padding: 12px 2px 14px; background: color-mix(in srgb,var(--canvas) 94%,transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .stats-detail-sheet > header small { display: block; margin-bottom: 4px; color: var(--green-deep); font-size: 10px; font-weight: 900; letter-spacing: .1em; } .stats-detail-sheet > header h2 { margin: 0; font-size: 25px; line-height: 1.15; } .stats-detail-sheet > header button { flex: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--muted); font-size: 25px; } .stats-detail-hero { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr); overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--k-elev); } .stats-detail-media { min-height: 300px; background: linear-gradient(145deg,var(--green-soft),var(--sun-soft)); } .stats-detail-media img { width: 100%; height: 100%; display: block; object-fit: cover; }.stats-detail-media > span { width: 100%; height: 100%; display: grid; place-items: center; color: var(--green-deep); font-size: 52px; font-weight: 900; } .stats-detail-copy { min-width: 0; padding: 22px; }.stats-detail-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .stats-detail-meta > span { color: var(--sun-deep); font-size: 10px; font-weight: 900; text-transform: uppercase; }.stats-detail-meta em { padding: 5px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green-deep); font-size: 9px; font-style: normal; font-weight: 850; } .stats-detail-copy > p { margin-top: 14px; font-size: 15px; line-height: 1.55; }.stats-detail-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 20px; } .stats-detail-summary span { padding: 11px; border-radius: 12px; background: var(--card-2); }.stats-detail-summary small,.stats-detail-summary b { display: block; } .stats-detail-summary small { color: var(--muted); font-size: 8px; font-weight: 850; }.stats-detail-summary b { margin-top: 4px; font-size: 14px; } .stats-detail-metrics { margin-top: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); } .stats-detail-metrics > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }.stats-detail-metrics > header span { color: var(--green-deep); font-size: 10px; font-weight: 900; letter-spacing: .08em; }.stats-detail-metrics > header small { color: var(--muted); font-size: 9px; } .stats-detail-metrics > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(115px,1fr)); gap: 8px; }.stats-detail-metrics article { padding: 15px 10px; border-radius: 14px; background: var(--card-2); text-align: center; } .stats-detail-metrics article b { display: block; color: var(--ink); font-size: 24px; line-height: 1; }.stats-detail-metrics article span { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; } .stats-detail-waiting { margin-top: 13px; padding: 18px; border-radius: 18px; background: var(--sun-soft); }.stats-detail-waiting b { font-size: 14px; }.stats-detail-waiting p { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; } .stats-detail-actions { display: flex; gap: 9px; margin-top: 13px; }.stats-detail-actions .k-btn { flex: 1; min-height: 46px; text-align: center; } .stats-post-empty, .stats-empty-state { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px dashed var(--sage); border-radius: 19px; background: var(--green-soft); } .stats-post-empty > span, .stats-empty-state > span { flex: none; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; background: var(--card); color: var(--green-deep); font-size: 22px; } .stats-post-empty > div { flex: 1; }.stats-post-empty b, .stats-empty-state h3 { font-size: 13.5px; } .stats-post-empty p, .stats-empty-state p { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; } .stats-empty-state { flex-direction: column; align-items: flex-start; padding: 24px; } .stats-empty-state .k-btn { margin-top: 4px; } .stats-strategy-impact { margin-top: 12px; } /* ---------- Estrategia · dashboard por fases ---------- */ .strategy-assigned-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;margin-bottom:22px;padding:34px clamp(24px,4vw,44px);border:1px solid rgba(61,113,88,.18);border-radius:28px;background:linear-gradient(135deg,#fff 0%,#f5f8ef 58%,#e3efe5 100%);box-shadow:0 18px 44px rgba(31,61,48,.08)} .strategy-assigned-hero:after{content:"";position:absolute;right:-90px;bottom:-130px;width:300px;height:300px;border-radius:50%;background:rgba(246,165,82,.13)} .strategy-assigned-copy{position:relative;z-index:1}.strategy-assigned-copy>span,.strategy-section-heading span,.strategy-complete-panel>div>span,.strategy-generation>div>span{display:block;color:var(--green);font-size:11px;font-weight:900;letter-spacing:.11em} .strategy-assigned-copy h1{margin:7px 0 10px;color:var(--green-deep);font-size:clamp(32px,5vw,58px);line-height:.98;letter-spacing:-.055em} .strategy-assigned-copy>p{max-width:760px;margin:16px 0 0;color:#53655d;font-size:15px;line-height:1.65}.strategy-meta,.strategy-pillars{display:flex;gap:9px;flex-wrap:wrap}.strategy-meta b,.strategy-pillars span{padding:7px 12px;border-radius:999px;background:#fff;border:1px solid rgba(61,113,88,.15);color:var(--green-deep);font-size:12px}.strategy-pillars{margin-top:16px}.strategy-pillars span{background:rgba(255,255,255,.7);color:#66766f} .strategy-assigned-seal{position:relative;z-index:1;display:grid;place-items:center;width:150px;height:150px;border-radius:50%;background:#fff;box-shadow:0 15px 38px rgba(31,61,48,.13);text-align:center}.strategy-assigned-seal svg{width:58px;height:58px}.strategy-assigned-seal>img,.strategy-assigned-seal>.strategy-assigned-image-host{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;overflow:hidden}.strategy-assigned-seal>img{object-fit:cover}.strategy-assigned-image-host>.skel{width:100%;height:100%;border-radius:50%}.strategy-assigned-seal small{position:absolute;right:9px;bottom:10px;left:9px;margin:0;padding:5px 4px;border-radius:9px;background:rgba(255,255,255,.87);color:#53655d;font-size:9px;line-height:1.25}.strategy-assigned-seal b{color:var(--green-deep)} .strategy-content-section,.strategy-phase-impact{margin:22px 0;padding:26px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.78);box-shadow:0 12px 30px rgba(31,61,48,.055)} .strategy-section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}.strategy-section-heading h2,.strategy-section-heading h3{margin:5px 0 0;color:var(--ink);letter-spacing:-.025em}.strategy-section-heading h2{font-size:clamp(24px,3vw,34px)}.strategy-section-heading p{max-width:720px;margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.5}.strategy-section-heading>small{color:var(--muted);font-size:12px;white-space:nowrap} .strategy-journey{position:relative;z-index:1;grid-column:1/-1;margin-top:6px;padding-top:25px;border-top:1px solid rgba(61,113,88,.14)}.strategy-journey .strategy-section-heading{margin-bottom:14px}.strategy-phase-track{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}.strategy-phase-step{display:flex;align-items:center;min-width:0;flex:1}.strategy-phase-arrow{flex:0 0 34px;color:#80a28e;font-size:23px;font-weight:900;text-align:center}.strategy-phase{position:relative;display:flex;align-items:center;gap:12px;min-width:175px;width:100%;padding:15px;border:1px solid var(--line);border-radius:17px;background:#fff;text-align:left;color:var(--ink);transition:.18s ease}.strategy-phase:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(31,61,48,.09)}.strategy-phase.selected{border-color:var(--green);box-shadow:0 0 0 3px rgba(79,140,112,.16)}.strategy-phase.current{border-color:#277653;background:linear-gradient(140deg,#176346,#338b63);color:#fff;box-shadow:0 13px 28px rgba(29,105,73,.28)}.strategy-phase.current small,.strategy-phase.current em{color:rgba(255,255,255,.78)}.strategy-phase.current>i{background:#fff;color:#176346;box-shadow:0 0 0 5px rgba(255,255,255,.14)}.strategy-phase.completed{cursor:pointer}.strategy-phase.completed:not(.selected){border-color:#b9d2c2;background:#f6fbf7}.strategy-phase.locked{opacity:.48;filter:grayscale(.75);cursor:not-allowed}.strategy-phase>i{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);font-style:normal;font-weight:900}.strategy-phase.locked>i{background:#eaebe7;color:#8c958f}.strategy-phase>span{display:grid;min-width:0}.strategy-phase small{color:var(--muted);font-size:8px;font-weight:900;letter-spacing:.08em}.strategy-phase b{overflow:hidden;margin:3px 0;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.strategy-phase em{color:var(--muted);font-size:10px;font-style:normal}.strategy-phase>strong{margin-left:auto;color:var(--muted)} .strategy-generation{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;margin:22px 0;padding:24px 28px;border-radius:22px;background:linear-gradient(135deg,#183e32,#2f7459);color:#fff;box-shadow:0 16px 34px rgba(24,62,50,.2)}.strategy-generation-mark{display:grid;place-items:center;width:72px;height:72px;border-radius:20px;background:#fff}.strategy-generation-mark svg{width:54px}.strategy-generation h3{margin:5px 0;font-size:21px}.strategy-generation p{max-width:760px;margin:0;color:rgba(255,255,255,.72);font-size:12px;line-height:1.5}.strategy-generation>div>span{color:#bfe3c9}.strategy-generation-bar{height:8px;margin:14px 0 7px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.16)}.strategy-generation-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sun),#f8c47c);transition:width .5s ease}.strategy-generation small{color:rgba(255,255,255,.75);font-size:11px} .strategy-creation-state{display:grid;grid-template-columns:180px minmax(0,1fr);gap:34px;align-items:center;min-height:330px;padding:34px clamp(24px,5vw,64px);overflow:hidden;border:1px solid #c8decf;border-radius:22px;background:radial-gradient(circle at 12% 40%,rgba(255,191,106,.28),transparent 29%),linear-gradient(135deg,#eef7ef,#dcecdf);color:var(--green-deep)}.strategy-creation-state>div:last-child>span{font-size:10px;font-weight:950;letter-spacing:.12em}.strategy-creation-state h3{margin:8px 0 10px;font-size:clamp(23px,3vw,34px);letter-spacing:-.035em}.strategy-creation-state p{max-width:740px;margin:0;color:#4f6c5e;font-size:14px;line-height:1.65}.strategy-creation-state small{display:block;margin-top:14px;color:#6c7e75;font-size:11px}.strategy-palm-animation{position:relative;width:150px;height:210px;margin:auto}.palm-trunk{position:absolute;left:68px;bottom:15px;width:17px;height:126px;border-radius:60% 30% 14px 14px;background:linear-gradient(90deg,#966337,#c58a4c 48%,#81542f);transform:rotate(6deg);transform-origin:bottom}.palm-leaves{position:absolute;left:13px;top:13px;z-index:2;width:130px;height:80px;color:#2d825c;font-size:96px;line-height:.6;text-align:center;filter:drop-shadow(0 7px 7px rgba(37,96,68,.2));animation:palmSway 2.4s ease-in-out infinite alternate}.strategy-palm-animation:after{content:"";position:absolute;left:24px;bottom:3px;width:116px;height:20px;border-radius:50%;background:rgba(52,108,75,.16);filter:blur(2px)}.strategy-palm-animation .coconut{position:absolute;z-index:3;width:16px;height:16px;border-radius:50%;background:#9b6334;box-shadow:inset -3px -3px 0 rgba(69,37,18,.22);animation:coconutFall 2.8s ease-in infinite}.strategy-palm-animation .one{left:63px;top:64px}.strategy-palm-animation .two{left:82px;top:66px;animation-delay:.9s}.strategy-palm-animation .three{left:99px;top:72px;animation-delay:1.8s}@keyframes palmSway{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}@keyframes coconutFall{0%,35%{transform:translateY(0) rotate(0);opacity:1}72%{transform:translateY(117px) rotate(260deg);opacity:1}80%,100%{transform:translateY(127px) rotate(320deg);opacity:0}} .strategy-content-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;align-items:stretch}.strategy-content-card{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 9px 22px rgba(31,61,48,.075);transition:.2s ease}.strategy-content-card:hover{transform:translateY(-3px);box-shadow:0 15px 32px rgba(31,61,48,.13)}.strategy-card-open{position:relative;display:block;width:100%;padding:0;border:0;background:#e5ece6}.strategy-card-media,.strategy-content-card.tall .strategy-card-media,.strategy-content-card.portrait .strategy-card-media{position:relative;display:block;width:100%;overflow:hidden;aspect-ratio:4/5}.strategy-card-media img,.strategy-card-media video{width:100%;height:100%;display:block;object-fit:cover}.strategy-card-format,.strategy-card-pages{position:absolute;z-index:2;top:12px;padding:6px 9px;border-radius:999px;background:rgba(21,33,27,.76);color:#fff;font-size:9px;font-weight:850;backdrop-filter:blur(7px)}.strategy-card-format{left:12px}.strategy-card-pages{right:12px}.strategy-card-generating{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:7px;background:linear-gradient(145deg,#edf4ed,#d7e6d9);color:var(--green-deep)}.strategy-card-generating>i{width:36px;height:36px;border:3px solid rgba(79,140,112,.18);border-top-color:var(--green);border-radius:50%;animation:spin 1s linear infinite}.strategy-card-generating b{font-size:20px}.strategy-card-generating small{font-size:10px}.strategy-card-copy{display:flex;flex:1;flex-direction:column;padding:15px}.strategy-card-status{align-self:flex-start;display:inline-flex;padding:5px 8px;border-radius:999px;background:#eef1ed;color:#65726b;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.strategy-card-status.personalize{background:#fff0dd;color:#9a5a11}.strategy-card-status.review{background:#e4f3e8;color:#2f7459}.strategy-card-status.scheduled{background:#e4edf8;color:#3c6692}.strategy-card-status.published{background:#e8e8e8;color:#656565}.strategy-card-status.error{background:#fde7e4;color:#a2473e}.strategy-card-copy h4{display:-webkit-box;min-height:2.7em;margin:9px 0 6px;overflow:hidden;font-size:14px;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}.strategy-card-copy>p{margin:0;color:var(--muted);font-size:10.5px}.strategy-card-networks{display:flex;min-height:23px;gap:5px;flex-wrap:wrap;margin:10px 0}.strategy-card-networks span{padding:4px 6px;border-radius:6px;background:var(--paper);color:var(--muted);font-size:8px;font-weight:800}.strategy-card-action{display:flex;justify-content:space-between;width:100%;margin-top:auto;padding:10px 0 0;border:0;border-top:1px solid var(--line-soft);background:none;color:var(--green-deep);font-size:11px;font-weight:850;text-align:left}.strategy-content-card.state-review .strategy-card-action,.strategy-content-card.state-personalize .strategy-card-action{align-items:center;margin-top:auto;padding:11px 13px;border:0;border-radius:11px;background:linear-gradient(135deg,#ffad58,#f49a3d);color:#202722;box-shadow:0 8px 17px rgba(228,135,42,.24);font-size:12px}.strategy-content-card.state-review .strategy-card-action span,.strategy-content-card.state-personalize .strategy-card-action span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:rgba(255,255,255,.58)}.strategy-empty-content{grid-column:1/-1;display:grid;place-items:center;padding:54px;text-align:center;color:var(--muted)}.strategy-empty-content>span{font-size:34px}.strategy-empty-content b{margin-top:8px;color:var(--ink)} .strategy-complete-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:22px 0;padding:26px 30px;border-radius:22px;background:#f5efe2;border:1px solid #eadcc1}.strategy-complete-panel h3{margin:5px 0}.strategy-complete-panel p{margin:0;color:var(--muted);font-size:12px}.strategy-complete-panel button{width:auto;min-width:280px}.strategy-complete-panel button:disabled{opacity:.45} .strategy-impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.strategy-impact-grid article{padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff}.strategy-impact-grid b{display:block;font-size:28px}.strategy-impact-grid span{color:var(--muted);font-size:11px}.strategy-impact-empty{margin:16px 0 0;color:var(--muted);font-size:12px}.strategy-piece-results{display:grid;gap:8px;margin-top:14px}.strategy-piece-results button{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:11px;border:1px solid var(--line-soft);border-radius:12px;background:#fff;text-align:left}.strategy-piece-results button>span{grid-row:1/3}.strategy-piece-results b{font-size:11px}.strategy-piece-results small{color:var(--muted);font-size:9px} @media(max-width:900px){.strategy-content-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.strategy-assigned-seal{width:126px;height:126px}} @media(max-width:680px){.strategy-assigned-hero{grid-template-columns:1fr;padding:26px 21px}.strategy-assigned-seal{display:none}.strategy-content-section,.strategy-phase-impact{padding:19px 15px;border-radius:20px}.strategy-phase-track{overflow-x:auto;padding-bottom:5px;scroll-snap-type:x mandatory}.strategy-phase-step{flex:0 0 auto}.strategy-phase{width:210px;scroll-snap-align:start}.strategy-phase-arrow{flex-basis:28px}.strategy-section-heading{align-items:start}.strategy-section-heading>small{display:none}.strategy-creation-state{grid-template-columns:1fr;gap:8px;padding:23px;text-align:center}.strategy-palm-animation{transform:scale(.78);height:170px;margin-top:-18px;margin-bottom:-8px}.strategy-content-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.strategy-card-copy{padding:12px}.strategy-card-copy h4{font-size:12px}.strategy-card-networks{display:none}.strategy-complete-panel{display:grid;padding:22px}.strategy-complete-panel button{width:100%;min-width:0}.strategy-impact-grid{grid-template-columns:1fr}.strategy-impact-grid article{padding:15px}} @media(max-width:410px){.strategy-content-grid{grid-template-columns:1fr}} /* ---------- Estrategia · revisión directa de una publicación ---------- */ #post-sheet-backdrop.strategy-review-active #post-sheet-body{display:grid;grid-template-rows:auto minmax(0,1fr);padding:0!important;background:#f4f5ee}.strategy-review-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px clamp(20px,3vw,46px);border-bottom:1px solid var(--line);background:#fff}.strategy-review-header>div{min-width:0}.strategy-review-header span{display:block;color:var(--green);font-size:9px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}.strategy-review-header h2{overflow:hidden;margin:4px 0 0;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(18px,2vw,27px);letter-spacing:-.025em}.strategy-review-layout{display:grid;grid-template-columns:minmax(360px,.88fr) minmax(420px,1.12fr);min-height:0;overflow:hidden}.strategy-review-preview,.strategy-review-controls{min-width:0;overflow:auto;padding:25px clamp(20px,3vw,42px);scrollbar-width:thin}.strategy-review-preview{border-right:1px solid var(--line);background:linear-gradient(145deg,#e7eee5,#f4f1e7)}.strategy-review-column-title{display:flex;justify-content:space-between;align-items:end;gap:10px;margin-bottom:14px}.strategy-review-column-title span{color:var(--green);font-size:9px;font-weight:950;letter-spacing:.12em}.strategy-review-column-title b{font-size:13px}.strategy-review-preview .preview-heading{display:none}.strategy-review-preview .preview-tabs{justify-content:center;margin-bottom:14px}.strategy-review-preview [data-preview-stage]{display:grid;justify-items:center}.strategy-review-preview .scheduled-preview-device{height:min(58vh,590px);width:auto;max-width:100%}.strategy-review-preview .preview-validation{width:min(100%,330px);margin:10px auto 0}.strategy-review-controls{display:grid;align-content:start;gap:13px;background:#fafaf6}.strategy-editor-objective,.strategy-editor-block{padding:17px 18px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:0 7px 20px rgba(31,61,48,.045)}.strategy-editor-objective{border-color:#b9d9c3;background:linear-gradient(135deg,#e8f3e9,#f8fbf5)}.strategy-editor-objective>span{color:var(--green);font-size:9px;font-weight:950;letter-spacing:.11em}.strategy-editor-objective h3{margin:5px 0 7px;font-size:18px}.strategy-editor-objective p{margin:0;color:#4f6258;font-size:12px;line-height:1.55}.strategy-editor-objective small{display:block;margin-top:9px;color:var(--green-deep);font-size:10px;font-weight:750}.strategy-editor-block>header{display:flex;align-items:center;gap:11px;margin-bottom:12px}.strategy-editor-block>header>span{display:grid;place-items:center;flex:0 0 35px;width:35px;height:35px;border-radius:11px;background:var(--green-soft);color:var(--green-deep);font-size:17px;font-weight:900}.strategy-editor-block>header>div{display:grid}.strategy-editor-block>header b{font-size:14px}.strategy-editor-block>header small{margin-top:2px;color:var(--muted);font-size:10px}.strategy-editor-block label{display:grid;gap:5px;margin-top:9px;color:#596a61;font-size:10px;font-weight:850}.strategy-editor-block textarea,.strategy-editor-block input[type=text],.strategy-editor-block input[type=datetime-local]{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid #ced8d0;border-radius:11px;background:#fbfcf9;color:var(--ink);font:inherit;font-size:12px;line-height:1.45;resize:vertical}.strategy-editor-block textarea:focus,.strategy-editor-block input:focus{outline:2px solid rgba(53,132,91,.18);border-color:var(--green)}.strategy-editor-platforms{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:7px}.strategy-editor-platforms button,.strategy-editor-media-actions button,.strategy-editor-media-actions label,.strategy-editor-music>button{padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:#f7f8f3;color:var(--ink);font-size:10px;font-weight:850;cursor:pointer}.strategy-editor-platforms button.on{border-color:var(--green);background:var(--green-soft);color:var(--green-deep)}.strategy-editor-save{display:inline-flex;margin-top:10px;padding:9px 13px;border:0;border-radius:9px;background:var(--green-deep);color:#fff;font-size:10px;font-weight:900;cursor:pointer}.strategy-editor-save:disabled{opacity:.5}.strategy-editor-feedback{display:block;min-height:1em;margin-top:7px;color:var(--muted);font-size:9.5px}.strategy-editor-media-actions{display:flex;gap:7px;flex-wrap:wrap}.strategy-editor-media-actions label{display:inline-flex;margin:0}.strategy-inline-library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:10px}.strategy-inline-library-grid button{min-width:0;padding:5px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left}.strategy-inline-library-grid button.on{border-color:var(--green);box-shadow:0 0 0 2px rgba(60,137,95,.15)}.strategy-inline-library-grid button>span{display:grid;place-items:center;width:100%;overflow:hidden;aspect-ratio:1;border-radius:7px;background:var(--green-soft)}.strategy-inline-library-grid img{width:100%;height:100%;object-fit:cover}.strategy-inline-library-grid b{display:block;overflow:hidden;margin-top:5px;text-overflow:ellipsis;white-space:nowrap;font-size:8px}.strategy-editor-music{display:grid;grid-template-columns:1fr 1fr;gap:7px}.strategy-editor-music>#strategy-music-recommend{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;border-radius:12px;background:#f4eee2;color:#5c4b33;font-size:10px}.strategy-editor-music>#strategy-music-recommend div{display:grid}.strategy-editor-music>#strategy-music-recommend b{margin-top:2px}.strategy-editor-music>#strategy-music-recommend p{margin:4px 0 0;color:#74644e;font-size:9px}.strategy-editor-music>#strategy-music-recommend button{flex:none;padding:8px 10px;border:0;border-radius:8px;background:#f4a04b;color:#20261f;font-size:9px;font-weight:900}.strategy-editor-approve{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 18px;border:0;border-radius:14px;background:linear-gradient(135deg,#f7a44f,#ef8f30);color:#20261f;box-shadow:0 11px 24px rgba(219,126,35,.25);font-size:14px;font-weight:950;cursor:pointer}.strategy-editor-approve span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:rgba(255,255,255,.55)}.strategy-editor-approve:disabled{opacity:.55} @media(max-width:850px){.strategy-review-layout{display:block;overflow:auto}.strategy-review-preview,.strategy-review-controls{overflow:visible}.strategy-review-preview{border-right:0;border-bottom:1px solid var(--line)}.strategy-review-preview .scheduled-preview-device{height:auto;width:min(76vw,310px)}#post-sheet-backdrop.strategy-review-active #post-sheet-body{display:block;overflow:auto}.strategy-review-header{position:sticky;top:0;z-index:5}.strategy-inline-library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .stats-ask { position: relative; min-height: 49px; border-radius: 15px; box-shadow: 0 12px 25px -18px rgba(132,77,19,.65); } /* El objetivo se mantiene legible sin ocupar toda la columna; el editor lo puede expandir bajo demanda. */ .strategy-editor-objective-copy{margin:0;color:#4f6258;font-size:12px;line-height:1.55} .strategy-editor-objective-copy.is-collapsed{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3} .strategy-editor-objective-more{display:block;margin:7px 0 0;padding:0;border:0;background:none;color:var(--green-deep);font-size:10px;font-weight:900;cursor:pointer} .strategy-editor-objective-more:hover{text-decoration:underline} @media (min-width: 760px) { #s-stats { padding: 18px clamp(24px, 4vw, 56px) 92px; } .stats-detail-backdrop { align-items: center; padding: 24px; } .stats-detail-sheet { border-radius: 28px; } .stats-impact-hero { grid-template-columns: minmax(0, 1.5fr) minmax(230px, .5fr); align-items: stretch; padding: 25px 27px; } .stats-impact-hero aside { display: flex; flex-direction: column; justify-content: center; } .stats-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stats-insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stats-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { #s-stats { padding-left: 44px; padding-right: 44px; } .stats-impact-copy h3 { font-size: 43px; } .stats-post-card-v2 { grid-template-columns: 145px minmax(0, 1fr); } } @media (max-width: 520px) { .stats-screen-head { align-items: flex-start; }.stats-screen-head p { max-width: 230px; } .stats-live { min-width: 0; padding: 8px 9px; }.stats-live small { display: none; } .stats-impact-hero { padding: 18px; }.stats-impact-copy h3 { font-size: 29px; } .stats-impact-hero aside { padding: 13px; } .impact-kpi { align-items: flex-start; padding: 12px; }.impact-kpi > i { width: 30px; height: 30px; } .impact-kpi small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .stats-section-head > small { display: none; } .stats-story-chart { padding: 14px 11px; }.stats-story-chart header p { display: none; } .stats-post-card-v2 { grid-template-columns: 96px minmax(0, 1fr); }.stats-post-visual { min-height: 156px; } .stats-post-metrics-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats-post-metrics-v2 b { font-size: 15px; }.stats-card-footer span { display: none; } .stats-detail-hero { grid-template-columns: 1fr; }.stats-detail-media { max-height: 300px; min-height: 230px; } .stats-detail-copy { padding: 17px; }.stats-detail-summary { grid-template-columns: 1fr; }.stats-detail-metrics { padding: 14px; } .stats-detail-metrics > div { grid-template-columns: repeat(2,minmax(0,1fr)); }.stats-detail-metrics article b { font-size: 21px; } .stats-detail-actions { flex-direction: column; } .stats-post-empty { align-items: flex-start; flex-wrap: wrap; }.stats-post-empty .k-btn { margin-left: 57px; } } @media (hover: hover) and (pointer: fine) { .impact-kpi:hover, .stats-post-card-v2:hover { transform: translateY(-3px); box-shadow: var(--k-elev-up); } .stats-post-card-v2:hover .stats-post-visual img { transform: scale(1.045); } } @media (prefers-color-scheme: dark) { .stats-impact-hero { background: linear-gradient(136deg, #173126, #254737 64%, #365B47); } .stats-insight.action { background: #315746; }.stats-post-visual em { background: rgba(25,36,30,.9); color: #B9DAC7; } .stats-post-visual em.high { background: var(--green); color: var(--on-green); } } @media (prefers-reduced-motion: reduce) { .stats-live i, .impact-kpi, .stats-line-story .line, .stats-line-story .area { animation: none; } .stats-detail-backdrop,.stats-detail-sheet { transition: none; } } /* ---------- Redes conectadas: contexto + acceso directo para añadir ---------- */ .kh-network-bar { flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 17px; background: color-mix(in srgb, var(--card) 82%, transparent); box-shadow: var(--k-elev); } .kh-network-copy { flex: none; display: flex; flex-direction: column; min-width: 150px; } .kh-network-copy b, .connected-networks-copy b { font-size: 11.5px; font-weight: 850; } .kh-network-copy small, .connected-networks-copy small { margin-top: 1px; color: var(--muted); font-size: 9.5px; } .kh-network-bar .k-seg { flex: 0 1 auto; } .connected-network-add { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 0 11px; border: 1px dashed var(--green); border-radius: 11px; background: var(--green-soft); color: var(--green-deep); font-size: 16px; font-weight: 850; transition: transform .15s var(--ease-spring), background .2s, border-color .2s; } .connected-network-add span { font-size: 10.5px; white-space: nowrap; } .connected-network-add:active { transform: scale(.95); } #s-stats > .chips.connected-networks { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; overflow: visible; border: 1px solid var(--line); border-radius: 17px; background: var(--card); box-shadow: var(--k-elev); } .connected-networks-copy { flex: none; display: flex; flex-direction: column; } .connected-network-list { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .connected-network-list::-webkit-scrollbar { display: none; } .connected-network-list .chip { flex: none; margin: 0; } .connected-network-add { min-height: 37px; } /* ---------- Vistas previas privadas cargadas con la sesión ---------- */ .strategy-resource-media { width: 100%; aspect-ratio: 1.25; display: grid; place-items: center; overflow: hidden; background: var(--card-2); } .strategy-resource-media img { width: 100%; height: 100%; object-fit: cover; } .strategy-resource-media .skel, .library-auth-thumb .skel, .library-edit-auth .skel { width: 100%; height: 100%; border-radius: 0; } .library-auth-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; } .library-edit-auth { min-height: 210px; display: grid; place-items: center; overflow: hidden; } .library-edit-auth img { width: 100%; max-height: 260px; display: block; object-fit: contain; } .auth-preview-error { width: 100%; height: 100%; display: grid; place-items: center; background: var(--card-2); color: var(--faint); font-size: 24px; } @media (max-width: 759px) { .kh-network-bar { align-items: center; gap: 8px; } .kh-network-copy { width: 100%; min-width: 0; } .kh-network-bar .k-seg { flex: 1 1 210px; min-width: 0; } #s-stats > .chips.connected-networks { align-items: flex-start; flex-direction: column; } .connected-network-list { width: 100%; justify-content: flex-start; } } @media (max-width: 420px) { .connected-network-add span { display: none; } .connected-network-add { width: 37px; padding: 0; } } @media (hover: hover) and (pointer: fine) { .connected-network-add:hover { background: var(--green); border-color: var(--green); color: var(--on-green); } } /* ---------- Barra lateral proporcional a la pantalla (31-jul-2026) ---------- Los iconos estaban clavados en píxeles (21 px) pensando en un portátil: en un monitor grande se quedaban diminutos al lado de tarjetas de 30 px de titular. Ahora todo el raíl —ancho, icono, etiqueta y radios— sale de la anchura de la ventana con `clamp()`, así que crece con la pantalla pero nunca se desmadra ni se come el lienzo. */ @media (min-width: 1024px) { :root { /* El raíl debe conservar todas sus opciones visibles también cuando añadimos Avatar IA. Antes crecía demasiado con el ancho del monitor y las baldosas terminaban ocupando casi toda la altura disponible. */ --k-rail: clamp(80px, 5.2vw, 104px); --k-rail-icon: clamp(22px, 1.5vw, 28px); --k-rail-label: clamp(9px, .65vw, 11px); --k-rail-slot: calc(var(--k-rail) - clamp(20px, 1.35vw, 28px)); } #k-rail { padding: clamp(12px, 1vw, 18px) 0 clamp(10px, .9vw, 16px); gap: clamp(2px, .2vw, 5px); } #k-rail .k-rail-logo { width: var(--k-rail-slot); height: var(--k-rail-slot); border-radius: clamp(14px, 1.15vw, 22px); margin-bottom: clamp(9px, .75vw, 14px); } #k-rail .k-rail-logo svg { width: 62%; height: 62%; } .k-rail-item { width: var(--k-rail-slot); min-height: calc(var(--k-rail-slot) * .82); border-radius: clamp(15px, 1.2vw, 22px); gap: clamp(3px, .3vw, 7px); font-size: var(--k-rail-label); } .k-rail-item svg { width: var(--k-rail-icon); height: var(--k-rail-icon); } /* El indicador de sección vive pegado al borde del raíl, mida lo que mida. */ .k-rail-item.on::before { left: calc(clamp(3px, .28vw, 6px) - (var(--k-rail) - 100%) / 2); width: clamp(4px, .32vw, 6px); height: clamp(22px, 1.9vw, 34px); border-radius: 0 99px 99px 0; } .k-rail-cta { width: var(--k-rail-slot); min-height: calc(var(--k-rail-slot) * .88); border-radius: clamp(16px, 1.3vw, 24px); font-size: var(--k-rail-label); margin-bottom: clamp(7px, .65vw, 12px); } .k-rail-cta span { font-size: calc(var(--k-rail-icon) * .82); } } /* Los botones de la cabecera son de la misma familia que el raíl: si el raíl crece con la pantalla y ellos no, la cabecera se queda pequeña al lado. */ @media (min-width: 1400px) { .kh-biz .kh-mark { width: clamp(30px, 2vw, 38px); height: clamp(30px, 2vw, 38px); font-size: clamp(13px, .9vw, 16px); } } /* ---------- Edición contextual de borradores ---------- */ .guided-edit-backdrop,.stats-report-backdrop{position:fixed;inset:0;z-index:112;display:flex;align-items:flex-end; justify-content:center;padding:0;background:rgba(10,18,13,.62);opacity:0;pointer-events:none; -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:opacity .22s ease} .guided-edit-backdrop.show,.stats-report-backdrop.show{opacity:1;pointer-events:auto} .guided-edit-sheet,.stats-report-sheet{width:100%;max-width:720px;max-height:min(90dvh,860px);overflow:auto; padding:20px 18px calc(24px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:var(--bg); box-shadow:0 -22px 70px rgba(5,15,9,.28);transform:translateY(100%);transition:transform .3s var(--ease-out)} .guided-edit-backdrop.show .guided-edit-sheet,.stats-report-backdrop.show .stats-report-sheet{transform:none} .guided-edit-sheet>header,.stats-report-sheet>header{position:sticky;top:-20px;z-index:4;display:flex;align-items:flex-start; justify-content:space-between;gap:16px;margin:-2px 0 18px;padding:12px 0;background:color-mix(in srgb,var(--bg) 94%,transparent); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .guided-edit-sheet>header small,.stats-report-sheet>header small{display:block;margin-bottom:4px;color:var(--green-deep); font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase} .guided-edit-sheet>header h2,.stats-report-sheet>header h2{margin:0;font-size:23px;line-height:1.15} .guided-edit-sheet>header button,.stats-report-sheet>header button{flex:none;width:40px;height:40px;border:1px solid var(--line); border-radius:50%;background:var(--card);color:var(--muted);font-size:26px;line-height:1} .guided-edit-lead{margin:-4px 0 14px;color:var(--muted);font-size:13px;line-height:1.5} .guided-edit-choices,.guided-target-list {display:grid;gap:9px} .guided-template-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .guided-template-visual-card{min-width:0;overflow:hidden;border:1.5px solid var(--line);border-radius:19px; background:var(--card);box-shadow:var(--shadow-sm)} .guided-template-visual-card.current{position:relative;border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 10%,transparent)} .guided-template-current{position:absolute;z-index:3;top:9px;left:9px;padding:6px 9px;border-radius:999px;background:var(--green-deep);color:#fff;font-size:9px;font-weight:900;letter-spacing:.04em;text-transform:uppercase} .guided-template-preview{position:relative;display:grid;place-items:center;aspect-ratio:9/16;overflow:hidden; background:linear-gradient(145deg,var(--green-soft),var(--sun-soft))} .guided-template-preview.design{aspect-ratio:4/5;background:#fff}.guided-template-preview>img, .guided-template-preview>video{width:100%;height:100%;display:block;object-fit:cover} .guided-template-preview>em{position:absolute;left:8px;bottom:8px;padding:5px 8px;border-radius:999px; background:rgba(15,25,19,.76);color:#fff;font-size:8.5px;font-style:normal;font-weight:850; -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)} .guided-template-preview.kalma-auto{background:linear-gradient(145deg,#e5f1ea 0%,#fff7e9 54%,#f9d6b1 100%)} .guided-preview-waiting{width:100%;height:100%;display:grid;place-items:center;padding:20px;text-align:center; color:var(--green-deep);font-size:11px;font-weight:850} .guided-template-card-copy{display:flex;flex-direction:column;gap:9px;padding:12px}.guided-template-card-copy b, .guided-template-card-copy small{display:block}.guided-template-card-copy b{font-size:13.5px}.guided-template-card-copy small{ margin-top:3px;color:var(--muted);font-size:10.5px;line-height:1.35} .guided-template-features{display:flex;flex-wrap:wrap;gap:4px}.guided-template-features em{padding:4px 6px;border-radius:999px; background:var(--green-soft);color:var(--green-deep);font-size:8.5px;font-style:normal;font-weight:800} .guided-template-card-copy>button{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:40px; padding:0 11px;border-radius:12px;background:var(--green);color:#fff;font-size:11.5px;font-weight:900} .guided-template-card-copy>button span{font-size:17px}.guided-template-back{width:100%;margin-top:13px} .guided-edit-choices>button,.guided-target-list>button {width:100%;display:grid;align-items:center; gap:11px;padding:14px;border:1.5px solid var(--line);border-radius:17px;background:var(--card);text-align:left; box-shadow:var(--shadow-sm);transition:transform .16s var(--ease-spring),border-color .18s,background .18s} .guided-edit-choices>button{grid-template-columns:42px 1fr}.guided-target-list>button{grid-template-columns:40px 1fr 25px} .guided-edit-choices>button>i,.guided-target-list>button>i {width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:var(--green-soft); color:var(--green-deep);font-size:19px;font-style:normal;font-weight:900} .guided-edit-choices b,.guided-edit-choices small,.guided-target-list b,.guided-target-list small {display:block}.guided-edit-choices b,.guided-target-list b {font-size:14px} .guided-edit-choices small,.guided-target-list small {margin-top:3px;color:var(--muted);font-size:11.5px;line-height:1.35} .guided-edit-choices>button:disabled{opacity:.52;box-shadow:none}.guided-target-list>button.on{border-color:var(--green);background:var(--green-soft)} .guided-target-list em{width:23px;height:23px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:50%; color:transparent;font-size:12px;font-style:normal}.guided-target-list>button.on em{border-color:var(--green);background:var(--green);color:#fff} .guided-label{display:block;margin:15px 1px 7px;color:var(--ink);font-size:12px;font-weight:850} .guided-media-index{display:flex;gap:7px;padding-bottom:3px;overflow:auto;scrollbar-width:none}.guided-media-index::-webkit-scrollbar{display:none} .guided-media-index button{flex:none;display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid var(--line); border-radius:12px;background:var(--card);font-size:11.5px;font-weight:800}.guided-media-index button span{display:none} .guided-media-index button.on{border-color:var(--green);background:var(--green-soft);color:var(--green-deep)}.guided-media-index button.on span{display:inline} .guided-file-button{display:flex;align-items:center;justify-content:center;padding:12px;border:1.5px dashed var(--green); border-radius:14px;background:var(--green-soft);color:var(--green-deep);font-size:13px;font-weight:850;cursor:pointer} .guided-files{margin:6px 2px 0;color:var(--muted);font-size:10.5px;line-height:1.35;overflow-wrap:anywhere} .guided-change-block{margin-top:11px;padding:13px;border:1px solid var(--line);border-radius:17px;background:var(--card)} .guided-change-block>.guided-label:first-child{margin-top:0}.guided-structured-text{width:100%;min-height:112px; max-height:min(38dvh,380px);padding:13px 14px;resize:vertical;overflow-y:auto;overflow-wrap:anywhere; border:1.5px solid var(--line);border-radius:16px;background:var(--canvas);color:var(--ink);font:inherit; font-size:14px;line-height:1.5;outline:none;scrollbar-gutter:stable} .guided-structured-text:focus{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 13%,transparent)} .guided-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px} .guided-label-row .guided-label{margin:0}.guided-all-button{flex:none;padding:7px 10px;border:1px solid var(--green); border-radius:999px;background:transparent;color:var(--green-deep);font-size:10.5px;font-weight:850} .guided-all-button.on{background:var(--green);color:#fff}.guided-replacement-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px} .guided-replacement-mode>button{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:8px;align-items:center; padding:10px;border:1.5px solid var(--line);border-radius:14px;background:var(--canvas);text-align:left} .guided-replacement-mode>button>span{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;border-radius:10px; background:var(--green-soft);color:var(--green-deep);font-size:17px}.guided-replacement-mode b,.guided-replacement-mode small{display:block} .guided-replacement-mode b{font-size:11.5px}.guided-replacement-mode small{margin-top:2px;color:var(--muted);font-size:9px;line-height:1.25} .guided-replacement-mode>button.on{border-color:var(--green);background:var(--green-soft)} .guided-parse-slides{width:100%;margin-top:8px;padding:10px 12px;border:1px solid var(--green);border-radius:12px; background:var(--green-soft);color:var(--green-deep);font-size:11.5px;font-weight:850}.guided-slide-fields-list{display:grid;gap:9px;margin-top:11px} .guided-slide-fields{display:grid;gap:6px;padding:11px;border:1px solid var(--line);border-radius:14px;background:var(--canvas)} .guided-slide-fields>b{font-size:12px;color:var(--green-deep)}.guided-slide-fields label{display:flex;justify-content:space-between; color:var(--ink);font-size:10.5px;font-weight:800}.guided-slide-fields label span{color:var(--muted);font-weight:700} .guided-slide-fields input,.guided-slide-fields textarea{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:11px; background:var(--card);color:var(--ink);font:inherit;font-size:12px;line-height:1.4;outline:none;resize:vertical} .guided-slide-fields input:focus,.guided-slide-fields textarea:focus{border-color:var(--green)}.guided-slide-fields>small{color:var(--muted);font-size:9px;line-height:1.35} .guided-slide-mode-select{width:100%;min-height:50px;margin:5px 0 12px;padding:0 42px 0 13px;border:1.5px solid var(--line);border-radius:13px;background:var(--card);color:var(--ink);font:inherit;font-size:13px;font-weight:750} .guided-slide-mode-select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 12%,transparent)} .guided-slide-parse-ok,.guided-slide-parse-error{margin:9px 0 0;padding:10px 12px;border-radius:12px;font-size:11px;font-weight:750;line-height:1.4} .guided-slide-parse-ok{background:var(--green-soft);color:var(--green-deep)}.guided-slide-parse-error{background:color-mix(in srgb,var(--danger) 8%,white);color:var(--danger)} #guided-edit-instruction{width:100%;min-height:128px;max-height:min(44dvh,430px);padding:13px 14px;resize:vertical; overflow-y:auto;overflow-wrap:anywhere;border:1.5px solid var(--line);border-radius:16px;background:var(--card); color:var(--ink);font:inherit;font-size:14px;line-height:1.5;outline:none;scrollbar-gutter:stable} #guided-edit-instruction:focus{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 13%,transparent)} .guided-unlimited{display:block;margin:6px 2px 0;color:var(--muted);font-size:10px;line-height:1.35} .guided-edit-summary{display:flex;flex-direction:column;gap:3px;margin-top:11px;padding:12px 13px;border-radius:14px; background:var(--green-soft);font-size:11.5px}.guided-edit-summary span{color:var(--muted);line-height:1.4} .guided-edit-validation{margin:9px 0 0;padding:10px 12px;border:1px solid color-mix(in srgb,var(--danger) 28%,transparent); border-radius:12px;background:color-mix(in srgb,var(--danger) 7%,white);color:var(--danger);font-size:11.5px;line-height:1.4} .guided-edit-validation[hidden]{display:none} .guided-edit-progress,.guided-edit-empty{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;text-align:center}.guided-edit-progress>span,.guided-edit-empty>span{width:62px;height:62px;display:grid;place-items:center; border-radius:21px;background:var(--green-soft);color:var(--green-deep);font-size:29px;font-weight:900} .guided-edit-progress>b,.guided-edit-empty>b{font-size:17px}.guided-edit-progress>div{width:min(360px,100%);height:8px;overflow:hidden; border-radius:999px;background:var(--line)}.guided-edit-progress>div i{display:block;height:100%;border-radius:inherit;background:var(--green); transition:width .45s var(--ease-out)}.guided-edit-progress>small,.guided-edit-empty p{max-width:430px;color:var(--muted);font-size:12px;line-height:1.45} .guided-edit-progress .btn,.guided-edit-empty .btn{width:auto;min-width:220px;margin-top:5px} .gallery-tile{position:relative;min-width:0}.gallery-tile>.gallery-item{display:block;width:100%} .gallery-quick-actions{position:absolute;right:7px;top:7px;z-index:3;display:flex;gap:6px;justify-content:flex-end;pointer-events:none} .gallery-quick-actions button{pointer-events:auto} .gallery-quick-edit,.gallery-quick-duplicate{padding:6px 9px;border:1px solid rgba(255,255,255,.55); border-radius:999px;background:rgba(255,255,255,.92);color:var(--green-deep);font-size:10px;font-weight:900; box-shadow:0 5px 16px rgba(10,25,15,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .gallery-quick-duplicate{color:var(--ink)} .selecting .gallery-quick-edit,.selecting .gallery-quick-duplicate{display:none} /* ---------- Lectura estratégica y mejores publicaciones ---------- */ .kalma-managed{display:inline-flex;align-items:center;gap:5px;min-width:0;padding:4px 7px;border-radius:999px; background:var(--green-soft);color:var(--green-deep)}.kalma-managed svg{flex:none;width:19px;height:19px;fill:currentColor} .kalma-managed>span{display:flex;flex-direction:column;line-height:1}.kalma-managed b{font-size:8px}.kalma-managed small{font-size:6.5px;white-space:nowrap} .stats-post-source{display:flex;align-items:center;justify-content:space-between;gap:7px}.stats-post-source>span{color:var(--sun-deep); font-size:8.5px;font-weight:850;text-transform:uppercase}.stats-post-source .kalma-managed{padding:3px 5px}.stats-post-source .kalma-managed svg{width:15px;height:15px} .stats-post-source .kalma-managed small{display:none} .stats-permission{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:11px; padding:14px 15px;border:1px solid color-mix(in srgb,var(--sun) 38%,var(--line));border-radius:18px;background:var(--sun-soft)} .stats-permission>span{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:var(--card);color:var(--sun-deep);font-size:21px} .stats-permission b{font-size:13px}.stats-permission p{margin-top:3px;color:var(--muted);font-size:10.5px;line-height:1.4}.stats-permission .k-btn{white-space:nowrap} .stats-report-intro{display:flex;align-items:center;gap:12px;padding:15px;border-radius:18px;background:linear-gradient(135deg,var(--green-deep),var(--green));color:#fff} .stats-report-intro>span{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.15);font-size:21px} .stats-report-intro b{font-size:14px}.stats-report-intro p{margin-top:3px;font-size:11px;opacity:.78}.stats-report-block{margin-top:11px;padding:16px; border:1px solid var(--line);border-radius:18px;background:var(--card)}.stats-report-block>small{display:block;margin-bottom:8px;color:var(--green-deep); font-size:9.5px;font-weight:900;letter-spacing:.09em}.stats-report-block>p{margin-top:7px;font-size:13px;line-height:1.5} .stats-report-block.action{border-color:color-mix(in srgb,var(--sun) 36%,var(--line));background:var(--sun-soft)} .stats-report-top{display:grid;gap:8px}.stats-report-top>div{display:grid;grid-template-columns:28px 1fr;gap:9px;align-items:start} .stats-report-top>div>b{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--green-soft);color:var(--green-deep);font-size:11px} .stats-report-top>div>span{font-size:12px;line-height:1.35}.stats-report-top small{display:block;margin-top:2px;color:var(--muted);font-size:9.5px} .stats-report-method{margin:13px 3px 0;color:var(--muted);font-size:10px;line-height:1.45} .stats-report-generating,.stats-report-error{display:grid;grid-template-columns:50px minmax(0,1fr);gap:15px;align-items:start; padding:22px;border:1px solid var(--line);border-radius:21px;background:linear-gradient(145deg,var(--card),var(--green-soft))} .stats-report-generating>span,.stats-report-error>span{width:50px;height:50px;display:grid;place-items:center;border-radius:16px; background:var(--green-deep);color:#fff;font-size:23px;box-shadow:0 8px 20px rgba(23,75,55,.2)} .stats-report-generating b,.stats-report-error b{font-size:15px}.stats-report-generating p,.stats-report-error p{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.48} .stats-report-generating i{display:flex;gap:5px;margin-top:14px}.stats-report-generating i em{width:7px;height:7px;border-radius:50%;background:var(--green); animation:stats-report-dot 1.15s ease-in-out infinite}.stats-report-generating i em:nth-child(2){animation-delay:.14s}.stats-report-generating i em:nth-child(3){animation-delay:.28s} .stats-report-error .k-btn{margin-top:14px}.stats-report-caveats{margin-top:11px;padding:13px 16px;border-radius:16px;background:var(--canvas);color:var(--muted)} .stats-report-caveats>small{display:block;margin-bottom:5px;color:var(--ink);font-size:9px;font-weight:900;letter-spacing:.08em}.stats-report-caveats p{font-size:10.5px;line-height:1.45} @keyframes stats-report-dot{0%,75%,100%{opacity:.28;transform:translateY(0)}35%{opacity:1;transform:translateY(-4px)}} @media(min-width:768px){.guided-edit-backdrop,.stats-report-backdrop{align-items:center;padding:24px}.guided-edit-sheet,.stats-report-sheet{border-radius:28px; padding:24px;transform:translateY(18px) scale(.985)}.guided-edit-backdrop.show .guided-edit-sheet,.stats-report-backdrop.show .stats-report-sheet{transform:none} } @media(max-width:480px){.guided-template-gallery{grid-template-columns:1fr}.guided-template-preview{max-height:440px}.guided-template-preview.design{max-height:390px}} @media(max-width:480px){.guided-replacement-mode{grid-template-columns:1fr}.guided-label-row{align-items:flex-start}.guided-all-button{margin-top:-3px}} @media(max-width:620px){.stats-permission{grid-template-columns:42px minmax(0,1fr)}.stats-permission .k-btn{grid-column:1/-1;width:100%}} @media(hover:hover) and (pointer:fine){.guided-edit-choices>button:not(:disabled):hover,.guided-target-list>button:hover { transform:translateY(-2px);border-color:var(--green)}.gallery-quick-edit:hover{background:var(--green);color:#fff}.gallery-quick-duplicate:hover{background:var(--ink);color:#fff}} .review-music{padding:13px 14px;background:var(--card);border:1px solid var(--line);border-radius:15px}.review-music-loading{display:flex;align-items:center;gap:10px;min-height:48px;color:var(--muted);font-size:12px}.review-music-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.review-music-head small{display:block;color:var(--muted);font-size:10.5px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.review-music-head b{display:block;font-size:13px;line-height:1.3}.review-music-head>button,.music-track-actions button{border:1px solid var(--line);border-radius:999px;background:var(--canvas);color:var(--green-deep);padding:7px 10px;font-size:10px;font-weight:850}.review-music-head>button.playing,.music-track-actions button.playing{background:var(--green-soft)}.review-music-reason,.review-music-note{font-size:10.5px;line-height:1.4;color:var(--muted);margin:8px 0 0}.review-music-options{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.review-music-options>button{display:flex;align-items:flex-start;gap:7px;text-align:left;padding:9px;border:1.5px solid var(--line);border-radius:12px;background:var(--canvas)}.review-music-options>button.selected{border-color:var(--green);background:var(--green-soft)}.review-music-options>button>span{font-size:17px}.review-music-options b,.review-music-options small{display:block}.review-music-options b{font-size:10.5px;line-height:1.25}.review-music-options small{font-size:9px;color:var(--muted);line-height:1.3;margin-top:2px}.music-catalog-tools{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:8px;margin-bottom:12px}.music-catalog-tools input,.music-catalog-tools select{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:11px 12px;color:var(--ink);font:inherit;font-size:12px}.music-catalog-list{display:grid;gap:8px;max-height:min(62vh,620px);overflow:auto;padding-right:2px}.music-track{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px;border:1px solid var(--line);border-radius:14px;background:var(--card)}.music-track-main{display:flex;align-items:flex-start;gap:9px;min-width:0}.music-track-main>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);font-size:17px;flex:0 0 auto}.music-track-main div{min-width:0}.music-track-main b,.music-track-main small,.music-track-main em{display:block}.music-track-main b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.music-track-main small{font-size:9.5px;color:var(--muted);margin-top:2px}.music-track-main em{font-style:normal;font-size:8.5px;color:var(--green-deep);margin-top:3px}.music-track-actions{display:flex;gap:5px;flex:0 0 auto}.music-track-actions button[data-music-select]{background:var(--green);color:white;border-color:var(--green)}.music-more{width:100%;margin-top:4px}@media(max-width:640px){.review-music-options{grid-template-columns:1fr}.music-catalog-tools{grid-template-columns:1fr}.music-track{align-items:flex-start;flex-direction:column}.music-track-actions{width:100%}.music-track-actions button{flex:1}} .sheet-music-summary{display:flex;align-items:center;gap:9px;padding:10px 12px;margin:9px 0 12px;border:1px solid var(--line);border-radius:13px;background:var(--green-soft)}.sheet-music-summary>span{font-size:19px}.sheet-music-summary>div{min-width:0;flex:1}.sheet-music-summary small,.sheet-music-summary b{display:block}.sheet-music-summary small{font-size:9px;color:var(--green-deep);font-weight:850;text-transform:uppercase;letter-spacing:.05em}.sheet-music-summary b{font-size:11.5px;margin-top:2px}.sheet-music-summary>button{border:1px solid var(--green);border-radius:999px;background:var(--card);color:var(--green-deep);padding:6px 10px;font-size:10px;font-weight:850} @media(prefers-reduced-motion:reduce){.guided-edit-sheet,.stats-report-sheet{transition:none}.stats-report-generating i em{animation:none;opacity:1}} .optimizer-music{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px} .optimizer-music button{flex:1 1 30%;font-size:12px;font-weight:700;padding:11px 10px;border-radius:14px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .optimizer-music button.selected{border-color:var(--green);background:var(--green-soft);color:var(--green-deep)} .preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px} .preview-frame{margin:0;border-radius:14px;overflow:hidden;border:1.5px solid var(--line);background:#fff} .preview-frame img{width:100%;display:block;aspect-ratio:9/16;object-fit:cover} .preview-frame figcaption{font-size:11px;font-weight:700;padding:7px 9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dm-card{margin-bottom:12px;padding:16px}.dm-card header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:10px}.dm-card header b,.dm-card header small{display:block}.dm-card header small{font-size:11px;margin-top:2px}.dm-history{display:grid;gap:6px;padding:12px 0}.dm-row{display:flex;justify-content:flex-start}.dm-row.mine{justify-content:flex-end}.dm-row span{max-width:86%;padding:8px 10px;border-radius:12px;background:var(--line-soft);font-size:12.5px;white-space:pre-wrap}.dm-row.mine span{background:var(--green-soft);color:var(--green-deep)}.dm-reply-form{display:flex;gap:8px;align-items:flex-end;border-top:1px solid var(--line);padding-top:10px}.dm-reply-form textarea{flex:1;min-width:0;resize:vertical;border:1px solid var(--line);border-radius:12px;padding:9px 10px;background:var(--card-2);font-size:13px}.dm-reply-form button{flex:none} .autodm-card,.leads-card{margin-bottom:14px;padding:16px;background:linear-gradient(145deg,var(--card),var(--sun-soft));border-color:color-mix(in srgb,var(--sun) 32%,var(--line))}.autodm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.autodm-head h3{font-size:16px;margin-top:2px}.autodm-kicker{display:block;font-size:9px;font-weight:900;letter-spacing:.1em}.autodm-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--sun);color:var(--on-sun);font-size:18px}.autodm-form{display:grid;gap:8px;margin-top:13px}.autodm-form input,.autodm-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:10px;color:var(--ink);font:inherit;font-size:12px}.autodm-form textarea{resize:vertical}.autodm-form .btn{width:auto;justify-self:start;padding:9px 13px}.autodm-empty{font-size:12px;margin:13px 0 0}.autodm-monitor-list{display:grid;gap:8px;margin-top:13px}.autodm-monitor{padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:var(--card)}.autodm-monitor-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.autodm-monitor-top b,.autodm-monitor-top small{display:block}.autodm-monitor-top b{font-size:12px;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.autodm-monitor-top small{font-size:10px;color:var(--muted);margin-top:3px}.autodm-status{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--green-deep)}.autodm-status.paused{color:var(--sun-deep)}.autodm-status.stopped,.autodm-status.deleted{color:var(--muted)}.autodm-monitor p{font-size:11px;line-height:1.45;color:var(--muted);margin:9px 0}.autodm-actions{display:flex;gap:6px;flex-wrap:wrap}.autodm-actions .btn{font-size:10.5px}.autodm-logs{display:grid;gap:5px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);font-size:11px}.autodm-logs div{display:flex;justify-content:space-between;gap:8px}.autodm-logs span{color:var(--muted);text-align:right}.dm-attachment{display:block;max-width:230px;margin-top:5px}.dm-attachment img{display:block;max-width:100%;max-height:240px;border-radius:10px;object-fit:cover}.dm-attachment-link{display:inline-block;margin-top:5px;padding:7px 9px;border-radius:9px;background:var(--green-soft);color:var(--green-deep);font-size:11px;font-weight:750;text-decoration:none}.lead-counts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:12px 0}.lead-counts span{display:grid;gap:2px;padding:7px 5px;border-radius:9px;background:var(--canvas);text-align:center;font-size:8.5px;color:var(--muted)}.lead-counts b{font-size:14px;color:var(--ink)}.lead-list{display:grid;gap:6px}.lead-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--canvas)}.lead-row b,.lead-row small{display:block}.lead-row b{font-size:11.5px}.lead-row small{font-size:10px;color:var(--muted);margin-top:2px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lead-row select{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:6px;font:inherit;font-size:10px;color:var(--ink)} .destination-group{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}.destination-group-head{display:flex;justify-content:space-between;gap:8px}.destination-group-head b{font-size:12px}.destination-group-head small{font-size:10px;color:var(--muted)}.destination-row{display:flex;align-items:center;gap:9px;margin-top:8px;padding:8px 9px;border-radius:10px;background:var(--canvas)}.destination-row img,.destination-placeholder{width:28px;height:28px;border-radius:8px;object-fit:cover;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;font-weight:800;font-size:12px}.destination-row b,.destination-row small{display:block}.destination-row b{font-size:11.5px}.destination-row small{font-size:10px;color:var(--muted);margin-top:2px} .stats-insight-card{margin:14px 0;padding:16px;border:1.5px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow-sm)}.stats-insight-card-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.stats-insight-card-head span{font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--green-deep)}.stats-insight-card-head em{font-size:10px;font-style:normal;color:var(--muted)}.stats-insight-card h3{font-size:16px;margin:8px 0 5px}.stats-insight-card p{font-size:12px;line-height:1.45;color:var(--muted);margin:0}.stats-insight-card footer{font-size:10.5px;color:var(--muted);margin-top:11px}.stats-timing-card{background:linear-gradient(145deg,var(--green-soft),var(--card))}.stats-benchmark-card{background:linear-gradient(145deg,var(--sun-soft),var(--card))}.stats-benchmark-values{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.stats-benchmark-values span{padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.62)}.stats-benchmark-values b,.stats-benchmark-values small{display:block}.stats-benchmark-values b{font-size:19px}.stats-benchmark-values small{font-size:10px;color:var(--muted);margin-top:2px} .studio-destination-field{display:grid;gap:6px;margin-top:10px}.studio-destination-field>span{font-size:12px;font-weight:800}.studio-destination-field select{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:10px;color:var(--ink);font:inherit;font-size:12px}.studio-destination-field small{font-size:10.5px;color:var(--muted)} .calendar-strategy-card{margin-bottom:14px;padding:17px;background:linear-gradient(145deg,var(--card),var(--sun-soft));border:2px solid color-mix(in srgb,var(--sun) 48%,var(--line))}.calendar-strategy-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.calendar-strategy-head h3{font-size:17px;margin-top:3px}.calendar-card-kicker{display:block;font-size:9px;font-weight:900;letter-spacing:.1em;color:var(--sun-deep)}.calendar-strategy-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--sun);color:#fff;font-size:20px}.calendar-strategy-copy{font-size:12.5px;line-height:1.5;margin-top:8px}.calendar-strategy-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.calendar-strategy-stats span{display:grid;gap:2px;padding:10px;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid color-mix(in srgb,var(--sun) 22%,var(--line))}.calendar-strategy-stats b{font-size:18px}.calendar-strategy-stats small{font-size:10px;color:var(--muted)}.calendar-strategy-note{font-size:11.5px;line-height:1.4;color:var(--green-deep);margin-top:11px}.calendar-strategy-action{width:auto;margin-top:12px;padding:9px 12px}.calendar-strategy-item{border-color:color-mix(in srgb,var(--green) 40%,var(--line));background:linear-gradient(100deg,var(--green-soft),var(--card))}.calendar-strategy-badge{display:block;color:var(--green-deep);font-size:9px;font-weight:900;letter-spacing:.07em;margin-bottom:3px} .lifecycle-panel{margin:10px 0 14px;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card-2)}.lifecycle-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.lifecycle-head b{font-size:13px}.lifecycle-head small{font-size:9.5px;color:var(--muted);text-align:right}.lifecycle-networks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0}.lifecycle-network{display:grid;gap:5px;padding:10px;border-radius:10px;background:var(--canvas);border:1px solid var(--line)}.lifecycle-network header{display:flex;justify-content:space-between;gap:7px}.lifecycle-network b{font-size:10.5px}.lifecycle-network header span{font-size:9.5px;font-weight:850;text-align:right}.lifecycle-network small{font-size:9px;color:var(--muted)}.lifecycle-network p{font-size:9.5px;line-height:1.35;color:var(--muted)}.lifecycle-network footer{display:flex;gap:5px;flex-wrap:wrap}.lifecycle-network footer button{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:6px 8px;font-size:9px;font-weight:800;color:var(--green-deep)}.lifecycle-network footer button[data-lifecycle-cancel]{color:var(--danger,#a94b42)}.lifecycle-timeline{margin:2px 0 10px;border-top:1px solid var(--line);padding-top:8px}.lifecycle-timeline summary{cursor:pointer;font-size:10px;font-weight:800;color:var(--green-deep)}.lifecycle-timeline ol{display:grid;gap:5px;margin:8px 0 0;padding-left:17px}.lifecycle-timeline li{font-size:9px;color:var(--muted)}.lifecycle-timeline time{display:inline-block;min-width:87px}.lifecycle-timeline span b{font-size:9px}.lifecycle-actions{display:flex;gap:7px;flex-wrap:wrap}.lifecycle-actions .btn{width:auto;padding:9px 11px;font-size:11px}.lifecycle-danger{color:var(--danger,#a94b42)!important}.lifecycle-unpublish{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}.lifecycle-unpublish p{font-size:11px;line-height:1.4}.lifecycle-checks{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0}.lifecycle-checks label{font-size:11px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--canvas)}.lifecycle-danger-btn{width:auto;padding:9px 12px;background:#fff;border:1px solid color-mix(in srgb,var(--danger,#a94b42) 45%,var(--line));color:var(--danger,#a94b42);font-size:11px}@media(max-width:560px){.lifecycle-networks{grid-template-columns:1fr}} /* ═══════════════════════════════════════════════════════════════════════════ BARRA LATERAL v2 (sep-2026) — nombres junto al icono, grupos, indicador que se desliza entre secciones y modo plegado. Sustituye al raíl de iconos con etiqueta diminuta: en pantallas grandes se veía pequeño y dejaba media altura vacía. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { :root { --k-rail: 244px; --k-rail-icon: 22px; } body.rail-collapsed { --k-rail: 88px; } body { transition: padding-left .32s var(--ease-out); } #k-rail { width: var(--k-rail); align-items: stretch; gap: 0; overflow: hidden auto; padding: 18px 14px 14px; scrollbar-width: none; background: linear-gradient(180deg, var(--card) 0%, color-mix(in srgb, var(--card) 92%, var(--green-soft)) 100%); transition: width .32s var(--ease-out); } #k-rail::-webkit-scrollbar { display: none; } #k-rail .k-rail-brand { display: flex; align-items: center; gap: 11px; padding: 2px 4px 18px; flex: none; } #k-rail .k-rail-logo { width: 44px; height: 44px; margin: 0; flex: none; border-radius: 14px; background: var(--green-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 14%, transparent); transition: transform .5s var(--ease-spring); } #k-rail .k-rail-logo svg { width: 70%; height: 70%; } #k-rail .k-rail-brand:hover .k-rail-logo { transform: rotate(-8deg) scale(1.05); } #k-rail .k-rail-word { font-size: 21px; font-weight: 850; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; } #k-rail .k-rail-cta { width: 100%; min-height: 50px; margin: 0 0 20px; padding: 0 16px; flex: none; flex-direction: row; justify-content: flex-start; gap: 11px; border-radius: 16px; font: inherit; font-size: 14.5px; font-weight: 850; letter-spacing: 0; white-space: nowrap; overflow: hidden; background: linear-gradient(135deg, var(--sun) 0%, color-mix(in srgb, var(--sun) 80%, #E07B39) 100%); box-shadow: 0 12px 24px -14px rgba(160,90,20,.8), inset 0 1px 0 rgba(255,255,255,.3); } #k-rail .k-rail-cta-plus { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; background: rgba(255,255,255,.28); transition: transform .35s var(--ease-spring); } #k-rail .k-rail-cta-plus svg { width: 17px; height: 17px; } #k-rail .k-rail-cta:hover .k-rail-cta-plus { transform: rotate(90deg); } #k-rail .k-rail-list { position: relative; display: flex; flex-direction: column; gap: 3px; } #k-rail .k-rail-group { display: block; padding: 14px 12px 6px; color: var(--faint); font-size: 10.5px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } #k-rail .k-rail-group:first-of-type { padding-top: 2px; } #k-rail .k-rail-item { position: relative; z-index: 1; width: 100%; min-height: 46px; padding: 0 12px; flex-direction: row; justify-content: flex-start; gap: 13px; border-radius: 14px; color: var(--muted); font-size: 14.5px; font-weight: 700; letter-spacing: 0; white-space: nowrap; background: transparent; transition: color .2s, background .2s; } #k-rail .k-rail-item::before { display: none; } #k-rail .k-rail-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; transition: transform .28s var(--ease-spring), background .2s, color .2s; } #k-rail .k-rail-item svg { width: var(--k-rail-icon); height: var(--k-rail-icon); } #k-rail .k-rail-item.on { color: var(--green-deep); background: transparent; font-weight: 800; } #k-rail .k-rail-item.on .k-rail-icon { background: var(--green-deep); color: var(--on-green); box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--green-deep) 90%, transparent); animation: railIconPop .5s var(--ease-spring); } @keyframes railIconPop { 0% { transform: scale(.7) rotate(-10deg); } 60% { transform: scale(1.12) rotate(3deg); } 100% { transform: none; } } /* Indicador que viaja hasta la sección activa */ #k-rail .k-rail-glider { position: absolute; left: 0; right: 0; top: 0; height: 46px; z-index: 0; border-radius: 14px; background: var(--green-soft); opacity: 0; pointer-events: none; transition: transform .42s var(--ease-spring), opacity .2s, height .2s; } #k-rail .k-rail-glider.ready { opacity: 1; } #k-rail .k-rail-foot { display: flex; align-items: center; gap: 6px; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--line); flex: none; } #k-rail .k-rail-foot .k-rail-item { flex: 1; min-width: 0; } #k-rail .k-rail-foot .k-rail-item.on { background: var(--green-soft); } #k-rail .k-rail-collapse { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: var(--faint); transition: color .2s, background .2s, transform .32s var(--ease-out); } #k-rail .k-rail-collapse svg { width: 20px; height: 20px; } /* Plegado: solo iconos, el nombre aparece como globo al pasar el ratón */ body.rail-collapsed #k-rail { padding-left: 12px; padding-right: 12px; } body.rail-collapsed #k-rail .k-rail-word, body.rail-collapsed #k-rail .k-rail-label, body.rail-collapsed #k-rail .k-rail-group { display: none; } body.rail-collapsed #k-rail .k-rail-brand { justify-content: center; padding-left: 0; padding-right: 0; } body.rail-collapsed #k-rail .k-rail-cta { justify-content: center; padding: 0; } body.rail-collapsed #k-rail .k-rail-item { justify-content: center; padding: 0; min-height: 50px; } body.rail-collapsed #k-rail .k-rail-list { gap: 6px; } body.rail-collapsed #k-rail .k-rail-foot { flex-direction: column; } body.rail-collapsed #k-rail .k-rail-foot .k-rail-item { width: 100%; } body.rail-collapsed #k-rail .k-rail-collapse { transform: scaleX(-1); } body.rail-collapsed #k-rail .k-rail-glider { height: 50px; } } @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { #k-rail .k-rail-item:hover { color: var(--ink); background: color-mix(in srgb, var(--green-soft) 55%, transparent); } #k-rail .k-rail-item.on:hover { background: transparent; color: var(--green-deep); } #k-rail .k-rail-item:hover .k-rail-icon { transform: translateY(-2px) scale(1.08); } #k-rail .k-rail-item:not(.on):hover .k-rail-icon { color: var(--green-deep); } #k-rail .k-rail-collapse:hover { color: var(--green-deep); background: var(--green-soft); } #k-rail .k-rail-cta:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 16px 28px -14px rgba(160,90,20,.85), inset 0 1px 0 rgba(255,255,255,.3); } } @media (min-width: 1024px) and (prefers-reduced-motion: reduce) { #k-rail, body, #k-rail .k-rail-glider, #k-rail .k-rail-icon { transition: none; animation: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ CONTENIDO v2 (sep-2026) — resumen por estado, filtros por formato, grupos por mes y tarjetas con formato, redes, estado, fecha y texto. Las acciones aparecen al pasar el ratón (siempre visibles en pantallas táctiles). ═══════════════════════════════════════════════════════════════════════════ */ #s-gallery { max-width: 1320px; } .gx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 10px 0 18px; } .gx-eyebrow { display: block; margin-bottom: 4px; color: var(--green-deep); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } .gx-head h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; } .gx-head p { margin-top: 4px; color: var(--muted); font-size: 14px; } .gx-create { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 14px; background: var(--green-deep); color: var(--on-green); font-weight: 850; font-size: 14px; flex: none; box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--green-deep) 90%, transparent); transition: transform .18s var(--ease-spring), box-shadow .2s; } .gx-create svg { width: 17px; height: 17px; } .gx-create:active { transform: scale(.96); } .gx-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 8px; } .gx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .gx-stat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--card); text-align: left; color: var(--ink); box-shadow: var(--k-elev); overflow: hidden; transition: border-color .2s, transform .18s var(--ease-spring), box-shadow .2s; } .gx-stat::after { content: ""; position: absolute; right: 14px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); } .gx-stat.all::after { background: var(--ink); } .gx-stat.draft::after { background: var(--faint); } .gx-stat.scheduled::after { background: var(--sun); } .gx-stat.published::after { background: var(--green); } .gx-stat.attention::after { background: var(--danger); } .gx-stat b { font-size: 26px; line-height: 1.1; font-weight: 850; letter-spacing: -.02em; } .gx-stat span { color: var(--muted); font-size: 12.5px; font-weight: 700; } .gx-stat.on { border-color: var(--green); background: var(--green-soft); } .gx-stat.on span { color: var(--green-deep); } .gx-stat:active { transform: scale(.97); } .gx-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .gx-formats { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); } .gx-formats button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 750; transition: background .2s, color .2s; } .gx-formats button svg { width: 15px; height: 15px; } .gx-formats button.on { background: var(--green-deep); color: var(--on-green); } .gx-search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px; height: 42px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--faint); transition: border-color .2s, box-shadow .2s; } .gx-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent); } .gx-search svg { width: 17px; height: 17px; flex: none; } .gx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; } .gx-select { flex: none; } .gx-delete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 14px; background: color-mix(in srgb, var(--danger) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line)); } .gx-month { margin-top: 26px; } .gx-month > header { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 12px; } .gx-month h3 { font-size: 17px; font-weight: 850; letter-spacing: -.01em; } .gx-month > header span { color: var(--faint); font-size: 12.5px; font-weight: 700; } .gx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .gx-loading { margin-top: 12px; } .gx-card { position: relative; min-width: 0; display: flex; flex-direction: column; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--k-elev); overflow: hidden; animation: gxIn .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .2s; } @keyframes gxIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .gx-card .gallery-item.gx-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; opacity: 1; overflow: hidden; border-radius: 0; background: var(--line-soft); transform: none; box-shadow: none; } .gx-card .gallery-item.gx-media:hover { transform: none; box-shadow: none; } .gx-media .gallery-preview, .gx-media .gallery-preview img, .gx-media > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); } .gx-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,20,15,.34) 0%, rgba(10,20,15,0) 28%, rgba(10,20,15,0) 70%, rgba(10,20,15,.28) 100%); } .gx-textonly { width: 100%; height: 100%; display: grid; place-items: center; color: var(--green-deep); background: linear-gradient(145deg, var(--green-soft), var(--k-cream)); } .gx-textonly svg { width: 38px; height: 38px; opacity: .7; } .gx-format { position: absolute; z-index: 2; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 999px; background: rgba(12,22,17,.52); color: #fff; font-size: 11.5px; font-weight: 800; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .gx-format svg { width: 14px; height: 14px; } .gx-nets { position: absolute; z-index: 2; right: 10px; top: 10px; display: flex; } .gx-nets i { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -6px; border-radius: 50%; background: rgba(255,255,255,.92); color: #1d2a22; box-shadow: 0 2px 6px rgba(0,0,0,.18); border: 2px solid rgba(255,255,255,.9); font-style: normal; font-size: 11px; font-weight: 850; } .gx-nets i svg { width: 14px; height: 14px; } .gx-card .g-select { z-index: 3; left: auto; right: 10px; top: auto; bottom: 10px; } .gx-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; flex: 1; } .gx-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .gx-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: var(--line-soft); color: var(--muted); white-space: nowrap; } .gx-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .gx-status.ok { background: var(--green-soft); color: var(--green-deep); } .gx-status.wait { background: var(--sun-soft); color: var(--sun-deep); } .gx-status.wait i { animation: gxPulse 1.8s ease-in-out infinite; } .gx-status.bad { background: color-mix(in srgb, var(--danger) 13%, var(--card)); color: var(--danger); } @keyframes gxPulse { 50% { opacity: .35; transform: scale(.8); } } .gx-meta time { color: var(--faint); font-size: 12px; font-weight: 700; white-space: nowrap; } .gx-caption { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; } .gx-card .gx-actions { position: static; display: flex; gap: 6px; margin-top: auto; pointer-events: auto; justify-content: flex-start; } .gx-card .gx-actions button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 12.5px; font-weight: 800; box-shadow: none; transition: background .2s, color .2s, border-color .2s; } .gx-card .gx-actions button svg { width: 15px; height: 15px; } .gx-card .gx-actions .gallery-quick-edit { display: inline-flex; background: var(--green-deep); border-color: var(--green-deep); color: var(--on-green); } .selecting .gx-card .gx-actions { visibility: hidden; } .selecting .gx-card:has(.gallery-draft) { cursor: pointer; } .selecting .gx-card:not(:has(.gallery-draft)) { opacity: .45; } .gx-card:has(.gallery-item.selected) { border-color: var(--green); box-shadow: 0 0 0 3px var(--green), var(--k-elev-up); } .gx-empty { display: grid; place-items: center; gap: 8px; padding: 60px 20px; margin-top: 18px; border: 1.5px dashed var(--line); border-radius: 22px; color: var(--muted); text-align: center; } .gx-empty span { font-size: 30px; } .gx-empty b { color: var(--ink); font-size: 15px; } @media (hover: hover) and (pointer: fine) { .gx-card:hover { transform: translateY(-4px); box-shadow: var(--k-elev-up); border-color: color-mix(in srgb, var(--green) 30%, var(--line)); } .gx-card:hover .gx-media .gallery-preview img, .gx-card:hover .gx-media > img { transform: scale(1.05); } .gx-stat:hover { transform: translateY(-2px); box-shadow: var(--k-elev-up); } .gx-formats button:not(.on):hover { color: var(--ink); background: var(--line-soft); } .gx-create:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--green-deep) 95%, transparent); } .gx-card .gx-actions button:hover { border-color: var(--green); color: var(--green-deep); } .gx-card .gx-actions .gallery-quick-edit:hover { filter: brightness(1.08); color: var(--on-green); } /* En escritorio las acciones aparecen al pasar el ratón */ .gx-card .gx-actions { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; transition: max-height .28s var(--ease-out), opacity .2s, margin .28s; } .gx-card:hover .gx-actions, .gx-card:focus-within .gx-actions { max-height: 44px; opacity: 1; margin-top: 2px; } } @media (max-width: 700px) { .gx-head { align-items: center; } .gx-head p { font-size: 12.5px; } .gx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .gx-stat { padding: 10px 11px; border-radius: 14px; } .gx-stat b { font-size: 20px; } .gx-stat span { font-size: 11px; } .gx-stat::after { right: 10px; top: 11px; width: 7px; height: 7px; } .gx-formats { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .gx-formats button { flex: none; } .gx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gx-card { border-radius: 18px; } .gx-body { padding: 10px 10px 11px; gap: 6px; } .gx-caption { font-size: 12px; } .gx-meta { flex-wrap: wrap; gap: 4px; } .gx-card .gx-actions button { font-size: 11.5px; padding: 0 6px; } } @media (prefers-reduced-motion: reduce) { .gx-card { animation: none; } .gx-status.wait i { animation: none; } } @media (min-width: 1024px) { #k-rail .k-rail-cta .k-rail-label { font-size: 14.5px; font-weight: 850; line-height: 1.2; } } .gx-select { padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 800; } .gx-select:hover { border-color: var(--green); color: var(--green-deep); } /* ═══════════════════════════════════════════════════════════════════════════ BIBLIOTECA v2 (sep-2026) — mismo lenguaje que Contenido: categorías con icono y recuento, tarjetas visuales y zona para arrastrar archivos. ═══════════════════════════════════════════════════════════════════════════ */ #s-library { max-width: 1320px; } .lib-head { align-items: flex-start; } .lib-head > div { flex: 1; min-width: 0; } .lib-head .library-back { flex: none; margin-top: 18px; } @media (min-width: 1024px) { .lib-head .library-back { display: none; } } .lib-safe { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 6px 11px 6px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green-deep); font-size: 12px; font-weight: 750; } .lib-safe svg { width: 15px; height: 15px; } .lib-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin: 4px 0 22px; } .lib-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 18px; text-align: left; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); box-shadow: var(--k-elev); transition: border-color .2s, background .2s, transform .18s var(--ease-spring), box-shadow .2s; } .lib-cat-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 12px; background: var(--k-cream); font-size: 19px; transition: transform .35s var(--ease-spring); } .lib-cat b { font-size: 13px; line-height: 1.25; } .lib-cat small { color: var(--muted); font-size: 11.5px; font-weight: 700; } .lib-cat.empty { box-shadow: none; } .lib-cat.empty .lib-cat-icon { filter: grayscale(.5); opacity: .75; } .lib-cat.on { border-color: var(--green); background: var(--green-soft); } .lib-cat.on .lib-cat-icon { background: var(--card); transform: scale(1.06); } .lib-cat.on small { color: var(--green-deep); } .lib-cat:active { transform: scale(.97); } .lib-toolbar { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 12px; } .lib-toolbar h3 { font-size: 17px; font-weight: 850; } .lib-toolbar span { color: var(--faint); font-size: 12.5px; font-weight: 700; } .lib-drop { position: relative; border-radius: 24px; transition: background .2s, box-shadow .2s; } .lib-drop.dragging { background: var(--green-soft); box-shadow: 0 0 0 2px var(--green) inset; } .lib-drop.dragging::after { content: "Suelta para añadir a tu biblioteca"; position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; color: var(--green-deep); font-size: 17px; font-weight: 850; background: color-mix(in srgb, var(--green-soft) 82%, transparent); border-radius: 24px; } .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .lib-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 20px; overflow: hidden; cursor: pointer; background: var(--card); border: 1px solid var(--line); box-shadow: var(--k-elev); animation: gxIn .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .2s; } .lib-media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--line-soft); } .lib-media .library-auth-thumb, .lib-media .library-auth-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } .lib-media .library-auth-thumb > i.skel { display: block; width: 100%; height: 100%; } .lib-kind { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: rgba(12,22,17,.55); color: #fff; font-size: 11.5px; font-weight: 800; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .lib-kind svg { width: 13px; height: 13px; } .lib-edit { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.92); color: #1d2a22; box-shadow: 0 4px 10px rgba(0,0,0,.18); opacity: 0; transform: translateY(-4px) scale(.9); transition: opacity .2s, transform .25s var(--ease-spring); } .lib-edit svg { width: 16px; height: 16px; } .lib-body { display: grid; gap: 3px; padding: 11px 13px 13px; } .lib-body b { font-size: 13.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .lib-body small { color: var(--muted); font-size: 11.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .lib-body .gx-status { justify-self: start; margin-top: 5px; } .lib-dropnote { margin-top: 16px; padding: 16px; border: 1.5px dashed var(--line); border-radius: 18px; color: var(--faint); font-size: 13px; font-weight: 700; text-align: center; } .lib-empty { display: grid; justify-items: center; gap: 8px; padding: 56px 20px 60px; border: 2px dashed color-mix(in srgb, var(--green) 30%, var(--line)); border-radius: 24px; background: linear-gradient(160deg, var(--card), color-mix(in srgb, var(--green-soft) 50%, var(--card))); text-align: center; } .lib-empty h3 { font-size: 19px; margin-top: 6px; } .lib-empty p { max-width: 440px; color: var(--muted); font-size: 13.5px; line-height: 1.5; margin-bottom: 8px; } .lib-empty-art { position: relative; display: flex; height: 76px; align-items: center; } .lib-empty-art i { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 -8px; border-radius: 18px; background: var(--card); box-shadow: var(--k-elev-up); font-style: normal; font-size: 28px; animation: libFloat 4s ease-in-out infinite; } .lib-empty-art i:nth-child(1) { transform: rotate(-9deg); animation-delay: -1s; } .lib-empty-art i:nth-child(2) { z-index: 1; width: 70px; height: 70px; } .lib-empty-art i:nth-child(3) { transform: rotate(9deg); animation-delay: -2.2s; } @keyframes libFloat { 50% { translate: 0 -6px; } } @media (hover: hover) and (pointer: fine) { .lib-card:hover { transform: translateY(-4px); box-shadow: var(--k-elev-up); border-color: color-mix(in srgb, var(--green) 30%, var(--line)); } .lib-card:hover .library-auth-thumb img { transform: scale(1.06); } .lib-card:hover .lib-edit, .lib-card:focus-visible .lib-edit { opacity: 1; transform: none; } .lib-cat:hover { transform: translateY(-2px); box-shadow: var(--k-elev-up); } .lib-cat:hover .lib-cat-icon { transform: rotate(-6deg) scale(1.1); } } @media (hover: none) { .lib-edit { opacity: 1; transform: none; } } @media (max-width: 700px) { .lib-cats { display: flex; overflow-x: auto; scrollbar-width: none; margin-left: -20px; margin-right: -20px; padding: 2px 20px 4px; } .lib-cat { flex: none; width: 138px; } .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .lib-head .gx-create { margin-top: 16px; } } @media (prefers-reduced-motion: reduce) { .lib-card, .lib-empty-art i { animation: none; } } /* Barra inferior (móvil): el icono activo va dentro de una píldora que crece al entrar, y los nombres ya no se pisan con siete secciones. */ @media (max-width: 1023px) { #tabbar { padding-left: 4px; padding-right: 4px; } .tab { gap: 4px; font-size: 9.5px; letter-spacing: 0; padding: 6px 0 4px; } .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 1px; } .tab svg { width: 23px; height: 23px; } .tab::before { content: ""; position: absolute; top: 5px; left: 50%; width: 48px; height: 31px; margin-left: -24px; border-radius: 999px; background: var(--green-soft); transform: scaleX(.3); opacity: 0; transition: transform .35s var(--ease-spring), opacity .2s; z-index: -1; } .tab { z-index: 0; isolation: isolate; } .tab.on::before { transform: none; opacity: 1; } .tab.on::after { display: none; } .tab.on svg { transform: none; animation: railIconPop .5s var(--ease-spring); } .tab.on .tab-label { font-weight: 850; } } @keyframes railIconPop { 0% { transform: scale(.7) rotate(-10deg); } 60% { transform: scale(1.12) rotate(3deg); } 100% { transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════ MASCOTA DE KALMA (sep-2026) ═══════════════════════════════════════════════════════════════════════════ */ .kalma-mascot { display: block; overflow: visible; } .kalma-mascot * { transform-box: view-box; } .km-shadow { fill: rgba(20, 40, 30, .13); transform-origin: 101px 215px; animation: kmShadow 3.2s ease-in-out infinite; } .km-body { transform-origin: 101px 213px; animation: kmBreath 3.2s ease-in-out infinite; } .km-crown { transform-origin: 114px 104px; animation: kmSway 3.2s ease-in-out infinite; } .km-eyes { transform-origin: 107px 143px; animation: kmBlink 5s infinite; } .km-cheek { fill: #F6A552; opacity: .5; } .km-eyes-happy, .km-mouth-open, .km-mouth-sad, .km-mouth-o { display: none; } @keyframes kmBreath { 0%, 100% { transform: rotate(-1deg) scaleY(1); } 50% { transform: rotate(1deg) scaleY(1.018); } } @keyframes kmSway { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } } @keyframes kmShadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.94); } } @keyframes kmBlink { 0%, 90%, 96%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.08); } } .km-happy .km-eyes, .km-celebrate .km-eyes { display: none; } .km-happy .km-eyes-happy, .km-celebrate .km-eyes-happy { display: inline; } .km-happy .km-mouth, .km-celebrate .km-mouth { display: none; } .km-happy .km-mouth-open, .km-celebrate .km-mouth-open { display: inline; } .km-celebrate .km-body { animation: kmJump .9s cubic-bezier(.3,.7,.4,1) infinite; } .km-celebrate .km-shadow { animation: kmJumpShadow .9s cubic-bezier(.3,.7,.4,1) infinite; } .km-celebrate .km-crown { animation: kmSway .45s ease-in-out infinite; } @keyframes kmJump { 0%, 100% { transform: translateY(0) scaleY(.96); } 45% { transform: translateY(-16px) scaleY(1.03); } } @keyframes kmJumpShadow { 0%, 100% { transform: scaleX(1); } 45% { transform: scaleX(.75); opacity: .6; } } .km-sad .km-mouth { display: none; } .km-sad .km-mouth-sad { display: inline; } .km-sad .km-crown { animation: kmDroop 4s ease-in-out infinite; } .km-sad .km-eyes { transform: translateY(2px); animation: none; } @keyframes kmDroop { 0%, 100% { transform: rotate(5deg) translateY(3px); } 50% { transform: rotate(7deg) translateY(4px); } } .km-thinking .km-mouth { display: none; } .km-thinking .km-mouth-o { display: inline; } .km-thinking .km-eyes { animation: kmLook 3s ease-in-out infinite; } @keyframes kmLook { 0%, 100% { transform: translate(0, 0); } 30%, 60% { transform: translate(3px, -3px); } } /* Saluda al pasar el ratón: la copa se agita y sonríe */ .km-wave .km-crown, a:hover > .kalma-mascot .km-crown, button:hover > .kalma-mascot .km-crown, .k-mascot-hover:hover .km-crown { animation: kmWave .5s ease-in-out 3; } .k-mascot-hover:hover .km-eyes { display: none; } .k-mascot-hover:hover .km-eyes-happy { display: inline; } @keyframes kmWave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } } /* Cargando: los cocos caen, botan, ruedan y vuelven a crecer en la copa */ .km-loading .km-eyes { animation: kmWatch 3.6s ease-in-out infinite; } @keyframes kmWatch { 0%, 8%, 100% { transform: translateY(0); } 20%, 40% { transform: translateY(3px); } } .km-loading .km-nut { transform-origin: center; transform-box: fill-box; animation: kmNut 3.6s infinite; } .km-loading .km-nut.n1 { --dy: 93px; --dx: -46px; --r: -300deg; animation-delay: 0s; } .km-loading .km-nut.n2 { --dy: 91px; --dx: 44px; --r: 300deg; animation-delay: 1.2s; } .km-loading .km-nut.n3 { --dy: 85px; --dx: -28px; --r: -240deg; animation-delay: 2.4s; } @keyframes kmNut { 0% { transform: translate(0, 0) scale(1); opacity: 1; animation-timing-function: ease-in-out; } 6% { transform: translate(-1px, 1px) rotate(-8deg); } 10% { transform: translate(1px, 0) rotate(6deg); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 32% { transform: translate(0, var(--dy)) scale(1.06, .9); animation-timing-function: cubic-bezier(0, .55, .45, 1); } 39% { transform: translate(calc(var(--dx) * .25), calc(var(--dy) - 16px)) rotate(calc(var(--r) * .2)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 46% { transform: translate(calc(var(--dx) * .45), var(--dy)) rotate(calc(var(--r) * .4)) scale(1.04, .94); animation-timing-function: ease-out; } 70% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 1; } 78% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } 79% { transform: translate(0, 0) scale(0); opacity: 0; } 92% { transform: translate(0, 0) scale(0); opacity: 1; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 100% { transform: translate(0, 0) scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .kalma-mascot *, .kalma-mascot { animation: none !important; } } /* Cargador */ .k-loader { display: grid; justify-items: center; gap: 10px; width: 100%; max-width: 420px; margin: 0 auto; padding: 22px 18px; text-align: center; } .k-loader-stage { position: relative; display: grid; place-items: center; } .k-loader-ground { position: absolute; left: 50%; bottom: 7%; width: 118%; height: 2px; transform: translateX(-50%); border-radius: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--green) 35%, transparent), transparent); } .k-loader-copy { display: grid; gap: 4px; } .k-loader-copy b { font-size: 16px; font-weight: 850; color: var(--ink); } .k-loader-copy span { color: var(--muted); font-size: 13px; line-height: 1.45; } .k-loader-bar { width: 100%; height: 8px; border-radius: 99px; background: var(--line-soft); overflow: hidden; } .k-loader-bar i { display: block; height: 100%; width: 4%; border-radius: inherit; transition: width .8s var(--ease-out); background: linear-gradient(90deg, var(--green), #F6A552, var(--green)); background-size: 200% 100%; animation: klShine 2.4s linear infinite; } @keyframes klShine { to { background-position: -200% 0; } } .k-loader-meta { display: flex; justify-content: space-between; width: 100%; color: var(--muted); font-size: 12.5px; font-weight: 750; } .k-loader-meta [data-kl-eta] { color: var(--green-deep); } .k-loader.compact { gap: 6px; padding: 18px 12px; max-width: 300px; } .k-loader.compact .k-loader-copy b { font-size: 13.5px; } .k-loader.compact .k-loader-bar { height: 6px; } .k-loader.compact .k-loader-meta { font-size: 11.5px; } /* En las cargas de pantalla la mascota solo aparece si la espera se nota */ .k-wait { display: grid; place-items: center; min-height: 260px; animation: kWaitIn .3s ease-out .45s both; } @keyframes kWaitIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Mascota en procesos y resultados */ .creation-live-progress.k-progress .k-loader { max-width: 480px; } .creation-live-progress.k-progress [hidden] { display: none !important; } .creation-live-progress.error .k-loader-copy b { color: var(--danger); } .studio-result-mascot, .guided-edit-mascot { display: grid; place-items: center; margin-bottom: 8px; } .upload-mascot { display: inline-grid; vertical-align: middle; margin-right: 4px; } .upload-mascot .kalma-mascot { width: 34px; height: 39px; } .k-avatar-progress { background: var(--green-soft); } .k-avatar-progress .k-loader { max-width: none; } /* Mascota en la barra lateral: más grande y saluda al pasar el ratón */ @media (min-width: 1024px) { #k-rail .k-rail-logo { width: 56px; height: 56px; border-radius: 18px; overflow: visible; background: radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--green) 26%, var(--green-soft)) 0%, var(--green-soft) 70%); } #k-rail .k-rail-logo .kalma-mascot { width: 54px; height: 62px; margin-top: -10px; } #k-rail .k-rail-brand:hover .k-rail-logo { transform: none; } #k-rail .k-rail-word { font-size: 23px; } body.rail-collapsed #k-rail .k-rail-logo { width: 54px; height: 54px; } } /* Saludo de Inicio */ .kh-hello { display: flex; align-items: flex-end; gap: 6px; margin: 0 0 16px; } .kh-hello:empty { display: none; } .kh-hello-mascot { flex: none; padding: 0; background: none; border: 0; cursor: pointer; filter: drop-shadow(0 10px 14px rgba(30,60,45,.14)); } .kh-hello-mascot .kalma-mascot { width: 96px; height: 110px; } .kh-bubble { position: relative; display: grid; gap: 3px; max-width: 560px; margin-bottom: 26px; padding: 13px 18px; border-radius: 20px 20px 20px 6px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--k-elev); animation: khBubble .55s var(--ease-spring) .15s both; } .kh-bubble::before { content: ""; position: absolute; left: -7px; bottom: 10px; width: 14px; height: 14px; background: var(--card); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); border-radius: 0 0 0 4px; } .kh-bubble b { font-size: 17px; font-weight: 850; letter-spacing: -.01em; } .kh-bubble span { color: var(--muted); font-size: 13.5px; line-height: 1.45; } @keyframes khBubble { from { opacity: 0; transform: translateX(-10px) scale(.94); transform-origin: left bottom; } to { opacity: 1; transform: none; } } @media (max-width: 700px) { .kh-hello-mascot .kalma-mascot { width: 74px; height: 85px; } .kh-bubble { margin-bottom: 18px; padding: 11px 14px; } .kh-bubble b { font-size: 15px; } .kh-bubble span { font-size: 12.5px; } } .k-empty-mascot { display: grid; justify-items: center; text-align: center; padding: 30px 22px 28px; } .k-empty-mascot .kalma-mascot { filter: drop-shadow(0 12px 16px rgba(30,60,45,.12)); } /* ═══ CALENDARIO v2 ═══ */ #s-cal { max-width: 1320px; } #s-cal .calendar-toolbar { flex-direction: row; align-items: flex-end; padding: 10px 0 18px; } #s-cal .calendar-toolbar h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; } #s-cal .calendar-toolbar p { font-size: 14px; margin-top: 4px; } #s-cal .calendar-nav { width: auto; gap: 0; padding: 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--k-elev); } #s-cal .calendar-nav button, #s-cal .calendar-nav strong { height: 36px; border: 0; background: none; border-radius: 10px; font-weight: 800; } #s-cal .calendar-nav strong { min-width: 150px; font-size: 14px; } #s-cal .calendar-nav button { width: auto; min-width: 36px; color: var(--muted); transition: background .2s, color .2s; } #s-cal .calendar-nav button:hover { background: var(--green-soft); color: var(--green-deep); } #s-cal .calendar-nav #cal-today { padding: 0 14px; color: var(--green-deep); } .calendar-strategy-icon { width: 58px !important; height: 58px !important; background: color-mix(in srgb, var(--sun) 22%, var(--card)) !important; border-radius: 18px !important; overflow: visible; } .calendar-strategy-icon .kalma-mascot { width: 52px; height: 60px; margin-top: -8px; } #s-cal .cal-d { border-radius: 16px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 1px 2px rgba(30,50,40,.04); transition: transform .22s var(--ease-out), box-shadow .22s, border-color .2s; animation: gxIn .45s var(--ease-out) both; } #s-cal .cal-d > time { font-size: 13px; color: var(--muted); } #s-cal .cal-d.today { border: 2px solid var(--green); background: linear-gradient(160deg, var(--green-soft), var(--card) 70%); } #s-cal .cal-d.today > time { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--green-deep); color: var(--on-green); } #s-cal .cal-d.dim { opacity: .38; background: transparent; box-shadow: none; } #s-cal .cal-d.selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 45%, transparent); } @media (hover: hover) and (pointer: fine) { #s-cal .cal-d:not(.dim):hover { transform: translateY(-3px); box-shadow: var(--k-elev-up); border-color: color-mix(in srgb, var(--green) 35%, var(--line)); } } @media (min-width: 701px) { #s-cal .cal-event { font-size: 10.5px; height: auto; padding: 4px 7px; margin-top: 4px; border-radius: 8px; border-left: 3px solid currentColor; font-weight: 700; } #s-cal .cal-event b { display: inline; } } @media (max-width: 700px) { #s-cal .calendar-toolbar { flex-direction: column; align-items: stretch; } #s-cal .calendar-nav strong { flex: 1; } #s-cal .cal-d { border-radius: 12px; } } @media (prefers-reduced-motion: reduce) { #s-cal .cal-d { animation: none; } } /* ═══ MENSAJES v2 ═══ */ #s-messages { max-width: 1320px; } @media (min-width: 1024px) { #s-messages.active { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 16px; align-content: start; } #s-messages > header, #s-messages > #messages-list { grid-column: 1 / -1; } } #s-messages .autodm-card, #s-messages .leads-card { border-radius: 22px; padding: 18px; box-shadow: var(--k-elev); height: calc(100% - 14px); } #s-messages .autodm-form input, #s-messages .autodm-form textarea { border-radius: 12px; padding: 12px 13px; font-size: 13px; transition: border-color .2s, box-shadow .2s; } #s-messages .autodm-form input:focus, #s-messages .autodm-form textarea:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent); } #s-messages .lead-counts { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; } #s-messages .lead-counts span { position: relative; padding: 12px 10px 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 11px; font-weight: 700; text-align: left; } #s-messages .lead-counts b { display: block; font-size: 22px; font-weight: 850; } #s-messages .lead-counts span::after { content: ""; position: absolute; top: 12px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); } #s-messages .lead-counts span:nth-child(2)::after { background: var(--sun); } #s-messages .lead-counts span:nth-child(3)::after { background: #6FA8DC; } #s-messages .lead-counts span:nth-child(4)::after { background: var(--green); } #s-messages .lead-counts span:nth-child(5)::after { background: var(--danger); } #s-messages .btn.btn-ghost { width: auto; padding: 8px 13px; font-size: 13px; border-radius: 12px; } @media (min-width: 1024px) { #s-messages .lead-counts { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ═══ AVATAR IA v2 ═══ */ #s-avatars { max-width: 1320px; } .av-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; overflow: hidden; padding: 26px 28px; border-radius: 26px; background: var(--k-dark); color: #F2F7F3; box-shadow: var(--k-elev-up); } .av-hero::before { content: ""; position: absolute; right: -80px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(246,165,82,.35), transparent 65%); pointer-events: none; } .av-kicker { display: inline-block; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.14); color: #FFD7A8; font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .av-hero h3 { margin: 12px 0 8px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -.02em; color: #fff; } .av-hero p { max-width: 560px; color: rgba(242,247,243,.78); font-size: 14px; line-height: 1.55; } .av-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 18px; } .av-feats span { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); } .av-feats i { font-style: normal; font-size: 19px; margin-bottom: 4px; } .av-feats b { font-size: 13.5px; color: #fff; } .av-feats small { color: rgba(242,247,243,.7); font-size: 11.5px; line-height: 1.4; } .av-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; } .av-cta span { color: rgba(242,247,243,.78); font-size: 13px; } .av-cta span b { color: #fff; font-size: 24px; font-weight: 850; } .av-buy { padding: 13px 22px; border-radius: 15px; background: var(--sun); color: #2B1B08; font-weight: 850; font-size: 15px; box-shadow: 0 12px 26px -12px rgba(246,165,82,.9); transition: transform .18s var(--ease-spring), filter .2s; } .av-buy:hover { transform: translateY(-2px); filter: brightness(1.05); } .av-usage { margin-top: 18px; } .av-usage > div:first-child { display: flex; justify-content: space-between; font-size: 12.5px; } .av-usage-bar { height: 8px; margin-top: 8px; border-radius: 99px; background: rgba(255,255,255,.16); overflow: hidden; } .av-usage-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9ED3B8, var(--sun)); } .av-hero-art { position: relative; display: grid; place-items: end center; margin: -10px -8px -26px 0; } .av-glow { position: absolute; bottom: 0; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(158,211,184,.35), transparent 70%); } .av-hero-art .kalma-mascot { position: relative; } .av-hero-art .km-shadow { fill: rgba(0,0,0,.28); } .av-bubble { position: absolute; top: 12%; left: -6px; z-index: 2; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #fff; color: #1B2A22; font-size: 12.5px; font-weight: 800; box-shadow: 0 10px 20px -10px rgba(0,0,0,.5); animation: khBubble .6s var(--ease-spring) .3s both; } @media (max-width: 760px) { .av-hero { grid-template-columns: 1fr; padding: 22px 18px; } .av-hero-art { order: -1; height: 170px; } .av-hero-art .kalma-mascot { width: 130px; height: 150px; } } /* ═══ PERFIL v2 ═══ */ #s-profile { max-width: 980px; } #s-profile > .card, #s-profile > section.card { border-radius: 22px; box-shadow: var(--k-elev); } .pf-id { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--line); } .pf-avatar { display: grid; place-items: center; width: 58px; height: 58px; flex: none; border-radius: 18px; background: var(--k-dark); color: #fff; font-size: 24px; font-weight: 850; box-shadow: 0 10px 20px -12px rgba(22,56,43,.8); } .pf-id-copy { flex: 1; min-width: 0; } .pf-id-copy small { color: var(--green-deep); font-size: 10.5px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .pf-id-copy b { display: block; font-size: 20px; font-weight: 850; letter-spacing: -.01em; } .pf-id-copy p { color: var(--muted); font-size: 12.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-plan { flex: none; padding: 7px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green-deep); font-size: 12px; font-weight: 850; } .pf-plan.expired { background: color-mix(in srgb, var(--danger) 12%, var(--card)); color: var(--danger); } .pf-nets { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; } .pf-net { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--card-2); transition: transform .2s var(--ease-out), box-shadow .2s; } .pf-net > i { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; color: #fff; font-style: normal; font-weight: 850; } .pf-net > i svg { width: 20px; height: 20px; } .pf-net.instagram > i { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); } .pf-net.tiktok > i { background: #111; } .pf-net.linkedin > i { background: #0A66C2; } .pf-net.facebook > i { background: #1877F2; } .pf-net > span { flex: 1; min-width: 0; display: grid; } .pf-net b { font-size: 13.5px; } .pf-net small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-net em { font-style: normal; font-size: 10.5px; font-weight: 850; color: var(--green-deep); background: var(--green-soft); padding: 3px 8px; border-radius: 999px; } @media (hover: hover) and (pointer: fine) { .pf-net:hover { transform: translateY(-2px); box-shadow: var(--k-elev-up); } } @media (max-width: 600px) { .pf-id { flex-wrap: wrap; } .pf-plan { order: 3; } } @media (max-width: 700px) { .gx-head.lib-head { flex-wrap: wrap; } .gx-head.lib-head > div { flex: 1 1 200px; } .gx-head.lib-head .gx-create { margin-top: 0; order: 3; } } /* Tema oscuro: superficies que tenían el blanco fijo (la tarjeta de evolución de Métricas se veía blanca con los números invisibles, y lo mismo en varias piezas de Estrategia). Las que imitan una red social o van sobre verde siguen blancas a propósito. */ @media (prefers-color-scheme: dark) { .avatar-create-summary,.avatar-create-intro > span,.ios-sheet-row.highlight,.strategy-meta b,.strategy-pillars span,.strategy-phase,.strategy-generation-mark,.strategy-content-card,.strategy-impact-grid article,.strategy-piece-results button,.strategy-review-header,.strategy-editor-objective,.strategy-editor-block,.strategy-inline-library-grid button,.optimizer-music button,.lifecycle-danger-btn { background: var(--card) !important; color: var(--ink); } } /* ═══════════════════════════════════════════════════════════════════════════ FICHA DE PUBLICACIÓN v2 (sep-2026) — la pieza a la izquierda, fija; a la derecha el texto por red, la fecha, el centro de control y las acciones. ═══════════════════════════════════════════════════════════════════════════ */ #post-sheet-backdrop.scheduled-preview-active #post-sheet-body { padding-top: 20px; } .ps-head { gap: 16px; } .ps-head-main { display: flex; align-items: center; gap: 13px; min-width: 0; } .ps-format { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 15px; background: var(--green-deep); color: var(--on-green); box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--green-deep) 90%, transparent); } .ps-format svg { width: 22px; height: 22px; } .ps-head-copy { display: grid; gap: 5px; min-width: 0; } .ps-head-copy > b { font-size: clamp(17px, 1.6vw, 21px); font-weight: 850; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ps-head-copy > span { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ps-head-copy time { color: var(--muted); font-size: 13px; font-weight: 650; } #post-sheet-backdrop .sheet-close { transition: transform .25s var(--ease-spring), background .2s; } #post-sheet-backdrop .sheet-close:hover { transform: rotate(90deg); } #post-sheet-backdrop.scheduled-preview-active .ps-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 470px); gap: 0 clamp(24px, 3.5vw, 52px); align-items: start; justify-content: center; padding: 22px 0 0; } #post-sheet-backdrop.scheduled-preview-active .ps-main > * { width: auto; max-width: none; } #post-sheet-backdrop.scheduled-preview-active .ps-main.no-media { grid-template-columns: minmax(0, 640px); } #post-sheet-backdrop.scheduled-preview-active .ps-main .sheet-media-wrap { position: sticky; top: 0; justify-self: center; margin: 0 0 24px; width: min(100%, 680px, calc((100dvh - 170px) * var(--media-ratio))); border-radius: 22px; box-shadow: 0 30px 60px -34px rgba(12,30,20,.55); } .ps-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-bottom: 8px; } .ps-side > p.muted { margin: 0 !important; } .ps-card { padding: 15px 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--k-elev); } .ps-card > header { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; } .ps-card > header b { display: block; font-size: 14px; font-weight: 850; } .ps-card > header small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; } .ps-card-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: var(--k-cream); font-size: 16px; } .ps-copy p { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; max-height: 300px; overflow: auto; scrollbar-width: thin; } .ps-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 11px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); } .ps-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border-radius: 9px; color: var(--muted); font-size: 12.5px; font-weight: 800; transition: background .2s, color .2s; } .ps-tabs button i { display: grid; place-items: center; width: 16px; height: 16px; font-style: normal; } .ps-tabs button i svg { width: 15px; height: 15px; } .ps-tabs button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); } .ps-schedule-row { display: flex; gap: 8px; } .ps-schedule-row input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); color: var(--ink); font: inherit; font-size: 14px; } .ps-schedule-row input:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent); } .ps-schedule-row .btn { width: auto; flex: none; padding: 0 18px; border-radius: 12px; font-size: 14px; } .ps-link-danger { margin-top: 10px; padding: 4px 0; color: var(--danger); font-size: 12.5px; font-weight: 750; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--danger) 40%, transparent); } .ps-link-danger:hover { text-decoration-color: currentColor; } .ps-side #sheet-preview-networks { margin: 0 !important; padding: 11px 14px; border-radius: 14px; font-size: 13.5px; } .ps-side .sheet-music-summary { margin: 0; border-radius: 18px; } .ps-side .lifecycle-panel { margin: 0; padding: 15px 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--k-elev); } .ps-side .lifecycle-networks { gap: 8px; } .ps-side .lifecycle-network { border-radius: 14px; background: var(--card-2); } .ps-side .sheet-post-stats { margin: 0; } .ps-actions { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 8px; margin-top: 4px; padding: 14px 0 6px; background: linear-gradient(transparent, var(--bg) 22%); } .ps-actions .btn { margin: 0 !important; min-height: 50px; border-radius: 15px; font-size: 15px; } .ps-actions .ps-primary { box-shadow: 0 14px 26px -16px color-mix(in srgb, var(--green-deep) 95%, transparent); } .ps-tools { display: flex; gap: 8px; } .ps-tools:empty { display: none; } .ps-tool { flex: 1; min-height: 42px; padding: 0 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 13px; font-weight: 800; transition: border-color .2s, color .2s, transform .15s var(--ease-spring); } .ps-tool:hover { border-color: var(--green); color: var(--green-deep); } .ps-tool:active { transform: scale(.97); } @media (max-width: 900px) { #post-sheet-backdrop.scheduled-preview-active .ps-main { grid-template-columns: minmax(0, 1fr); } #post-sheet-backdrop.scheduled-preview-active .ps-main .sheet-media-wrap { position: relative; width: min(100%, 520px, calc((100dvh - 200px) * var(--media-ratio))); } .ps-head-copy > b { white-space: normal; } } .ps-nets { color: var(--muted); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════════ MODALES v2 (sep-2026) — en escritorio, tarjeta centrada que entra con escala; en móvil, hoja inferior. Cabecera con título y subtítulo en dos líneas, fondo difuminado y campos y botones con el lenguaje de la app. (Las fichas a pantalla completa —publicación, avatar, estrategia— tienen sus propias reglas y no se tocan aquí.) ═══════════════════════════════════════════════════════════════════════════ */ .sheet-backdrop { background: rgba(14, 26, 19, .45); -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1); } .sheet { background: var(--bg); box-shadow: 0 -24px 60px -24px rgba(0,0,0,.35); scrollbar-width: thin; } .sheet-detail-header { align-items: flex-start; padding: 6px 6px 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line); } .sheet-detail-header > div:first-child { display: grid; gap: 3px; min-width: 0; } .sheet-detail-header > div:first-child > b { font-size: 19px; font-weight: 850; letter-spacing: -.01em; line-height: 1.2; } .sheet-detail-header > div:first-child > small { color: var(--muted); font-size: 13px; line-height: 1.4; } .sheet-close { font-size: 26px; transition: transform .25s var(--ease-spring), background .2s, border-color .2s; } .sheet-close:hover { transform: rotate(90deg); border-color: var(--green); } .sheet .library-field, .sheet label.library-field { display: grid; gap: 7px; margin-bottom: 14px; font-size: 13px; font-weight: 800; } .sheet .input, .sheet select.input, .sheet input.input { border-radius: 13px; border: 1px solid var(--line); background: var(--card); padding: 12px 14px; font-size: 14px; transition: border-color .2s, box-shadow .2s; } .sheet .input:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent); } .sheet .library-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; } .sheet .library-sources button { border-radius: 18px; transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s; } .sheet .library-sources button:hover { transform: translateY(-3px); box-shadow: var(--k-elev-up); border-color: var(--green); } .sheet .btn { border-radius: 15px; } @media (min-width: 760px) { .sheet-backdrop:not(.scheduled-preview-active):not(.avatar-creation-active):not(.strategy-review-active) { align-items: center; padding: 24px; } .sheet-backdrop:not(.scheduled-preview-active):not(.avatar-creation-active):not(.strategy-review-active) .sheet { max-width: 560px; max-height: min(86vh, 860px); border-radius: 28px; padding: 22px 26px 26px; transform: translateY(14px) scale(.97); opacity: 0; transition: transform .34s var(--ease-spring), opacity .22s; box-shadow: 0 40px 80px -30px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--line) 60%, transparent); } .sheet-backdrop.show:not(.scheduled-preview-active):not(.avatar-creation-active):not(.strategy-review-active) .sheet { transform: none; opacity: 1; } .sheet-backdrop:not(.scheduled-preview-active):not(.avatar-creation-active):not(.strategy-review-active) .sheet-handle { display: none; } } @media (prefers-reduced-motion: reduce) { .sheet { transition: none !important; } } .sheet-detail-header.ps-head > .ps-head-main { display: flex; } .ps-where > div[style*="margin:12px 0"] { margin: 0 0 12px !important; } .ps-where .chip { border-radius: 12px; } .ps-when { padding-top: 12px; border-top: 1px solid var(--line); } .ps-when input[type="datetime-local"] { border-radius: 12px !important; background: var(--card-2); color: var(--ink); } .sheet-detail-header.ps-head > .ps-head-main { gap: 13px; align-items: center; } /* Blanco fijo sobre verde no contrasta en oscuro (el verde se aclara): el texto de los botones verdes sigue el token --on-green. */ .btn-green { color: var(--on-green); } /* ═══════════════════════════════════════════════════════════════════════════ LEADS (sep-2026) — clasificación de mensajes con JEV y respuestas automáticas. Sustituye a «Mensajes». ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { #s-messages.active { display: block; } } #s-messages { --c-lead: #2E8B57; --c-cliente: #3B7DD8; --c-pregunta: #D99A2B; --c-queja: #D0503E; --c-colaboracion: #8B5CF6; --c-felicitacion: #D9679A; --c-spam: #7C8A83; --c-otro: #9AA69B; --c-multimedia: #1F9AA8; } @media (prefers-color-scheme: dark) { #s-messages { --c-lead: #5FC58E; --c-cliente: #79A9F0; --c-pregunta: #F2BE5E; --c-queja: #EE8574; --c-colaboracion: #B39BFA; --c-felicitacion: #F19AC2; --c-spam: #9DAFA3; --c-otro: #75857A; --c-multimedia: #5CC9D4; } } .c-lead { --c: var(--c-lead); } .c-cliente { --c: var(--c-cliente); } .c-pregunta { --c: var(--c-pregunta); } .c-queja { --c: var(--c-queja); } .c-colaboracion { --c: var(--c-colaboracion); } .c-felicitacion { --c: var(--c-felicitacion); } .c-spam { --c: var(--c-spam); } .c-otro { --c: var(--c-otro); } .c-multimedia { --c: var(--c-multimedia); } .ld-sync svg { width: 17px; height: 17px; } .ld-sync.busy svg { animation: ldSpin .9s linear infinite; } @keyframes ldSpin { to { transform: rotate(360deg); } } .ld-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 5px; margin-bottom: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--k-elev); } .ld-tabs button { display: grid; gap: 1px; padding: 10px 14px; border-radius: 13px; text-align: left; color: var(--muted); transition: background .2s, color .2s; } .ld-tabs b { font-size: 14px; font-weight: 850; } .ld-tabs small { font-size: 11.5px; } .ld-tabs button.on { background: var(--green-deep); color: var(--on-green); } .ld-tabs button:not(.on):hover { background: var(--line-soft); color: var(--ink); } .ld-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; overflow: hidden; padding: 22px 24px; border-radius: 24px; background: var(--k-dark); color: #F2F7F3; box-shadow: var(--k-elev-up); } .ld-hero h3 { margin: 10px 0 4px; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.02em; color: #fff; } .ld-hero p { color: rgba(242,247,243,.78); font-size: 13.5px; } .ld-stack { display: flex; gap: 3px; height: 12px; margin-top: 16px; border-radius: 99px; overflow: hidden; } .ld-stack i { display: block; min-width: 6px; background: var(--c); animation: ldGrow .8s var(--ease-out) both; transform-origin: left; } @keyframes ldGrow { from { transform: scaleX(0); } } .ld-hero-lead { display: grid; justify-items: center; padding: 12px 18px 0; border-radius: 20px; background: rgba(255,255,255,.08); text-align: center; } .ld-hero-lead b { font-size: 38px; line-height: 1; font-weight: 850; color: #FFD7A8; } .ld-hero-lead span { font-size: 12.5px; font-weight: 750; color: rgba(242,247,243,.85); } .ld-hero-lead .kalma-mascot { margin-top: 2px; } .ld-hero-lead .km-shadow { fill: rgba(0,0,0,.28); } .ld-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; margin: 16px 0 22px; } .ld-cat { position: relative; display: grid; gap: 1px; padding: 13px 13px 12px; border-radius: 18px; text-align: left; overflow: hidden; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); box-shadow: var(--k-elev); transition: transform .2s var(--ease-spring), border-color .2s, box-shadow .2s; animation: gxIn .45s var(--ease-out) both; } .ld-cat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); } .ld-cat-icon { font-size: 18px; margin-bottom: 4px; } .ld-cat b { font-size: 24px; font-weight: 850; line-height: 1.1; } .ld-cat span:not(.ld-cat-icon) { font-size: 12.5px; font-weight: 800; } .ld-cat small { color: var(--muted); font-size: 11px; font-weight: 700; } .ld-cat.zero { opacity: .55; box-shadow: none; } .ld-cat.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--card)); } .ld-cat:hover { transform: translateY(-2px); box-shadow: var(--k-elev-up); } .ld-list-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 2px 12px; } .ld-list-head h3 { font-size: 17px; font-weight: 850; } .ld-list-head > span { margin-left: auto; color: var(--faint); font-size: 12px; font-weight: 700; } .ld-clear { color: var(--green-deep); font-size: 12.5px; font-weight: 800; } .ld-list { display: grid; gap: 10px; } .ld-none { padding: 20px; text-align: center; } .ld-msg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 13px; align-items: start; padding: 14px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--line)); box-shadow: var(--k-elev); animation: gxIn .4s var(--ease-out) both; } .ld-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 850; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--c, var(--green)) 85%, #000), var(--c, var(--green))); } .ld-msg-main header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ld-msg-main header b { font-size: 13.5px; } .ld-msg-main header time { color: var(--faint); font-size: 12px; font-weight: 700; } .ld-auto, .ld-islead { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green-deep); } .ld-islead { background: var(--sun-soft); color: var(--sun-deep); } .ld-msg-main p { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; } .ld-msg-main p.ld-media { color: var(--muted); } .ld-media a { color: var(--green-deep); font-weight: 800; } .ld-probs { display: grid; gap: 4px; margin-top: 9px; max-width: 420px; } .ld-probs span { display: grid; grid-template-columns: 112px minmax(0, 1fr) 42px; align-items: center; gap: 8px; font-size: 11.5px; } .ld-probs small { color: var(--muted); font-weight: 750; } .ld-probs i { height: 6px; border-radius: 99px; background: var(--line-soft); overflow: hidden; } .ld-probs i b { display: block; height: 100%; border-radius: inherit; background: var(--c); animation: ldGrow .7s var(--ease-out) both; } .ld-probs em { font-style: normal; font-weight: 800; text-align: right; color: var(--ink); } .ld-msg-side { display: grid; justify-items: end; gap: 6px; } .ld-pill { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 850; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--card)); } .ld-fix { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--faint); } .ld-fix select { border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: 11.5px; padding: 3px 5px; } .ld-rules-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .ld-rules-head h3 { font-size: 20px; font-weight: 850; letter-spacing: -.01em; } .ld-rules-head p { max-width: 640px; margin-top: 3px; color: var(--muted); font-size: 13.5px; line-height: 1.5; } .ld-rules-head .gx-create { flex: none; } .ld-tester { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; margin-bottom: 10px; border-radius: 16px; background: var(--card); border: 1.5px dashed color-mix(in srgb, var(--green) 35%, var(--line)); } .ld-tester input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; padding: 8px 0; } .ld-test-ok, .ld-test-no { margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: var(--green-soft); animation: gxIn .3s var(--ease-out) both; } .ld-test-ok small { display: block; margin-bottom: 8px; color: var(--green-deep); font-weight: 800; } .ld-test-no { background: var(--line-soft); color: var(--muted); font-size: 13px; } .ld-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; } .ld-rule { display: flex; flex-direction: column; gap: 11px; padding: 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--k-elev); animation: gxIn .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); transition: opacity .2s; } .ld-rule.off { opacity: .6; } .ld-rule header { display: flex; justify-content: space-between; gap: 10px; } .ld-rule header b { display: block; font-size: 15px; font-weight: 850; } .ld-rule header small { color: var(--muted); font-size: 11.5px; } .ld-triggers { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .ld-triggers small { width: 100%; color: var(--faint); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .ld-triggers span { padding: 4px 10px; border-radius: 999px; background: var(--sun-soft); color: var(--sun-deep); font-size: 12px; font-weight: 800; } .ld-bubble { position: relative; display: grid; gap: 6px; padding: 11px 13px; border-radius: 16px 16px 16px 4px; background: var(--green-soft); color: var(--ink); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .ld-bubble a { color: var(--green-deep); font-weight: 800; font-size: 12.5px; text-decoration: none; } .ld-rule footer { display: flex; gap: 8px; margin-top: auto; } .ld-danger { color: var(--danger) !important; } .ld-danger:hover { border-color: var(--danger) !important; } .ld-rules-note { margin: 4px 2px 22px; color: var(--muted); font-size: 12.5px; line-height: 1.5; } .ld-switch { position: relative; flex: none; width: 44px; height: 26px; cursor: pointer; } .ld-switch input { position: absolute; opacity: 0; } .ld-switch i { position: absolute; inset: 0; border-radius: 99px; background: var(--line); transition: background .2s; } .ld-switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s var(--ease-spring); } .ld-switch input:checked + i { background: var(--green); } .ld-switch input:checked + i::after { transform: translateX(18px); } #s-messages #messages-autodm .autodm-card { margin-top: 6px; } /* Editor de respuestas */ .ar-form { display: grid; gap: 2px; } .ar-mode { display: inline-flex; gap: 2px; margin-left: 6px; padding: 2px; border-radius: 10px; background: var(--line-soft); } .ar-mode button { padding: 3px 9px; border-radius: 8px; font-size: 12px; font-weight: 800; color: var(--muted); } .ar-mode button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); } .ar-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 48px; padding: 7px 9px; border-radius: 13px; border: 1px solid var(--line); background: var(--card); cursor: text; } .ar-chips:focus-within { border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent); } .ar-chips input { flex: 1; min-width: 180px; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; } .ar-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--sun-soft); color: var(--sun-deep); font-size: 13px; font-weight: 800; animation: gxIn .25s var(--ease-out) both; } .ar-chip button { width: 18px; height: 18px; border-radius: 50%; color: inherit; font-size: 14px; line-height: 1; } .ar-chip button:hover { background: rgba(0,0,0,.08); } .ar-file { display: flex; align-items: center; gap: 10px; } .ar-file-name { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ar-file .ps-tool { flex: none; } .ar-file-pick { flex: 1 !important; border-style: dashed !important; } .ar-active { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; } .ar-active input { width: 20px; height: 20px; accent-color: var(--green); } .ar-active b, .ar-active small { display: block; } .ar-active small { color: var(--muted); font-size: 12px; } .ar-preview { margin-bottom: 14px; } .ar-preview small { display: block; margin-bottom: 6px; color: var(--faint); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } @media (max-width: 760px) { .ld-tabs { grid-template-columns: 1fr 1fr 1fr; } .ld-tabs button { padding: 9px 8px; text-align: center; } .ld-tabs small { display: none; } .ld-tabs b { font-size: 12px; } .ld-hero { grid-template-columns: 1fr; } .ld-hero-lead { grid-template-columns: auto auto 1fr; align-items: center; justify-items: start; gap: 10px; padding: 8px 14px; } .ld-hero-lead .kalma-mascot { width: 54px; height: 62px; justify-self: end; } .ld-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .ld-cat { padding: 10px; } .ld-cat b { font-size: 19px; } .ld-msg { grid-template-columns: auto minmax(0, 1fr); } .ld-msg-side { grid-column: 2; justify-items: start; } .ld-probs span { grid-template-columns: 96px minmax(0, 1fr) 38px; } .ld-rules-head { flex-direction: column; align-items: stretch; } } @media (min-width: 1280px) { .ld-cats { grid-template-columns: repeat(9, minmax(0, 1fr)); } } .ar-mode { justify-self: start; } .ar-active b { font-size: 14px; } /* Estrategia: la mascota sustituye a la palmera antigua (✦ + tronco) */ .strategy-palm-animation.k-loader-stage { width: auto; height: auto; transform: none; margin: auto; } .strategy-palm-animation.k-loader-stage::after { display: none; } .strategy-palm-animation .kalma-mascot { filter: drop-shadow(0 16px 18px rgba(30,60,45,.14)); } .strategy-creation-state { grid-template-columns: 220px minmax(0, 1fr); } .strategy-creation-progress { max-width: 520px; margin-top: 16px; } .strategy-creation-progress .k-loader-meta { margin-top: 7px; } @media (max-width: 680px) { .strategy-creation-state { grid-template-columns: 1fr; } .strategy-palm-animation.k-loader-stage .kalma-mascot { width: 150px; height: 172px; } .strategy-creation-progress { margin-left: auto; margin-right: auto; } } /* Estrategia: piezas que esperan al negocio */ .strategy-needs-user { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 13px 16px; border-radius: 18px; background: var(--sun-soft); border: 1px solid color-mix(in srgb, var(--sun) 35%, var(--line)); } .strategy-needs-user > span { font-size: 24px; } .strategy-needs-user b { display: block; font-size: 14.5px; } .strategy-needs-user small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; } .strategy-card-waiting { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; height: 100%; padding: 16px; text-align: center; background: linear-gradient(160deg, var(--sun-soft), var(--card)); } .strategy-card-waiting b { font-size: 34px; } .strategy-card-waiting small { color: var(--ink); font-size: 12.5px; font-weight: 700; line-height: 1.4; } .strategy-card-generating .kalma-mascot { margin: 0 auto; } .strategy-card-status.material, .strategy-card-status.intake { background: var(--sun-soft); color: var(--sun-deep); } .strategy-needs-user > div { flex: 1; } .strategy-needs-user .k-btn { flex: none; } /* Lista de lo que incluye el plan Kalma en la pantalla de pago (igual que la landing). */ .pay-features { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; margin: 0 0 14px; padding: 0; list-style: none; } .pay-features li { display: flex; gap: 7px; font-size: 13px; line-height: 1.35; color: var(--ink); } .pay-features li::before { content: "✓"; color: var(--green); font-weight: 900; flex: none; } @media (max-width: 420px) { .pay-features { grid-template-columns: 1fr; } } /* Leads: responder desde Kalma */ .ld-reply-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .ld-reply-row small { color: var(--faint); font-size: 11.5px; } .ld-reply-btn, .ld-reply-ig { padding: 7px 13px; border-radius: 11px; border: 1px solid var(--line); background: var(--card); color: var(--green-deep); font-size: 12.5px; font-weight: 800; text-decoration: none; transition: border-color .2s, background .2s; } .ld-reply-btn:hover, .ld-reply-ig:hover { border-color: var(--green); background: var(--green-soft); } .ld-composer { display: grid; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--line); animation: gxIn .25s var(--ease-out) both; } .ld-composer textarea { width: 100%; min-height: 76px; resize: vertical; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.45; } .ld-composer textarea:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent); } .ld-composer-actions { display: flex; align-items: center; gap: 8px; } .ld-composer-actions span { flex: 1; } .ld-composer-actions .btn { width: auto; padding: 9px 18px; border-radius: 12px; font-size: 13.5px; } .ld-sent { margin-top: 10px; margin-left: 24px; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: var(--green-soft); } .ld-sent small { display: block; color: var(--green-deep); font-size: 11px; font-weight: 800; margin-bottom: 3px; } .ld-sent p { margin: 0 !important; font-size: 13.5px; white-space: pre-wrap; } @media (max-width: 760px) { .ld-composer-actions { flex-wrap: wrap; } .ld-sent { margin-left: 8px; } } .ld-composer[hidden] { display: none; } .ld-composer-actions .ps-tool { flex: none; min-height: 38px; } /* Métricas: frescura de los datos */ .st-fresh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; color: var(--muted); font-size: 12.5px; font-weight: 700; } .st-fresh > span { display: inline-flex; align-items: center; gap: 7px; } .st-fresh i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); } .st-fresh .busy i { background: var(--sun); animation: gxPulse 1.4s ease-in-out infinite; } .st-fresh small { color: var(--sun-deep); } .st-fresh button { margin-left: auto; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--green-deep); font-size: 12.5px; font-weight: 800; } .st-fresh button:hover { border-color: var(--green); } /* Mejores momentos para publicar (chips bajo la fecha) */ .best-slots { display: flex; flex-direction: column; gap: 7px; margin: 10px 0 4px; padding: 11px 12px; border-radius: 14px; background: var(--green-soft); border: 1px solid var(--line-soft); } .best-slots.loading { background: transparent; border-style: dashed; } .best-slots-title { font-size: 12.5px; font-weight: 800; color: var(--green-deep); } .best-slots-chips { display: flex; flex-wrap: wrap; gap: 6px; } .best-slot { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 750; cursor: pointer; transition: border-color .15s, transform .15s var(--ease-out); } .best-slot:hover { border-color: var(--green); transform: translateY(-1px); } .best-slot em { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--sun-deep); } .best-slot.on { background: var(--green-deep); border-color: var(--green-deep); color: var(--on-green); } .best-slot.on em { color: var(--on-green); } .best-slots small { font-size: 11.5px; color: var(--muted); line-height: 1.4; } /* Leads · comentarios */ .ld-channel { display: inline-flex; gap: 3px; padding: 3px; margin: 0 0 14px; border-radius: 14px; background: var(--line-soft); } .ld-channel button { padding: 8px 14px; border-radius: 11px; font-size: 13px; font-weight: 800; color: var(--muted); } .ld-channel button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.1); } .ld-on-post { display: inline-block; margin: 2px 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-decoration: none; } a.ld-on-post[href]:hover { color: var(--green-deep); text-decoration: underline; } .ld-net { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--line-soft); color: var(--muted); } .ld-top-posts { margin: -6px 0 20px; } .ld-top-posts h3 { font-size: 14px; margin: 0 0 9px; } .ld-top-posts > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; } .ld-top-post { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; } a.ld-top-post[href]:hover { border-color: var(--green); } .ld-top-post p { margin: 0; font-size: 13px; line-height: 1.4; } .ld-top-post span { font-size: 12px; color: var(--muted); } .ld-top-post b { color: var(--green-deep); } .ld-reply-btn.ghost { color: var(--muted); } .ld-composer-mode { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; color: var(--green-deep); } .ld-rule-where { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; } .ld-rule-where span { padding: 3px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green-deep); font-size: 11.5px; font-weight: 800; } .ar-where { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 7px; } .ar-where label { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); cursor: pointer; } .ar-where input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); } .ar-where b, .ar-where small { display: block; } .ar-where b { font-size: 13px; } .ar-where small { color: var(--muted); font-size: 11.5px; font-weight: 600; } .ar-help { display: block; margin-top: 6px; font-weight: 600; line-height: 1.4; } .ar-form .library-field[hidden], .ar-preview [hidden] { display: none; } .ar-where label:has(input:checked) { border-color: var(--green); background: var(--green-soft); } .ld-bubble-label { margin: 8px 0 4px; color: var(--muted); font-size: 11.5px; font-weight: 800; } .ld-bubble-public { background: var(--card); border: 1px dashed var(--line); } /* Cuánto conoce Kalma al negocio */ .kc-order-know { order: 6 } .kc-knowledge-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .kc-knowledge-top h3 { font-size: 15.5px; letter-spacing: -.02em; margin: 4px 0 2px; } .kc-knowledge-more { display: block; padding: 2px 4px 0; font-size: 11.5px; } /* Ficha de material de cada pieza: qué subir, dudas de Kalma y textos listos */ .strategy-card-status.decide { background: var(--sun-soft); color: var(--sun-deep); } .strategy-shot, .strategy-review.needs, .strategy-copy-preview { display: grid; gap: 10px; margin: 14px 0; padding: 14px 15px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); text-align: left; } .strategy-shot { border-color: var(--sun); box-shadow: 0 0 0 3px var(--sun-soft); } .strategy-shot header, .strategy-review header, .strategy-copy-preview header { display: flex; align-items: flex-start; gap: 10px; } .strategy-shot header > span, .strategy-review header > span, .strategy-copy-preview header > span { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--sun-soft); font-size: 17px; } .strategy-shot header small, .strategy-review header small, .strategy-copy-preview header small { display: block; font-size: 9.5px; font-weight: 850; letter-spacing: .11em; color: var(--sun-deep); } .strategy-shot header b, .strategy-review header b, .strategy-copy-preview header b { display: block; font-size: 14px; line-height: 1.3; margin-top: 2px; } .strategy-shot p { font-size: 13.5px; line-height: 1.5; margin: 0; } .strategy-shot-meta { display: flex; flex-wrap: wrap; gap: 6px; } .strategy-shot-meta span { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--sun-soft); color: var(--sun-deep); } .strategy-shot-who { font-size: 13px !important; } .strategy-shot-list, .strategy-shot-tips { font-size: 12.5px; line-height: 1.45; } .strategy-shot-list b, .strategy-shot-tips b { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; } .strategy-shot-list ul, .strategy-shot-tips ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; } .strategy-shot-list.avoid li::marker { content: "✕ "; color: var(--danger); } .strategy-shot-upload { position: relative; cursor: pointer; margin-top: 4px; } .strategy-shot-upload.is-loading { opacity: .6; pointer-events: none; } .strategy-shot-note { font-size: 11.5px; text-align: center; } .strategy-review.working { margin: 14px 0; } .strategy-review-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 11px; align-items: start; } .strategy-review-thumb { width: 76px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--line); } .strategy-review-thumb img { width: 100%; height: 100%; object-fit: cover; } .strategy-review-thumb .skel { width: 100%; height: 100%; border-radius: 0; } .strategy-review-item b { font-size: 13px; overflow-wrap: anywhere; } .strategy-review-item p { font-size: 12.5px; line-height: 1.45; margin: 3px 0 8px; color: var(--muted); } .strategy-review-actions { display: flex; flex-wrap: wrap; gap: 7px; } .strategy-review-actions .btn { width: auto; padding: 8px 14px; font-size: 13px; margin: 0; } .strategy-copy-preview details { border-top: 1px solid var(--line); padding-top: 8px; } .strategy-copy-preview summary { cursor: pointer; font-size: 12.5px; font-weight: 750; } .strategy-copy-preview details p { white-space: pre-line; font-size: 13px; line-height: 1.5; margin: 6px 0 0; } .strategy-copy-slides { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 12.5px; } .strategy-copy-slides span { display: block; color: var(--muted); } .strategy-copy-wait { font-size: 12.5px; margin: 10px 0; } .library-understanding { display: grid; gap: 5px; margin: 10px 0 12px; padding: 12px 13px; border-radius: 14px; background: var(--green-soft); text-align: left; } .library-understanding small { font-size: 9.5px; font-weight: 850; letter-spacing: .11em; color: var(--muted); } .library-understanding b { font-size: 13.5px; } .library-understanding p { font-size: 12.5px; line-height: 1.45; margin: 0; } .library-understanding-quote { font-style: italic; } .library-understanding-wait { font-size: 12.5px; margin: 8px 0; } /* Paleta editable en «Tu marca»: cada color con su uso */ .palette-editor { display: grid; gap: 8px; margin-bottom: 8px; } .palette-row { display: grid; grid-template-columns: 44px auto 1fr 30px; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); } .palette-row input[type=color] { width: 44px; height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0; background: none; cursor: pointer; } .palette-row small { font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .palette-roles { display: flex; flex-wrap: wrap; gap: 5px; } .palette-roles button { padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; } .palette-roles button.on { background: var(--green-soft); border-color: var(--green); color: var(--green-deep, var(--ink)); } .palette-remove { width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--danger); font-size: 18px; cursor: pointer; } .palette-add { width: auto; padding: 8px 14px; margin: 0; } .palette-warn { color: var(--danger); font-size: 12px; } @media (max-width: 420px) { .palette-row { grid-template-columns: 44px 1fr 30px; } .palette-roles { grid-column: 1 / -1; } } /* Métricas · reacciones y audiencia (datos reales de la red) */ .stats-reactions, .stats-audience { margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--k-r-lg, 22px); background: var(--card); animation: statsRise .5s ease both; } .stats-reactions .stats-section-head, .stats-audience .stats-section-head { margin: 0 0 14px; } .stats-reaction-bar { display: flex; gap: 3px; height: 14px; overflow: hidden; border-radius: 99px; } .stats-reaction-bar i { min-width: 6px; transform-origin: left; animation: statsGrow .9s cubic-bezier(.2,.8,.2,1) both; } .stats-reaction-bar i.like, .stats-reaction-grid .like em { background: #E98B7B; } .stats-reaction-bar i.comment, .stats-reaction-grid .comment em { background: var(--sun); } .stats-reaction-bar i.share, .stats-reaction-grid .share em { background: var(--green); } .stats-reaction-bar i.save, .stats-reaction-grid .save em { background: #7C8FD6; } .stats-reaction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 13px; } .stats-reaction-grid article { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; align-items: center; padding: 11px; border-radius: 14px; background: var(--line-soft); } .stats-reaction-grid em { grid-row: span 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #fff; font-style: normal; font-size: 14px; } .stats-reaction-grid b { font-size: 21px; font-weight: 850; letter-spacing: -.03em; line-height: 1.1; } .stats-reaction-grid span { color: var(--ink); font-size: 11.5px; font-weight: 750; } .stats-reaction-grid small { color: var(--muted); font-size: 10px; } .stats-audience-grid { display: grid; gap: 12px; } .stats-audience-grid article { padding: 14px; border-radius: 16px; background: var(--line-soft); } .stats-audience-grid h4 { margin: 0 0 12px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .stats-age-bars { display: flex; align-items: flex-end; gap: 6px; height: 128px; } .stats-age-bars > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; } .stats-age-bars i { width: 100%; max-width: 34px; border-radius: 8px 8px 3px 3px; background: color-mix(in srgb, var(--green) 45%, transparent); transform-origin: bottom; animation: statsGrowUp .8s cubic-bezier(.2,.8,.2,1) both; } .stats-age-bars .top i { background: var(--green); } .stats-age-bars b { order: -1; margin-bottom: 4px; font-size: 10px; color: var(--ink); } .stats-age-bars span { margin-top: 5px; color: var(--muted); font-size: 9.5px; white-space: nowrap; } .stats-gender-bar { display: flex; gap: 3px; height: 16px; overflow: hidden; border-radius: 99px; } .stats-gender-bar i, .stats-legend-list i { background: var(--faint); } .stats-gender-bar i { transform-origin: left; animation: statsGrow .9s cubic-bezier(.2,.8,.2,1) both; } .stats-gender-bar .f, .stats-legend-list .f { background: #E98B7B; } .stats-gender-bar .m, .stats-legend-list .m { background: #7C8FD6; } .stats-legend-list, .stats-country-list { display: grid; gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; font-size: 12px; } .stats-legend-list li { display: flex; align-items: center; gap: 7px; color: var(--muted); } .stats-legend-list li b { margin-left: auto; color: var(--ink); } .stats-legend-list i { width: 10px; height: 10px; border-radius: 3px; } .stats-country-list { margin: 0; } .stats-country-list li { display: grid; grid-template-columns: minmax(80px, 1fr) 1.2fr 40px; gap: 9px; align-items: center; } .stats-country-list span { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; } .stats-country-list div { height: 8px; overflow: hidden; border-radius: 99px; background: var(--line); } .stats-country-list div i { display: block; height: 100%; border-radius: inherit; background: var(--sun); transform-origin: left; animation: statsGrow .9s cubic-bezier(.2,.8,.2,1) both; } .stats-country-list b { text-align: right; } @keyframes statsGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes statsGrowUp { from { transform: scaleY(0); } to { transform: scaleY(1); } } @media (min-width: 768px) { .stats-reaction-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stats-audience-grid { grid-template-columns: 1.3fr 1fr 1.1fr; } .stats-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } } @media (prefers-reduced-motion: reduce) { .stats-reactions, .stats-audience, .stats-reaction-bar i, .stats-age-bars i, .stats-gender-bar i, .stats-country-list div i { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════ AUDITORÍA UX (25-sep-2026): alta en 4 pasos, navegación en 5 destinos, Inicio de «qué hago hoy», Perfil por grupos y avisos donde se necesitan. ═══════════════════════════════════════════════════════════════════════════ */ /* Contador único del alta: cuatro tramos con su nombre debajo. */ .ob-progress { margin-bottom: 4px; } .ob-label { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .ob-track { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .ob-track li { display: grid; gap: 5px; min-width: 0; } .ob-track i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--green) var(--fill, 0%), var(--line) var(--fill, 0%)); } .ob-track small { font-size: 11px; font-weight: 700; color: var(--faint); line-height: 1.2; } .ob-track li.now small { color: var(--green-deep); font-weight: 850; } .ob-track li.done small { color: var(--muted); } /* Acceso: enlaces secundarios, recuperar contraseña y textos legales. */ .login-link { color: var(--green-deep); font-size: 13.5px; padding: 8px; } .login-sub-form { display: flex; flex-direction: column; gap: 11px; margin-top: 6px; } .login-sub-form[hidden] { display: none; } /* La PWA no tiene regla global [hidden] y las clases con `display` lo anulan (el botón «Elegir objetivo» seguía visible tras elegir). Acotado a botones y tarjetas, que es donde se usa el atributo. */ .btn[hidden], .k-btn[hidden], .card[hidden], .kc[hidden] { display: none !important; } .login-sub-form h2 { font-size: 20px; } .login-sub-form .muted { font-size: 13.5px; } .login-sub-done { font-size: 14px; line-height: 1.5; background: var(--green-soft); color: var(--green-deep); border-radius: 14px; padding: 12px 14px; font-weight: 700; } .login-legal { text-align: center; font-size: 11.5px; margin-top: 22px; line-height: 1.5; } .login-legal a { color: inherit; text-decoration: underline; } /* Navegación dentro de Plan y de Resultados. */ .k-subnav { display: flex; gap: 4px; padding: 4px; margin: 4px 0 16px; background: var(--chip); border-radius: 999px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .k-subnav::-webkit-scrollbar { display: none; } .k-subnav button { flex: none; font-size: 13.5px; font-weight: 750; color: var(--muted); padding: 8px 14px; border-radius: 999px; white-space: nowrap; transition: background .2s, color .2s; } .k-subnav button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); } .k-subnav button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } /* Inicio: plan en pequeño y un único dato de resultados. */ .kc-plan-mini h3 { margin: 4px 0 10px; } .kc-plan-mini .kc-actions { margin-top: 12px; } .kh-result { display: grid; gap: 4px; } .kh-result > b { font-size: 34px; font-weight: 900; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; } .kh-result > span { font-size: 13.5px; color: var(--muted); } .kh-result > span b { color: var(--ink); } .kc-order-survey { order: 7; } /* Oferta de avisos en Estrategia. */ .push-offer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; background: var(--sun-soft); border: 1.5px solid var(--sun); } .push-offer-icon { font-size: 26px; flex: none; } .push-offer > div:nth-child(2) { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; } .push-offer small { font-size: 12.5px; color: var(--muted); } .push-offer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Perfil por grupos. */ .profile-group-title { font-size: 13px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; } .profile-tech { margin-top: 12px; } .profile-tech summary { cursor: pointer; display: grid; gap: 2px; list-style: none; } .profile-tech summary::-webkit-details-marker { display: none; } .profile-tech summary b { font-size: 14px; } .profile-tech summary b::after { content: " ›"; color: var(--faint); } .profile-tech[open] summary b::after { content: " ⌄"; } .profile-tech summary small { font-size: 12px; color: var(--muted); } .profile-tech > div { margin-top: 14px; } .profile-danger { margin-top: 28px; padding-top: 16px; border-top: 1px dashed var(--line); display: grid; gap: 8px; } /* ═══════════════════════════════════════════════════════════════════════════ INICIO CON PORTADA (25-sep-2026): una portada grande con lo que toca hoy y su imagen, una franja de «cómo va» y, solo si hay algo, lo pendiente. Colores de la portada fijos sobre --k-dark: se leen igual en los dos temas. ═══════════════════════════════════════════════════════════════════════════ */ .kh-today { grid-column: 1 / -1; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); min-height: 300px; background: var(--k-dark); color: #EAF5EE; border-radius: var(--radius-lg); box-shadow: var(--shadow); animation: kcIn .44s var(--ease-out) both; } .kh-today.no-media { grid-template-columns: 1fr; } .kh-today::after { content: ""; position: absolute; left: -90px; bottom: -120px; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(255,255,255,.09); pointer-events: none; } .kh-today-copy { position: relative; z-index: 1; padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; } .kh-today-eyebrow { font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: #9FD9BC; } .kh-today h1 { margin: 0; font-size: clamp(24px, 3.1vw, 36px); line-height: 1.1; color: #fff; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .kh-today-sub { color: #CFE6D9; font-size: 14.5px; } .kh-today-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; } .kh-today-foot .k-btn { min-height: 46px; padding: 0 20px; font-size: 14.5px; border-radius: 15px; } .kh-today .k-pill { background: rgba(255,255,255,.14); color: #fff; } .kh-today .k-pill.ready_for_review { background: var(--sun); color: var(--on-sun); } .kh-today-nets { display: flex; flex-wrap: wrap; gap: 6px; } .kh-today-nets button { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: #CFE6D9; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 5px 11px 5px 6px; transition: background .2s; } .kh-today-nets button.on { background: #fff; color: #173826; border-color: #fff; } .kh-today-nets .platform-mark { width: 20px; height: 20px; font-size: 11px; } .kh-today-media { position: relative; margin: 0; min-height: 260px; overflow: hidden; } .kh-today-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #2F604B 0%, rgba(47,96,75,0) 34%); } .kh-today-img, .kh-today-img > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .kh-today-img img, .kh-today-img video { object-fit: cover; transition: transform 6s var(--ease-out); } .kh-today:hover .kh-today-img img { transform: scale(1.04); } .kh-today-media figcaption { position: absolute; z-index: 2; right: 12px; bottom: 12px; font-size: 11.5px; font-weight: 800; color: #fff; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); border-radius: 999px; padding: 5px 10px; } /* Franja «cómo va»: tres datos en una sola pieza, cada uno lleva a su sitio. */ .kh-pulse { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; animation: kcIn .44s .06s var(--ease-out) both; } .kh-pulse-item { text-align: left; display: grid; gap: 4px; align-content: start; padding: 16px 18px; min-width: 0; border-left: 1px solid var(--line); color: var(--ink); transition: background .2s; } .kh-pulse-item:first-child { border-left: 0; } .kh-pulse-item:hover { background: var(--card-2); } .kh-pulse-item small { font-size: 11px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .kh-pulse-item b { font-size: 18px; font-weight: 850; line-height: 1.2; } .kh-pulse-item b.kh-pulse-num { font-size: 28px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kh-pulse-item em { font-style: normal; font-size: 12.5px; color: var(--muted); } .kh-pulse-item.attention b { color: var(--sun-deep); } .kh-pulse-bar { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 4px 0 2px; } .kh-pulse-bar > i { display: block; height: 100%; width: 0; background: var(--green); border-radius: inherit; transition: width .9s var(--ease-out); } /* Pendiente y extras: una lista y una fila discreta, no más tarjetas. */ .kh-todo { grid-column: 1 / -1; display: grid; gap: 10px; animation: kcIn .44s .1s var(--ease-out) both; } .kh-todo h3 { font-size: 15px; font-weight: 850; margin: 4px 2px 0; } .kh-extras { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; } .kh-extra, .kh-extras .kc-cta { flex: 1 1 280px; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--card-2); border: 1px dashed var(--line); border-radius: 18px; padding: 10px 14px; box-shadow: none; margin: 0; } .kh-extra > span:last-child { display: grid; gap: 1px; min-width: 0; } .kh-extra b { font-size: 14px; } .kh-extra small { font-size: 12.5px; color: var(--muted); } .kh-extra-ring { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--sun) calc(var(--p) * 1%), var(--ring-track) 0); } .kh-extra-ring b { width: 30px; height: 30px; border-radius: 50%; background: var(--card-2); display: grid; place-items: center; font-size: 10px; font-weight: 900; } @media (max-width: 759px) { .kh-today { grid-template-columns: 1fr; } .kh-today-media { order: -1; min-height: 190px; max-height: 240px; } .kh-today-media::before { background: linear-gradient(0deg, #2B5A47 0%, rgba(43,90,71,0) 45%); } .kh-today-copy { padding: 18px 18px 20px; } .kh-today-foot .k-btn { flex: 1 1 auto; } .kh-pulse { grid-template-columns: 1fr; } .kh-pulse-item { border-left: 0; border-top: 1px solid var(--line); padding: 13px 16px; } .kh-pulse-item:first-child { border-top: 0; } } @media (prefers-reduced-motion: reduce) { .kh-today-img img { transition: none; } .kh-today:hover .kh-today-img img { transform: none; } } /* La pieza ya preparada se enseña entera, como una tarjeta sobre la portada. */ .kh-today-media.is-post { display: grid; place-items: center; padding: 22px; } .kh-today-media.is-post::before { display: none; } .kh-today-media.is-post .kh-today-img { position: relative; inset: auto; width: min(78%, 250px); height: auto; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; transform: rotate(2.5deg); box-shadow: 0 24px 40px -18px rgba(0,0,0,.6); transition: transform .4s var(--ease-spring); } .kh-today:hover .kh-today-media.is-post .kh-today-img { transform: rotate(0deg) scale(1.02); } .kh-today-media.is-post .kh-today-img img { transform: none !important; } .kh-today-media.is-post figcaption { right: 50%; transform: translateX(50%); bottom: 10px; white-space: nowrap; } @media (max-width: 759px) { .kh-today-media.is-post { max-height: none; padding: 20px 20px 8px; } .kh-today-media.is-post .kh-today-img { width: min(62%, 220px); } .kh-pulse { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════ ALTA EN CARTAS (25-sep-2026, con Noemí): «¿Eres así?» y el primer post. ═══════════════════════════════════════════════════════════════════════════ */ .connect-trust { margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--green-deep); background: var(--green-soft); border-radius: 14px; padding: 10px 12px; } .connect-help { margin: 10px 0 4px; font-size: 12.5px; color: var(--muted); } .deck-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 280px); gap: 28px; justify-content: center; align-items: start; margin-top: 14px; } .deck-main { display: grid; gap: 12px; min-width: 0; } .deck-title { font-size: 24px; } .deck-sub { font-size: 14px; margin-top: -4px; } .deck-stack { position: relative; height: 380px; } .deck-card { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); touch-action: pan-y; user-select: none; cursor: grab; transition: transform .35s var(--ease-out), opacity .35s; } .deck-card.dragging { transition: none; cursor: grabbing; } .deck-card.under { transform: scale(.95) translateY(12px); opacity: .7; pointer-events: none; } .deck-card.under2 { transform: scale(.9) translateY(24px); opacity: .35; pointer-events: none; } .deck-card.fixing { cursor: default; overflow-y: auto; } .deck-kind { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; background: var(--card); color: var(--ink); border-radius: 999px; padding: 5px 10px; box-shadow: var(--shadow-sm); } .deck-body { flex: 1; display: grid; align-content: center; gap: 12px; padding: 54px 26px 26px; } .deck-q { font-size: 14px; font-weight: 800; color: var(--muted); } .deck-big { font-size: 25px; font-weight: 850; line-height: 1.2; text-wrap: balance; } .deck-body.quote .deck-big::before { content: "“"; display: block; font-size: 56px; line-height: .6; color: var(--sage); } .deck-swatches { flex: 1; display: flex; min-height: 0; } .deck-swatches i { flex: 1; } .deck-card.colors .deck-body { flex: none; padding: 16px 22px 20px; } .deck-stamp { position: absolute; top: 28px; z-index: 3; font-size: 20px; font-weight: 900; letter-spacing: .04em; padding: 4px 12px; border-radius: 12px; border: 3px solid; opacity: 0; background: var(--card); } .deck-stamp.yes { left: 18px; color: var(--green); border-color: var(--green); transform: rotate(-12deg); } .deck-stamp.no { right: 18px; color: var(--danger); border-color: var(--danger); transform: rotate(12deg); } .deck-actions { display: flex; justify-content: center; align-items: center; gap: 18px; } .deck-actions[hidden] { display: none; } .deck-act { width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); display: grid; place-items: center; transition: transform .15s var(--ease-spring); } .deck-act:hover { transform: scale(1.07); } .deck-act:active { transform: scale(.94); } .deck-act:disabled { opacity: .35; transform: none; } .deck-act svg { width: 28px; height: 28px; } .deck-act.no { color: var(--danger); } .deck-act.yes { color: var(--green); } .deck-act.undo { width: 44px; height: 44px; color: var(--sun-deep); } .deck-act.undo svg { width: 20px; height: 20px; } .deck-act:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; } .deck-keys { text-align: center; font-size: 12px; } .deck-keys kbd { font-family: inherit; font-weight: 800; font-size: 11px; background: var(--card); border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 6px; padding: 0 6px; color: var(--ink); } .deck-fix { padding: 50px 20px 20px; display: grid; gap: 12px; } .deck-fix b { font-size: 18px; } .deck-fix-chips { display: flex; flex-wrap: wrap; gap: 6px; } .deck-fix-chips button { font-size: 13px; font-weight: 750; border: 1.5px solid var(--line); background: var(--card-2); color: var(--ink); border-radius: 999px; padding: 6px 11px; } .deck-fix-chips button:hover, .deck-fix-palettes button:hover { border-color: var(--green); } .deck-fix-palettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .deck-fix-palettes button { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card-2); padding: 0; } .deck-fix-palettes i { height: 42px; } .deck-fix-palettes small { grid-column: 1 / -1; font-size: 11px; font-weight: 750; padding: 5px 6px; color: var(--muted); } .deck-empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 40px 16px; } .deck-learn { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 16px 18px; display: grid; gap: 10px; box-shadow: var(--shadow-sm); margin-top: 58px; } .deck-learn h3 { font-size: 15px; } .deck-learn-row { display: grid; gap: 2px; padding-top: 9px; border-top: 1px solid var(--line); } .deck-learn-row small { font-size: 10.5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); } .deck-learn-row span { font-size: 14px; font-weight: 700; color: var(--faint); } .deck-learn-row.got small { color: var(--green-deep); } .deck-learn-row.got span { color: var(--ink); } .deck-learn-row.avoid.got span { color: var(--danger); } .firstpost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 28px; align-items: center; margin-top: 18px; } .firstpost-copy { display: grid; gap: 12px; } .firstpost-copy h2 { font-size: 26px; } .firstpost-actions { display: grid; gap: 10px; margin-top: 6px; } .firstpost-media { min-height: 300px; display: grid; place-items: center; } .firstpost-img { display: block; width: min(100%, 320px); aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); transform: rotate(2deg); } .firstpost-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Temas de la marca (alta y «Mi marca y mi voz») */ .topics-wrap { max-width: 720px; margin: 14px auto 0; display: grid; gap: 14px; } .topics-head { display: flex; align-items: flex-start; gap: 8px; } .topics-head #topics-back { width: auto; padding: 6px 8px 2px; } .topics-head h2 { font-size: 24px; margin-bottom: 4px; } .topics-head p { font-size: 13.5px; line-height: 1.45; } .topics-note { padding: 13px 15px; border-radius: 16px; background: var(--sun-soft); color: var(--sun-deep); display: grid; gap: 4px; } .topics-note b { font-size: 14px; } .topics-note p { font-size: 12.5px; line-height: 1.45; margin: 0; } .topics-note.done { background: var(--green-soft); color: var(--green-deep); } .topics-list { display: grid; gap: 10px; margin-top: 10px; } .topic-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 15px; display: grid; gap: 10px; } .topic-card.sales { border-color: var(--sun); box-shadow: 0 0 0 3px var(--sun-soft); } .topic-card.off { background: var(--card-2); } .topic-card.off .topic-name b { color: var(--muted); } .topic-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .topic-name { display: grid; gap: 3px; min-width: 0; } .topic-name b { font-size: 16px; line-height: 1.25; } .topic-name small { font-size: 12.5px; line-height: 1.4; color: var(--muted); } .topic-badge { justify-self: start; font-size: 10.5px; font-weight: 850; padding: 3px 8px; border-radius: 999px; background: var(--sun); color: var(--on-sun); } .topic-range { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 52px; align-items: center; gap: 9px; } .topic-range > span { font-size: 11px; font-weight: 750; color: var(--muted); white-space: nowrap; } .topic-range output { font-size: 17px; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; } .topic-range input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; margin: 0; background: linear-gradient(90deg, var(--green) var(--pct, 33%), var(--line) var(--pct, 33%)); cursor: pointer; } .topic-range input[type=range]:disabled { opacity: .55; cursor: default; } .topic-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--card); border: 3px solid var(--green); box-shadow: var(--shadow-sm); } .topic-range input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--card); border: 3px solid var(--green); box-shadow: var(--shadow-sm); } .topic-range input[type=range]:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--green-soft); } .topic-card.sales .topic-range input[type=range] { background: linear-gradient(90deg, var(--sun) var(--pct, 60%), var(--line) var(--pct, 60%)); } .topic-card.sales .topic-range input[type=range]::-webkit-slider-thumb { border-color: var(--sun); } .topic-card.sales .topic-range input[type=range]::-moz-range-thumb { border-color: var(--sun); } .topic-paused { font-size: 12.5px; color: var(--muted); margin: 0; } .topic-subs { font-size: 12px; line-height: 1.45; color: var(--ink); margin: 0; } .topic-subs span { color: var(--muted); } .topic-foot { display: flex; flex-wrap: wrap; gap: 8px; } .topic-foot button { font-size: 12.5px; font-weight: 800; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); } .topic-foot button:hover { border-color: var(--green); } .topic-sales-btn.on { background: var(--sun); border-color: var(--sun); color: var(--on-sun); } .topic-change[hidden] { display: none; } .topic-change { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); } .topic-card.adding .topic-change { border-top: 0; padding-top: 0; } .topic-change b { font-size: 14.5px; } .topic-alts { display: flex; flex-wrap: wrap; gap: 6px; } .topic-alts button { font-size: 13px; font-weight: 750; border: 1.5px solid var(--line); background: var(--card-2); color: var(--ink); border-radius: 999px; padding: 6px 11px; } .topic-alts button:hover { border-color: var(--green); } .topic-own { display: flex; gap: 8px; } .topic-own .input { flex: 1; min-width: 0; } .topic-cancel { justify-self: start; font-size: 12.5px; color: var(--muted); padding: 4px 0; } .topic-add { padding: 13px; border: 1.5px dashed var(--line); border-radius: 18px; font-weight: 800; color: var(--green-deep); background: transparent; } .topic-add:hover { border-color: var(--green); } .topic-switch { position: relative; flex: none; width: 46px; height: 28px; cursor: pointer; } .topic-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .topic-switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--line); transition: background .2s; pointer-events: none; } .topic-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease-spring); } .topic-switch input:checked + span { background: var(--green); } .topic-switch input:checked + span::after { transform: translateX(18px); } .topic-switch input:focus-visible + span { box-shadow: 0 0 0 4px var(--green-soft); } .topics-total { display: grid; gap: 7px; margin-top: 4px; } .topics-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 3px; } .topics-bar i { transition: flex .25s var(--ease-out); min-width: 6px; } .topics-bar .c0 { background: var(--green); } .topics-bar .c1 { background: var(--sage); } .topics-bar .c2 { background: var(--green-deep); } .topics-bar .sale { background: var(--sun); } .topics-total p { font-size: 12.5px; color: var(--muted); margin: 0; } .topics-total p b { color: var(--ink); } .topics-warn { color: var(--sun-deep) !important; font-weight: 750; } #topics-save:disabled { opacity: .5; } @media (max-width: 759px) { .topic-range { grid-template-columns: 1fr 1fr 50px; grid-template-areas: "bar bar pct" "less more ."; row-gap: 4px; } .topic-range input[type=range] { grid-area: bar; } .topic-range output { grid-area: pct; } .topic-range > span:first-child { grid-area: less; } .topic-range > span:nth-of-type(2) { grid-area: more; text-align: right; } } @media (prefers-reduced-motion: reduce) { .topics-bar i, .topic-switch span::after { transition: none; } } @media (max-width: 759px) { .deck-layout { grid-template-columns: 1fr; gap: 16px; } .deck-learn { display: none; } .deck-stack { height: 360px; } .deck-big { font-size: 22px; } .deck-keys { display: none; } .firstpost { grid-template-columns: 1fr; } .firstpost-media { order: -1; min-height: 0; } .firstpost-img { width: min(70%, 260px); } } @media (prefers-reduced-motion: reduce) { .deck-card, .deck-act { transition: none; } } .deck-fix-chips button.on { background: var(--green-soft); border-color: var(--green); color: var(--green-deep); } .deck-fix small { font-size: 12.5px; margin-top: -6px; } /* Una carta abierta para contestar crece con su contenido (el botón Guardar no se corta). */ .deck-stack:has(.deck-card.fixing) { height: auto; min-height: 380px; } .deck-card.fixing { position: relative; min-height: 380px; overflow: visible; } /* Propuesta de estrategia: fases y primera semana en horizontal (Noemí, 26-sep) */ .strat-sec-title { font-size: 19px; font-weight: 800; color: var(--ink); margin: 26px 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .strat-sec-title span { font-size: 12.5px; font-weight: 700; color: var(--muted); } .strat-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; } .strat-row > article { scroll-snap-align: start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; align-content: start; gap: 6px; } .strat-row small { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--sun-deep); text-transform: uppercase; } .strat-row b { font-size: 15px; line-height: 1.3; } .strat-row p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); } .strat-phase { border-top: 4px solid var(--sun) !important; } @media (max-width: 640px) { .strat-row { grid-auto-columns: 78%; } } /* Pantalla de una pieza de la estrategia (27-sep): pantalla completa, pasos arriba, contexto a la izquierda y lo que hay que hacer a la derecha. */ #post-sheet { position: relative; } #post-sheet-backdrop.strategy-review-active #post-sheet-body > .piece-head { grid-row: 1; } .piece-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px clamp(16px, 3vw, 40px); border-bottom: 1px solid var(--line); background: var(--card); } .piece-back { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; } .piece-back:hover { border-color: var(--green); } .piece-head-main { min-width: 0; } .piece-head-main > span { display: block; color: var(--green-deep); font-size: 12px; font-weight: 800; letter-spacing: .02em; } .piece-head-main h2 { margin: 3px 0 0; font-size: clamp(17px, 1.8vw, 23px); line-height: 1.25; letter-spacing: -.02em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .piece-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; } .piece-steps li { display: flex; align-items: center; gap: 7px; padding: 7px 11px 7px 7px; border-radius: 99px; background: var(--bg); color: var(--muted); font-size: 12.5px; font-weight: 750; white-space: nowrap; } .piece-steps i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--muted); font-style: normal; font-size: 11.5px; font-weight: 900; } .piece-steps li.on { background: var(--sun-soft); color: var(--ink); box-shadow: inset 0 0 0 2px var(--sun); } .piece-steps li.on i { background: var(--sun); color: #20261f; } .piece-steps li.done i { background: var(--green); color: #fff; } .piece-steps li.done { color: var(--green-deep); } /* Columnas: más aire y letra legible */ .piece-layout .strategy-review-controls, #post-sheet-backdrop.strategy-review-active .strategy-review-controls { gap: 16px; } .strategy-review-controls .strategy-editor-block > header b { font-size: 16px; } .strategy-review-controls .strategy-editor-block > header small { font-size: 12.5px; line-height: 1.4; } .strategy-review-controls .strategy-editor-block label { font-size: 12.5px; } .strategy-review-controls .strategy-editor-block textarea, .strategy-review-controls .strategy-editor-block input[type=text], .strategy-review-controls .strategy-editor-block input[type=datetime-local] { font-size: 14px; } .strategy-review-controls .strategy-editor-platforms button, .strategy-review-controls .strategy-editor-media-actions button, .strategy-review-controls .strategy-editor-media-actions label, .strategy-review-controls .strategy-editor-music > button { font-size: 13px; padding: 10px 14px; } .strategy-review-controls .strategy-editor-save { font-size: 13px; padding: 10px 15px; } .strategy-review-controls .strategy-editor-feedback { font-size: 12.5px; } .strategy-review-controls .strategy-editor-objective p { font-size: 13.5px; } .strategy-review-controls .strategy-editor-music > #strategy-music-recommend { font-size: 13px; } .strategy-review-controls .strategy-editor-music > #strategy-music-recommend p { font-size: 12px; } .strategy-review-controls .strategy-editor-music > #strategy-music-recommend button { font-size: 12.5px; } /* Contexto (izquierda) de una pieza sin preparar */ .piece-context { display: grid; align-content: start; gap: 14px; } .piece-idea, .piece-when { padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); } .piece-label { color: var(--sun-deep); font-size: 12px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; } .piece-idea-text { margin: 8px 0 14px; font-size: 16px; line-height: 1.55; font-weight: 600; color: var(--ink); } .piece-clarity { display: grid; gap: 10px; margin: 0; } .piece-clarity div { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line-soft); } .piece-clarity dt { font-size: 11.5px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .piece-clarity dd { margin: 0; font-size: 14px; line-height: 1.5; } .piece-clarity .mine dt { color: var(--sun-deep); } .piece-clarity .mine dd { font-weight: 700; } .piece-when { display: flex; gap: 12px; align-items: flex-start; } .piece-when > span { font-size: 22px; } .piece-when b { display: block; font-size: 15px; } .piece-when b::first-letter { text-transform: uppercase; } .piece-when small { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; line-height: 1.45; } .piece-context .strategy-copy-preview { background: var(--card); } .piece-library { display: grid; gap: 4px; } .piece-footer { display: grid; gap: 8px; margin-top: 4px; } .piece-running .k-loader { margin: 0 auto; } /* Vídeo de un reel: tres caminos */ .piece-video-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .piece-video-mode { position: relative; display: grid; align-content: start; justify-items: start; gap: 4px; min-height: 124px; padding: 14px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; } .piece-video-mode:hover { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); transform: translateY(-1px); } .piece-video-mode.on { border-color: var(--green); background: var(--green-soft); box-shadow: 0 0 0 4px rgba(61,113,88,.12); } .piece-video-icon { font-size: 26px; line-height: 1; margin-bottom: 4px; } .piece-video-mode b { font-size: 14.5px; line-height: 1.25; } .piece-video-mode small { font-size: 12.5px; line-height: 1.4; color: var(--muted); } .piece-video-badge { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 99px; background: var(--sun); color: #20261f; font-size: 10.5px; font-style: normal; font-weight: 850; } .piece-video.locked .piece-video-mode:not(.on) { opacity: .5; cursor: not-allowed; } .piece-video-panel { display: grid; gap: 12px; margin-top: 14px; } .piece-video-panel:empty { display: none; } .piece-video-panel .strategy-shot { margin: 0; } .piece-link { justify-self: start; margin-top: 12px; padding: 0; border: 0; background: none; color: var(--green-deep); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .piece-hint { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; } .piece-upload { position: relative; cursor: pointer; } .piece-plain-upload { display: grid; } .piece-script { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: var(--sun-soft); } .piece-script-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .piece-script-head > b { font-size: 15px; } .piece-script-head span { color: var(--sun-deep); font-size: 13px; font-weight: 750; } .piece-script-text { width: 100%; box-sizing: border-box; min-height: 190px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; font-size: 15.5px; line-height: 1.65; resize: vertical; } .piece-script-text:focus { outline: 3px solid rgba(61,113,88,.18); border-color: var(--green); } .piece-script-actions { display: flex; flex-wrap: wrap; gap: 8px; } .piece-script-actions .btn { width: auto; flex: 1 1 140px; padding: 11px 14px; font-size: 14px; } .piece-tips { padding: 12px 14px; border-radius: 12px; background: var(--card); font-size: 13.5px; } .piece-tips b { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .piece-tips ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; line-height: 1.45; } .piece-next { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px; border-radius: 14px; background: var(--card); border: 1px dashed var(--green); } .piece-next b { display: block; font-size: 14.5px; } .piece-next small { color: var(--muted); font-size: 12.5px; } .piece-next .piece-upload { width: auto; padding: 12px 18px; } .piece-quota { color: var(--muted); font-size: 12.5px; text-align: center; } .piece-upsell { display: flex; gap: 14px; padding: 18px; border-radius: 16px; background: linear-gradient(135deg, var(--sun-soft), color-mix(in srgb, var(--sun-soft) 40%, var(--card))); border: 1px solid var(--sun); } .piece-upsell-icon { font-size: 34px; line-height: 1; } .piece-upsell > div { display: grid; gap: 8px; } .piece-upsell small { color: var(--sun-deep); font-size: 11.5px; font-weight: 850; letter-spacing: .05em; } .piece-upsell b { font-size: 17px; line-height: 1.3; } .piece-upsell ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13.5px; line-height: 1.45; } .piece-upsell .btn { justify-self: start; width: auto; padding: 12px 20px; } /* Kalma trabajando: la pantalla se bloquea con la mascota */ .piece-busy { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(5px); animation: pieceBusyIn .2s ease-out; } .piece-busy-card { display: grid; gap: 10px; width: min(440px, 100%); padding: 26px 24px; border-radius: 24px; background: var(--card); box-shadow: 0 30px 70px -30px rgba(20,40,30,.45); text-align: center; } .piece-busy-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; } @keyframes pieceBusyIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 1100px) { .piece-steps li span { display: none; } .piece-steps li { padding: 5px; } .piece-steps li.on span { display: inline; } .piece-steps li.on { padding-right: 11px; } } @media (max-width: 850px) { .piece-head { grid-template-columns: auto minmax(0, 1fr); gap: 12px; } .piece-steps { grid-column: 1 / -1; } #post-sheet-backdrop.piece-active .piece-layout { display: flex; flex-direction: column; } #post-sheet-backdrop.piece-active .piece-actions { order: -1; border-bottom: 1px solid var(--line); } .piece-back span { display: none; } .piece-video-modes { grid-template-columns: 1fr; } .piece-video-mode { min-height: 0; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; } .piece-video-icon { grid-row: span 2; margin: 0; } .piece-video-badge { position: static; grid-column: 2; justify-self: start; } } .strategy-review-controls label.btn { display: flex; align-items: center; justify-content: center; margin-top: 0; font-size: 15px; font-weight: 800; } .strategy-review-controls label.btn.btn-green { color: #fff; } .piece-upload-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .piece-upload-row .btn { margin: 0; padding: 13px 16px; font-size: 15px; } @media (max-width: 640px) { .piece-upload-row { grid-template-columns: 1fr; } } .strategy-retopic { margin-bottom: 14px; } /* Pregunta que falta, señalada al llegar desde «Te conozco al N %» */ .id-missing-note { margin: 18px 0 4px; font-size: 13.5px; font-weight: 800; color: var(--sun-deep); } .id-missing { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 12px; animation: idMissingPulse 1.4s ease-out 2; } @keyframes idMissingPulse { 0% { outline-color: transparent; } 50% { outline-color: var(--sun); } 100% { outline-color: var(--sun); } } /* Ficha de material: el detalle, desplegable (Noemí, 27-sep) */ .strategy-shot-more { border-top: 1px solid var(--line); padding-top: 10px; } .strategy-shot-more > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--green-deep); font-weight: 800; font-size: 14px; } .strategy-shot-more > summary::-webkit-details-marker { display: none; } .strategy-shot-more > summary::before { content: "▸"; transition: transform .15s; display: inline-block; } .strategy-shot-more[open] > summary::before { transform: rotate(90deg); } .strategy-shot-more > summary small { color: var(--muted); font-weight: 600; font-size: 12.5px; } .strategy-shot-more[open] { display: grid; gap: 10px; } .strategy-copy-preview details > summary { cursor: pointer; color: var(--green-deep); font-weight: 800; } .piece-video-modes.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .piece-video-modes.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .piece-alt-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--green-soft); font-size: 13px; font-weight: 700; color: var(--green-deep); } .piece-alt-bar > div { display: flex; gap: 8px; flex-wrap: wrap; } .piece-alt-bar .btn { width: auto; padding: 8px 12px; font-size: 13px; margin: 0; } @media (max-width: 850px) { .piece-video-modes.n3, .piece-video-modes.n4 { grid-template-columns: 1fr; } } /* Pieza en cuatro puntos desplegables (Noemí, 27-sep) */ .piece-flow { min-height: 0; overflow: auto; display: grid; align-content: start; gap: 14px; padding: 22px clamp(14px, 4vw, 40px) 48px; scrollbar-width: thin; } .piece-flow > * { width: min(100%, 880px); justify-self: center; box-sizing: border-box; } .piece-sec { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 7px 20px rgba(31,61,48,.045); } .piece-sec > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; user-select: none; } .piece-sec > summary::-webkit-details-marker { display: none; } .piece-sec-n { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 900; font-size: 15px; } .piece-sec-t { flex: 1; min-width: 0; display: grid; gap: 2px; } .piece-sec-t b { font-size: 17px; color: var(--ink); } .piece-sec-t small { font-size: 12.5px; color: var(--muted); } .piece-sec-chev { font-size: 20px; color: var(--muted); transition: transform .18s; } .piece-sec:not([open]) .piece-sec-chev { transform: rotate(-90deg); } .piece-sec-body { display: grid; gap: 12px; padding: 0 18px 18px; } .piece-sec-body .piece-idea-text { margin: 0; } .piece-sec-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .piece-sec-tools .btn { width: auto; margin: 0; padding: 10px 16px; font-size: 14px; } .piece-sec-tools small { color: var(--muted); font-size: 12.5px; } .piece-waiting { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--bg); color: var(--muted); font-size: 13.5px; } .piece-slides { display: grid; gap: 10px; } .piece-slide { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); } .piece-slide-n { font-size: 11.5px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: var(--sun-deep); } .piece-slide input, .piece-slide textarea { width: 100%; box-sizing: border-box; margin: 0; font: inherit; font-size: 14.5px; } .piece-slide input { font-weight: 750; } .piece-save { width: auto; justify-self: start; margin: 0; padding: 11px 18px; } .piece-spoken { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--sun-soft); } .piece-spoken .piece-script-head small { font-weight: 600; color: var(--muted); } .piece-spoken-empty { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .piece-spoken-empty b, .piece-spoken-empty small { display: block; } .piece-spoken-empty small { color: var(--muted); font-size: 12.5px; margin-top: 2px; } .piece-spoken-empty .btn { width: auto; margin: 0; } .piece-caption { width: 100%; box-sizing: border-box; font: inherit; font-size: 14.5px; line-height: 1.55; } .piece-caption-tabs { margin-bottom: 4px; } .piece-quote { margin: 0; padding: 10px 12px; border-left: 3px solid var(--sun); background: var(--card); border-radius: 8px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; } .piece-plain-block { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } .piece-sub { display: block; margin: 10px 0 6px; font-size: 14px; } .piece-warn { color: #b3261e !important; } .piece-files { display: grid; gap: 8px; } .strategy-review-controls .piece-sec { margin: 0; } .strategy-review-controls .piece-sec-body .strategy-editor-objective-copy { font-size: 14px; line-height: 1.55; color: var(--ink); } @media (max-width: 640px) { .piece-sec > summary { padding: 14px; } .piece-sec-body { padding: 0 14px 14px; } .piece-sec-t b { font-size: 16px; } } .piece-count { justify-self: end; font-size: 11.5px; color: var(--muted); } .piece-center { text-align: center; margin: 0; } /* El diseño de la pieza (Noemí, 27-sep) */ .piece-design { display: grid; gap: 12px; } .piece-design.saving { opacity: .6; pointer-events: none; } .piece-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .piece-design-card { position: relative; display: grid; align-content: start; gap: 4px; padding: 8px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; font: inherit; cursor: pointer; } .piece-design-card:hover { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); } .piece-design-card.on { border-color: var(--green); box-shadow: 0 0 0 4px rgba(61,113,88,.14); } .piece-design-media { display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: var(--bg); } .piece-design-media.video { aspect-ratio: 9 / 16; max-height: 220px; } .piece-design-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .piece-design-play { font-size: 13px; font-weight: 800; color: var(--green-deep); padding: 8px; text-align: center; } .piece-design-card b { font-size: 13.5px; margin-top: 2px; } .piece-design-card small { font-size: 11.5px; color: var(--muted); line-height: 1.35; } .piece-design-tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; } .piece-design-tags em { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: var(--green-soft); color: var(--green-deep); } .piece-design-tags em.fav { background: var(--sun-soft); color: var(--sun-deep); } .piece-design-check { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; font-style: normal; font-weight: 900; } .piece-design-fav { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--sun-soft); cursor: pointer; } .piece-design-fav input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--green); flex: none; } .piece-design-fav b, .piece-design-fav small { display: block; } .piece-design-fav b { font-size: 14px; } .piece-design-fav small { font-size: 12.5px; color: var(--muted); margin-top: 2px; } @media (max-width: 640px) { .piece-designs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .strategy-music-catalog small{display:block;font-weight:500;opacity:.7;font-size:11.5px;margin-top:2px} .reel-mute{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:11px 13px;border:1px solid var(--line,#e3e6dc);border-radius:14px;background:#fff;cursor:pointer} .reel-mute input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--green,#2f7d4f)} .reel-mute b{display:block;font-size:13.5px}.reel-mute small{display:block;color:var(--muted,#6b7468);font-size:12px;margin-top:2px;line-height:1.4} .strategy-library-picker{grid-auto-rows:max-content;align-content:start;max-height:440px;padding:2px} .strategy-resource{min-width:0} .strategy-resource-media{flex:none} .strategy-resource small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em} .strategy-resource-check:empty{display:none} .strategy-order-tray{margin:10px 0 2px;padding:11px 12px;border:1px solid var(--line,#e3e6dc);border-radius:14px;background:#fff} .strategy-order-tray b{font-size:12.5px;display:block}.strategy-order-tray small{color:var(--muted);font-size:11.5px} .strategy-order-list{display:flex;gap:9px;overflow-x:auto;padding:10px 2px 4px} .strategy-order-item{position:relative;flex:none;width:72px} .strategy-order-thumb{display:block;width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--card-2)} .strategy-order-thumb img{width:100%;height:100%;object-fit:cover} .strategy-order-thumb .skel{width:100%;height:100%;border-radius:0} .strategy-order-item em{position:absolute;left:5px;top:5px;min-width:20px;height:20px;border-radius:10px;background:var(--green,#2f7d4f);color:#fff;font-style:normal;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px} .strategy-order-move{display:flex;gap:4px;margin-top:5px} .strategy-order-move button{flex:1;border:1px solid var(--line,#e3e6dc);background:#fff;border-radius:8px;height:26px;font-size:16px;line-height:1;cursor:pointer} .strategy-order-move button:disabled{opacity:.35;cursor:default} .strategy-inline-library-grid button{position:relative} .strategy-inline-order{position:absolute;right:6px;top:6px;min-width:22px;height:22px;border-radius:11px;background:var(--green,#2f7d4f);color:#fff;font-style:normal;font-size:12px;font-weight:800;display:grid;place-items:center;padding:0 5px} .strategy-inline-order:empty{display:none} .k-overlay-busy{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:20px;background:rgba(244,245,238,.86);backdrop-filter:blur(3px)} .k-overlay-card{width:min(440px,100%);background:#fff;border-radius:22px;box-shadow:0 18px 50px rgba(20,40,25,.18);padding:6px} /* Estilo de la pieza en la Estrategia (mismos botones que el estudio) y Reel en el reproductor. */ .piece-design-styles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 4px; } .piece-design-styles > span { font-size: 12px; font-weight: 800; color: var(--muted); margin-right: 2px; } .piece-design-styles button { padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 12px; font-weight: 750; } .piece-design-styles button.on { background: var(--green-deep); border-color: var(--green-deep); color: var(--on-green); } .piece-design-player { width: min(100%, 300px); aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #000; } /* Propiedades: la vivienda es una ficha con galería, no seis recursos sueltos. */ .lib-property-card .lib-body>b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .property-ref{font-size:10px!important;font-weight:850;letter-spacing:.08em;color:var(--green-deep)!important} .property-specs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0} .property-specs>span{display:flex;flex-direction:column;gap:2px;min-width:90px;padding:9px 11px;border:1px solid var(--line);border-radius:11px;background:var(--card-2)} .property-specs>span small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .property-specs.compact{gap:5px;margin:6px 0}.property-specs.compact>span{display:inline-flex;min-width:0;padding:4px 7px;font-size:11px;border-radius:999px} .property-sheet-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,46%);gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:3px 0 12px} .property-sheet-photo{position:relative;height:128px;border-radius:13px;overflow:hidden;background:var(--card-2);scroll-snap-align:start} .property-sheet-photo img{width:100%;height:100%;object-fit:cover}.property-sheet-photo em{position:absolute;left:7px;bottom:7px;background:rgba(8,25,30,.75);color:#fff;border-radius:999px;padding:3px 7px;font-size:10px;font-style:normal} .property-sheet-heading small,.strategy-property-selected>small{font-size:10px;font-weight:850;letter-spacing:.08em;color:var(--green-deep)} .property-sheet-heading h3,.strategy-property-selected h3{font-size:20px;line-height:1.15;margin:5px 0}.property-sheet-heading p,.strategy-property-selected p{color:var(--muted);margin:0} .property-edit-fields{margin:14px 0;border:1px solid var(--line);border-radius:14px;padding:12px}.property-edit-fields summary{cursor:pointer;font-weight:800}.property-edit-fields[open] summary{margin-bottom:12px} .property-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.property-description,.property-feature-list{margin-top:14px;padding:14px;border-radius:14px;background:var(--card-2)}.property-description p{white-space:pre-line;line-height:1.55}.property-feature-list ul{columns:2;padding-left:18px}.property-feature-list li{break-inside:avoid;margin:4px 0} .strategy-property-heading{display:flex;flex-direction:column;gap:2px;margin:2px 0 10px}.strategy-property-heading.secondary{margin-top:18px}.strategy-property-heading small{color:var(--muted)} .strategy-property-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .strategy-property-card{display:grid;grid-template-columns:112px 1fr;gap:11px;text-align:left;border:1px solid var(--line);border-radius:15px;background:#fff;padding:8px;cursor:pointer;min-width:0} .strategy-property-card>span{height:105px;border-radius:11px;overflow:hidden;background:var(--card-2)}.strategy-property-card>span img{width:100%;height:100%;object-fit:cover} .strategy-property-card div{min-width:0}.strategy-property-card small{font-size:10px;color:var(--green-deep);font-weight:850;letter-spacing:.06em}.strategy-property-card b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px;line-height:1.2;margin:4px 0}.strategy-property-card p{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.strategy-property-card em{display:block;font-style:normal;font-size:10px;margin-top:6px;color:var(--muted)} .strategy-property-card:hover{border-color:var(--green);box-shadow:0 5px 18px rgba(39,91,60,.10)} .strategy-property-selected{padding:12px;border-radius:15px;background:var(--card-2);margin-bottom:10px}.strategy-property-selected>b{display:block;margin-top:12px}.property-back{border:0;background:transparent;color:var(--green-deep);font-weight:800;padding:0;margin-bottom:10px;cursor:pointer} .strategy-property-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} @media(max-width:680px){.strategy-property-grid{grid-template-columns:1fr}.strategy-property-card{grid-template-columns:96px 1fr}.strategy-property-card>span{height:92px}.strategy-property-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.property-form-grid{grid-template-columns:1fr}.property-feature-list ul{columns:1}} .studio-cloud-picker .strategy-property-grid{margin:10px 14px 14px}.studio-cloud-picker .strategy-property-heading{padding:12px 14px 0}.studio-cloud-picker .strategy-property-selected{margin:10px 14px}.studio-cloud-picker .studio-cloud-grid{margin-top:10px}.studio-selected-property{display:grid;gap:3px;margin:10px 0 12px;padding:11px 13px;border:1px solid rgba(39,91,60,.22);border-radius:13px;background:var(--green-soft)}.studio-selected-property span{font-size:9px;font-weight:900;letter-spacing:.08em;color:var(--green-deep)}.studio-selected-property b{font-size:13px;line-height:1.25}.studio-selected-property small{font-size:11px;color:var(--muted);line-height:1.35} /* Resultados · carrusel completo en el detalle y sección de conversación (2-oct-2026) */ .stats-detail-media.is-carousel { position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-height: none; } .stats-carousel-stage { position: absolute; inset: 0; touch-action: pan-y; } .stats-carousel-stage > img { width: 100%; height: 100%; display: block; object-fit: cover; } .stats-carousel-stage > .skel { display: block; width: 100%; height: 100%; } .stats-carousel-nav { position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -17px; border: 0; border-radius: 50%; background: rgba(255,255,255,.88); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.15); } .stats-carousel-nav.prev { left: 10px; } .stats-carousel-nav.next { right: 10px; } .stats-carousel-nav:disabled { opacity: 0; pointer-events: none; } .stats-carousel-count { font-style: normal; position: absolute; bottom: 6px; right: 10px; z-index: 2; padding: 4px 9px; border-radius: 999px; background: rgba(21,33,27,.72); color: #fff; font-size: 11px; font-weight: 800; } .stats-carousel-dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; display: flex; justify-content: center; gap: 5px; } .stats-carousel-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); } .stats-carousel-dots i.on { background: #fff; } .stats-detail-comments { margin-top: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); } .stats-detail-comments > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .stats-detail-comments > header span { color: var(--green-deep); font-size: 10px; font-weight: 900; letter-spacing: .08em; } .stats-detail-comments > header small { color: var(--muted); font-size: 11px; } .studio-photo-warning { margin: 12px 0 0; padding: 11px 14px; border-radius: 12px; background: var(--sun-soft); color: var(--sun-deep); font-size: 12.5px; line-height: 1.45; } /* Biblioteca de Amalia: fichas y bandeja de eventos. */ .event-library-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;margin:12px 0 20px;border:1px solid var(--border,#dce5df);border-radius:16px;background:var(--card,#fff)} .event-library-tools small{display:block;margin-top:5px;opacity:.7}.event-actions{display:flex;flex-wrap:wrap;gap:8px}.event-placeholder{display:flex;align-items:center;justify-content:center;height:100%;font-size:54px;background:#edf4ee}.event-form-dates{display:grid;grid-template-columns:1fr 1fr;gap:12px}.event-check{display:flex;align-items:flex-start;gap:10px;margin:14px 0;line-height:1.5}.event-check input{flex-shrink:0;margin-top:5px}.event-resource-list{max-height:240px;overflow:auto;padding:4px 12px;border:1px solid var(--border,#dce5df);border-radius:12px}.event-review-notes{padding:12px;background:#fff4df;border-radius:12px;margin:14px 0;color:#573f18}.event-import-list>div{display:grid;gap:8px;padding:14px 0;border-bottom:1px solid var(--border,#dce5df)}.event-sources{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}#event-save-error{color:#a52c2c}#event-form .btn-green{margin-top:12px}#event-automation-body p{line-height:1.6} @media(max-width:600px){.event-library-tools{align-items:stretch;flex-direction:column}.event-form-dates{grid-template-columns:1fr}.event-actions .btn{flex:1}} /* Fase al 75 % (Noemí, 6-oct-2026) */ .strategy-complete-meter { position: relative; height: 8px; margin-top: 10px; max-width: 420px; border-radius: 99px; background: color-mix(in srgb, var(--green) 14%, transparent); } .strategy-complete-meter i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--green); transition: width .4s ease; } .strategy-complete-meter b { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--ink); opacity: .45; } .strategy-card-carried { display: block; width: fit-content; margin: 4px 0 6px; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; color: var(--muted); background: color-mix(in srgb, var(--ink) 7%, transparent); } /* Cerrar una pieza del plan (La Pandilla de las Natillas, 6-oct-2026) */ .strategy-close-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-top: 8px; } .reel-remember { display: flex; gap: 8px; align-items: center; margin: 4px 0 10px 4px; font-size: 12.5px; color: var(--muted); } /* Resultado de una subida con fallos (qué se guardó, qué no y por qué). */ .k-upload-report{padding:22px 20px 18px;display:grid;gap:10px} .k-upload-report h3{margin:0;font-size:18px} .k-upload-report p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.45} .k-upload-report p.ok{color:var(--green-deep,#2f6b4a);font-weight:700} .k-upload-report ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;max-height:36vh;overflow:auto} .k-upload-report li{display:grid;gap:2px;padding:10px 12px;border-radius:14px;background:var(--danger-soft,#fdeceb)} .k-upload-report li b{font-size:13px;overflow-wrap:anywhere} .k-upload-report li span{font-size:12.5px;color:var(--danger,#b3412f)} /* Centro de mensajes y ayuda (campana) */ .k-help-fab{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:12px;z-index:900;height:42px;padding:0 15px 0 12px;border-radius:999px;border:1.5px solid var(--green,#4f8c70);background:var(--card,#fff);color:var(--green-deep,#2f6b4a);display:inline-flex;align-items:center;gap:8px;font:750 13.5px/1 inherit;box-shadow:0 6px 18px -8px rgba(20,40,25,.35);cursor:pointer} .k-help-label{white-space:nowrap}.k-help-short{display:none} @media(max-width:560px){.k-help-long{display:none}.k-help-short{display:inline}.k-help-fab{padding:0 13px 0 10px}} .k-help-fab svg{width:20px;height:20px;flex:none} .k-help-fab.hidden{display:none} .k-help-fab:active{transform:scale(.94)} .k-help-badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#d4472f;color:#fff;font:700 11px/18px system-ui,sans-serif;font-style:normal;text-align:center} .k-help-fab .k-help-badge[hidden]{display:none} body.creation-flow-open .k-help-fab{display:none} .k-help-card{width:min(480px,100%);max-height:min(82vh,720px);display:grid;grid-template-rows:auto minmax(0,1fr);padding:0;overflow:hidden} .k-help-card>header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;border-bottom:1px solid var(--line,#e6e8df)} .k-help-tabs{display:flex;gap:6px} .k-help-tabs button{border:0;background:transparent;padding:8px 14px;border-radius:999px;font-weight:750;font-size:14px;color:var(--muted,#6b7a70)} .k-help-tabs button.on{background:var(--green-deep,#2f6b4a);color:#fff} .k-help-tabs button i{font-style:normal;background:#d4472f;color:#fff;border-radius:9px;padding:0 6px;font-size:11px;margin-left:3px} .k-help-x{border:0;background:transparent;font-size:26px;line-height:1;color:var(--muted,#6b7a70);padding:4px 10px} .k-help-body{overflow:auto;padding:12px 14px 16px;display:grid;gap:10px;align-content:start} .k-help-empty{text-align:center;padding:26px 10px;color:var(--muted,#6b7a70)} .k-help-empty b{display:block;color:var(--ink,#1f2a22);font-size:16px;margin-bottom:6px} .k-help-link{border:0;background:transparent;color:var(--green-deep,#2f6b4a);font-weight:750;font-size:13px;text-align:left;padding:2px 0} .k-notice{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;padding:12px;border-radius:14px;background:var(--card-soft,#f6f7f2);border:1px solid transparent} .k-notice.unread{background:#fff;border-color:var(--green,#4f8c70);box-shadow:0 6px 16px -10px rgba(47,107,74,.5)} .k-notice.error.unread{border-color:#d4472f} .k-notice b{font-size:14px}.k-notice p{margin:4px 0 6px;font-size:13px;line-height:1.45;color:var(--ink,#1f2a22)} .k-notice small{display:block;color:var(--muted,#6b7a70);font-size:11.5px} .k-notice .btn-mini{margin-top:8px;border:0;border-radius:999px;padding:7px 14px;background:var(--green-deep,#2f6b4a);color:#fff;font-weight:750;font-size:12.5px} .k-help-lead{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted,#6b7a70)} .k-help-form{display:grid;gap:10px} .k-help-kinds{display:flex;flex-wrap:wrap;gap:6px} .k-help-kinds button{border:1.5px solid var(--line,#e6e8df);background:var(--card,#fff);border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700;color:var(--ink,#1f2a22)} .k-help-kinds button.on{background:var(--green-deep,#2f6b4a);border-color:var(--green-deep,#2f6b4a);color:#fff} .k-help-card textarea{width:100%;min-height:110px;border:1.5px solid var(--line,#e6e8df);border-radius:14px;padding:12px;font:inherit;font-size:14px;resize:vertical;background:#fff;color:var(--ink,#1f2a22)} .k-help-msg{margin:0;font-size:12.5px;color:#b3412f;min-height:1em} .k-help-body h4{margin:8px 0 2px;font-size:13px;color:var(--muted,#6b7a70);text-transform:uppercase;letter-spacing:.04em} .k-ticket{display:grid;gap:2px;text-align:left;border:1px solid var(--line,#e6e8df);background:#fff;border-radius:12px;padding:10px 12px} .k-ticket b{font-size:13.5px}.k-ticket small{color:var(--muted,#6b7a70);font-size:12px} .k-bubble{max-width:90%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.45;white-space:pre-wrap;background:var(--card-soft,#f1f3ef)} .k-bubble.team{background:#e3f1e8;margin-right:auto}.k-bubble.business{margin-left:auto;background:#fff;border:1px solid var(--line,#e6e8df)} .k-bubble small{display:block;color:var(--muted,#6b7a70);font-size:11px;margin-bottom:2px} .k-error-panel .k-upload-report p b{color:var(--ink,#1f2a22)} .k-ticket{width:100%} body.has-help-fab .gx-head,body.has-help-fab .kh-top,body.has-help-fab .stats-screen-head{padding-right:190px} @media(max-width:560px){body.has-help-fab .gx-head,body.has-help-fab .kh-top,body.has-help-fab .stats-screen-head{padding-right:104px}} .k-help-tip{position:fixed;top:calc(62px + env(safe-area-inset-top,0px));right:12px;z-index:901;width:min(260px,calc(100vw - 24px));display:grid;gap:3px;padding:12px 34px 12px 14px;border-radius:16px;background:var(--green-deep,#2f6b4a);color:#fff;font-size:13px;line-height:1.4;box-shadow:0 14px 30px -12px rgba(20,40,25,.6);animation:kTipIn .35s ease} .k-help-tip::before{content:"";position:absolute;top:-6px;right:34px;width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:2px} .k-help-tip b{font-size:13.5px}.k-help-tip span{opacity:.92} .k-help-tip button{position:absolute;top:6px;right:8px;border:0;background:transparent;color:#fff;font-size:20px;line-height:1;padding:2px 6px} @keyframes kTipIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .k-help-title{margin:0;font-size:17px} .k-help-note{margin:0;padding:9px 11px;border-radius:12px;background:var(--card-soft,#f3f5ee);font-size:12px;line-height:1.45;color:var(--muted,#6b7a70)} .k-skip-dialog textarea{width:100%;min-height:70px;border:1.5px solid var(--line,#e6e8df);border-radius:14px;padding:12px;font:inherit;font-size:14px;resize:vertical;background:#fff;color:var(--ink,#1f2a22)} .k-skip-dialog .k-upload-report{max-height:90vh;overflow:auto} /* La ayuda no tapa el aviso morado de «Vista de administrador» (se ve la app como un negocio). */ body.admin-preview-active .k-help-fab,body.admin-preview-active .k-help-tip{display:none} .lib-agenda-card .lib-body b,.lib-agenda-card .lib-body small{white-space:normal;overflow:visible;text-overflow:clip;display:block} .lib-agenda-card .gx-status{white-space:normal;line-height:1.25;align-items:flex-start;height:auto} /* Agenda de eventos: detalle y edición de un evento */ .k-agenda-ev{cursor:pointer} .k-agenda-ev:focus-visible{outline:2px solid var(--green,#4f8c70);outline-offset:2px} .k-agenda-more{margin-top:6px;font-weight:750;color:var(--green-deep,#2f6b4a)} .k-agenda-hero{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start} .k-agenda-hero:not(:has(.k-agenda-poster)){grid-template-columns:1fr} .k-agenda-hero h3{margin:0 0 4px;font-size:17px;line-height:1.25} .k-agenda-hero p{margin:0 0 4px;font-size:13px} .k-agenda-poster{display:block;width:96px;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--card-soft,#f6f7f2)} .k-agenda-poster img{width:100%;height:100%;object-fit:cover;display:block} .k-agenda-pieces{margin:0 0 8px;padding-left:18px;font-size:13px;line-height:1.5} .k-agenda-warn{margin:8px 0;padding:10px 12px;border-radius:12px;background:#fff4e0;color:#7a4b00;font-size:13px;line-height:1.4} .k-field{display:grid;gap:4px} .k-field span{font-size:12px;font-weight:750;color:var(--muted,#6b7a70)} .k-field input,.k-field textarea{width:100%;border:1.5px solid var(--line,#e6e8df);border-radius:14px;padding:11px 12px;font:inherit;background:#fff;box-sizing:border-box} .k-field textarea{resize:vertical;min-height:90px} .k-agenda-sheet .btn-mini{border:0;border-radius:999px;padding:7px 14px;background:var(--green-deep,#2f6b4a);color:#fff;font-weight:750;font-size:12.5px;justify-self:start} /* La agenda aprovecha la pantalla ancha: ficha en dos columnas y lista en rejilla */ .k-agenda-sheet .k-help-card{width:min(1040px,100%);max-height:min(90vh,860px)} .k-field-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px} @media (min-width:900px){ .k-agenda-sheet .k-help-body{padding:18px 24px 22px;gap:14px} .k-agenda-detail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:start} .k-agenda-info{display:grid;gap:10px;align-content:start} .k-agenda-info h4,.k-agenda-edit h4{margin-top:0} .k-agenda-hero{grid-template-columns:200px minmax(0,1fr);gap:18px} .k-agenda-poster{width:200px} .k-agenda-hero h3{font-size:20px} .k-field-row{grid-template-columns:minmax(0,3fr) minmax(0,1fr)} .k-agenda-events{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} } @media (min-width:900px) and (max-width:1100px){.k-agenda-hero{grid-template-columns:140px minmax(0,1fr)}.k-agenda-poster{width:140px}} .k-agenda-events{display:grid;gap:10px} .k-agenda-owner{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.35;color:var(--ink,#1f2a22)} .k-agenda-owner input{margin-top:2px} .k-agenda-doc{border:1.5px dashed var(--line,#d9dccf);border-radius:16px;padding:12px 14px;display:grid;gap:8px} .k-agenda-doc.hot{border-color:var(--green,#4f8c70);background:#f1f8f3} .k-agenda-doc h4{margin:0} /* Fichas anchas (propiedad, recurso): en ordenador, fotos a un lado y datos al otro (feedback-ancho-pantalla) */ .property-sheet-layout,.library-edit-layout{display:block} @media (min-width:900px){ #post-sheet-backdrop:has(.wide-content):not(.scheduled-preview-active):not(.strategy-review-active):not(.piece-active):not(.avatar-creation-active){align-items:center;padding:24px} #post-sheet-backdrop:has(.wide-content):not(.scheduled-preview-active):not(.strategy-review-active):not(.piece-active):not(.avatar-creation-active) #post-sheet{max-width:min(1280px,96vw);max-height:92vh;border-radius:26px;padding:10px 34px 30px;transform:translateY(24px);box-shadow:0 30px 80px -30px rgba(0,0,0,.45)} #post-sheet-backdrop.show:has(.wide-content):not(.scheduled-preview-active):not(.strategy-review-active):not(.piece-active):not(.avatar-creation-active) #post-sheet{transform:translateY(0)} .property-sheet-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(380px,.9fr);gap:34px;align-items:start} .property-sheet-side{position:sticky;top:0;display:grid;gap:4px;align-content:start} .property-sheet-gallery{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:unset;overflow:visible;gap:10px;padding:3px 0 0} .property-sheet-photo{height:auto;aspect-ratio:4/3;border-radius:14px} .property-sheet-heading h3{font-size:24px} .library-edit-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:34px;align-items:start} .library-edit-side{display:grid;gap:12px;align-content:start} .library-edit-preview{max-height:70vh} } /* Resto de hojas (revisión de anchos, 8-oct-2026): selectores y listas a lo ancho; formularios cortos, centrados */ @media (min-width:900px){ #post-sheet-backdrop:has(.mid-content):not(.scheduled-preview-active):not(.strategy-review-active):not(.piece-active):not(.avatar-creation-active){align-items:center;padding:24px} #post-sheet-backdrop:has(.mid-content):not(.scheduled-preview-active):not(.strategy-review-active):not(.piece-active):not(.avatar-creation-active) #post-sheet{max-width:min(780px,94vw);max-height:90vh;border-radius:26px;padding:10px 30px 28px;transform:translateY(24px)} #post-sheet-backdrop.show:has(.mid-content):not(.scheduled-preview-active):not(.strategy-review-active):not(.piece-active):not(.avatar-creation-active) #post-sheet{transform:translateY(0)} /* rejillas de fotos y vídeos: más columnas y más alto */ #post-sheet:has(.wide-content) .studio-cloud-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-height:min(56vh,560px);gap:12px} #post-sheet:has(.wide-content) .cloud-resource-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));max-height:min(64vh,640px);gap:12px} #post-sheet:has(.wide-content) .studio-cloud-item{min-height:150px} /* música: opciones en fila y catálogo a dos columnas */ #post-sheet:has(.wide-content) .review-music-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} #post-sheet:has(.wide-content) .music-catalog-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start} /* respuesta automática: formulario en dos columnas */ #post-sheet .ar-form:has(#ar-name){grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 34px;align-items:start} #post-sheet .ar-form:has(#ar-name) #ar-save,#post-sheet .ar-form:has(#ar-name) .ar-preview{grid-column:1/-1} #post-sheet .ar-form:has(#ar-name) .ar-preview{max-width:560px} /* ayuda y mensajes: dos columnas (escribir / conversaciones) */ .k-help-card:has(.k-help-body[data-pane="help"]),.k-help-card:has(.k-help-body[data-pane="notices"]){width:min(1000px,100%);max-height:min(88vh,820px)} .k-help-body[data-pane="help"]{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px 34px;padding:18px 26px 22px;align-items:start} .k-help-body[data-pane="notices"]{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px 26px 22px;gap:12px} .k-help-card:has(.k-help-body:not([data-pane="help"]):not([data-pane="notices"])){width:min(760px,100%)} /* hojas propias: creación de contenido, edición guiada, informes de estadísticas */ .creation-flow-backdrop:not(.creation-studio-active),.guided-edit-backdrop,.stats-report-backdrop,.stats-detail-backdrop{align-items:center;padding:24px} .creation-flow-backdrop:not(.creation-studio-active) .creation-flow-sheet{max-width:min(1040px,96vw);border-radius:26px;padding:24px 34px 30px;transform:translateY(24px)} .guided-edit-sheet,.stats-report-sheet{max-width:min(1040px,96vw);border-radius:26px;padding:24px 34px 30px;transform:translateY(24px)} .stats-detail-sheet{max-width:min(1180px,96vw);border-radius:26px;padding:24px 34px 30px} .creation-flow-backdrop.show:not(.creation-studio-active) .creation-flow-sheet{transform:none} }