/* ---- Reels tab (founder reel scripts) ---- */ .reel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:16px; align-items:start; } .reel-card { background:#1C1917; border:1px solid rgba(245,239,230,0.08); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:12px; } .reel-card:hover { border-color:rgba(245,239,230,0.16); } .reel-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; } .reel-idea { font-weight:700; font-size:15px; color:#F5EFE6; line-height:1.35; } .reel-date { font-size:11px; color:#8A8478; white-space:nowrap; } .reel-angle { font-size:13px; color:#aca8a1; line-height:1.5; font-style:italic; } .reel-sec-label { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:#8A8478; margin-bottom:5px; } .reel-hooks { display:flex; flex-direction:column; gap:6px; } .reel-hook { font-size:13px; color:#B7B0A4; line-height:1.4; padding-left:10px; border-left:2px solid #2f2d29; } .reel-hook.chosen { border-left-color:#E04E24; color:#f1d4cb; } .reel-hook .hstyle { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:#6E695F; margin-right:6px; } .reel-scripts { display:flex; flex-direction:column; gap:10px; } .reel-script { background:#15130f00; border:1px solid #222741; border-radius:9px; padding:10px 11px; } .reel-script.chosen { border-color:#E04E24; } .reel-script-title { font-size:12px; font-weight:700; color:#B7B0A4; margin-bottom:5px; } .reel-beats { margin:0 0 6px; padding-left:16px; } .reel-beats li { font-size:12px; color:#B7B0A4; line-height:1.5; } .reel-onscreen { font-size:11px; color:#7e7b74; line-height:1.5; } .reel-onscreen b { color:#B7B0A4; font-weight:600; } .reel-cta { font-size:12px; color:#E04E24; font-weight:600; margin-top:5px; } /* Lifecycle pill, four states (Andres 2026-07-21 mockup). New/Ready stay quiet - they are still upstream of anything real happening. Filmed/Posted are filled: amber for "shot, not shipped", cream for "live" - two different weights of done so New/Ready don't read as equally finished on a fast scan down the list. */ .reel-pill { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:4px 10px; border-radius:20px; white-space:nowrap; } .reel-pill svg { flex:none; } .reel-pill.new { background:none; border:1px solid #2f2d29; color:#6E695F; } .reel-pill.ready { background:none; border:1px solid #3E5B48; color:#86BF9C; } .reel-pill .pill-dot { width:6px; height:6px; border-radius:50%; background:currentColor; } .reel-pill.filmed { background:#2f2015; color:#C99A4B; } .reel-pill.posted { background:#F5EFE6; color:#141210; } /* summary cards */ .reel-sumgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; align-items:start; } .reel-sum { position:relative; background:#1C1917; border:1px solid rgba(245,239,230,0.08); border-radius:12px; transition:border-color .12s,transform .12s; } .reel-sum:hover { border-color:rgba(245,239,230,0.16); transform:translateY(-1px); } .reel-sum-fav { position:absolute; top:8px; right:8px; z-index:1; } .reel-sum-body { display:block; width:100%; text-align:left; font:inherit; cursor:pointer; background:none; border:none; padding:16px 18px; display:flex; flex-direction:column; gap:10px; } .reel-sum-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-right:22px; } .reel-sum-idea { font-weight:700; font-size:14px; color:#F5EFE6; line-height:1.35; } .reel-sum-preview { font-size:12px; color:#B7B0A4; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .reel-sum-meta { font-size:11px; color:#6E695F; } /* detail modal */ .reel-modal { display:none; position:fixed; inset:0; z-index:120; background:rgba(10,9,7,0.72); backdrop-filter:blur(2px); padding:40px 16px; overflow-y:auto; } .reel-modal.visible { display:block; } .reel-modal-panel { position:relative; max-width:720px; margin:0 auto; background:#15130f; border:1px solid #2f2d29; border-radius:14px; padding:24px 26px; display:flex; flex-direction:column; gap:14px; } .reel-modal-close { position:absolute; top:12px; right:14px; background:none; border:none; color:#8A8478; font-size:26px; line-height:1; cursor:pointer; padding:2px 6px; } .reel-modal-close:hover { color:#F5EFE6; } .reel-modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding-right:28px; } .reel-modal-head .reel-idea { font-size:18px; } .reel-stbar { display:flex; gap:6px; flex-wrap:wrap; } /* Lifecycle pills. Sentence case and green-when-active (Andres 2026-07-21 mockup): the status is a state of completion, and orange is reserved here for the primary action. */ .reel-stbtn { font:inherit; font-size:12.5px; font-weight:600; letter-spacing:.01em; cursor:pointer; padding:7px 16px; border-radius:20px; background:none; border:1px solid transparent; color:#8A8478; } .reel-stbtn:hover { color:#B7B0A4; } .reel-stbtn.active { background:#2C4736; border-color:#2C4736; color:#9FD4B0; } .reel-hint { font-size:10px; text-transform:none; letter-spacing:0; color:#6E695F; font-weight:400; } .reel-modal .reel-hook, .reel-modal .reel-script { cursor:pointer; } .reel-modal .reel-hook:hover { border-left-color:#E04E24; } .reel-modal .reel-script:hover { border-color:#403d39; } .reel-sub { font-size:11px; color:#7e7b74; line-height:1.5; margin-top:3px; } .reel-sub b { color:#B7B0A4; font-weight:600; } /* ---- Reels tab: segmented view switch (Scripts | Inspiration) ---- */ /* Unified kit mode switcher: cream-fill active, never orange (README §Unified Content Kit). */ .reel-seg { display:inline-flex; gap:4px; background:#1C1917; border-radius:20px; padding:4px; } .reel-seg-btn { font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:6px 20px; border-radius:20px; background:none; border:none; color:#8A8478; } .reel-seg-btn:hover:not(.active) { color:#B7B0A4; } .reel-seg-btn.active { background:#F5EFE6; color:#141210; } /* Inbox <-> Archived toggle: a single ghost button top-right, not a pill tab */ .insp-archtoggle { font:inherit; font-size:12px; font-weight:700; cursor:pointer; padding:6px 14px; border-radius:20px; background:none; border:1px solid rgba(245,239,230,0.16); color:#8A8478; white-space:nowrap; } .insp-archtoggle:hover { border-color:#B7B0A4; color:#B7B0A4; } .insp-archtoggle.active { background:#F5EFE6; border-color:#F5EFE6; color:#141210; } /* ---- Collected reels (inspiration) masonry ---- */ /* CSS multi-column masonry: cards flow top-to-bottom per column, each thumb keeps its natural aspect ratio (9:16, 1:1, 4:5...) instead of being cropped to 9:16. */ /* Masonry via N explicit .insp-col children (built by inspRenderMasonry() in reels.js): cards round-robin ACROSS columns in import order (newest first), so the newest reels read left-to-right across the top row instead of piling top-to-bottom down column 1 (Andres, 2026-07-18: CSS `columns:` masonry fills column 1 first = column-major; he reads left-to-right, top-to-bottom). Same pattern as .adspy-grid. */ .insp-grid { display:flex; align-items:flex-start; gap:14px; } .insp-col { display:flex; flex-direction:column; gap:14px; flex:1 1 0; min-width:0; } .insp-card { background:#1C1917; border:1px solid rgba(245,239,230,0.08); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; } .insp-card:hover { border-color:rgba(245,239,230,0.16); } .insp-thumb { position:relative; display:block; width:100%; aspect-ratio:9/16; background:#100f0d; overflow:hidden; border:none; padding:0; margin:0; cursor:pointer; font:inherit; } .insp-thumb img { width:100%; height:100%; object-fit:cover; display:block; } .insp-thumb .insp-noimg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#6E695F; font-size:12px; text-align:center; padding:12px; } .insp-play { position:absolute; right:8px; bottom:8px; width:26px; height:26px; border-radius:50%; background:rgba(10,9,7,0.6); display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; } .insp-body { padding:11px 12px 12px; display:flex; flex-direction:column; gap:8px; } .insp-author { font-size:12px; font-weight:700; color:#F5EFE6; } .insp-caption { font-size:12px; color:#B7B0A4; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .insp-note { font-size:12px; color:#f1d4cb; line-height:1.45; border-left:2px solid #E04E24; padding-left:8px; } .insp-foot { display:flex; align-items:center; margin-top:2px; } .insp-acts { display:flex; align-items:center; gap:6px; width:100%; } /* Unified kit card actions: primary=cream pill, secondary=ghost border, destructive=borderless (README §Unified Content Kit). Dates dropped from the footer (Andres, 2026-07-13: "no necesito las fechas") so all three buttons fit without wrapping. */ .insp-btn { display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; padding:6px 12px; border-radius:20px; white-space:nowrap; } .insp-btn.keep { background:#F5EFE6; color:#141210; border:none; } .insp-btn.keep.on { background:#F5EFE6; color:#141210; } .insp-btn.adspy { background:none; border:1px solid rgba(245,239,230,0.16); color:#B7B0A4; } .insp-btn.arch { margin-left:auto; } .insp-btn.fav { background:none; border:none; color:#8A8478; padding:6px 8px; font-size:15px; line-height:1; } .insp-btn.fav:hover { color:#E04E24; } .insp-btn.fav.on { color:#E04E24; } .insp-btn.adspy:hover { border-color:#E04E24; color:#E04E24; } /* Icon-only destructive (matches the unified kit's ghost/destructive icon pattern - README §Unified Content Kit; Andres, 2026-07-13: "que también... sea el tarrito de basura"). */ .insp-btn.arch { background:none; border:none; color:#8A8478; padding:6px 8px; } .insp-btn.arch:hover { color:#C2694F; } /* ---- Inspiration player modal (plays the reel inline, no leaving Watchtower) ---- */ .insp-player-modal { display:none; position:fixed; inset:0; z-index:130; background:rgba(10,9,7,0.85); backdrop-filter:blur(3px); align-items:center; justify-content:center; padding:24px; } .insp-player-modal.visible { display:flex; } /* Height-first sizing: the frame's HEIGHT is the fixed dimension (a budget carved out of the viewport) and width is DERIVED from the 9:16 aspect-ratio, never the other way around. The previous width:400px + aspect-ratio-on-iframe approach let the flex column's max-height squeeze the iframe's rendered height (default flex-shrink:1) while its width stayed fixed - Drive's player then filled that squashed box by cropping the video instead of letterboxing it (Andres, 2026-07-14: "no vemos todo el video"). align-items:center keeps the panel from stretching children to a since-removed fixed width. */ .insp-player-panel { position:relative; max-width:92vw; max-height:88vh; background:#100f0d; border:1px solid #2f2d29; border-radius:16px; overflow:visible; display:flex; flex-direction:column; align-items:center; } #insp-player-frame { flex:none; height:min(72vh, 640px); max-width:92vw; border-radius:16px 16px 0 0; overflow:hidden; } .insp-player-panel iframe, .insp-player-panel video { height:100%; width:auto; max-width:92vw; aspect-ratio:9/16; border:none; display:block; background:#100f0d; } .insp-player-pending { height:100%; width:auto; aspect-ratio:9/16; max-width:92vw; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; font-size:13px; color:#8A8478; } .insp-player-acts, .insp-player-openig { width:100%; } .insp-player-close { position:absolute; top:-14px; right:-14px; z-index:3; width:32px; height:32px; border-radius:50%; background:#181714; border:1px solid #2f2d29; color:#F5EFE6; font-size:20px; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.4); } .insp-player-close:hover { background:rgba(224,78,36,0.85); } .insp-player-openig { display:block; text-align:center; padding:10px; font-size:12px; color:#8A8478; text-decoration:none; border-top:1px solid #2f2d29; } .insp-player-openig:hover { color:#B7B0A4; } .insp-player-acts { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-top:1px solid #2f2d29; } .insp-player-nav { flex:none; width:44px; height:44px; border-radius:50%; background:#181714; border:1px solid #2f2d29; color:#F5EFE6; font-size:22px; line-height:1; cursor:pointer; margin:0 14px; box-shadow:0 2px 8px rgba(0,0,0,0.4); } .insp-player-nav:hover { background:rgba(224,78,36,0.85); } /* ===== Reels funnel v2: Inspiration sub-toggle + Level-2 production scripts ===== */ /* Sub-toggle inside Inspiration (Competitor reels | Script ideas). Quieter than the top-level .reel-seg: a ghost underline row, not a filled pill, so the hierarchy reads level > sub-level at a glance. */ .reel-subseg { display:inline-flex; gap:2px; border-bottom:1px solid #2f2d29; } .reel-subseg-btn { font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:7px 14px; background:none; border:none; border-bottom:2px solid transparent; color:#8A8478; margin-bottom:-1px; } .reel-subseg-btn:hover:not(.active) { color:#B7B0A4; } .reel-subseg-btn.active { color:#F5EFE6; border-bottom-color:#E04E24; } /* Editable script table: numbered 2-col grid (VO/dialogue | Visual), HOOK row pinned. */ .prod-table { display:flex; flex-direction:column; border:1px solid #2f2d29; border-radius:10px; overflow:hidden; } .prod-tr { display:grid; grid-template-columns:30px 34px 1fr 1fr 158px 22px; gap:0; border-top:1px solid #2f2d29; } .prod-tr:first-child { border-top:none; } .prod-thead { background:#181714; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:#8A8478; } .prod-thead > div { padding:7px 10px; } .prod-tn { display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#6E695F; background:#15130f; border-right:1px solid #2f2d29; } /* Numbered rows are drag-reorderable: the number cell is the handle. Hover reveals a grip glyph over the number so the affordance is discoverable without adding a column. */ .prod-tn-drag { cursor:grab; position:relative; } .prod-tn-drag:active { cursor:grabbing; } .prod-tn-drag:hover { color:#B7B0A4; } .prod-tn-drag:hover::after { content:'\22EE\22EE'; position:absolute; left:3px; top:50%; transform:translateY(-50%); font-size:9px; letter-spacing:-2px; color:#6E695F; } .prod-row-ghost { opacity:0.35; } .prod-row-chosen { background:#1f1c17; } .prod-cell { box-sizing:border-box; font:inherit; font-size:13px; color:#F5EFE6; background:none; border:none; border-right:1px solid #2f2d29; padding:9px 10px; line-height:1.5; resize:none; overflow:hidden; min-height:44px; } .prod-cell.vis { color:#B7B0A4; } .prod-cell:focus { outline:none; background:#15130f; } .prod-rowdel { background:none; border:none; color:#6E695F; font-size:16px; line-height:1; cursor:pointer; padding:0; } .prod-rowdel:hover { color:#C2694F; } .prod-rowdel-spacer { display:block; } /* Scene state (Andres 2026-07-21): each line can be ticked off as filmed and can override where it is shot. A filmed line dims but stays readable - it is history, not clutter. */ .prod-scene-check { display:flex; align-items:center; justify-content:center; background:#15130f; border-right:1px solid #2f2d29; color:#6E695F; font-size:10px; } .prod-scene-check input { accent-color:#E04E24; width:14px; height:14px; cursor:pointer; margin:0; } .prod-tr.scene-done .prod-cell { color:#6E695F; text-decoration:line-through; text-decoration-color:#403d39; } .prod-tr.scene-done .prod-cell.vis { color:#57534b; } .prod-scene-loccell { display:flex; align-items:center; padding:4px 6px; border-right:1px solid #2f2d29; min-width:0; } .prod-scene-loc { width:100%; font-size:11px; padding:5px 6px; } /* An inherited (not overridden) scene location is quieter - it is a default, not a choice. */ .prod-scene-loc.inherited { color:#6E695F; } /* Filmed-scene counter, e.g. "4/7". Turns brand orange when a script is fully in the can. */ .prod-progress { font-size:11px; font-weight:700; color:#8A8478; letter-spacing:.02em; margin-left:8px; } .prod-progress.complete { color:#E04E24; } /* Props / Outfits: open chip lists (Andres 2026-07-21). Type + Enter adds, backspace on an empty input eats the last one. Closed SKU lists (bags/accessories) keep .prod-bag-chip. */ .prod-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:6px; border:1px solid #2f2d29; border-radius:8px; background:#15130f; } .prod-chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:#F5EFE6; background:#211e19; border:1px solid #403d39; border-radius:20px; padding:4px 6px 4px 10px; } .prod-chip-x { background:none; border:none; color:#6E695F; font-size:14px; line-height:1; cursor:pointer; padding:0 2px; } .prod-chip-x:hover { color:#C2694F; } .prod-chip-input { flex:1; min-width:110px; font:inherit; font-size:12px; color:#F5EFE6; background:none; border:none; padding:4px 2px; } .prod-chip-input:focus { outline:none; } .prod-chip-input::placeholder { color:#57534b; } /* By-location cut, third pass (Andres 2026-07-21 mockup): a row of chips, one per stop - every place visible at once with its own count, no dropdown to open first. Picking one shows only its scenes (left, split per script) and its map (right, sticky). */ .prod-locchips { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; } .prod-locchip { display:flex; flex-direction:column; gap:2px; text-align:left; font:inherit; cursor:pointer; padding:9px 15px; border-radius:12px; background:#181714; border:1px solid #2f2d29; } .prod-locchip:hover { border-color:#403d39; } .prod-locchip-name { font-size:13.5px; font-weight:700; color:#F5EFE6; } .prod-locchip-meta { font-size:11px; color:#8A8478; } .prod-locchip.active { background:#2A1712; border-color:#8A3320; } .prod-locchip.active .prod-locchip-name { color:#F0A48A; } .prod-locchip.done:not(.active) .prod-locchip-name { color:#8A8478; } .prod-locchip.done:not(.active) .prod-locchip-meta { color:#86BF9C; } .prod-loc-2col { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; } .prod-loc-right { position:sticky; top:14px; } .prod-locmap { border:1px solid #2f2d29; border-radius:10px; overflow:hidden; } /* Left as Google renders it - a hue-shifted "dark mode" map is harder to read than the real thing, and this is the one panel that gets checked mid-street. */ .prod-locmap iframe { display:block; width:100%; height:190px; border:0; } /* No pin yet: a generic map-shaped placeholder (diagonal hatch + a centered pin) rather than a blank box, so the panel still reads as "this is where the map goes". */ .prod-locmap-placeholder { display:flex; align-items:center; justify-content:center; height:190px; color:#403d39; background-image:repeating-linear-gradient(135deg, #211e19 0 10px, #181613 10px 20px); } .prod-locmap-placeholder svg { width:30px; height:30px; } .prod-locmap-foot { display:flex; flex-direction:column; gap:4px; align-items:flex-start; padding:12px 14px; background:#181714; border-top:1px solid #2f2d29; } .prod-locmap-name { font-size:14px; font-weight:700; color:#F5EFE6; } .prod-locmap-addr { font-size:12px; color:#8A8478; line-height:1.4; } .prod-locmap-addr.muted { color:#57534b; } .prod-locmap-action { display:flex; align-items:center; gap:7px; width:100%; box-sizing:border-box; margin-top:5px; font:inherit; font-size:12.5px; font-weight:600; color:#B7B0A4; text-align:left; cursor:pointer; padding:9px 11px; border-radius:9px; background:none; border:1px solid #2f2d29; } .prod-locmap-action:hover { border-color:#403d39; color:#F5EFE6; } .prod-locmap-action svg { flex:none; color:#6E695F; } .prod-locmap-caption { padding:0 14px 13px; font-size:11.5px; color:#6E695F; line-height:1.5; background:#181714; } @media (max-width: 1000px) { .prod-loc-2col { grid-template-columns:1fr; } .prod-loc-right { position:static; } } .prod-locgroup { border:1px solid #2f2d29; border-radius:12px; overflow:hidden; margin-bottom:12px; } .prod-locgroup-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:13px 16px; background:#181714; cursor:pointer; } .prod-locgroup:not(.collapsed) .prod-locgroup-head { border-bottom:1px solid #2f2d29; } .prod-locgroup-open { font:inherit; font-size:15px; font-weight:700; color:#F5EFE6; background:none; border:none; padding:0; cursor:pointer; letter-spacing:.01em; } .prod-locgroup-open:hover { color:#E04E24; } .prod-locgroup-badge { display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size:11.5px; font-weight:700; color:#86BF9C; background:#1E2E24; border-radius:20px; padding:5px 12px; } .prod-locgroup-badge .pill-dot { width:6px; height:6px; border-radius:50%; background:currentColor; } .prod-locgroup-badge.done { color:#8A8478; background:none; border:1px solid #2f2d29; } .prod-locgroup-collapsed-hint { padding:11px 16px; font-size:12px; font-style:italic; color:#57534b; cursor:pointer; } .prod-locscene { display:flex; align-items:center; gap:12px; padding:11px 16px; border-top:1px solid #211e19; font-size:13.5px; cursor:pointer; } .prod-locscene:first-of-type { border-top:none; } .prod-locscene input { appearance:none; width:19px; height:19px; flex:none; margin:0; border-radius:50%; border:1.5px solid #403d39; cursor:pointer; } .prod-locscene input:checked { background:#86BF9C; border-color:#86BF9C; } .prod-locscene-n { flex:none; width:32px; font-size:10.5px; font-weight:700; color:#6E695F; letter-spacing:.04em; } .prod-locscene-vo { color:#F5EFE6; } .prod-locscene.scene-done .prod-locscene-vo { color:#57534b; text-decoration:line-through; text-decoration-color:#403d39; } /* Pull list (Andres 2026-07-21, second pass): a third mode of Scripts, not its own page - "no me gusta que sean paginas diferentes". Standing aggregate over every 'ready' script, styled like the ticket's own Call sheet card (icon+title, chip rows) rather than a bespoke look. Read-only: no packed ticks, no ×N counts - Andres owns one of each physical item, so a count of how many scripts want it is noise, not a quantity to pack. */ .pull-meta { font-size:12px; color:#8A8478; margin-bottom:12px; } .pull-cols { display:grid; grid-template-columns:1fr 1fr; gap:0; } .pull-cols .day-col { padding:16px 18px; border-right:1px solid #2f2d29; } .pull-cols .day-col:last-child { border-right:none; } .day-empty, .pull-empty { font-size:12px; color:#57534b; line-height:1.5; } .day-script { display:flex; align-items:center; gap:8px; padding:6px 0; } .day-script-title { flex:1; text-align:left; font:inherit; font-size:12.5px; font-weight:700; color:#B7B0A4; background:none; border:none; padding:0; cursor:pointer; } .day-script-title:hover { color:#E04E24; } .pull-gear-col .prod-cs-title { margin-bottom:14px; } .pull-gear-col .prod-cs-block { padding:12px 0; border-top:1px solid #211e19; } .pull-gear-col .prod-cs-block:first-of-type { border-top:none; padding-top:0; } /* Static chip - read-only, so no hover/click affordance like the editable call-sheet ones. */ .prod-cs-chip.static { cursor:default; } .prod-cs-chip.static:hover { border-color:#2f2d29; color:#8A8478; } @media (max-width: 900px) { .pull-cols { grid-template-columns:1fr; } .pull-cols .day-col { border-right:none; border-bottom:1px solid #2f2d29; } } /* Escape hatch for a mis-tagged script (Andres 2026-07-21: "eso no va a pasar mucho, tampoco tiene mucho protagonismo") - a plain small select, not the big pill bar from the ticket page, and the "everything else" list stays collapsed until asked for. */ .pull-status-select { flex:none; width:auto; font:inherit; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:4px 7px; border-radius:6px; background:none; border:1px solid #2f2d29; color:#8A8478; cursor:pointer; box-sizing:border-box; } .pull-status-select:focus { outline:none; border-color:#403d39; } .pull-toggle-all { display:block; margin:12px auto 0; font:inherit; font-size:12px; font-weight:600; cursor:pointer; padding:7px 16px; border-radius:20px; background:none; border:1px solid #2f2d29; color:#6E695F; } .pull-toggle-all:hover { border-color:#403d39; color:#B7B0A4; } .pull-other { margin-top:12px; padding:16px 18px; } /* Location field + place search (Andres 2026-07-21: "me parece feo tener listas donde puedo elegir... escribo el nombre del cafe y ya esta pineado"). The field is a button showing the current place; clicking opens a search popover over everything else. */ .prod-locfield { display:block; width:100%; text-align:left; font:inherit; font-size:13px; color:#F5EFE6; background:#211e19; border:1px solid #403d39; border-radius:8px; padding:8px 10px; cursor:pointer; } .prod-locfield:hover { border-color:#6E695F; } .prod-locfield.empty { color:#57534b; } .prod-scene-loc.prod-locfield { font-size:11px; padding:5px 7px; border-radius:6px; background:none; border-color:#2f2d29; } .prod-scene-loc.prod-locfield:hover { border-color:#403d39; } /* An inherited scene location is a default, not a choice - keep it quiet. */ .prod-scene-loc.inherited { color:#6E695F; } .loc-pop { position:fixed; z-index:60; background:#181714; border:1px solid #403d39; border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,0.55); overflow:hidden; } .loc-pop-input { width:100%; font:inherit; font-size:13.5px; color:#F5EFE6; background:#15130f; border:none; border-bottom:1px solid #2f2d29; padding:11px 12px; } .loc-pop-input:focus { outline:none; } .loc-pop-input::placeholder { color:#57534b; } .loc-pop-list { max-height:290px; overflow-y:auto; } .loc-pop-head { font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:#6E695F; padding:9px 12px 4px; } .loc-pop-item { display:block; width:100%; text-align:left; font:inherit; font-size:13px; color:#F5EFE6; background:none; border:none; padding:8px 12px; cursor:pointer; } .loc-pop-item:hover { background:#211e19; } .loc-pop-item.plain { color:#B7B0A4; font-size:12.5px; border-top:1px solid #211e19; } .loc-pop-name { display:block; } .loc-pop-sub { display:block; font-size:11px; color:#8A8478; margin-top:1px; line-height:1.35; } .loc-pop-note { font-size:12px; color:#57534b; padding:6px 12px 10px; } /* Maps pin next to the script's location picker. */ .prod-loc-pin { display:inline-block; margin-top:6px; font-size:11px; font-weight:700; color:#8A8478; text-decoration:none; background:none; border:none; padding:0; cursor:pointer; } .prod-loc-pin:hover { color:#E04E24; } .prod-addrow { align-self:flex-start; margin-top:8px; font:inherit; font-size:12px; font-weight:700; cursor:pointer; padding:6px 14px; border-radius:20px; background:none; border:1px solid #2f2d29; color:#B7B0A4; } .prod-addrow:hover { border-color:#403d39; color:#F5EFE6; } .prod-empty-hint { font-size:12px; color:#8A8478; margin-bottom:8px; line-height:1.5; } /* "Convert to script" affordances */ .reel-convert-row { margin:-2px 0 2px; } .reel-convert-btn { font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:8px 16px; border-radius:20px; background:#F5EFE6; color:#141210; border:none; } .reel-convert-btn:hover { background:#fff; } .insp-btn.script { background:none; border:1px solid rgba(245,239,230,0.16); color:#B7B0A4; } .insp-btn.script:hover { border-color:#E04E24; color:#E04E24; } /* Production ticket editor - a routable page now, not a modal (Andres 2026-07-20: "no quiero que sea un lightbox, sino que sea una página"). */ .prod-page-title { display:block; width:100%; font:inherit; font-weight:700; font-size:26px; color:#F5EFE6; background:none; border:none; border-bottom:1px solid transparent; padding:4px 0; margin:6px 0 20px; } .prod-page-title:hover { border-bottom-color:#2f2d29; } .prod-page-title:focus { outline:none; border-bottom-color:#E04E24; } .prod-page-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .prod-page-crumb { display:flex; align-items:center; gap:10px; } .prod-back-btn { font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:6px 4px; background:none; border:none; color:#8A8478; } .prod-back-btn:hover { color:#F5EFE6; } .prod-page-eyebrow { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#6E695F; } .prod-status-bar { display:inline-flex; gap:6px; flex-wrap:wrap; } /* Fixed side arrows for the page-level Prev/Next (not tied to a modal, so positioned against the viewport itself - same visual language as .insp-player-nav). */ .prod-page-nav { position:fixed; top:50%; transform:translateY(-50%); z-index:60; width:44px; height:44px; border-radius:50%; background:#181714; border:1px solid #2f2d29; color:#F5EFE6; font-size:22px; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.4); } .prod-page-nav:hover { background:rgba(224,78,36,0.85); } /* left offset clears the 226px sidebar (.top-nav in shell.css) - a raw left:18px sat on top of it instead of the content area (Andres 2026-07-20 screenshot). */ .prod-page-nav.prev { left:244px; } .prod-page-nav.next { right:18px; } @media (max-width:900px) { .prod-page-nav.prev { left:18px; } /* sidebar collapses to icons-only below this width */ } .prod-callsheet-card, .prod-notes-card { display:flex; flex-direction:column; gap:2px; } .prod-callsheet-card .card-header, .prod-notes-card .card-header { margin-bottom:12px; } .prod-script-foot { display:flex; align-items:center; gap:10px; margin-top:10px; } .prod-mark-btn { margin-left:auto; font:inherit; font-size:13px; font-weight:700; cursor:pointer; padding:9px 18px; border-radius:20px; background:#E04E24; border:1px solid #E04E24; color:#fff; } .prod-mark-btn:hover { background:#C84420; border-color:#C84420; } .prod-secondary-actions { display:flex; align-items:center; gap:10px; margin-top:14px; } .prod-secondary-actions .prod-save-state { margin-right:auto; } /* Category/Status/Bag dropdowns - replace the old button-bar toggles for a cleaner look (Andres 2026-07-19: "no tiene que estar asi... con un dropdown, que se vea mas limpio"). */ .prod-select { width:100%; font:inherit; font-size:13px; color:#F5EFE6; background:#100f0d; border:1px solid #2f2d29; border-radius:10px; padding:9px 12px; box-sizing:border-box; cursor:pointer; } .prod-select:focus { outline:none; border-color:#403d39; } .prod-input { width:100%; font:inherit; font-size:13px; color:#F5EFE6; background:#100f0d; border:1px solid #2f2d29; border-radius:10px; padding:9px 12px; box-sizing:border-box; } .prod-input::placeholder { color:#6E695F; } .prod-input:focus { outline:none; border-color:#403d39; } /* Secondary field nested under a primary dropdown (Location under Category). */ .prod-subfield { margin-top:8px; } .prod-subfield-label { display:block; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#6E695F; margin-bottom:5px; } .prod-script, .prod-notes, .prod-props { width:100%; font:inherit; color:#F5EFE6; background:#100f0d; border:1px solid #2f2d29; border-radius:10px; padding:12px 13px; line-height:1.6; resize:vertical; box-sizing:border-box; } .prod-props { min-height:56px; font-size:13px; color:#B7B0A4; } .prod-props:focus { outline:none; border-color:#403d39; } /* Accessories: multi-select chips (also reused generically for any future chip picker). */ .prod-bags { display:flex; flex-wrap:wrap; gap:7px; } .prod-bag-chip { font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; padding:5px 12px; border-radius:20px; background:none; border:1px solid #2f2d29; color:#8A8478; } .prod-bag-chip:hover { border-color:#403d39; color:#B7B0A4; } .prod-bag-chip.on { background:#E04E24; border-color:#E04E24; color:#fff; } .reel-sum-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } /* Scripts list: flat table, Ads-tab style (Andres 2026-07-19: "usa el estilo... para ads"). .ads-table columns default to right-aligned (built for numeric metrics) - every column here is text, so left-align across the board and let the status pill sit inline. */ .prod-list-eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#6E695F; } .prod-list-h1 { margin:2px 0 18px; font-size:26px; font-weight:700; color:#F5EFE6; } .prod-list-table th, .prod-list-table td { text-align:left; } .prod-list-table tbody tr { cursor:pointer; } .prod-list-table .reel-pill { display:inline-flex; } .prod-cell-pin { display:inline-flex; align-items:center; gap:6px; color:#B7B0A4; } .prod-cell-pin svg { flex:none; color:#6E695F; } .prod-cell-bag { display:inline-flex; align-items:center; gap:7px; color:#B7B0A4; } .prod-bag-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:none; border:1.5px solid #6E695F; flex:none; } .prod-scenes-cell { display:inline-flex; align-items:center; gap:9px; } .prod-scenes-bar { width:64px; height:4px; border-radius:3px; background:#2f2d29; overflow:hidden; flex:none; } .prod-scenes-fill { display:block; height:100%; border-radius:3px; background:#C99A4B; } .prod-scenes-frac { font-size:12px; color:#8A8478; white-space:nowrap; } .prod-scenes-frac.complete { color:#86BF9C; } .prod-acc-badge { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.04em; color:#8A8478; border:1px solid #2f2d29; border-radius:5px; padding:3px 7px; margin:1px 5px 1px 0; } /* "+ New" primary pill (orange fill), matching the app's other primary actions (Competitors' "+ Add competitor", Today's "Review"). */ .prod-new-btn { font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:7px 16px; border-radius:20px; background:#E04E24; border:1px solid #E04E24; color:#fff; } .prod-new-btn:hover { background:#C84420; border-color:#C84420; } .prod-script { min-height:280px; font-size:14px; white-space:pre-wrap; } .prod-notes { min-height:70px; font-size:13px; color:#B7B0A4; } .prod-script:focus, .prod-notes:focus { outline:none; border-color:#403d39; } /* Silent by default - only holds a failure message (Andres 2026-07-20: no "Saved · ..." text needed). */ .prod-save-state { font-size:11px; color:#6E695F; } .prod-save-state.error { color:#C2694F; } /* Icon-only ghost buttons for Delete / Back-to-source, matching the Inspiration grid's restore/trash icon language instead of text pill buttons (Andres 2026-07-20: "esos UIs tan feos"). Back-to-source is a neutral undo; Delete is destructive (red on hover). */ .prod-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:none; border:1px solid #2f2d29; color:#8A8478; cursor:pointer; } .prod-icon-btn:hover { border-color:#403d39; color:#F5EFE6; } .prod-icon-btn.danger:hover { border-color:#C2694F; color:#C2694F; } /* Production ticket, redesigned 2026-07-21 (third pass, Andres's own mockup): back to two columns. Left = an always-visible Call sheet card (compact rows, not a form you open); right = the guion as a table of scenes, VOICE/DIALOGUE and VISUAL side by side, a status pill per row that IS the "filmed" toggle. */ .prod-2col { display:grid; grid-template-columns:300px 1fr; gap:22px; align-items:start; max-width:1180px; } #prod-page-body { max-width:1180px; } .prod-crumb-nav { display:inline-flex; gap:4px; margin-left:4px; } .prod-crumb-nav button { font:inherit; font-size:15px; line-height:1; cursor:pointer; width:24px; height:24px; border-radius:50%; background:none; border:1px solid #2f2d29; color:#8A8478; padding:0; } .prod-crumb-nav button:hover { border-color:#403d39; color:#F5EFE6; } /* Call sheet card. */ .prod-cs-card { padding:18px; } .prod-cs-title { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:700; color:#F5EFE6; margin-bottom:14px; } .prod-cs-title svg { color:#8A8478; } .prod-cs-row { display:flex; align-items:center; gap:11px; padding:11px 0; border-top:1px solid #211e19; position:relative; } .prod-cs-row:first-of-type { border-top:none; padding-top:0; } .prod-cs-ico { display:flex; color:#6E695F; } .prod-cs-rowbody { flex:1; min-width:0; } .prod-cs-label { display:block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#6E695F; } .prod-cs-value { display:block; font-size:14.5px; font-weight:700; color:#F5EFE6; margin-top:1px; } .prod-cs-value.none { color:#57534b; font-weight:400; } .prod-cs-rowlink { font:inherit; font-size:12.5px; font-weight:600; color:#8A8478; background:none; border:none; cursor:pointer; padding:4px; white-space:nowrap; } .prod-cs-rowlink:hover { color:#E04E24; } .prod-cs-chevron { color:#57534b; font-size:11px; pointer-events:none; } /* The bag row's real