/* Trivux · Curación — sobre el design system TRIVUX (tokens.css). Las vars legacy quedan como ALIAS de los tokens --tx-* → todas las páginas heredan light+dark del design system sin reescribir cada regla. El tema por defecto es CLARO; [data-theme="dark"] (en ) activa el nocturno y los tokens se intercambian solos, así que estos alias no necesitan duplicarse. */ :root { --bg: var(--tx-bg); --bg-elev: var(--tx-surface); --bg-hover: var(--tx-input); --border: var(--tx-border); --card: var(--tx-surface); --text: var(--tx-text-prim); --text-dim: var(--tx-text-sec); --accent: var(--tx-purple-light); --accent-dim: var(--tx-purple-dim); --warn: var(--tx-gold); --danger: var(--tx-red); --ok: var(--tx-green); --purple: var(--tx-pink); --cyan: var(--tx-purple-alt); --mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--tx-font); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Nav ─────────────────────────────────────────────────────────── */ header.nav { display: flex; align-items: center; gap: 20px; padding: 12px 24px; background: var(--tx-nav-bg); border-bottom: 1px solid var(--border); box-shadow: var(--tx-shadow-card); position: sticky; top: 0; z-index: 20; } header.nav .brand { display: inline-flex; align-items: baseline; gap: 9px; } header.nav .brand:hover { text-decoration: none; } header.nav .brand .tx-wordmark { font-size: 17px; } header.nav .brand .brand-sub { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); border-left: 1px solid var(--border); padding-left: 9px; } header.nav .theme-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s; } header.nav .theme-toggle:hover { border-color: var(--accent); color: var(--text); } header.nav .theme-toggle [data-theme-icon] { font-size: 13px; } header.nav nav { display: flex; gap: 2px; } header.nav nav a { color: var(--text-dim); font-size: 13px; padding: 5px 12px; border-radius: 6px; border-bottom: 2px solid transparent; transition: color .12s, background .12s; } header.nav nav a:hover { color: var(--text); background: var(--bg-hover); text-decoration: none; } header.nav nav a.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* ── Layout ──────────────────────────────────────────────────────── */ main { padding: 24px; max-width: 1400px; margin: 0 auto; } /* Páginas con grillas de eventos (/revisar, /recomendar): usar TODO el ancho del navegador — las grillas auto-fill agregan columnas solas. */ main.wide { max-width: none; padding: 18px 22px 28px; } /* Variante del panel de recomendadores: el sidebar de filtros va PEGADO al borde izquierdo de la pantalla (sin padding a la izquierda). */ main.flush { padding-left: 0; } h2 { margin: 0 0 16px; font-size: 20px; font-weight: 700; letter-spacing: -0.3px; } h3 { margin: 24px 0 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-dim); font-family: var(--mono); } /* ── Toolbar ─────────────────────────────────────────────────────── */ .toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .toolbar select, .toolbar input { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 13px; transition: border-color .12s; } .toolbar select:focus, .toolbar input:focus { outline: none; border-color: var(--accent); } /* ── Queue Table ─────────────────────────────────────────────────── */ table.queue { width: 100%; border-collapse: collapse; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } table.queue th, table.queue td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; } table.queue th { background: var(--bg); font-size: 10px; font-family: var(--mono); text-transform: uppercase; color: var(--text-dim); letter-spacing: 1px; font-weight: 500; } table.queue tr:last-child td { border-bottom: none; } table.queue tr.row:hover { background: var(--bg-hover); } table.queue tr.row.focus { outline: 2px solid var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 6%, transparent); } table.queue td.title { font-weight: 500; max-width: 400px; } table.queue td.meta { color: var(--text-dim); font-size: 12px; font-family: var(--mono); } /* ── Badges ──────────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-family: var(--mono); } /* ── Mejora #4: badges por rank de fuente ────────────────────────── Verde → confiable estricta (rank >= 3): manual, spotify, mb, override, nativa Amarillo → procesada pero mejorable (rank 1-2): web_research, keywords Rojo → falla (rank <= 0): sin_match, fallback, llm, null */ .badge.manual { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent); } .badge.spotify { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent); } .badge.musicbrainz { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent); } .badge.override { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); } .badge.nativa { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } /* Procesada / mejorable */ .badge.web_research { background: color-mix(in srgb, var(--tx-purple-alt) 15%, transparent); color: var(--tx-purple-alt); } .badge.keywords { background: color-mix(in srgb, var(--tx-purple-alt) 15%, transparent); color: var(--tx-purple-alt); } /* Falla */ .badge.llm { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } .badge.sin_match, .badge.fallback, .badge.null, .badge.sin_dato { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } /* review_status */ .badge.approved { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); } .badge.pending { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } .badge.auto_from_rule { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .badge.rejected { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); } /* ── Buttons ─────────────────────────────────────────────────────── */ button.btn { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } button.btn:hover { background: var(--bg-hover); border-color: var(--accent); } button.btn.primary { background: var(--accent-dim); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); font-weight: 600; } button.btn.primary:hover { background: color-mix(in srgb, var(--accent) 20%, var(--bg)); } button.btn.danger:hover { color: var(--danger); border-color: var(--danger); } /* ── Edit form ───────────────────────────────────────────────────── */ tr.edit-row td { padding: 16px 20px; background: var(--bg); } form.edit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } form.edit-form label { display: block; font-size: 10px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; letter-spacing: 0.8px; font-family: var(--mono); } form.edit-form input, form.edit-form select, form.edit-form textarea { width: 100%; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 7px 11px; font: inherit; font-size: 13px; transition: border-color .12s; } form.edit-form input:focus, form.edit-form select:focus, form.edit-form textarea:focus { outline: none; border-color: var(--accent); } form.edit-form textarea { resize: vertical; min-height: 60px; } form.edit-form .full { grid-column: 1 / -1; } form.edit-form .checkbox-row { display: flex; align-items: center; gap: 8px; } form.edit-form .checkbox-row input[type=checkbox] { width: auto; accent-color: var(--accent); } form.edit-form .submit-row { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; } /* ── Metrics cards ───────────────────────────────────────────────── */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; } .trend-chart { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--accent); opacity: 0.6; } .card .label { font-size: 10px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 1px; font-family: var(--mono); } .card .value { font-size: 30px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; } .card .hint { font-size: 12px; color: var(--text-dim); margin-top: 4px; } /* ── Dashboard · Historias de Instagram (insights, 2026-07-11) ────── */ .ig-sub { margin: 18px 0 8px; font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.6px; } .ig-insights-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .ig-insights-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); padding: 6px 10px; border-bottom: 1px solid var(--border); } .ig-insights-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .ig-insights-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); } .ig-insights-table .ig-dim { color: var(--text-dim); font-size: 11.5px; font-style: italic; } /* ── Bar chart ───────────────────────────────────────────────────── */ .bar-chart { display: flex; flex-direction: column; gap: 10px; } .bar-chart .row { display: grid; grid-template-columns: 140px 1fr 60px; gap: 12px; align-items: center; } .bar-chart .label { font-size: 12px; color: var(--text-dim); } .bar-chart .track { background: var(--bg); border-radius: 4px; height: 16px; overflow: hidden; } .bar-chart .fill { height: 100%; background: linear-gradient(90deg, var(--accent-dim), color-mix(in srgb, var(--accent) 60%, var(--accent-dim))); border-radius: 4px; transition: width 0.6s ease; } .bar-chart .n { font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: 12px; text-align: right; font-family: var(--mono); } /* ── Misc ────────────────────────────────────────────────────────── */ .empty { color: var(--text-dim); text-align: center; padding: 48px; font-style: italic; font-size: 13px; } .flash { padding: 8px 14px; background: var(--accent-dim); color: var(--accent); border-radius: 7px; margin-bottom: 12px; font-size: 13px; } /* ── Rules badge types ───────────────────────────────────────────── */ .badge.tipo-artista { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .badge.tipo-venue { background: color-mix(in srgb, var(--purple) 16%, transparent); color: var(--purple); } .badge.tipo-titulo_patron { background: color-mix(in srgb, var(--tx-purple-alt) 16%, transparent); color: var(--tx-purple-alt); } .badge.tipo-categoria_raw { background: color-mix(in srgb, var(--cyan) 16%, transparent); color: var(--cyan); } tr.rule-row.inactive td { opacity: .5; } tr.rule-row.inactive td.title { text-decoration: line-through; } /* ── New rule section ────────────────────────────────────────────── */ section.new-rule { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 8px; } section.new-rule h3 { margin-top: 0; } section.new-rule form.edit-form { margin: 0; } /* La sección es el marco de posicionamiento del popover de ayuda. */ section.new-rule { position: relative; } /* ── Ayuda contextual por campo (botón ⓘ + popover) ──────────────── */ .field-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 4px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--text-dim); font-size: 10px; font-weight: 700; line-height: 1; cursor: help; vertical-align: middle; transition: border-color .12s, color .12s; } .field-info:hover { border-color: var(--accent); color: var(--accent); } .field-info-pop { position: absolute; z-index: 40; max-width: 340px; width: max-content; background: var(--bg-elev); border: 1px solid var(--accent); border-radius: 8px; padding: 10px 12px; font-size: 12px; line-height: 1.5; color: var(--text); box-shadow: 0 6px 22px rgba(0,0,0,.18); } .field-info-pop[hidden] { display: none; } .field-info-pop code { background: var(--bg-hover); padding: 1px 4px; border-radius: 4px; font-family: var(--mono); font-size: 11px; } .key-kind { font-weight: 400; color: var(--text-dim); text-transform: none; letter-spacing: 0; } .field-hint { display: block; margin-top: 4px; font-size: 11px; color: var(--text-dim); line-height: 1.4; } /* ── Cheatsheet colapsable de tipos de regla ─────────────────────── */ .rules-cheatsheet { border: 1px dashed var(--border); border-radius: 8px; padding: 8px 12px; margin: 4px 0 16px; font-size: 12px; } .rules-cheatsheet > summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; user-select: none; } .rules-cheatsheet > summary::-webkit-details-marker { display: none; } .rules-cheatsheet > summary::before { content: "▸ "; color: var(--text-dim); } .rules-cheatsheet[open] > summary::before { content: "▾ "; } .rules-cheatsheet .cs-hint { font-weight: 400; color: var(--text-dim); } .rules-cheatsheet .cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 12px 0; } .rules-cheatsheet .cs-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .rules-cheatsheet .cs-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .rules-cheatsheet .cs-head b { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; } .rules-cheatsheet .cs-card p { margin: 4px 0; color: var(--text-dim); line-height: 1.5; } .rules-cheatsheet .cs-ex { color: var(--text); } .rules-cheatsheet code { background: var(--bg-hover); padding: 1px 4px; border-radius: 4px; font-family: var(--mono); font-size: 11px; } .rules-cheatsheet .cs-foot { margin: 6px 2px 2px; color: var(--text-dim); line-height: 1.6; } /* ── Preview / apply card ────────────────────────────────────────── */ .preview-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; margin: 12px 0; } .preview-card .preview-body { display: flex; flex-wrap: wrap; gap: 24px; } .preview-card .preview-stat { display: flex; flex-direction: column; gap: 2px; min-width: 120px; } .preview-card .preview-stat .label { font-size: 10px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.8px; font-family: var(--mono); } .preview-card .preview-stat .value { font-size: 22px; font-weight: 700; } .preview-card .preview-stat .value.danger { color: var(--danger); } .preview-card .preview-stat .value small { font-size: 11px; display: block; font-weight: 400; } /* ── Review meta bar ─────────────────────────────────────────────── */ .review-wrap { max-width: 900px; margin: 0 auto; } .review-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 20px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; font-size: 13px; } .review-meta .item { display: flex; flex-direction: column; gap: 3px; } .review-meta .item .label { font-size: 9px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 1px; font-family: var(--mono); } .review-meta .item .value { font-weight: 600; } .review-meta .item .value.dim { color: var(--text-dim); font-weight: 400; } /* ── Review card ─────────────────────────────────────────────────── */ .review-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .review-header { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 20px; border-bottom: 1px solid var(--border); align-items: start; } .review-header .cover { width: 200px; height: 200px; background: var(--bg); border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--border); } .review-header .cover img { width: 100%; height: 100%; object-fit: cover; } .review-header .cover .no-img { color: var(--text-dim); font-size: 12px; } .review-header .info { min-width: 0; } .review-header .info h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.3; letter-spacing: -0.3px; } .review-header .info .sub { color: var(--text-dim); font-size: 13px; margin-bottom: 10px; } .review-header .info .desc { font-size: 13px; color: var(--text); max-height: 140px; overflow-y: auto; padding-right: 6px; line-height: 1.6; } .review-header .info .desc.empty { color: var(--text-dim); font-style: italic; } /* ── Review sections ─────────────────────────────────────────────── */ .review-section { padding: 18px 20px; border-bottom: 1px solid var(--border); } .review-section:last-child { border-bottom: none; } .review-section h3 { margin: 0 0 12px; } /* ── Category/Sub chips ──────────────────────────────────────────── */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } button.chip { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 18px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .1s, border-color .1s, transform .05s, color .1s; min-height: 40px; } button.chip:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); } button.chip:active { transform: scale(0.97); } button.chip.current { background: var(--accent-dim); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); font-weight: 600; } button.chip.selected { background: color-mix(in srgb, var(--accent) 18%, var(--bg)); color: var(--accent); border-color: var(--accent); } button.chip.muted { opacity: 0.45; } /* ── Multi-select chips (review_card v2) ─────────────────────────── */ .chips.multi button.chip { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; } .chips.multi button.chip .star { display: inline-block; width: 16px; font-size: 12px; color: transparent; text-align: center; border-radius: 3px; cursor: pointer; transition: color .12s, background .12s; } .chips.multi button.chip.selected .star { color: var(--text-dim); } .chips.multi button.chip .star:hover { background: var(--bg-elev); color: var(--accent); } .chips.multi button.chip.principal { background: var(--accent-dim); border-color: var(--accent); font-weight: 700; } .chips.multi button.chip.principal .star { color: var(--accent); } .cap-counter { font-size: 11px; font-weight: 500; color: var(--text-dim); text-transform: none; letter-spacing: 0; margin-left: 8px; font-family: var(--mono); } .hint-row { margin: -4px 0 10px; color: var(--text-dim); font-size: 12px; } /* ── Suggestions (sub-section dentro de subcat) ──────────────────── */ .suggestions-panel { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 8px; background: color-mix(in srgb, var(--accent) 4%, transparent); } .suggestions-header { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .suggestions-loading, .suggestions-empty { font-size: 12px; color: var(--text-dim); font-style: italic; } .suggestions-chips { gap: 6px; } .suggestion-chip { padding: 5px 10px !important; font-size: 12px !important; min-height: 28px !important; } .suggestion-chip .suggestion-meta { font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-left: 4px; } /* ── Artist chips (review_card v2) ───────────────────────────────── */ .artistas-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; padding: 6px; border: 1px dashed var(--border); border-radius: 7px; margin-bottom: 10px; } .artista-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-dim); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 14px; padding: 4px 8px 4px 11px; font-size: 12px; font-weight: 500; } .artista-remove { background: transparent; border: none; color: var(--accent); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 50%; transition: background .12s; } .artista-remove:hover { background: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); } .artistas-add-row { display: flex; gap: 8px; align-items: center; } .artistas-add-input { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 6px 11px; font: inherit; font-size: 13px; transition: border-color .12s; } .artistas-add-input:focus { outline: none; border-color: var(--accent); } .btn.small { padding: 6px 14px; font-size: 12px; min-height: 30px; } .review-actions.sticky { position: sticky; bottom: 0; z-index: 5; border-top: 1px solid var(--border); box-shadow: 0 -4px 12px rgba(0,0,0,0.25); } #subcat-section button.chip { padding: 7px 14px; font-size: 13px; min-height: 34px; } .subcat-familia { margin-bottom: 10px; } .subcat-familia .fam-label { display: inline-block; min-width: 110px; font-size: 10px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.8px; font-family: var(--mono); vertical-align: top; padding-top: 8px; margin-right: 6px; } .subcat-familia .chips { display: inline-flex; vertical-align: top; flex-wrap: wrap; } /* ── Artists panel ───────────────────────────────────────────────── */ .artistas-panel { display: flex; flex-direction: column; gap: 10px; } .artistas-panel label.opt { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .artistas-panel label.opt input[type=radio] { accent-color: var(--accent); } .artistas-panel .artistas-edit-input { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 6px 11px; font: inherit; font-size: 13px; transition: border-color .12s; } .artistas-panel .artistas-edit-input:focus { outline: none; border-color: var(--accent); } .artistas-panel .artistas-edit-input:disabled { opacity: 0.35; } .artistas-panel .regla-row { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--border); } /* ── Review actions bar ──────────────────────────────────────────── */ .review-actions { display: flex; gap: 10px; padding: 16px 20px; justify-content: space-between; background: var(--bg); align-items: center; } .review-actions .spacer { flex: 1; } .review-actions .btn { padding: 10px 22px; font-size: 14px; font-weight: 600; min-height: 42px; } .review-hint { color: var(--text-dim); font-size: 12px; margin-top: 16px; text-align: center; line-height: 1.6; } .review-hint kbd { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-family: var(--mono); font-size: 11px; } /* ── Fix dates ───────────────────────────────────────────────────── */ .fix-dates-toggle { margin-top: 10px; background: transparent; border: 1px dashed var(--border); color: var(--text-dim); border-radius: 7px; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer; transition: border-color .12s, color .12s; } .fix-dates-toggle:hover { border-color: var(--accent); color: var(--accent); } .fix-dates-form { display: none; margin-top: 10px; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .fix-dates-form.open { display: flex; } .fix-dates-form label { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; font-family: var(--mono); } .fix-dates-form input[type=datetime-local] { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 13px; transition: border-color .12s; } .fix-dates-form input[type=datetime-local]:focus { outline: none; border-color: var(--accent); } .fix-dates-form .btn.small { padding: 6px 14px; font-size: 12px; } /* ════════════════════════════════════════════════════════════════════ FASE 15 · UI improvements (mejoras #1, #3, #5, dashboard cards) ════════════════════════════════════════════════════════════════════ */ /* ── #1 Upgrade banner ───────────────────────────────────────────── */ .upgrade-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 14px 0; background: color-mix(in srgb, var(--ok) 8%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); border-radius: 10px; font-size: 13px; } .upgrade-banner.applied { background: color-mix(in srgb, var(--ok) 12%, var(--bg-elev)); border-color: var(--ok); color: var(--ok); justify-content: center; } .upgrade-banner .ok-icon { font-size: 18px; } .upgrade-banner .upgrade-icon { font-size: 22px; flex-shrink: 0; } .upgrade-banner .upgrade-content { flex: 1; } .upgrade-banner .upgrade-headline { font-weight: 600; margin-bottom: 4px; } .upgrade-banner .upgrade-arrow { color: var(--ok); margin: 0 4px; font-weight: 700; } .upgrade-banner .upgrade-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .upgrade-banner .upgrade-meta code { background: var(--bg); padding: 1px 4px; border-radius: 3px; font-size: 11px; } .upgrade-banner .upgrade-actions { display: flex; gap: 6px; flex-shrink: 0; } .upgrade-banner .btn-upgrade-apply { background: var(--ok); color: var(--bg); border: none; padding: 6px 14px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; } .upgrade-banner .btn-upgrade-apply:hover { filter: brightness(1.1); } .upgrade-banner .btn-upgrade-dismiss { background: transparent; color: var(--text-dim); border: 1px solid var(--border); padding: 6px 12px; border-radius: 6px; font: inherit; cursor: pointer; } .upgrade-banner .btn-upgrade-dismiss:hover { color: var(--text); border-color: var(--text-dim); } /* ── #5 Event history inline ─────────────────────────────────────── */ .event-history { margin-top: 18px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; } .event-history-title { font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; font-size: 10px; margin-bottom: 8px; } .event-history-table { width: 100%; border-collapse: collapse; } .event-history-table th { text-align: left; padding: 4px 8px; font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); } .event-history-table td { padding: 4px 8px; } .event-history-table .diff .before { color: var(--text-dim); } .event-history-table .diff .arrow { color: var(--accent); margin: 0 4px; } .event-history-table .diff .after { color: var(--text); font-weight: 600; } /* ── D1.1/D1.2: razones de encolado + confidence con color ──────────── */ .conf-badge { display: inline-block; padding: 1px 7px; border-radius: 6px; font-family: var(--mono); font-weight: 600; font-size: 12px; } .conf-badge.conf-low { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); } .conf-badge.conf-mid { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } .conf-badge.conf-high { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); } .razon-flag { cursor: help; } .razones-banner { display: flex; gap: 10px; align-items: flex-start; background: color-mix(in srgb, var(--warn) 7%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); border-left: 3px solid var(--warn); border-radius: 10px; padding: 10px 14px; margin: 12px 0; } .razones-icon { font-size: 16px; line-height: 1.4; } .razones-content { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .razones-headline { font-weight: 600; color: var(--text); margin-right: 4px; } .razon-chip { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 20px; background: color-mix(in srgb, var(--warn) 13%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 33%, transparent); color: var(--text); } /* D4.2 — badge "propuestas" (reglas inactivas) en /rules */ .propuestas-badge { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 20px; vertical-align: middle; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); } .propuestas-badge:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); text-decoration: none; } /* D1.3 — contexto de regla + botón revert en el historial */ .hist-rule { color: var(--accent); font-size: 11px; text-decoration: none; } .hist-rule:hover { text-decoration: underline; } .hist-revert { background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 6px; padding: 1px 8px; font-size: 13px; cursor: pointer; line-height: 1.4; } .hist-revert:hover { border-color: var(--warn); color: var(--warn); } /* D4.1 — preview de impacto de la regla (card) */ .rule-preview-slot { display: block; margin-top: 6px; padding-left: 26px; } .rule-preview-hint { font-size: 12px; color: var(--text-dim); } .rule-preview-hint b { color: var(--accent); } .rule-preview-hint.warn b { color: var(--warn); } /* D2.3 — toast no bloqueante con "Deshacer" */ #toast-container { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 1000; align-items: center; } .toast { display: flex; align-items: center; gap: 14px; background: var(--bg-elev); border: 1px solid var(--accent); border-radius: 10px; padding: 11px 16px; font-size: 13px; box-shadow: 0 8px 28px rgba(0,0,0,.45); animation: toast-in .2s ease; } .toast.out { opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; } .toast-undo { background: var(--accent); color: var(--bg); border: none; border-radius: 6px; padding: 5px 13px; font: inherit; font-weight: 600; cursor: pointer; } .toast-undo:hover { filter: brightness(1.12); } @keyframes toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* D5.3 — semáforo de salud de la cola */ .health-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; vertical-align: middle; } .health-dot.ok { background: var(--ok); box-shadow: 0 0 8px color-mix(in srgb, var(--ok) 60%, transparent); } .health-dot.warn { background: var(--warn); box-shadow: 0 0 8px color-mix(in srgb, var(--warn) 60%, transparent); } .health-dot.danger { background: var(--danger); box-shadow: 0 0 8px color-mix(in srgb, var(--danger) 60%, transparent); } /* D6.3 — móvil: padding reducido + tablas con scroll horizontal (sin overflow del viewport) */ @media (max-width: 760px) { main { padding: 14px 12px 60px; } table.queue { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ── #2 Dashboard cards accionables ──────────────────────────────── */ .actionable-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 14px 0 22px; } .actionable-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 8px; text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; } .actionable-card:hover { border-color: var(--accent); transform: translateY(-1px); } .actionable-card.severity-high { border-left-color: #f87171; } .actionable-card.severity-mid { border-left-color: var(--warn); } .actionable-card.severity-low { border-left-color: var(--cyan); } .actionable-card .ac-count { font-size: 22px; font-weight: 700; font-family: var(--mono); } .actionable-card .ac-label { font-size: 12px; color: var(--text); } .actionable-card .ac-cta { font-size: 11px; color: var(--accent); margin-top: 4px; } /* ── #3 Bulk ops (queue) ─────────────────────────────────────────── */ .bulk-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-hover); border: 1px solid var(--accent); border-radius: 8px; margin-bottom: 10px; font-size: 13px; } .bulk-toolbar.hidden { display: none; } .bulk-toolbar .bulk-count { font-weight: 600; color: var(--accent); } .bulk-toolbar .bulk-spacer { flex: 1; } .queue th.bulk-col, .queue td.bulk-col { width: 28px; text-align: center; } /* ── #7 Filtros avanzados / vistas guardadas ─────────────────────── */ .queue-toolbar .saved-views { display: flex; gap: 6px; flex-wrap: wrap; } .queue-toolbar .saved-view-link { font-size: 11px; padding: 3px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; color: var(--text-dim); text-decoration: none; font-family: var(--mono); } .queue-toolbar .saved-view-link:hover { border-color: var(--accent); color: var(--accent); } .queue-toolbar .saved-view-link.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } /* Vista urgentes — destacada en rojo para visibilidad inmediata. */ .queue-toolbar .saved-view-link.urgent { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); color: var(--danger); } .queue-toolbar .saved-view-link.urgent:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); } .queue-toolbar .saved-view-link.urgent.active { background: color-mix(in srgb, var(--danger) 18%, transparent); border-color: var(--danger); color: var(--danger); } /* ── Bulk activate by confidence card (rules) ────────────────────── */ .bulk-confidence-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin: 10px 0 16px; background: linear-gradient(135deg, var(--bg-elev) 0%, color-mix(in srgb, var(--accent) 8%, var(--bg-elev)) 100%); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 10px; } .bulk-confidence-card .bcc-icon { font-size: 26px; flex-shrink: 0; } .bulk-confidence-card .bcc-content { flex: 1; } .bulk-confidence-card .bcc-title { font-weight: 600; margin-bottom: 4px; } .bulk-confidence-card .bcc-meta { font-size: 12px; color: var(--text-dim); } .bulk-confidence-card .bcc-meta code { background: var(--bg); padding: 1px 4px; border-radius: 3px; font-size: 11px; } .bulk-confidence-card .bcc-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .bulk-confidence-card .bcc-threshold-label { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; } .bulk-confidence-card .bcc-threshold-label input { width: 64px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; font: inherit; font-size: 13px; } /* ════════════════════════════════════════════════════════════════════ B2-R2 · Speed Queue ════════════════════════════════════════════════════════════════════ */ table.queue.speed td, table.queue.speed th { padding: 8px 12px; } tr.speed-row.focus { outline: 2px solid var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 6%, transparent); } tr.speed-row .speed-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; font-family: var(--mono); } tr.speed-row .speed-actions { display: flex; gap: 4px; } /* Selects de edición inline (categoría / subcategoría) en la Speed Queue. */ tr.speed-row .speed-cat-sel, tr.speed-row .speed-sub-sel { width: 100%; padding: 4px 6px; font-size: 12px; } tr.speed-row .speed-sub-sel:disabled { opacity: .5; cursor: not-allowed; } /* Multi-categoría + multi-subcategoría inline. Los bloques comparten layout. */ tr.speed-row .speed-sub-multi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; } tr.speed-row .speed-sub-extra-pick { padding: 2px 4px; font-size: 11px; color: var(--text-dim); max-width: 100%; } tr.speed-row .extra-sub-chip { background: color-mix(in srgb, var(--cyan, #0af) 14%, transparent); border-color: color-mix(in srgb, var(--cyan, #0af) 35%, var(--border)); } /* Multi-categoría inline: chips de categorías extra + selector "+ cat. extra". */ tr.speed-row .speed-cat-multi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; } tr.speed-row .speed-cat-extra-pick { padding: 2px 4px; font-size: 11px; color: var(--text-dim); max-width: 100%; } tr.speed-row .extra-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 4px 1px 6px; font-size: 11px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 10px; color: var(--text); } tr.speed-row .extra-chip-x { border: none; background: none; color: var(--text-dim); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 1px; } tr.speed-row .extra-chip-x:hover { color: var(--danger); } .speed-btn { min-width: 28px; padding: 4px 8px; font-size: 13px; text-align: center; font-weight: 700; font-family: var(--mono); } .speed-btn.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); } .speed-btn.ok:hover { background: color-mix(in srgb, var(--ok) 18%, transparent); border-color: var(--ok); } .speed-btn.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); } .speed-btn.bad:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); border-color: var(--danger); } .speed-btn.open { color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; } .speed-btn.open:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; } tr.speed-row.gone { opacity: 0; transform: translateX(8px); transition: opacity .18s, transform .18s; } td.speed-done { padding: 6px 12px !important; font-style: italic; font-size: 12px; font-family: var(--mono); } .speed-summary { position: fixed; bottom: 18px; right: 18px; background: var(--bg-elev); border: 1px solid var(--accent); color: var(--text); padding: 8px 14px; border-radius: 8px; font-size: 12px; font-family: var(--mono); box-shadow: 0 6px 18px rgba(0,0,0,0.35); opacity: 0; transform: translateY(8px); transition: opacity .15s, transform .15s; pointer-events: none; } .speed-summary.visible { opacity: 1; transform: translateY(0); } /* ════════════════════════════════════════════════════════════════════ B2-R6 · Sugerencias de regla por artista repetido ════════════════════════════════════════════════════════════════════ */ .rule-suggestions { margin: 14px 0 18px; padding: 14px 16px; background: linear-gradient(135deg, var(--bg-elev) 0%, color-mix(in srgb, var(--accent) 6%, var(--bg-elev)) 100%); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 10px; } .rule-suggestions.empty { background: var(--bg-elev); border-style: dashed; padding: 10px 14px; } .rule-suggestions .rs-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; gap: 16px; } .rule-suggestions .rs-meta { color: var(--text-dim); font-size: 12px; } .rule-suggestions .rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; } .rs-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; position: relative; transition: opacity .3s; } .rs-card-head { display: flex; align-items: baseline; gap: 8px; } .rs-count { display: inline-block; min-width: 28px; text-align: center; background: var(--accent-dim); color: var(--accent); font-family: var(--mono); font-weight: 700; padding: 2px 8px; border-radius: 12px; font-size: 13px; } .rs-artist { font-weight: 600; font-size: 14px; } .rs-card-meta { font-size: 11px; color: var(--text-dim); line-height: 1.5; } .rs-card-meta code { background: var(--bg-elev); border-radius: 3px; padding: 1px 5px; font-size: 10px; } .rs-source { color: var(--accent); font-family: var(--mono); margin-left: 4px; } .rs-empty { font-style: italic; } .rs-cats-actuales { margin-top: 4px; } .rs-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rs-form select, .rs-form input { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 5px 8px; font: inherit; font-size: 12px; flex: 1; min-width: 80px; } .rs-form select { max-width: 140px; } .rs-form input { max-width: 130px; } .rs-form .rs-apply { white-space: nowrap; padding: 5px 10px; font-size: 12px; flex: 0; } .rs-card-done { opacity: 0.4; pointer-events: none; } .rs-card-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ok) 20%, var(--bg)); color: var(--ok); font-weight: 600; font-size: 13px; border-radius: 8px; padding: 10px; text-align: center; } .rs-loading { font-size: 12px; color: var(--text-dim); font-style: italic; padding: 8px; text-align: center; } /* ════════════════════════════════════════════════════════════════════ Reportes de usuarios (app) → curación (sql/016) Señal humana confiable de "evento mal clasificado". Tono danger para máxima visibilidad: es la señal de mayor prioridad de la cola. ════════════════════════════════════════════════════════════════════ */ /* Banner destacado en la card de revisión uno-a-uno. */ .report-banner { display: flex; gap: 12px; padding: 12px 16px; margin: 0 0 14px 0; background: color-mix(in srgb, var(--danger) 8%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); border-left: 3px solid var(--danger); border-radius: 10px; font-size: 13px; } .report-banner .report-icon { font-size: 20px; flex-shrink: 0; line-height: 1.2; } .report-banner .report-content { flex: 1; } .report-banner .report-headline { font-weight: 600; color: var(--danger); margin-bottom: 6px; } .report-banner .report-list { list-style: none; margin: 0 0 6px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .report-banner .report-list li { padding: 4px 8px; background: color-mix(in srgb, var(--danger) 8%, var(--bg)); border-radius: 6px; } .report-banner .report-reason { color: var(--text); } .report-banner .report-suggest { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--text-dim); } .report-banner .report-suggest b { color: var(--warn); } .report-banner .report-note { font-size: 11px; color: var(--text-dim); font-style: italic; margin-top: 2px; } /* Marcador 🚩 inline en filas de la cola / speed queue. */ .report-flag { font-size: 12px; } /* Link ↗ a la fuente original del evento (cola / speed queue). Abre en nueva pestaña para no perder posición en la lista al evaluar la clasificación. */ .src-link { display: inline-block; margin-left: 6px; padding: 0 4px; font-size: 12px; font-weight: 600; text-decoration: none; color: var(--text-dim); border-radius: 4px; } .src-link:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } /* Hint bajo el superpuestos sobre un track propio */ .rec-range { position: relative; height: 26px; margin-top: 2px; } .rec-range-track { position: absolute; left: 8px; right: 8px; top: 11px; height: 4px; border-radius: 4px; background: var(--tx-input); } .rec-range-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--tx-purple); } .rec-range input[type="range"] { position: absolute; inset: 0; width: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; height: 26px; } .rec-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: grab; width: 16px; height: 16px; border-radius: 50%; background: var(--tx-surface); border: 2px solid var(--tx-purple); box-shadow: var(--tx-shadow-card); margin-top: 0; } .rec-range input[type="range"]::-moz-range-thumb { pointer-events: auto; cursor: grab; width: 14px; height: 14px; border-radius: 50%; background: var(--tx-surface); border: 2px solid var(--tx-purple); } .rec-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; } .rec-range input[type="range"]::-moz-range-track { background: transparent; } .rec-range-lbl { font-size: 11px; font-weight: 700; color: var(--tx-purple-light); text-align: center; } /* Intervalo de fechas (calendario) */ .rec-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .rec-date { display: flex; flex-direction: column; gap: 3px; } .rec-date span { font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--tx-text-mute); } .rec-date input { height: 34px; border: 0; border-radius: 9px; background: var(--tx-input); color: var(--text); font: inherit; font-size: 12px; padding: 0 9px; min-width: 0; } .rec-select { height: 40px; border: 0; border-radius: 10px; background: var(--tx-input); color: var(--text); font: inherit; font-size: 13px; padding: 0 12px; cursor: pointer; -webkit-appearance: none; appearance: none; } /* Galería */ .rec-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .rec-main-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } /* Orden de la galería (Fecha / Precio / Confiabilidad — ↓ mayor a menor, ↑ inverso) */ .rec-sort { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 6px; border: 1px solid var(--tx-border); border-radius: var(--tx-r-full); background: var(--tx-surface); } .rec-sort-lbl { font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--tx-text-mute); padding: 0 5px; } .rec-sort-btn { border: none; background: transparent; color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 11px; border-radius: var(--tx-r-full); transition: background .12s, color .12s; } .rec-sort-btn:hover { color: var(--text); } .rec-sort-btn.on { background: var(--tx-purple); color: #fff; font-weight: 700; } .rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .rec-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 50px 20px; text-align: center; } .rec-empty-emoji { font-size: 42px; } .rec-empty-title { font-size: 15px; font-weight: 700; color: var(--text); } .rec-empty-sub { font-size: 12px; color: var(--text-dim); } /* Card */ .rec-card { background: var(--tx-surface); border: 1px solid var(--tx-border); border-radius: 16px; overflow: hidden; box-shadow: var(--tx-shadow-card); display: flex; flex-direction: column; transition: border-color .12s; } .rec-card.is-rec { border: 2px solid var(--tx-green); } .rec-cover { position: relative; height: 128px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--tx-cover-fallback); background-size: cover; background-position: center; flex-shrink: 0; } .rec-mono { font-size: 38px; font-weight: 900; color: var(--tx-purple-light); opacity: .85; } .rec-tier { position: absolute; top: 9px; left: 9px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--tx-r-full); background: rgba(255,255,255,0.95); font-size: 10px; font-weight: 800; box-shadow: 0 1px 4px rgba(0,0,0,0.18); } .rec-tier-high { color: #1f8a2b; } .rec-tier-mid { color: #9a6a00; } .rec-tier-low { color: #b3241f; } .rec-price-pill { position: absolute; top: 9px; right: 9px; display: inline-flex; align-items: center; padding: 4px 9px; border-radius: var(--tx-r-full); font-size: 10px; font-weight: 800; background: rgba(10,4,20,0.6); color: #fff; } .rec-price-pill.free { background: rgba(57,200,50,0.95); } .rec-flag-badge { position: absolute; bottom: 9px; left: 9px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--tx-r-full); background: var(--tx-gold); color: #fff; font-size: 9px; font-weight: 800; } /* Overlay-link de la portada: cubre toda la foto (por encima de los badges, que son informativos) y abre el link original al hacer click. Pista ↗ en hover. */ .rec-cover-link { position: absolute; inset: 0; z-index: 3; cursor: pointer; text-decoration: none; } .rec-cover-link::after { content: "↗"; position: absolute; bottom: 9px; right: 9px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--tx-r-full); background: rgba(10,4,20,0.6); color: #fff; font-size: 12px; font-weight: 800; opacity: 0; transition: opacity .12s; } .rec-cover-link:hover::after { opacity: 1; } .rec-cover-link:focus-visible { outline: 2px solid var(--tx-purple-light); outline-offset: -2px; } .rec-card-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .rec-card-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.25; } .rec-card-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); } .rec-card-cats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 1px; } .rec-cat-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--tx-r-full); background: var(--tx-purple-dim); color: var(--tx-purple-light); font-size: 10px; font-weight: 700; } .rec-cat-badge.extra { background: var(--tx-surface); border: 1px dashed var(--tx-purple-active); color: var(--tx-purple-alt); } .rec-sub-badge { padding: 3px 9px; border-radius: var(--tx-r-full); background: var(--tx-surface); border: 1px solid var(--tx-border); color: var(--text-dim); font-size: 10px; font-weight: 600; } .rec-card-foot { display: flex; gap: 8px; margin-top: auto; } .rec-btn-rec { height: 40px; flex: 1; border-radius: 12px; border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: var(--tx-purple); color: #fff; } .rec-btn-rec:hover { filter: brightness(1.06); } .rec-btn-rec.on { background: var(--tx-green); } .rec-btn-flag { height: 40px; padding: 0 12px; flex-shrink: 0; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; font: inherit; font-weight: 700; font-size: 13px; border: 1px solid var(--tx-border); background: var(--tx-surface); color: var(--text-dim); } .rec-btn-flag:hover { border-color: var(--tx-gold); color: var(--tx-gold); } .rec-btn-flag.on { border-color: var(--tx-gold); background: color-mix(in srgb, var(--tx-gold) 14%, transparent); color: var(--tx-gold); cursor: default; } @media (max-width: 900px) { .rec-layout { grid-template-columns: 1fr; } .rec-sidebar { position: static; max-height: none; border-left: 1px solid var(--tx-border); border-radius: var(--tx-r-lg); margin: 0 12px; } main.flush { padding-left: 12px; } } /* ════════════════════════════════════════════════════════════════════════════ PLANIFICADOR INSTAGRAM (/planificador) — composer + bandeja + calendario Traducción del design system trivux "Planificador Instagram". Tokens --tx-*. ════════════════════════════════════════════════════════════════════════════ */ .plan-wrap { display: flex; flex-direction: column; gap: 18px; } .plan-head { display: flex; align-items: flex-end; gap: 14px 22px; flex-wrap: wrap; } .plan-head-titles { display: flex; flex-direction: column; gap: 4px; } .plan-ig-status { margin-left: auto; font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: var(--tx-r-full); border: 1px solid var(--tx-border); } .plan-ig-status.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .plan-ig-status.off { color: var(--tx-text-mute); } /* Layout de página única (rework 2026-07-07): bandeja | canvas | generar */ .plan-composer-layout { display: grid; grid-template-columns: 270px 1fr 300px; gap: 16px; align-items: start; } .plan-bandeja-section { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; } .plan-cal-section { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } /* Chips genéricos (recomendador / formato) */ .plan-chips { display: flex; flex-wrap: wrap; gap: 7px; } .plan-chip { padding: 7px 13px; border-radius: var(--tx-r-full); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; background: var(--tx-surface); color: var(--text-dim); border: 1px solid var(--tx-border); white-space: nowrap; } .plan-chip.sm { padding: 6px 11px; font-size: 11px; border-radius: 9px; } .plan-chip:hover { border-color: var(--tx-purple-active); color: var(--text); } .plan-chip.on { background: var(--tx-purple); border-color: var(--tx-purple); color: #fff; font-weight: 700; } /* ── Bandeja ── */ .plan-bandeja-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .plan-bandeja-filters { display: flex; flex-direction: column; gap: 10px; } .plan-bandeja-rows { display: flex; flex-direction: column; gap: 9px; } .plan-bandeja-rows.wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 9px; } /* Toolbar de filtros de la bandeja: búsqueda + orden + dropdowns facetados */ .plan-bandeja-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .plan-bandeja-toolbar .rec-search { flex: 1 1 220px; height: 38px; } /* Orden (Fecha / Precio — ↑ asc, ↓ desc, toggle en el cliente) */ .plan-sort { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 5px; border: 1px solid var(--tx-border); border-radius: var(--tx-r-full); background: var(--tx-surface); } .plan-sort-lbl { font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--tx-text-mute); padding: 0 4px; } .plan-sort-btn { border: none; background: transparent; color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 5px 11px; border-radius: var(--tx-r-full); white-space: nowrap; } .plan-sort-btn:hover { color: var(--text); } .plan-sort-btn.on { background: var(--tx-purple); color: #fff; font-weight: 700; } /* Precio (todos / gratis / de pago) + rango de fecha (desde → hasta) */ .plan-precio-sel select { height: 38px; padding: 0 10px; border: 1px solid var(--tx-border); border-radius: var(--tx-r-full); background: var(--tx-surface); color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .plan-precio-sel select:hover { border-color: var(--tx-purple-active); color: var(--text); } .plan-fecha-range { display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 9px; border: 1px solid var(--tx-border); border-radius: var(--tx-r-full); background: var(--tx-surface); } .plan-fecha-range input[type="date"] { border: none; background: transparent; color: var(--text-dim); font: inherit; font-size: 12px; cursor: pointer; width: 118px; } .plan-fecha-range input[type="date"]:focus { outline: none; color: var(--text); } .plan-fecha-sep { font-size: 11px; color: var(--tx-text-mute); } /* Dropdowns facetados (categoría / comuna) —
nativo, menú absoluto */ .plan-drop { position: relative; } .plan-drop-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; cursor: pointer; border: 1px solid var(--tx-border); border-radius: var(--tx-r-full); background: var(--tx-surface); color: var(--text-dim); font-size: 12px; font-weight: 600; list-style: none; white-space: nowrap; user-select: none; } .plan-drop-btn::-webkit-details-marker { display: none; } .plan-drop-btn::marker { content: ""; } .plan-drop-btn:hover { border-color: var(--tx-purple-active); color: var(--text); } .plan-drop[open] .plan-drop-btn { border-color: var(--tx-purple-active); color: var(--text); } .plan-drop[open] .plan-drop-caret { transform: rotate(180deg); } .plan-drop-caret { font-size: 10px; transition: transform .15s; opacity: .7; } .plan-drop-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--tx-purple); color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .plan-drop-badge[hidden] { display: none; } /* la clase pisaba al atributo [hidden] → mostraba "0" */ /* Menú del dropdown. plan.js lo pasa a position:fixed calculado contra el viewport al abrir (nunca se corta a la derecha ni abajo). El default es un fallback right-anchored (para que sin JS tampoco se salga por la derecha). */ .plan-drop-menu { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; left: auto; min-width: 250px; max-width: 330px; padding: 8px; background: var(--tx-surface); border: 1px solid var(--tx-border); border-radius: 14px; box-shadow: var(--tx-shadow-card); } .plan-facet-list { max-height: 300px; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 3px; } .plan-facet-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; cursor: pointer; } .plan-facet-row:hover { background: var(--tx-input); } .plan-facet-row input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .plan-facet-tile { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; flex-shrink: 0; border-radius: 7px; background: var(--tx-input); color: var(--tx-purple-light); font-size: 13px; line-height: 1; } .plan-facet-tile img { width: 15px; height: 15px; object-fit: contain; } .plan-facet-name { flex: 1; font-size: 13px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plan-facet-count { font-size: 10px; font-weight: 800; color: var(--text-dim); background: var(--tx-input); padding: 1px 7px; border-radius: 999px; flex-shrink: 0; } .plan-facet-tick { color: var(--tx-purple-light); font-weight: 800; font-size: 12px; opacity: 0; flex-shrink: 0; } .plan-facet-row.on, .plan-facet-row:has(input:checked) { background: var(--tx-purple-dim); } .plan-facet-row.on .plan-facet-tile, .plan-facet-row:has(input:checked) .plan-facet-tile { background: var(--tx-purple); color: #fff; } .plan-facet-row.on .plan-facet-count, .plan-facet-row:has(input:checked) .plan-facet-count { background: var(--tx-purple); color: #fff; } .plan-facet-row.on .plan-facet-tick, .plan-facet-row:has(input:checked) .plan-facet-tick { opacity: 1; } .plan-facet-empty { padding: 14px 10px; text-align: center; font-size: 12px; color: var(--tx-text-mute); } .plan-row { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 13px; cursor: pointer; background: var(--tx-surface); border: 1px solid var(--tx-border); } .plan-row:hover { border-color: var(--tx-purple-active); } .plan-row.on { background: var(--tx-purple-dim); border-color: var(--tx-purple-active); } .plan-row input.plan-sel { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .plan-row-check { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; border: 1px solid var(--tx-border); background: var(--tx-surface); color: transparent; font-size: 12px; font-weight: 900; } .plan-row.on .plan-row-check { background: var(--tx-purple); border-color: var(--tx-purple); color: #fff; } .plan-row-cover { width: 50px; height: 50px; border-radius: 10px; overflow: hidden; background: var(--tx-cover-fallback); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; font-weight: 900; color: var(--tx-purple-light); opacity: .95; } .plan-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .plan-row-title { font-size: 14px; font-weight: 700; color: var(--text); } .plan-row-meta { font-size: 11px; color: var(--text-dim); } /* "Gratis" resaltado en verde dentro del precio de la fila (2026-07-08). */ .plan-row-free { color: var(--ok); font-weight: 700; } .plan-row-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; } .plan-estado-badge { font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: var(--tx-r-full); text-transform: uppercase; } .plan-estado-badge.planificado { background: var(--tx-purple-dim); color: var(--tx-purple-light); } .plan-estado-badge.publicado { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); } .plan-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .plan-rec-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 4px; border-radius: var(--tx-r-full); background: var(--tx-surface); border: 1px solid var(--tx-border); font-size: 10px; font-weight: 600; color: var(--text-dim); } .plan-rec-ini { width: 18px; height: 18px; border-radius: 999px; background: var(--tx-brand-gradient); color: #fff; font-size: 8px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .plan-tier { font-size: 11px; font-weight: 800; } .plan-tier.high { color: var(--ok); } .plan-tier.mid { color: var(--warn); } .plan-tier.low { color: var(--danger); } /* Badge Programado/Publicado (según ig_posts) — bajo la confiabilidad; tooltip con fechas. */ .plan-sched-badge { font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: var(--tx-r-full); text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; cursor: default; } .plan-sched-badge.prog { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); } .plan-sched-badge.pub { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); } .plan-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 46px 20px; text-align: center; } /* Form "Generar historia" (aside derecho del layout único) */ .plan-generar-head { display: flex; align-items: center; justify-content: space-between; } .plan-generar-title { font-size: 15px; font-weight: 800; color: var(--text); } .plan-sel-pill { font-size: 11px; font-weight: 700; color: var(--tx-purple-light); background: var(--tx-purple-dim); padding: 3px 10px; border-radius: var(--tx-r-full); } .plan-fgroup { display: flex; flex-direction: column; gap: 9px; } .plan-field { display: flex; flex-direction: column; gap: 5px; font-size: 10px; color: var(--tx-text-mute); font-weight: 600; } .plan-field input { height: 40px; border-radius: 10px; background: var(--tx-input); border: 1px solid var(--tx-border); padding: 0 11px; font: inherit; font-size: 13px; color: var(--text); outline: none; } .plan-field input:focus { border-color: var(--tx-purple); } .plan-field-hint { font-size: 9px; color: var(--tx-text-mute); font-weight: 400; } .plan-field-row { display: flex; gap: 8px; } .plan-field.grow { flex: 1; } .plan-field.w-time { width: 118px; } .plan-hint { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 10px; background: var(--tx-purple-dim); font-size: 11px; color: var(--tx-purple-light); font-weight: 600; } .plan-btn-primary { height: 48px; border-radius: 12px; border: none; cursor: pointer; background: var(--tx-brand-gradient); color: #fff; font: inherit; font-weight: 800; font-size: 14px; box-shadow: var(--tx-shadow-purple); } .plan-btn-primary:hover { filter: brightness(1.06); } .plan-btn-ghost { height: 38px; border-radius: 10px; border: 1px solid var(--tx-border); background: var(--tx-surface); color: var(--text-dim); font: inherit; font-weight: 600; font-size: 12px; cursor: pointer; } .plan-feedback:empty { display: none; } /* Modo edición del composer (publicación cargada desde el calendario) */ .plan-edit-badge { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; background: color-mix(in srgb, var(--tx-gold) 14%, transparent); color: var(--tx-gold); font-size: 12px; font-weight: 700; } .plan-edit-badge b { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plan-edit-cancel { margin-left: auto; border: none; background: none; color: var(--tx-gold); font-weight: 900; cursor: pointer; font-size: 13px; } .plan-btn-ghost.sm { height: 30px; font-size: 11px; padding: 0 12px; } /* Cards/filas editables (clic → cargar en el composer) */ .plan-post-card.editable, .plan-cola-row.editable { cursor: pointer; } .plan-post-card.editable:hover { border-color: var(--tx-purple); } .plan-cola-row.editable:hover { background: var(--tx-purple-dim); border-radius: 9px; } .plan-result { padding: 10px 12px; border-radius: 10px; font-size: 12px; font-weight: 600; margin-top: 4px; } .plan-result.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); } .plan-result-manual { margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--tx-text); } .plan-result-manual a { color: var(--tx-purple-light); } /* Thumb del asset 9:16 (render en background, con polling) */ .plan-asset-thumb { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--tx-input); color: var(--tx-muted); } .plan-asset-thumb img { width: 54px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; border: 1px solid var(--tx-border); flex-shrink: 0; } .plan-asset-thumb.ok { color: var(--ok); } .plan-asset-thumb.warn { color: var(--warn); } .plan-asset-thumb.err { color: var(--danger); } .plan-asset-spin { animation: plan-spin 1.4s linear infinite; display: inline-block; } @keyframes plan-spin { to { transform: rotate(360deg); } } /* Toggle Business Suite del composer */ .plan-manual-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--tx-input); font-size: 11px; cursor: pointer; } .plan-manual-check input { margin-top: 2px; accent-color: var(--tx-pink, #FF2D95); } .plan-manual-check:has(input:checked) { outline: 1px solid var(--tx-pink, #FF2D95); } /* ── Composer (columna central + aside derecho del layout único) ── */ .plan-composer-side { padding: 16px; background: var(--tx-surface); border: 1px solid var(--tx-border); border-radius: 16px; box-shadow: var(--tx-shadow-card); position: sticky; top: 62px; } .plan-composer-side form { display: flex; flex-direction: column; gap: 12px; } /* Picker de formato compacto (grilla 2×4 sobre el canvas) */ .plan-formatos { display: flex; flex-direction: column; gap: 6px; } .plan-formato-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; cursor: pointer; border: 1px solid var(--tx-border); background: var(--tx-surface); } .plan-formato-row:hover { border-color: var(--tx-purple-active); } .plan-formato-row.on { border-color: var(--tx-purple-active); background: var(--tx-purple-dim); } .plan-formato-emoji { font-size: 17px; flex-shrink: 0; } .plan-formato-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .plan-formato-txt b { font-size: 13px; font-weight: 600; color: var(--text); } .plan-formato-row.on .plan-formato-txt b { font-weight: 800; color: var(--tx-purple-light); } .plan-formato-txt span { font-size: 10px; color: var(--tx-text-mute); line-height: 1.3; } .plan-formato-dot { color: var(--tx-purple-light); font-weight: 800; font-size: 13px; visibility: hidden; } .plan-formato-row.on .plan-formato-dot { visibility: visible; } .plan-composer-main { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px; background: var(--tx-deep-bg); border-radius: 16px; border: 1px solid var(--tx-border); } .plan-canvas-hint { font-size: 11px; color: var(--tx-text-mute); } /* ── Canvas Sticker Pack P1 "Sticker apilado" (design 2026-07-07) ── Calcomanías con contorno blanco 4px + sombra dura + rotación suave (P1: -3/2/-2/3 grados); composición centrada en columna; tiles mosaico limpios (estilo 27). Temas: claro (Pastel Pop) / oscuro (Neón Nightlife) via vars. */ .spk { position: relative; width: 300px; height: 534px; border-radius: 26px; overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column; padding: 14px; box-sizing: border-box; box-shadow: 0 24px 60px rgba(10,4,30,0.45); --r0: -3deg; --r1: 2deg; --r2: -2deg; --r3: 3deg; /* rotaciones P1 */ } .spk-claro { background: #EDE5FB; border: 1px solid #D9C8F8; --spk-ink: #1A1326; --spk-sub: #6B6478; --spk-neut: #FFFFFF; --spk-neut-fg: #1A1326; --spk-ph: linear-gradient(160deg, #D9C8F8, #EDE5FB); } .spk-oscuro { background: linear-gradient(165deg, #2a0d5e 0%, #160730 55%, #0a0420 100%); border: 1px solid #2A1547; --spk-ink: #FFFFFF; --spk-sub: rgba(255,255,255,0.75); --spk-neut: #161620; --spk-neut-fg: #F0F0F5; --spk-ph: linear-gradient(160deg, #1a0845, #0a0420); } /* Colores de marca para stickers/tiles (manual: X siempre magenta; verde fondo = brandGreen) */ .bg-pu { background: #7B39EC; color: #fff; } .bg-pk { background: #FF2D95; color: #fff; } .bg-gr { background: #39C832; color: #fff; } .bg-al { background: #A855F7; color: #fff; } .bg-gl { background: #67EB4E; color: #1A1326; } .bg-neut { background: var(--spk-neut); color: var(--spk-neut-fg); } /* Sticker base: calcomanía con contorno blanco y sombra dura */ .spk-stk { border: 4px solid #fff; border-radius: 13px; box-shadow: 0 5px 10px rgba(0,0,0,0.22); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 2; box-sizing: border-box; background: #fff; color: #1A1326; padding: 5px 12px; } .spk-stk.pill { border-radius: 999px; } .spk-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; font-size: 12px; color: var(--spk-sub); font-weight: 600; } .spk-empty-emoji { font-size: 40px; } /* Hero (solo/multiple): marco blanco + foto polaroid + stickers apilados */ .spk-frame { position: absolute; inset: 6px; border: 4px solid #fff; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.14); z-index: 1; pointer-events: none; } .spk-match { position: absolute; top: 15px; right: 15px; border-radius: 999px; font-size: 10px; padding: 3px 9px; transform: rotate(var(--r3)); z-index: 3; border: 4px solid #fff; } .spk-photo { position: relative; height: 37%; margin: 26px 16px 0; border-radius: 14px; /* sin borde (2026-07-07) */ box-shadow: 0 6px 14px rgba(0,0,0,0.22); background: var(--spk-ph); background-size: cover; background-position: center; transform: rotate(var(--r2)); z-index: 2; flex-shrink: 0; } /* Título P1: dos stickers apilados (1ª palabra blanco/morado, resto magenta) */ .spk-title-1 { align-self: center; margin: 16px 14px 0; font-size: 21px; color: #7B39EC; transform: rotate(-4deg); max-width: 90%; } .spk-title-2 { align-self: center; margin-top: 4px; font-size: 21px; transform: rotate(3deg); max-width: 90%; } .spk-meta { align-self: center; margin-top: 10px; font-size: 9px; transform: rotate(var(--r2)); max-width: 88%; } .spk-thumbs { display: flex; justify-content: center; gap: 8px; margin-top: 12px; z-index: 2; } .spk-thumb { width: 40px; height: 40px; border-radius: 10px; border: 3px solid #fff; flex-shrink: 0; box-shadow: 0 4px 8px rgba(0,0,0,0.25); background: var(--spk-ph); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: #7B39EC; transform: rotate(var(--r2)); box-sizing: border-box; } .spk-thumb:nth-child(2n) { transform: rotate(var(--r1)); } .spk-thumb.more { background: #fff; color: #1A1326; font-size: 11px; } /* Tiles mosaico (estilo 27) */ .spk-header { align-self: center; margin-top: 4px; font-size: 13px; transform: rotate(var(--r1)); } .spk-header2 { align-self: center; margin-top: 6px; font-size: 19px; transform: rotate(var(--r0)); max-width: 92%; } .spk-tiles { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 7px; flex: 1; min-height: 0; margin-top: 10px; margin-bottom: 44px; z-index: 1; } .spk-tile { position: relative; border-radius: 12px; padding: 8px 9px; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; min-width: 0; overflow: hidden; box-sizing: border-box; } .spk-tile.span2 { grid-column: 1 / 3; } /* Tile con portada del evento: imagen de fondo + velo (el color de marca queda como fallback debajo mientras carga / si la imagen falla) */ .spk-tile.has-img { background-size: cover; background-position: center; } .spk-tile.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(10,4,32,0.88) 100%); z-index: 1; pointer-events: none; } .spk-tile.has-img .spk-t-a, .spk-tile.has-img .spk-t-b { color: #fff; } /* Con foto, el texto baja a la zona oscurecida por el velo (legibilidad) */ .spk-tile.has-img { justify-content: flex-end; } .spk-hero { grid-column: 1 / 3; position: relative; justify-content: flex-end; background: var(--spk-ph); background-size: cover; background-position: center; } .spk-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10,4,32,0.85) 100%); z-index: 1; pointer-events: none; } .spk-t-a { font-size: 12px; font-weight: 900; line-height: 1.05; position: relative; z-index: 2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .spk-t-a.lg { font-size: 15px; } .spk-t-a.hora { font-size: 19px; } .spk-t-b { font-size: 8px; font-weight: 700; opacity: 0.85; line-height: 1.2; position: relative; z-index: 2; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spk-t-a.over, .spk-t-b.over { color: #fff; } /* Overlays comunes (elementos del composer) */ .spk-texto { position: absolute; top: 15px; left: 14px; font-size: 12px; max-width: 55%; transform: rotate(-7deg); z-index: 4; } .spk-texto.low { top: auto; bottom: 88px; } /* en formatos de lista no pisa el header */ /* Ícono de formato: wrapper con herramientas (＋/−/✕), como los decals */ .spk-icon-wrap { position: absolute; bottom: 40px; right: 13px; display: inline-block; transform: rotate(var(--r1)); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); z-index: 3; } .spk-icon-wrap img { width: 100%; height: auto; display: block; pointer-events: none; } /* Decals: stickers de la galería (mover · escalar · quitar) */ .spk-decal { position: absolute; z-index: 4; display: inline-block; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); } .spk-decal img { width: 100%; height: auto; display: block; pointer-events: none; } .spk-decal-tools { position: absolute; top: -14px; right: -10px; display: none; gap: 2px; } .spk-decal:hover .spk-decal-tools, .spk-icon-wrap:hover .spk-decal-tools, .spk-texto:hover .spk-decal-tools { display: flex; } .spk-texto .spk-decal-tools { top: -18px; right: -6px; position: absolute; } .spk-decal-tools b { width: 17px; height: 17px; border-radius: 999px; background: #fff; color: #1A1326; font-size: 11px; line-height: 17px; text-align: center; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.3); font-weight: 900; } .spk-decal-tools b:hover { background: #FF2D95; color: #fff; } /* Textos editables inline (contenteditable): halo al enfocar */ .spk [data-slot] { cursor: text; } .spk [data-slot]:focus { outline: 2px dashed rgba(255,45,149,0.8); outline-offset: 2px; } .spk-brand { position: absolute; bottom: 12px; left: 12px; background: #fff; color: #1A1326; border: 4px solid #fff; border-radius: 999px; box-shadow: 0 5px 10px rgba(0,0,0,0.22); font-weight: 900; font-size: 11px; letter-spacing: 1px; padding: 3px 11px; transform: rotate(var(--r0)); z-index: 3; } .spk-brand .x { color: #FF2D95; } /* Galería de stickers del composer */ .plan-sticker-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-height: 132px; overflow-y: auto; padding: 8px; background: var(--tx-input); border-radius: 10px; } .plan-sticker-add { border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 4px; cursor: pointer; } .plan-sticker-add:hover { border-color: var(--tx-purple-active); background: var(--tx-surface); } .plan-sticker-add img { width: 100%; height: 26px; object-fit: contain; display: block; } /* Drag del composer: foto (reencuadre) y stickers (posición) */ .spk [data-drag] { cursor: grab; touch-action: none; user-select: none; } .spk [data-drag]:active { cursor: grabbing; } /* ── Estilos NUEVOS del canvas (design "Propuestas Estilos Nuevos", 2026-07-07) ── 6 re-vestidos CSS del MISMO markup: glass (E12 Glassmorphism), pop (E14 Pop-art cómic), vapor (E15 Vaporwave), graff (E19 Graffiti street), memphis (E20 Memphis 80s) y neon (E21 Neon outline). Se eligen con los chips de estilo del composer (mismo param `tema`; claro/oscuro siguen siendo P1). Sin rotaciones de calcomanía (--r*: 0) ni marco blanco exterior de P1. */ .spk-glass, .spk-pop, .spk-vapor, .spk-graff, .spk-memphis, .spk-neon { --r0: 0deg; --r1: 0deg; --r2: 0deg; --r3: 0deg; } .spk-glass .spk-frame, .spk-pop .spk-frame, .spk-vapor .spk-frame, .spk-graff .spk-frame, .spk-memphis .spk-frame, .spk-neon .spk-frame { display: none; } /* E12 Glassmorphism: fondo oscuro + blobs de color; paneles de vidrio esmerilado */ .spk-glass { background: radial-gradient(circle at 8% 0%, rgba(57,200,50,0.5), transparent 34%), radial-gradient(circle at 100% 22%, rgba(255,45,149,0.55), transparent 36%), radial-gradient(circle at 20% 100%, rgba(123,57,236,0.55), transparent 38%), #0C021E; border: 1px solid rgba(255,255,255,0.14); --spk-ink: #fff; --spk-sub: rgba(255,255,255,0.75); --spk-neut: rgba(255,255,255,0.10); --spk-neut-fg: #fff; --spk-ph: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)); } .spk-glass .spk-stk { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 14px; color: #fff; box-shadow: none; } .spk-glass .spk-title-1, .spk-glass .spk-title-2, .spk-glass .spk-header2 { background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; } .spk-glass .spk-meta { background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #67EB4E; letter-spacing: 1px; } .spk-glass .spk-tile { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 14px; color: #fff; } .spk-glass .spk-t-b { color: rgba(255,255,255,0.8); } .spk-glass .spk-photo { border: 1px solid rgba(255,255,255,0.25); border-radius: 14px; box-shadow: none; } .spk-glass .spk-brand { background: transparent; border: none; box-shadow: none; color: #fff; letter-spacing: 1px; } /* E14 Pop-art cómic: puntos Ben-Day + bordes gruesos INK; fondo rota por formato */ .spk-pop { background-color: #67EB4E; background-image: radial-gradient(rgba(26,19,38,0.16) 2px, transparent 2.4px); background-size: 12px 12px; border: 5px solid #1A1326; --spk-ink: #1A1326; --spk-sub: rgba(26,19,38,0.7); --spk-neut: #fff; --spk-neut-fg: #1A1326; --spk-ph: linear-gradient(160deg, #fff, #FFE94A); } .spk-pop.spk-f-dia, .spk-pop.spk-f-semana { background-color: #FF2D95; } .spk-pop.spk-f-top5 { background-color: #7B39EC; } .spk-pop .spk-stk { background: #fff; border: 3px solid #1A1326; border-radius: 12px; color: #1A1326; box-shadow: none; text-transform: uppercase; } .spk-pop .spk-title-1, .spk-pop .spk-title-2, .spk-pop .spk-header2 { background: transparent; border: none; color: #fff; -webkit-text-stroke: 1.6px #1A1326; } .spk-pop .spk-meta { background: transparent; border: none; color: #1A1326; } .spk-pop .spk-tile { background: #fff; border: 3px solid #1A1326; border-radius: 10px; color: #1A1326; } .spk-pop .spk-tile:nth-child(4n+2) { background: #FFE94A; } .spk-pop .spk-t-a { text-transform: uppercase; } .spk-pop .spk-photo { border: 3px solid #1A1326; border-radius: 12px; box-shadow: none; } .spk-pop .spk-brand { background: #1A1326; border: none; color: #fff; } /* E15 Vaporwave: grid en perspectiva + texto cromado degradado */ .spk-vapor { background: linear-gradient(180deg, #1a0630, #0C021E); border: 1px solid #2A1547; --spk-ink: #fff; --spk-sub: rgba(255,255,255,0.7); --spk-neut: rgba(191,128,252,0.10); --spk-neut-fg: #fff; --spk-ph: linear-gradient(160deg, #2a0d5e, #1a0630); } .spk-vapor::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background-image: linear-gradient(#FF2D95 1px, transparent 1px), linear-gradient(90deg, #7B39EC 1px, transparent 1px); background-size: 28px 28px; transform: perspective(160px) rotateX(62deg); transform-origin: bottom; opacity: 0.45; z-index: 0; pointer-events: none; } .spk-vapor .spk-stk { background: transparent; border: none; box-shadow: none; color: #67EB4E; letter-spacing: 2px; } .spk-vapor .spk-header::before { content: "▲ "; } .spk-vapor .spk-header::after { content: " ▲"; } .spk-vapor .spk-title-1, .spk-vapor .spk-title-2, .spk-vapor .spk-header2 { background: linear-gradient(180deg, #fff, #BF80FC 45%, #7B39EC 60%, #FF2D95); -webkit-background-clip: text; background-clip: text; color: transparent; caret-color: #BF80FC; letter-spacing: -0.02em; } .spk-vapor .spk-meta { color: #BF80FC; } .spk-vapor .spk-tile { background: rgba(191,128,252,0.10); border: 1px solid rgba(191,128,252,0.4); border-radius: 10px; color: #fff; } .spk-vapor .spk-t-a { letter-spacing: 0.5px; } .spk-vapor .spk-t-b { color: #BF80FC; letter-spacing: 1px; } .spk-vapor .spk-photo { border: 1px solid rgba(191,128,252,0.5); border-radius: 10px; box-shadow: none; } .spk-vapor .spk-brand { background: transparent; border: none; box-shadow: none; color: #fff; letter-spacing: 2px; } /* E19 Graffiti street: spray + cursiva inclinada con glow y sombra dura */ .spk-graff { background-color: #17171b; background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1.4px), radial-gradient(circle at 0% 0%, rgba(103,235,78,0.35), transparent 55%), radial-gradient(circle at 100% 100%, rgba(255,45,149,0.4), transparent 55%); background-size: 5px 5px, 320px 320px, 300px 300px; background-position: 0 0, -40px -30px, calc(100% + 40px) calc(100% + 30px); background-repeat: repeat, no-repeat, no-repeat; border: 1px solid #2a2a30; --spk-ink: #fff; --spk-sub: rgba(255,255,255,0.7); --spk-neut: rgba(255,255,255,0.06); --spk-neut-fg: #fff; --spk-ph: linear-gradient(160deg, #26262c, #101014); } .spk-graff .spk-stk { background: transparent; border: none; box-shadow: none; font-style: italic; text-transform: uppercase; color: #67EB4E; transform: skewX(-7deg); text-shadow: 0 0 10px rgba(103,235,78,0.5), 3px 4px 0 rgba(0,0,0,0.5); } .spk-graff .spk-title-1, .spk-graff .spk-title-2, .spk-graff .spk-header2 { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.5), 3px 4px 0 rgba(0,0,0,0.5); } .spk-graff .spk-tile { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 9px; color: #fff; transform: skewX(-3deg); } .spk-graff .spk-t-a { font-style: italic; text-shadow: 2px 2px 0 rgba(123,57,236,0.8); } .spk-graff .spk-t-b { color: #67EB4E; } .spk-graff .spk-photo { border: 2px solid rgba(255,255,255,0.2); border-radius: 10px; box-shadow: none; transform: rotate(-1.5deg); } .spk-graff .spk-brand { background: transparent; border: none; box-shadow: none; color: #fff; font-style: italic; transform: skewX(-8deg); text-shadow: 2px 2px 0 #7B39EC; } /* E20 Memphis geométrico 80s: fondo claro + confeti (círculos/triángulo/zigzag) */ .spk-memphis { background-color: #F3F0FA; background-image: radial-gradient(circle, #FF2D95 0 26px, transparent 27px), conic-gradient(from 200deg at 50% 40%, #39C832 0 46deg, transparent 46deg), radial-gradient(circle at 0% 100%, #7B39EC 0 40px, transparent 41px), repeating-linear-gradient(90deg, #1A1326 0 5px, transparent 5px 10px); background-repeat: no-repeat; background-size: 70px 70px, 60px 60px, 46px 46px, 60px 16px; background-position: 92% -14px, calc(100% + 10px) 60px, -6px calc(100% + 6px), 82% 82%; border: 1px solid #D9C8F8; --spk-ink: #1A1326; --spk-sub: #6B6478; --spk-neut: #fff; --spk-neut-fg: #1A1326; --spk-ph: linear-gradient(160deg, #fff, #EDE5FB); } .spk-memphis .spk-stk { background: #1A1326; border: none; border-radius: 999px; color: #fff; box-shadow: none; } .spk-memphis .spk-title-1, .spk-memphis .spk-title-2, .spk-memphis .spk-header2 { background: transparent; border-radius: 0; color: #1A1326; } .spk-memphis .spk-meta { background: transparent; border-radius: 0; color: #7B39EC; } .spk-memphis .spk-tile { background: #7B39EC; border: none; border-radius: 12px; color: #fff; } .spk-memphis .spk-tile:nth-child(4n+2) { background: #FF2D95; } .spk-memphis .spk-tile:nth-child(4n+3) { background: #39C832; } .spk-memphis .spk-tile:nth-child(4n) { background: #A855F7; } .spk-memphis .spk-t-b { color: rgba(255,255,255,0.85); } .spk-memphis .spk-photo { border: 3px solid #1A1326; border-radius: 14px; box-shadow: none; } .spk-memphis .spk-brand { background: #1A1326; border: none; color: #fff; } /* E21 Neon outline: solo contornos de neón con glow sobre negro */ .spk-neon { background: #050509; border: 1px solid #17171f; --spk-ink: #fff; --spk-sub: rgba(255,255,255,0.6); --spk-neut: transparent; --spk-neut-fg: #fff; --spk-ph: linear-gradient(160deg, #101018, #050509); } .spk-neon .spk-stk { background: transparent; border: 1.5px solid #67EB4E; border-radius: 999px; box-shadow: 0 0 10px rgba(103,235,78,0.5); color: #67EB4E; text-shadow: 0 0 8px rgba(103,235,78,0.7); letter-spacing: 1px; } .spk-neon .spk-title-1, .spk-neon .spk-title-2, .spk-neon .spk-header2 { background: transparent; border: none; border-radius: 0; box-shadow: none; color: transparent; -webkit-text-stroke: 1.3px #BF80FC; text-shadow: 0 0 14px rgba(123,57,236,0.6); caret-color: #BF80FC; letter-spacing: -0.02em; } .spk-neon .spk-tile { background: transparent; border: 1.5px solid #67EB4E; box-shadow: 0 0 12px rgba(103,235,78,0.35); border-radius: 10px; color: #67EB4E; } .spk-neon .spk-tile:nth-child(4n+2) { border-color: #A855F7; box-shadow: 0 0 12px rgba(168,85,247,0.35); color: #A855F7; } .spk-neon .spk-tile:nth-child(4n+3) { border-color: #FF2D95; box-shadow: 0 0 12px rgba(255,45,149,0.35); color: #FF2D95; } .spk-neon .spk-tile:nth-child(4n) { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.3); color: #fff; } .spk-neon .spk-t-a { text-shadow: 0 0 6px currentColor; } .spk-neon .spk-t-b { color: rgba(255,255,255,0.6); text-shadow: none; } .spk-neon .spk-photo { border: 1.5px solid #BF80FC; box-shadow: 0 0 14px rgba(191,128,252,0.4); border-radius: 10px; } .spk-neon .spk-brand { background: transparent; border: none; border-radius: 0; box-shadow: none; color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.4); } /* FIX escalado de portadas en los temas nuevos (2026-07-07): sus reglas `.spk- .spk-tile { background: ... }` usan el SHORTHAND, que resetea background-size/repeat (misma especificidad que la base, pero más abajo → gana) → las fotos quedaban a tamaño natural y repetidas. Esta regla (0-3-0, al final del bloque) re-afirma cover/center/no-repeat para TODO marco con foto en CUALQUIER tema; el inline solo aporta image + position (encuadre). */ .spk .spk-tile.has-img, .spk .spk-hero, .spk .spk-photo { background-size: cover; background-position: center; background-repeat: no-repeat; } /* Elementos del composer */ .plan-elem { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 12px; cursor: pointer; border: 1px solid var(--tx-border); background: var(--tx-surface); } .plan-elem.on { border-color: var(--tx-purple-active); background: var(--tx-purple-dim); } .plan-elem input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .plan-elem-emoji { font-size: 16px; } .plan-elem-txt { flex: 1; display: flex; flex-direction: column; } .plan-elem-txt b { font-size: 13px; font-weight: 700; color: var(--text); } .plan-elem-txt span { font-size: 10px; color: var(--tx-text-mute); } .plan-elem-pill { font-size: 10px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--tx-input); color: var(--tx-text-mute); } .plan-elem.on .plan-elem-pill { background: var(--tx-purple); color: #fff; } .plan-texto-input { height: 36px; border-radius: 10px; background: var(--tx-input); border: 1px solid var(--tx-border); padding: 0 11px; font: inherit; font-size: 12px; color: var(--text); outline: none; } .plan-sep { height: 1px; background: var(--tx-border); margin: 4px 0; } .plan-composer-actions { display: flex; gap: 8px; } .plan-composer-actions .plan-btn-primary { flex: 1; height: 44px; font-size: 13px; } .plan-composer-actions .plan-btn-ghost { height: 44px; } /* ── Calendario ── */ .plan-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .plan-cal-nav { display: flex; align-items: center; gap: 8px; } .plan-cal-arrow { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--tx-border); background: var(--tx-surface); color: var(--text-dim); cursor: pointer; font-size: 14px; } .plan-cal-hoy { font-size: 12px; color: var(--tx-purple-light); font-weight: 700; background: none; border: none; cursor: pointer; } .plan-cal-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-dim); } .plan-cal-legend span { display: inline-flex; align-items: center; gap: 6px; } .plan-cal-legend .dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; } .plan-cal-legend .dot.ok { background: var(--tx-green); } .plan-cal-legend .dot.prog { background: var(--tx-purple); } .plan-cal-legend .dot.draft { background: var(--tx-gold); } .plan-cal-legend .dot.err { background: var(--tx-red); } .plan-cal-legend .dot.manual { background: var(--tx-pink, #FF2D95); } .plan-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; } .plan-cal-daylabel { text-align: center; font-size: 11px; font-weight: 800; color: var(--tx-text-mute); letter-spacing: 0.5px; margin-bottom: 8px; } .plan-cal-day.hoy .plan-cal-daylabel { color: var(--tx-purple-light); } .plan-cal-daycell { min-height: 220px; background: var(--tx-surface); border: 1px solid var(--tx-border); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px; } .plan-cal-day.hoy .plan-cal-daycell { background: var(--tx-purple-dim); border-color: var(--tx-purple-active); } .plan-cal-empty { font-size: 11px; color: var(--tx-text-mute); text-align: center; margin: auto; } .plan-post-card { border-radius: 10px; border: 1px solid var(--tx-border); overflow: hidden; background: var(--tx-bg); } .plan-post-card.programado { border-color: var(--tx-purple-active); } .plan-post-card.error { border-color: color-mix(in srgb, var(--tx-red) 60%, transparent); } .plan-post-cover { height: 50px; background: linear-gradient(160deg, #2a0d5e, #0a0420); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; text-align: center; padding: 0 6px; } /* Thumb del asset 9:16 renderizado (2026-07-11): la card muestra lo que se publica */ .plan-post-cover.has-img { height: 74px; background-size: cover; background-position: center top; position: relative; } .plan-post-cover.has-img span { position: absolute; left: 4px; bottom: 4px; background: rgba(10,4,32,0.75); border-radius: 999px; padding: 1px 7px; font-size: 8px; } .plan-post-body { padding: 7px 8px; display: flex; flex-direction: column; gap: 4px; } .plan-post-name { font-size: 10px; font-weight: 800; color: var(--text); line-height: 1.15; } .plan-post-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .plan-post-hora { font-size: 9px; font-weight: 700; color: var(--text); } .plan-post-estado { font-size: 7px; font-weight: 800; padding: 2px 6px; border-radius: 999px; text-transform: uppercase; } .plan-post-estado.publicado { color: var(--tx-green); background: rgba(57,200,50,0.14); } .plan-post-estado.programado { color: var(--tx-purple-light); background: var(--tx-purple-dim); } .plan-post-estado.borrador { color: var(--tx-gold); background: color-mix(in srgb, var(--tx-gold) 14%, transparent); } .plan-post-estado.error { color: var(--tx-red); background: color-mix(in srgb, var(--tx-red) 12%, transparent); } .plan-post-estado.manual { color: var(--tx-pink, #FF2D95); background: color-mix(in srgb, var(--tx-pink, #FF2D95) 14%, transparent); } .plan-post-actions { display: flex; flex-wrap: wrap; gap: 4px; } .plan-post-btn { font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 7px; border: 1px solid var(--tx-border); background: var(--tx-surface); color: var(--text-dim); cursor: pointer; } a.plan-post-btn { text-decoration: none; display: inline-block; line-height: normal; } .plan-post-btn.bsuite, .plan-post-btn.png { border-color: color-mix(in srgb, var(--tx-pink, #FF2D95) 45%, transparent); } .plan-post-btn.ok:hover { color: var(--ok); border-color: var(--ok); } .plan-post-btn.del:hover { color: var(--danger); border-color: var(--danger); } .plan-post-btn.edit:hover, .plan-post-btn.dup:hover { color: var(--tx-purple-light); border-color: var(--tx-purple-active); } .plan-post-btn.save { color: #fff; background: var(--tx-purple); border-color: var(--tx-purple); } .plan-post-btn.save:hover { background: var(--tx-purple-active); } /* Drag & drop: card en vuelo + celda destino resaltada (2026-07-09) */ .plan-post-card[draggable="true"] { cursor: grab; } .plan-post-card.dragging { opacity: .5; cursor: grabbing; } .plan-cal-daycell.drop-hover { background: var(--tx-purple-dim); border-color: var(--tx-purple); border-style: dashed; } /* Edición inline de la card (reprogramar + renombrar). Al abrir, oculta foot/acciones. */ .plan-post-card.editing .plan-post-foot, .plan-post-card.editing .plan-post-actions { display: none; } .plan-post-card.editing { border-color: var(--tx-purple); } .plan-post-edit { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; } .plan-post-edit input { width: 100%; box-sizing: border-box; font: inherit; font-size: 10px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--tx-border); background: var(--tx-input); color: var(--text); } .plan-post-edit-row { display: flex; gap: 5px; } .plan-post-edit-row input[type="date"] { flex: 1 1 auto; min-width: 0; } .plan-post-edit-row input[type="time"] { width: 74px; flex: 0 0 auto; } .plan-post-edit-actions { display: flex; gap: 5px; } /* Multi-fecha del composer: filas extra date/time (2026-07-09) */ .plan-fechas-extra { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; } .plan-fecha-extra-row { display: flex; align-items: center; gap: 6px; } .plan-fecha-extra-row input[type="date"] { flex: 1 1 auto; min-width: 0; } .plan-fecha-extra-row input[type="time"] { width: 92px; flex: 0 0 auto; } .plan-fecha-extra-row input { font: inherit; font-size: 12px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--tx-border); background: var(--tx-input); color: var(--text); } .plan-fecha-extra-del { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--tx-border); background: var(--tx-surface); color: var(--text-dim); cursor: pointer; font-size: 11px; } .plan-fecha-extra-del:hover { color: var(--danger); border-color: var(--danger); } .plan-cal-below { display: flex; gap: 16px; margin-top: 18px; align-items: start; } .plan-cal-card { background: var(--tx-surface); border: 1px solid var(--tx-border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--tx-shadow-card); display: flex; flex-direction: column; gap: 8px; } .plan-cal-card.grow { flex: 1; } .plan-cal-card.stats { width: 280px; flex-shrink: 0; } .plan-cola-row { display: flex; align-items: center; gap: 10px; } .plan-cola-emoji { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(160deg, #2a0d5e, #0a0420); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } .plan-cola-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .plan-cola-txt b { font-size: 12px; font-weight: 700; color: var(--text); } .plan-cola-txt span { font-size: 10px; color: var(--text-dim); } .plan-cola-en { font-size: 10px; font-weight: 700; color: var(--tx-purple-light); background: var(--tx-purple-dim); padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .plan-cal-nada { font-size: 12px; color: var(--text-dim); } .plan-stats { display: flex; gap: 16px; } .plan-stats div { display: flex; flex-direction: column; } .plan-stats b { font-size: 24px; font-weight: 900; color: var(--text); } .plan-stats .ok b { color: var(--tx-green); } .plan-stats .prog b { color: var(--tx-purple-light); } .plan-stats span { font-size: 10px; color: var(--text-dim); } @media (max-width: 1100px) { .plan-composer-layout { grid-template-columns: 1fr 1fr; } .plan-composer-main { grid-column: 1 / -1; order: -1; } .plan-composer-side { position: static; } } @media (max-width: 900px) { .plan-composer-layout { grid-template-columns: 1fr; } .plan-cal-grid { grid-template-columns: repeat(2, 1fr); } .plan-cal-below { flex-direction: column; } .plan-cal-card.stats { width: auto; } } /* Login: link de ayuda + notas (recuperación) */ .login-help-link { color: var(--tx-purple-light); font-size: 12px; font-weight: 700; text-decoration: none; text-align: center; } .login-help-link:hover { text-decoration: underline; } .login-note { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 0; } .login-note a { color: var(--tx-purple-light); font-weight: 600; } .login-btn-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }