/* ============================================================ * DevZen Portal Editor v1.0 · CSS * Inyectado en los 24 HTMLs vía en * ============================================================ */ /* Padding del body para no chocar con topbar */ body { padding-top: 56px !important; } /* ──────────────────────────────────────────────────────────── Input editable (reemplaza span.ph) Hereda look del span.ph original: mono · cyan-deep · dashed ──────────────────────────────────────────────────────────── */ .ph-input { display: inline-block; vertical-align: baseline; font-family: inherit; font-size: inherit; color: var(--cyan-deep, #058891); background: rgba(5, 136, 145, 0.06); border: none; border-bottom: 1px dashed var(--cyan-deep, #058891); border-radius: 2px; padding: 1px 5px; margin: 0; letter-spacing: 0.02em; font-weight: 500; min-width: 60px; max-width: 100%; outline: none; transition: background 150ms ease, border-color 150ms ease; } .ph-input:focus { background: rgba(6, 196, 208, 0.10); border-bottom: 1px solid var(--cyan, #06C4D0); box-shadow: 0 0 0 2px rgba(6, 196, 208, 0.15); } .ph-input::placeholder { color: rgba(5, 136, 145, 0.45); font-style: italic; } /* ──────────────────────────────────────────────────────────── Topbar ──────────────────────────────────────────────────────────── */ #devzen-topbar { position: fixed; top: 0; left: 0; right: 0; height: 56px; padding: 0 20px; background: rgba(245, 242, 235, 0.92); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); border-bottom: 1px solid rgba(214, 209, 196, 0.6); display: flex; align-items: center; gap: 14px; z-index: 9998; font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 13px; color: #0A1128; box-shadow: 0 1px 0 rgba(10, 17, 40, 0.03); } .dz-topbar__home { display: inline-flex; align-items: center; gap: 6px; color: #0A1128; text-decoration: none; font-weight: 500; font-size: 13px; padding: 4px 8px; border-radius: 6px; transition: background 150ms ease, color 150ms ease; } .dz-topbar__home:hover { background: rgba(10, 17, 40, 0.06); color: #058891; } .dz-topbar__arrow { font-size: 16px; line-height: 1; } .dz-topbar__home-label { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; } .dz-topbar__sep { width: 1px; height: 24px; background: rgba(10, 17, 40, 0.10); } .dz-topbar__group { display: inline-flex; align-items: center; gap: 6px; } .dz-topbar__label { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(10, 17, 40, 0.55); } .dz-topbar__select { background: white; border: 1px solid rgba(10, 17, 40, 0.15); border-radius: 6px; padding: 4px 24px 4px 8px; font-family: inherit; font-size: 12.5px; color: #0A1128; cursor: pointer; max-width: 200px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A1128' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; background-size: 12px; } .dz-topbar__select:focus { outline: none; border-color: #06C4D0; box-shadow: 0 0 0 2px rgba(6, 196, 208, 0.15); } .dz-topbar__btn { background: white; border: 1px solid rgba(10, 17, 40, 0.15); border-radius: 6px; padding: 4px 10px; font-family: inherit; font-size: 13px; color: #0A1128; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; line-height: 1; height: 28px; } .dz-topbar__btn:hover { border-color: #06C4D0; color: #058891; } .dz-topbar__btn--ghost { background: transparent; border-color: rgba(10, 17, 40, 0.20); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } .dz-topbar__spacer { flex: 1; } .dz-topbar__status { display: inline-flex; align-items: center; gap: 6px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #058891; } .dz-topbar__marker { color: #058891; font-weight: 700; transition: transform 200ms ease, color 200ms ease; } .dz-topbar__marker--pulse { animation: dz-pulse 600ms ease; } @keyframes dz-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.4); color: #06C4D0; } 100% { transform: scale(1); } } .dz-topbar__readonly { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(10, 17, 40, 0.55); } /* Topbar minimalista (read-only) */ #devzen-topbar.devzen-topbar--minimal { background: rgba(245, 242, 235, 0.85); } /* ──────────────────────────────────────────────────────────── Floating Action Buttons ──────────────────────────────────────────────────────────── */ #devzen-fab { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 12px; z-index: 9999; } .dz-fab__btn { width: 48px; height: 48px; border-radius: 50%; background: #0A1128; color: #06C4D0; border: none; cursor: pointer; box-shadow: 0 6px 20px rgba(10, 17, 40, 0.35), 0 1px 2px rgba(10, 17, 40, 0.20); transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), background 200ms ease; display: flex; align-items: center; justify-content: center; padding: 0; } .dz-fab__btn:hover { transform: scale(1.08) translateY(-1px); background: #060B1C; } .dz-fab__btn:active { transform: scale(0.95); } .dz-fab__btn--danger:hover { background: #7F1D1D; color: #FCA5A5; } /* ──────────────────────────────────────────────────────────── Toast ──────────────────────────────────────────────────────────── */ .dz-toast { position: fixed; bottom: 24px; left: 24px; background: #058891; color: white; padding: 10px 18px; border-radius: 6px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.04em; opacity: 0; transform: translateY(8px); pointer-events: none; z-index: 10000; box-shadow: 0 6px 20px rgba(5, 136, 145, 0.35); transition: opacity 200ms ease, transform 200ms ease; } .dz-toast.dz-toast--show { opacity: 1; transform: translateY(0); } .dz-toast.dz-toast--hide { opacity: 0; transform: translateY(8px); } /* ──────────────────────────────────────────────────────────── PRINT · override de elementos del editor ──────────────────────────────────────────────────────────── */ @media print { #devzen-topbar, #devzen-fab, .dz-toast { display: none !important; } body { padding-top: 0 !important; } .ph-input { border: none !important; background: transparent !important; padding: 0 !important; color: inherit !important; box-shadow: none !important; width: auto !important; min-width: 0 !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .ph-input::placeholder { color: rgba(0, 0, 0, 0.30) !important; } } /* ──────────────────────────────────────────────────────────── Modo marcador (portal-marker.js) ──────────────────────────────────────────────────────────── */ body.dz-marker-active { cursor: crosshair !important; } body.dz-marker-active ::selection { background: rgba(6, 196, 208, 0.45); color: white; } .dz-topbar__btn--on { background: var(--cyan, #06C4D0) !important; color: var(--ink, #0A1128) !important; border-color: var(--cyan, #06C4D0) !important; } .dz-marker-hint { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); background: #0A1128; color: white; padding: 10px 18px; border-radius: 8px; font-family: 'Geist', system-ui, sans-serif; font-size: 13px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 24px rgba(6, 11, 28, 0.45); z-index: 9997; max-width: 90vw; } .dz-marker-hint strong { color: var(--cyan, #06C4D0); } .dz-marker-hint button { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.20); color: white; padding: 4px 10px; border-radius: 4px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; } .dz-marker-hint button:hover { background: rgba(255, 255, 255, 0.18); } @media print { .dz-marker-hint { display: none !important; } } /* ──────────────────────────────────────────────────────────── Responsive · mobile ──────────────────────────────────────────────────────────── */ @media (max-width: 720px) { #devzen-topbar { gap: 8px; padding: 0 12px; flex-wrap: wrap; height: auto; min-height: 56px; } body { padding-top: 80px !important; } .dz-topbar__label { display: none; } .dz-topbar__group .dz-topbar__select { max-width: 140px; font-size: 12px; } .dz-topbar__btn--ghost { display: none; } .dz-topbar__status { font-size: 10px; } }