/* ============================================================================ CONSTRUCTOR GUANTAP · app.css (UI del tool — NO de los slides) Se carga después de system.css/templates.css para recuperar el . ============================================================================ */ :root{ --naranja:#F15A22; --tinta:#211A15; --crema:#F6EEDD; --ui-bg:#E7E3DA; /* fondo general del tool */ --ui-panel:#FBFAF6; /* paneles */ --ui-panel-2:#F2EFE8; /* hover / sutil */ --ui-stage:#D9D4C8; /* lienzo donde flotan los slides */ --ui-line:rgba(33,26,21,.12); --ui-line-2:rgba(33,26,21,.22); --ui-fg:#211A15; --ui-soft:rgba(33,26,21,.58); --ui-faint:rgba(33,26,21,.40); --ui-radius:11px; --topbar-h:58px; --ui-sans:ui-sans-serif,system-ui,-apple-system,"SF Pro Text","Segoe UI",sans-serif; --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --chat-w:368px; --insp-w:360px; } /* recuperar el body (system.css lo pinta oscuro y New Kansas) */ html,body{ background:var(--ui-bg) !important; } body{ font-family:var(--ui-sans) !important; color:var(--ui-fg) !important; height:100vh; overflow:hidden; cursor:auto !important; } button,input,textarea,select{ font-family:var(--ui-sans); } .muted{ color:var(--ui-soft); } /* ---------- TOPBAR ---------- */ .topbar{ height:var(--topbar-h); display:flex; align-items:center; gap:20px; padding:0 18px; background:var(--ui-panel); border-bottom:1px solid var(--ui-line); position:relative; z-index:5; } .brand{ display:flex; align-items:center; gap:10px; white-space:nowrap; } .brand__dot{ width:14px; height:14px; border-radius:50%; background:var(--naranja); box-shadow:0 0 0 4px rgba(241,90,34,.16); } .brand__name{ font-family:"New Kansas",var(--ui-sans); font-size:18px; font-weight:500; } .brand__name b{ font-weight:900; } .deck-title{ flex:1; max-width:520px; font-size:15px; font-weight:600; color:var(--ui-fg); background:var(--ui-panel-2); border:1px solid transparent; border-radius:8px; padding:9px 14px; transition:border-color .15s,background .15s; } .deck-title:hover{ border-color:var(--ui-line); } .deck-title:focus{ outline:none; border-color:var(--naranja); background:#fff; } .topbar__actions{ margin-left:auto; display:flex; gap:8px; } .btn{ font-size:13px; font-weight:600; padding:9px 15px; border-radius:8px; cursor:pointer; border:1px solid var(--ui-line-2); background:var(--ui-panel); color:var(--ui-fg); transition:background .16s var(--ease-out),border-color .16s,transform .12s var(--ease-out); } .btn:hover{ background:var(--ui-panel-2); } .btn:active{ transform:scale(.97); } .btn--ghost{ background:transparent; } .btn--primary{ background:var(--naranja); border-color:var(--naranja); color:#fff; } .btn--primary:hover{ background:#d94e1a; } .btn--on{ background:var(--tinta); border-color:var(--tinta); color:var(--crema); } .btn--on:hover{ background:#000; } .topbar__sep{ width:1px; height:24px; background:var(--ui-line-2); margin:0 4px; } /* ---------- MODO MAESTRO ---------- */ .master-banner{ display:none; align-items:center; justify-content:space-between; gap:16px; padding:10px 18px; background:#2A211A; color:var(--crema); font-size:13px; border-bottom:1px solid var(--ui-line); } .master-banner b{ font-weight:700; } .master-banner__acts{ display:flex; gap:8px; flex:none; } .btn--onbar{ border:1px solid rgba(246,238,221,.28); background:transparent; color:var(--crema); font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:7px; cursor:pointer; } .btn--onbar:hover{ background:rgba(246,238,221,.12); border-color:var(--naranja); } body.master-mode .master-banner{ display:flex; } body.master-mode .filmstrip{ display:none; } /* form de datos globales */ .globals-intro{ font-size:12.5px; line-height:1.45; color:var(--ui-soft); background:var(--ui-panel-2); border:1px solid var(--ui-line); border-radius:8px; padding:10px 12px; margin-bottom:18px; } .glb-targets{ font-size:11px; color:var(--ui-faint); margin-top:4px; } /* campo de slot gobernado por un global (read-only en el editor por-plantilla) */ .field--locked{ opacity:.85; } .field--locked .lockline{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ui-soft); background:var(--ui-panel-2); border:1px dashed var(--ui-line-2); border-radius:8px; padding:9px 11px; } .field--locked .lockline b{ color:var(--ui-fg); font-weight:600; } .field--locked .lockbadge{ margin-left:auto; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--naranja); font-weight:700; white-space:nowrap; } .insp-note{ font-size:12.5px; line-height:1.45; color:var(--ui-soft); background:var(--ui-panel-2); border:1px solid var(--ui-line); border-radius:8px; padding:10px 12px; margin-bottom:16px; } .tpl.is-editing{ outline:2px solid var(--naranja); outline-offset:1px; } /* ---------- LAYOUT ---------- */ .layout{ display:grid; grid-template-columns:var(--chat-w) 1fr var(--insp-w); height:calc(100vh - var(--topbar-h)); } /* ---------- RAIL ---------- */ .rail{ background:var(--ui-panel); border-right:1px solid var(--ui-line); display:flex; flex-direction:column; overflow:hidden; } .rail__section{ padding:16px; border-bottom:1px solid var(--ui-line); } .rail__section--grow{ flex:1; overflow-y:auto; } .rail__h{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ui-faint); font-weight:700; margin-bottom:12px; } .pieces{ display:flex; flex-direction:column; gap:6px; } .piece{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:600; border:1px solid transparent; } .piece.is-active{ background:rgba(241,90,34,.1); border-color:rgba(241,90,34,.35); color:#c8460f; } .piece.is-soon{ color:var(--ui-faint); cursor:not-allowed; } .piece .tag{ margin-left:auto; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ui-faint); } .gallery__group{ margin-bottom:16px; } .gallery__gh{ font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--ui-soft); margin:0 0 8px; text-transform:uppercase; } .gallery__items{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .tpl{ position:relative; border:1px solid var(--ui-line); border-radius:8px; overflow:hidden; cursor:pointer; background:var(--ui-stage); aspect-ratio:16/9; transition:border-color .15s,transform .08s; } .tpl:hover{ border-color:var(--naranja); transform:translateY(-1px); } .tpl__thumb{ position:absolute; inset:0; transform-origin:top left; pointer-events:none; } .tpl__name{ position:absolute; left:0; right:0; bottom:0; font-size:9.5px; font-weight:600; padding:8px 6px 5px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.72)); line-height:1.15; } /* ---------- CANVAS ---------- */ .canvas{ display:flex; flex-direction:column; min-width:0; background:var(--ui-stage); } .deckbar{ display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--ui-panel); border-top:1px solid var(--ui-line); } .addslide{ flex:none; display:inline-flex; align-items:center; gap:7px; height:78px; padding:0 18px; border-radius:10px; border:1.5px dashed var(--ui-line-2); background:transparent; color:var(--ui-soft); font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap; transition:border-color .16s var(--ease-out),color .16s,background .16s,transform .12s var(--ease-out); } .addslide span{ font-size:21px; line-height:1; margin-top:-2px; } .addslide:hover{ border-color:var(--naranja); color:var(--naranja); background:#fff; } .addslide:active{ transform:scale(.97); } .filmstrip{ flex:1; display:flex; gap:10px; overflow-x:auto; align-items:center; padding:2px 0; min-height:84px; } .filmstrip:empty::before{ content:"Sin slides — tocá «+ Agregar slide» o pedíselo al asistente"; color:var(--ui-faint); font-size:13px; padding-left:6px; } .fs-item{ position:relative; flex:0 0 auto; width:148px; aspect-ratio:16/9; border-radius:7px; overflow:hidden; cursor:pointer; border:2px solid transparent; background:var(--ui-stage); box-shadow:0 2px 8px -4px rgba(0,0,0,.4); } .fs-item.is-sel{ border-color:var(--naranja); } .fs-item__thumb{ position:absolute; inset:0; transform-origin:top left; pointer-events:none; } .fs-item__n{ position:absolute; top:4px; left:5px; font-size:10px; font-weight:700; color:#fff; background:rgba(0,0,0,.55); border-radius:4px; padding:1px 5px; z-index:2; } .fs-item__acts{ position:absolute; top:3px; right:3px; display:flex; gap:3px; opacity:0; transition:opacity .12s; z-index:2; } .fs-item:hover .fs-item__acts{ opacity:1; } .fs-item__acts button{ width:20px; height:20px; border-radius:5px; border:0; background:rgba(0,0,0,.6); color:#fff; font-size:11px; cursor:pointer; display:grid; place-items:center; } .fs-item__acts button:hover{ background:var(--naranja); } .fs-item.dragging{ opacity:.4; } .fs-item.drop-target{ border-color:var(--tinta); } .stage{ flex:1; position:relative; display:grid; place-items:center; padding:30px; overflow:hidden; } .stage__wrap{ position:relative; box-shadow:0 24px 60px -24px rgba(0,0,0,.55); } .stage__inner{ transform-origin:top left; } .stage__empty{ text-align:center; color:var(--ui-soft); } .stage__empty p{ margin:4px 0; font-size:16px; } .stage__empty .muted{ font-size:14px; } /* ---------- INSPECTOR ---------- */ .inspector{ background:var(--ui-panel); border-left:1px solid var(--ui-line); overflow-y:auto; } .inspector__body{ padding:18px; } .insp-empty{ color:var(--ui-faint); font-size:14px; padding:30px 4px; text-align:center; } .insp-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; } .insp-head h2{ font-size:16px; font-weight:800; } .insp-tplname{ font-size:11px; color:var(--ui-faint); letter-spacing:.04em; margin-bottom:18px; } .insp-actions{ display:flex; gap:6px; } .icon-btn{ width:30px; height:30px; border-radius:7px; border:1px solid var(--ui-line-2); background:var(--ui-panel); cursor:pointer; display:grid; place-items:center; font-size:14px; } .icon-btn:hover{ background:var(--ui-panel-2); border-color:var(--naranja); } .theme-toggle{ display:flex; gap:6px; margin-bottom:20px; background:var(--ui-panel-2); padding:4px; border-radius:9px; } .theme-toggle button{ flex:1; padding:8px; border:0; border-radius:6px; background:transparent; cursor:pointer; font-size:13px; font-weight:600; color:var(--ui-soft); display:flex; align-items:center; justify-content:center; gap:7px; } .theme-toggle button.is-on{ background:#fff; color:var(--ui-fg); box-shadow:0 1px 4px -1px rgba(0,0,0,.2); } .theme-toggle .sw{ width:13px; height:13px; border-radius:50%; border:1px solid var(--ui-line-2); } .field{ margin-bottom:16px; } .field > label{ display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ui-soft); margin-bottom:6px; } .field input[type=text], .field textarea, .field select{ width:100%; font-size:14px; color:var(--ui-fg); background:var(--ui-panel-2); border:1px solid var(--ui-line); border-radius:8px; padding:9px 11px; resize:vertical; } .field select{ cursor:pointer; appearance:auto; } .field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--naranja); background:#fff; } .field textarea{ min-height:62px; line-height:1.4; } .field .hint{ font-size:11px; color:var(--ui-faint); margin-top:4px; } .imgfield{ display:flex; flex-direction:column; gap:8px; } .imgdrop{ border:1.5px dashed var(--ui-line-2); border-radius:9px; padding:14px; text-align:center; font-size:12.5px; color:var(--ui-soft); cursor:pointer; background:var(--ui-panel-2); transition:border-color .15s,background .15s; } .imgdrop:hover, .imgdrop.drag{ border-color:var(--naranja); background:#fff; } .imgdrop.has-img{ padding:0; border-style:solid; overflow:hidden; } .imgdrop img{ width:100%; max-height:130px; object-fit:contain; background:var(--ui-stage); display:block; } .imgfield__row{ display:flex; gap:6px; } .imgfield__row input{ flex:1; } .imgfield__row .btn{ padding:7px 10px; font-size:12px; } .list-sec{ border:1px solid var(--ui-line); border-radius:10px; margin-bottom:16px; overflow:hidden; } .list-sec__h{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:var(--ui-panel-2); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ui-soft); } .list-sec__h .btn{ padding:5px 9px; font-size:11px; } .list-item{ padding:12px; border-top:1px solid var(--ui-line); } .list-item__h{ display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:700; color:var(--ui-faint); margin-bottom:8px; } .list-item__del{ border:0; background:transparent; color:var(--ui-faint); cursor:pointer; font-size:13px; } .list-item__del:hover{ color:var(--naranja); } /* editor de swatches (selector de color para personalización Color) */ .swatches{ display:flex; flex-direction:column; gap:7px; } .swatch-row{ display:flex; gap:7px; align-items:center; } .swatch-row input[type=color]{ width:36px; height:34px; padding:2px; border:1px solid var(--ui-line); border-radius:8px; background:var(--ui-panel); cursor:pointer; flex:none; } .swatch-row input[type=text]{ flex:1; font-size:13px; color:var(--ui-fg); padding:7px 10px; border:1px solid var(--ui-line); border-radius:7px; background:var(--ui-panel-2); } .swatch-row input[type=text]:focus{ outline:none; border-color:var(--naranja); background:#fff; } .swatch-del{ width:30px; height:34px; border:1px solid var(--ui-line); border-radius:7px; background:var(--ui-panel); cursor:pointer; color:var(--ui-faint); flex:none; } .swatch-del:hover{ border-color:var(--naranja); color:var(--naranja); } .swatch-add{ align-self:flex-start; margin-top:2px; font-size:12px; font-weight:600; padding:6px 12px; border:1px dashed var(--ui-line-2); border-radius:7px; background:transparent; cursor:pointer; color:var(--ui-soft); } .swatch-add:hover{ border-color:var(--naranja); color:var(--naranja); } .field--mini{ margin-bottom:10px; } .field--mini > label{ font-size:10px; margin-bottom:3px; } /* ---------- MODAL + TOAST ---------- */ .modal{ position:fixed; inset:0; background:rgba(20,16,12,.5); display:grid; place-items:center; z-index:50; } .modal[hidden]{ display:none; } .modal__box{ background:#fff; border-radius:14px; padding:28px; max-width:440px; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); } .modal__box h2{ font-size:20px; font-weight:800; margin-bottom:12px; } .modal__box p{ font-size:14px; line-height:1.5; margin-bottom:10px; } .modal__box ol{ font-size:14px; line-height:1.6; margin:0 0 12px 20px; } .modal__actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; } /* ---------- BIBLIOTECA DE PRESENTACIONES ---------- */ .modal--lib{ align-items:stretch; } .modal__box--lib{ max-width:980px; width:92vw; max-height:86vh; margin:auto; display:flex; flex-direction:column; padding:24px 26px; } .lib-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; } .lib-head h2{ font-size:21px; font-weight:800; } .lib-head__acts{ display:flex; gap:8px; } .lib-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:18px; overflow-y:auto; padding:2px; } .lib-card{ border:1px solid var(--ui-line); border-radius:11px; overflow:hidden; background:var(--ui-panel); display:flex; flex-direction:column; transition:border-color .15s, box-shadow .15s; } .lib-card.is-current{ border-color:var(--naranja); box-shadow:0 0 0 1px var(--naranja); } .lib-card__thumb{ position:relative; aspect-ratio:16/9; background:var(--ui-stage); overflow:hidden; cursor:pointer; border-bottom:1px solid var(--ui-line); } .lib-card__thumb > .slide{ transform-origin:top left; pointer-events:none; } .lib-card__empty{ position:absolute; inset:0; display:grid; place-items:center; color:var(--ui-faint); font-size:13px; } .lib-card__body{ padding:12px 13px; display:flex; flex-direction:column; gap:4px; } .lib-card__title{ font-size:15px; font-weight:700; line-height:1.2; } .lib-card__title[contenteditable]{ outline:none; border-radius:5px; } .lib-card__title[contenteditable]:focus{ background:var(--ui-panel-2); box-shadow:0 0 0 2px var(--naranja); } .lib-card__meta{ font-size:12px; color:var(--ui-soft); } .lib-card__badge{ display:inline-block; margin-top:2px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--naranja); font-weight:700; } .lib-card__acts{ display:flex; border-top:1px solid var(--ui-line); } .lib-card__acts button{ flex:1; padding:9px; border:0; background:transparent; cursor:pointer; font-size:12px; font-weight:600; color:var(--ui-soft); border-right:1px solid var(--ui-line); } .lib-card__acts button:last-child{ border-right:0; } .lib-card__acts button:hover{ background:var(--ui-panel-2); color:var(--ui-fg); } .lib-card__acts button.danger:hover{ color:var(--naranja); } .lib-card__odoo{ display:inline-block; margin-top:2px; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#2a4bd8; font-weight:700; } /* ---------- COTIZACIONES ODOO ---------- */ .odoo-note{ font-size:12px; color:var(--ui-soft); margin-top:3px; } .odoo-note.is-mock{ color:var(--naranja); font-weight:600; } .odoo-list{ display:flex; flex-direction:column; gap:8px; overflow-y:auto; padding:2px; } .odoo-list .muted{ padding:24px; } .odoo-row{ display:grid; grid-template-columns:84px 1fr auto auto auto; gap:16px; align-items:center; padding:13px 16px; border:1px solid var(--ui-line); border-radius:10px; background:var(--ui-panel); } .odoo-row.is-linked{ border-color:#2a4bd8; box-shadow:0 0 0 1px #2a4bd8; } .odoo-row__name{ font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; } .odoo-row__cli{ font-size:14px; min-width:0; } .odoo-row__cli small{ display:block; color:var(--ui-soft); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .odoo-row__est{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; white-space:nowrap; } .est-draft{ background:rgba(241,90,34,.14); color:#c8460f; } .est-sent{ background:rgba(42,75,216,.14); color:#2a4bd8; } .odoo-row__total{ font-weight:800; font-variant-numeric:tabular-nums; text-align:right; } .odoo-row__total small{ display:block; font-size:11px; color:var(--ui-soft); font-weight:500; } /* barra Odoo dentro del inspector del slide de Presupuesto */ .odoo-bar{ display:flex; flex-direction:column; gap:9px; background:rgba(42,75,216,.07); border:1px solid rgba(42,75,216,.25); border-radius:9px; padding:11px 12px; margin-bottom:18px; } .odoo-bar__h{ font-size:12.5px; font-weight:700; color:#2a4bd8; } .odoo-bar__h span{ display:block; color:var(--ui-soft); font-weight:500; margin-top:2px; } .odoo-bar__acts{ display:flex; gap:6px; } .odoo-bar__acts .btn{ flex:1; padding:7px 8px; font-size:12px; } .odoo-bar__acts .btn--blue{ background:#2a4bd8; border-color:#2a4bd8; color:#fff; } .odoo-bar__acts .btn--blue:hover{ background:#2440b8; } /* ---------- BÚSQUEDA DE FOTOS ---------- */ .img-results{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; overflow-y:auto; padding:2px; } .img-results .muted{ grid-column:1/-1; padding:24px; } .img-cell{ aspect-ratio:3/2; border-radius:8px; overflow:hidden; cursor:pointer; border:2px solid transparent; background:var(--ui-stage); position:relative; } .img-cell img{ width:100%; height:100%; object-fit:cover; display:block; } .img-cell:hover{ border-color:var(--naranja); } .img-cell__by{ position:absolute; left:0; right:0; bottom:0; font-size:10px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.6)); padding:8px 6px 4px; opacity:0; transition:opacity .15s; } .img-cell:hover .img-cell__by{ opacity:1; } .imgfield__row .btn--search{ flex:none; } .imgfield__acts{ display:flex; gap:6px; margin-top:2px; } .imgfield__acts .btn{ flex:1; font-size:12px; padding:7px 6px; } .toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--tinta); color:var(--crema); padding:11px 20px; border-radius:10px; font-size:13px; font-weight:600; z-index:60; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); } /* ---------- EDICIÓN DE IMÁGENES (Nano Banana) ---------- */ .imgedit{ width:min(1080px,94vw); } .imgedit__new{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:24px; } .imgedit__new[hidden]{ display:none; } .imgedit__form{ overflow-y:auto; padding-right:8px; display:flex; flex-direction:column; gap:7px; } .imgedit__label{ font-size:12.5px; font-weight:700; margin-top:11px; } .imgedit__form > .imgedit__label:first-child{ margin-top:0; } .imgedit__label .muted{ font-weight:500; } .imgedit__drop{ width:100%; border:1.5px dashed var(--ui-line-2); border-radius:9px; padding:18px 14px; text-align:center; font-size:12.5px; color:var(--ui-soft); cursor:pointer; background:var(--ui-panel-2); transition:border-color .18s var(--ease-out), background .18s var(--ease-out), transform .12s var(--ease-out); } .imgedit__drop:hover, .imgedit__drop.drag{ border-color:var(--naranja); background:#fff; color:var(--ui-fg); } .imgedit__drop:active{ transform:scale(.99); } .imgedit__drop--sm{ padding:13px; } .imgedit__thumbs{ display:flex; flex-wrap:wrap; gap:8px; } .imgedit__thumbs:empty{ display:none; } .imgedit__thumb{ position:relative; width:62px; height:62px; border-radius:8px; overflow:hidden; background:var(--ui-stage); box-shadow:inset 0 0 0 1px var(--ui-line); } .imgedit__thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .imgedit__thumbx{ position:absolute; top:2px; right:2px; width:18px; height:18px; border:none; border-radius:50%; background:rgba(33,26,21,.74); color:#fff; font-size:10px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s var(--ease-out); } .imgedit__thumbx:hover{ background:var(--naranja); } .imgedit__modes{ display:flex; gap:7px; } .imode{ flex:1; padding:9px 6px; border:1px solid var(--ui-line-2); background:var(--ui-panel); border-radius:8px; font-size:12.5px; font-weight:600; color:var(--ui-fg); cursor:pointer; transition:transform .12s var(--ease-out), border-color .15s var(--ease-out), background .15s var(--ease-out); } .imode:hover{ border-color:var(--naranja); } .imode:active{ transform:scale(.97); } .imode.btn--on{ background:var(--tinta); border-color:var(--tinta); color:var(--crema); } .imgedit__logo[hidden]{ display:none; } .imgedit__detalle{ width:100%; border:1px solid var(--ui-line-2); border-radius:8px; background:var(--ui-panel); padding:9px 11px; font-size:13px; line-height:1.4; resize:vertical; min-height:54px; transition:border-color .15s var(--ease-out), background .15s var(--ease-out); } .imgedit__detalle:focus{ outline:none; border-color:var(--naranja); background:#fff; } .imgedit__go{ margin-top:14px; padding:12px; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .12s var(--ease-out), background .15s var(--ease-out); } .imgedit__go:active{ transform:scale(.985); } .imgedit__go:disabled{ opacity:.6; cursor:progress; } .imgedit__msg{ min-height:18px; font-size:12px; font-weight:600; color:var(--naranja); text-align:center; } .imgedit__preview{ display:flex; flex-direction:column; gap:12px; min-height:0; } .imgedit__result{ flex:1; min-height:240px; display:flex; align-items:center; justify-content:center; background:var(--ui-stage); border:1px solid var(--ui-line); border-radius:14px; padding:10px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(33,26,21,.06); } .imgedit__result img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:7px; box-shadow:0 8px 26px -12px rgba(33,26,21,.5); animation:img-rise .5s var(--ease-out); } @keyframes img-rise{ from{ opacity:0; transform:scale(.96) translateY(8px); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } } .imgedit__resultacts{ display:flex; flex-direction:column; gap:9px; } .imgedit__resultacts[hidden]{ display:none; } .imgedit__userow{ display:flex; gap:7px; } .imgedit__userow .btn{ white-space:nowrap; } .imgedit__target{ flex:1; min-width:0; border:1px solid var(--ui-line-2); border-radius:8px; background:var(--ui-panel); padding:8px 10px; font-size:12.5px; cursor:pointer; } .imgedit__target:focus{ outline:none; border-color:var(--naranja); } .imgedit__resultacts .btn[download]{ justify-content:center; } .imgedit__spin{ width:30px; height:30px; border-radius:50%; border:3px solid var(--ui-line-2); border-top-color:var(--naranja); animation:spin .7s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } .imgedit__gal[hidden]{ display:none; } .imgedit__gal{ align-content:start; } .imgedit__galitem{ aspect-ratio:1/1; border:2px solid transparent; border-radius:11px; overflow:hidden; padding:0; background:var(--ui-stage); cursor:pointer; transition:border-color .15s var(--ease-out), transform .14s var(--ease-out); } .imgedit__galitem:hover{ border-color:var(--naranja); transform:translateY(-2px); } .imgedit__galitem:active{ transform:translateY(0) scale(.985); } .imgedit__galitem img{ width:100%; height:100%; object-fit:cover; display:block; } @media (max-width:860px){ .imgedit__new{ grid-template-columns:1fr; overflow-y:auto; } .imgedit__form{ overflow:visible; } .imgedit__result{ min-height:200px; } } /* ---------- CROPPER (recorte/encuadre de imágenes) ---------- */ .cropper{ position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(33,26,21,.62); backdrop-filter:blur(6px); animation:crop-fade .2s var(--ease-out); } @keyframes crop-fade{ from{ opacity:0; } to{ opacity:1; } } .cropper__box{ width:min(700px,94vw); max-height:92vh; display:flex; flex-direction:column; gap:14px; background:var(--ui-panel); border:1px solid var(--ui-line); border-radius:18px; padding:18px 18px 16px; box-shadow:0 30px 80px -24px rgba(33,26,21,.6); animation:crop-pop .26s var(--ease-out); } @keyframes crop-pop{ from{ opacity:0; transform:scale(.97) translateY(8px); } to{ opacity:1; transform:none; } } .cropper__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .cropper__ttl{ font-size:16px; font-weight:800; } .cropper__hint{ display:block; font-size:11.5px; font-weight:500; color:var(--ui-soft); margin-top:2px; } .cropper__x{ border:1px solid var(--ui-line-2); background:var(--ui-panel); width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--ui-fg); flex:none; transition:transform .12s var(--ease-out), border-color .15s var(--ease-out); } .cropper__x:hover{ border-color:var(--naranja); } .cropper__x:active{ transform:scale(.94); } .cropper__stage{ flex:1; min-height:300px; position:relative; display:flex; align-items:center; justify-content:center; background:var(--ui-stage); border:1px solid var(--ui-line); border-radius:12px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(33,26,21,.1); } .cropper__frame{ position:relative; overflow:hidden; border-radius:8px; cursor:grab; touch-action:none; box-shadow:0 0 0 1px rgba(246,238,221,.9), 0 0 0 2px rgba(33,26,21,.35), 0 0 0 9999px rgba(247,244,237,.55); } .cropper__frame.is-drag{ cursor:grabbing; } .cropper__img{ position:absolute; top:0; left:0; max-width:none; user-select:none; -webkit-user-drag:none; pointer-events:none; } .cropper__grid{ position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(246,238,221,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(246,238,221,.5) 1px,transparent 1px); background-size:33.333% 33.333%; background-position:-1px -1px; opacity:.6; mix-blend-mode:overlay; } .cropper__spin{ position:absolute; font-size:13px; color:var(--ui-soft); font-weight:600; } .cropper__ctrls{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; } .cropper__zoom{ display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600; color:var(--ui-soft); flex:1; min-width:200px; } .cropper__zoom input[type=range]{ flex:1; accent-color:var(--naranja); cursor:pointer; } .cropper__acts{ display:flex; gap:8px; } .cropper__acts .btn{ transition:transform .12s var(--ease-out); } .cropper__acts .btn:active{ transform:scale(.97); } @media (max-width:560px){ .cropper__ctrls{ flex-direction:column; align-items:stretch; } .cropper__acts{ justify-content:flex-end; } } /* ---------- IMPRESIÓN ---------- */ #print-root{ display:none; } @media print{ @page{ size:1920px 1080px; margin:0; } body > *:not(#print-root){ display:none !important; } #print-root{ display:block !important; } #print-root .slide{ break-after:page; page-break-after:always; box-shadow:none !important; margin:0 !important; } #print-root .slide:last-child{ break-after:auto; page-break-after:auto; } #print-root, #print-root *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; } } /* ============================================================================ REDISEÑO · CHAT IA · MENÚ · GALERÍA MODAL ============================================================================ */ .kicker{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--naranja); } /* ---------- CHAT IA (panel izquierdo) ---------- */ .chat{ background:var(--ui-panel); border-right:1px solid var(--ui-line); display:flex; flex-direction:column; min-width:0; overflow:hidden; } .chat__head{ padding:15px 18px 13px; border-bottom:1px solid var(--ui-line); position:relative; } .chat__title{ font-family:"New Kansas",var(--ui-sans); font-size:21px; font-weight:500; line-height:1.05; margin-top:3px; } .chat__title b{ font-weight:900; } .chat__status{ position:absolute; top:15px; right:18px; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ui-faint); border:1px solid var(--ui-line); border-radius:999px; padding:3px 9px; } .chat__status[data-state="on"]{ color:#1E9E4A; border-color:rgba(30,158,74,.4); } .chat__log{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:13px; } .chat__empty{ margin:auto; text-align:center; color:var(--ui-soft); max-width:32ch; } .chat__empty-mark{ font-size:26px; color:var(--naranja); opacity:.45; margin-bottom:8px; } .chat__empty p{ margin:6px 0; font-size:14px; line-height:1.55; } .chat__empty .muted{ font-size:13px; } .chat code{ font-family:ui-monospace,"SF Mono",monospace; font-size:12px; background:var(--ui-panel-2); border:1px solid var(--ui-line); border-radius:5px; padding:1px 6px; color:var(--naranja); } .msg{ max-width:90%; font-size:13.5px; line-height:1.5; padding:11px 14px; border-radius:15px; white-space:pre-wrap; word-break:break-word; animation:msg-in .28s var(--ease-out); } @keyframes msg-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } .msg--user{ align-self:flex-end; background:var(--tinta); color:var(--crema); border-bottom-right-radius:5px; } .msg--ai{ align-self:flex-start; background:var(--ui-panel-2); border:1px solid var(--ui-line); border-bottom-left-radius:5px; } .msg--sys{ align-self:center; background:transparent; color:var(--ui-faint); font-size:12px; padding:2px; } .chat__composer{ padding:12px; border-top:1px solid var(--ui-line); display:flex; gap:8px; align-items:flex-end; background:var(--ui-panel); } .chat__composer textarea{ flex:1; resize:none; max-height:140px; font-family:var(--ui-sans); font-size:14px; line-height:1.45; color:var(--ui-fg); background:var(--ui-panel-2); border:1px solid var(--ui-line); border-radius:12px; padding:11px 13px; transition:border-color .16s var(--ease-out),background .16s; } .chat__composer textarea:focus{ outline:none; border-color:var(--naranja); background:#fff; } .chat__send{ flex:none; width:40px; height:40px; border-radius:11px; border:0; background:var(--naranja); color:#fff; font-size:18px; cursor:pointer; display:grid; place-items:center; transition:background .16s var(--ease-out),transform .12s var(--ease-out); } .chat__send:hover{ background:#d94e1a; } .chat__send:active{ transform:scale(.94); } .chat__send:disabled{ opacity:.4; cursor:default; } /* ---------- TOPBAR · menú overflow ---------- */ .menu{ position:relative; } .menu__pop{ position:absolute; top:calc(100% + 8px); right:0; min-width:222px; background:var(--ui-panel); border:1px solid var(--ui-line); border-radius:12px; box-shadow:0 18px 44px -16px rgba(33,26,21,.34); padding:6px; z-index:30; transform-origin:top right; animation:pop-in .16s var(--ease-out); } @keyframes pop-in{ from{ opacity:0; transform:scale(.96) translateY(-4px); } to{ opacity:1; transform:none; } } .menu__item{ display:block; width:100%; text-align:left; font-size:13.5px; font-weight:600; color:var(--ui-fg); background:transparent; border:0; border-radius:8px; padding:9px 11px; cursor:pointer; transition:background .12s; } .menu__item:hover{ background:var(--ui-panel-2); } .menu__sep{ height:1px; background:var(--ui-line); margin:5px 8px; } /* ---------- galería en modal ---------- */ .pieces--row{ flex-direction:row; gap:6px; flex-wrap:wrap; } .pieces--row .piece{ padding:7px 12px; font-size:13px; } .modal__box--lib{ width:min(1120px,94vw); } .gallery--modal{ overflow-y:auto; padding:4px 4px 8px; max-height:70vh; } .gallery--modal .gallery__items{ grid-template-columns:repeat(4,1fr); } /* ---------- modo maestro en el nuevo layout ---------- */ body.master-mode .deckbar{ display:none; } .deckbar .fs-item{ width:138px; } /* el centro nunca se colapsa, los paneles ceden en pantallas chicas */ .layout{ grid-template-columns:var(--chat-w) minmax(360px,1fr) var(--insp-w); } @media (max-width:1340px){ :root{ --chat-w:330px; --insp-w:332px; } } @media (max-width:1140px){ :root{ --chat-w:300px; --insp-w:308px; } .deck-title{ max-width:300px; } } @media (max-width:980px){ :root{ --chat-w:270px; --insp-w:284px; } } /* ---------- GATE DE ACCESO (login admin) ---------- */ .authgate{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:var(--ui-bg); padding:24px; } .authgate[hidden]{ display:none; } body.locked{ overflow:hidden; } .authcard{ width:min(420px,100%); background:var(--ui-panel); border:1px solid var(--ui-line); border-radius:18px; padding:36px 32px; box-shadow:0 30px 90px -34px rgba(33,26,21,.45); animation:authpop .3s var(--ease-out); } @keyframes authpop{ from{ opacity:0; transform:translateY(10px) scale(.99); } to{ opacity:1; transform:none; } } .authcard__brand{ display:flex; align-items:center; gap:9px; font-family:"New Kansas",var(--ui-sans); font-size:16px; font-weight:500; color:var(--ui-soft); margin-bottom:22px; } .authcard__brand b{ font-weight:900; color:var(--ui-fg); } .authcard__title{ font-family:"New Kansas",var(--ui-sans); font-size:27px; font-weight:900; letter-spacing:-.02em; line-height:1.05; margin-bottom:6px; } .authcard__sub{ font-size:14px; color:var(--ui-soft); margin-bottom:24px; } .authform{ display:flex; flex-direction:column; gap:14px; } .authform label{ display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ui-soft); } .authform input{ font-size:15px; color:var(--ui-fg); background:var(--ui-panel-2); border:1px solid var(--ui-line); border-radius:9px; padding:11px 13px; transition:border-color .16s var(--ease-out),background .16s; } .authform input:focus{ outline:none; border-color:var(--naranja); background:#fff; } .authform__err{ font-size:13px; color:#D81E5B; font-weight:600; } .authform__err:empty{ display:none; } .authform .btn--primary{ margin-top:4px; padding:12px; font-size:15px; display:flex; justify-content:center; } .authcard__foot{ margin-top:20px; font-size:12px; color:var(--ui-faint); text-align:center; } .authcard__foot b{ color:var(--ui-soft); }