/* ============================================================================ MOD-279 · ALTA RÁPIDA DE CATÁLOGO — el modal y el botón «+» ---------------------------------------------------------------------------- El modal se acota a `#pxcat-velo`, que cuelga de . El botón «+» vive dentro de la ficha, así que va bajo `#page-prodex-detail`. Los colores se toman de las variables del detalle cuando existen y sólo si no, de un valor propio: el modal sigue al tema sin declarar una paleta paralela. ========================================================================== */ /* ── El botón «+» junto al campo ─────────────────────────────────────────── */ #page-prodex-detail.pdx-v3 .pdx-cat-add { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; margin-left: 2px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px dashed var(--pdx-border-strong, #cccfd7); border-radius: 6px; cursor: pointer; color: var(--pdx-text-muted); font-size: 11px; line-height: 1; opacity: 0; transition: opacity .12s, color .12s, border-color .12s; } /* Aparece al acercarse a la propiedad, y SIEMPRE con el teclado: si sólo saliera al pasar el ratón, quien navega con tabulador no sabría que existe. */ #page-prodex-detail.pdx-v3 .pdx-property:hover .pdx-cat-add, #page-prodex-detail.pdx-v3 .pdx-property:focus-within .pdx-cat-add, #page-prodex-detail.pdx-v3 .pdx-cat-add:focus-visible { opacity: 1; } #page-prodex-detail.pdx-v3 .pdx-cat-add:hover { color: var(--pdx-accent); border-color: var(--pdx-accent); border-style: solid; } /* La propiedad pasa a fila para que el campo y el «+» convivan sin empujarse. */ #page-prodex-detail.pdx-v3 .pdx-property .pdx-concat { display: flex; align-items: center; gap: 4px; } #page-prodex-detail.pdx-v3 .pdx-property .pdx-concat > .pdx-field, #page-prodex-detail.pdx-v3 .pdx-property .pdx-concat > .px-sat { flex: 1; min-width: 0; } /* ── El modal ────────────────────────────────────────────────────────────── */ #pxcat-velo{ position:fixed; inset:0; z-index:100700; background:rgba(10,12,18,.55); display:flex; align-items:center; justify-content:center; padding:20px; } #pxcat-velo *{box-sizing:border-box} #pxcat-velo button, #pxcat-velo input{font:inherit} #pxcat-velo .pxcat{ width:min(440px,100%); max-height:88vh; overflow:auto; background:var(--pdx-surface, #fff); color:var(--pdx-text, #15171c); border:1px solid var(--pdx-border, #e1e3e8); border-radius:14px; box-shadow:0 22px 60px rgba(0,0,0,.30); text-transform:none; letter-spacing:0; } #pxcat-velo header{ display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--pdx-border-subtle, #eceef2); } #pxcat-velo header b{font-size:15px; font-weight:650; flex:1} #pxcat-velo .pxcat-ic{ width:28px; height:28px; border-radius:8px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:var(--pdx-surface-2, #f7f8fa); color:var(--pdx-accent, #0d9488); font-size:12px; } #pxcat-velo header button{background:none; border:0; color:var(--pdx-text-muted, #8a90a0); font-size:15px; cursor:pointer} #pxcat-velo header button:hover{color:var(--pdx-text, #15171c)} #pxcat-velo .pxcat-cuerpo{padding:18px} #pxcat-velo .pxcat-c{display:block; margin-bottom:14px} #pxcat-velo .pxcat-c > span{ display:block; margin-bottom:6px; font-size:10px; font-weight:600; letter-spacing:.08em; color:var(--pdx-text-muted, #8a90a0); } #pxcat-velo .pxcat-c > small{display:block; margin-top:5px; font-size:11.5px; color:var(--pdx-text-muted, #8a90a0)} #pxcat-velo .pxcat-c input[type="text"], #pxcat-velo .pxcat-c input:not([type]){ width:100%; padding:9px 11px; font-size:13.5px; background:var(--pdx-surface-2, #f7f8fa); color:var(--pdx-text, #15171c); border:1px solid var(--pdx-border, #e1e3e8); border-radius:9px; } #pxcat-velo input:focus{border-color:var(--pdx-accent, #0d9488); outline:none} /* Selector de color + código: la misma cosa vista de dos maneras. */ #pxcat-velo .pxcat-color{display:flex; align-items:center; gap:9px} #pxcat-velo .pxcat-color input[type="color"]{ width:44px; height:38px; padding:2px; flex:0 0 auto; cursor:pointer; background:var(--pdx-surface-2, #f7f8fa); border:1px solid var(--pdx-border, #e1e3e8); border-radius:9px; } #pxcat-velo .pxcat-color input#pxcat-hex{ flex:1; min-width:0; padding:9px 11px; font-size:13.5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--pdx-surface-2, #f7f8fa); color:var(--pdx-text, #15171c); border:1px solid var(--pdx-border, #e1e3e8); border-radius:9px; } /* La vista previa: el mismo círculo que se verá en la ficha. */ #pxcat-velo .pxcat-punto{ width:24px; height:24px; border-radius:50%; flex:0 0 auto; border:1px solid rgba(0,0,0,.12); background:#cbd5e1; } #pxcat-velo .pxcat-aviso{min-height:16px; font-size:12px; color:var(--pdx-text-muted, #6a7080)} #pxcat-velo .pxcat-aviso.mal{color:var(--pdx-danger, #dc2626)} #pxcat-velo .pxcat-nota{ margin:12px 0 0; padding:11px 13px; background:var(--pdx-surface-2, #f7f8fa); border-radius:10px; font-size:12.5px; line-height:1.55; color:var(--pdx-text-muted, #6a7080); } #pxcat-velo footer{ display:flex; justify-content:flex-end; gap:9px; padding:14px 18px; border-top:1px solid var(--pdx-border-subtle, #eceef2); } #pxcat-velo .pxcat-b{ padding:8px 16px; border-radius:9px; font-size:13px; cursor:pointer; background:var(--pdx-surface-2, #f7f8fa); color:var(--pdx-text, #15171c); border:1px solid var(--pdx-border, #e1e3e8); } #pxcat-velo .pxcat-b:hover:not(:disabled){border-color:var(--pdx-border-strong, #cccfd7)} #pxcat-velo .pxcat-pri{ background:var(--pdx-accent, #0d9488); border-color:var(--pdx-accent, #0d9488); color:#fff; font-weight:600; } #pxcat-velo .pxcat-pri:hover:not(:disabled){filter:brightness(1.08)} #pxcat-velo .pxcat-b:disabled{opacity:.45; cursor:not-allowed} @media (prefers-reduced-motion: reduce) { #page-prodex-detail.pdx-v3 .pdx-cat-add { transition: none; } } /* ── Herencia de imágenes del master (vive en MOD-270, modal propio) ──────── Se aloja en este archivo porque comparte la misma paleta y el mismo tamaño de modal; separarlo en un CSS de tres reglas sería peor. */ #pdxh-velo{ position:fixed; inset:0; z-index:100700; background:rgba(10,12,18,.55); display:flex; align-items:center; justify-content:center; padding:20px; } #pdxh-velo *{box-sizing:border-box} #pdxh-velo .pdxh{ width:min(430px,100%); max-height:88vh; overflow:auto; background:var(--pdx-surface, #fff); color:var(--pdx-text, #15171c); border:1px solid var(--pdx-border, #e1e3e8); border-radius:14px; box-shadow:0 22px 60px rgba(0,0,0,.30); text-transform:none; letter-spacing:0; } #pdxh-velo header{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--pdx-border-subtle, #eceef2); } #pdxh-velo header b{font-size:15px; font-weight:650} #pdxh-velo header button{background:none; border:0; color:var(--pdx-text-muted, #8a90a0); font-size:15px; cursor:pointer} #pdxh-velo .pdxh-cuerpo{padding:18px} #pdxh-velo .pdxh-cuerpo > p{ margin:0 0 15px; font-size:13px; line-height:1.55; color:var(--pdx-text-muted, #6a7080); } #pdxh-velo .pdxh-op{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:12px 13px; margin-bottom:9px; cursor:pointer; background:var(--pdx-surface-2, #f7f8fa); border:1px solid var(--pdx-border, #e1e3e8); border-radius:10px; color:var(--pdx-text, #15171c); font:inherit; } #pdxh-velo .pdxh-op:hover{border-color:var(--pdx-accent, #0d9488)} #pdxh-velo .pdxh-op > i{flex:0 0 auto; width:18px; text-align:center; color:var(--pdx-accent, #0d9488); font-size:13px} /* Apagada = ya no hereda. El icono de cadena rota y el color apagado dicen el estado sin tener que leer el texto. */ #pdxh-velo .pdxh-op.off{opacity:.62} #pdxh-velo .pdxh-op.off > i{color:var(--pdx-text-muted, #8a90a0)} #pdxh-velo .pdxh-op b{display:block; font-size:13.5px; font-weight:550} #pdxh-velo .pdxh-op small{display:block; margin-top:2px; font-size:11.5px; color:var(--pdx-text-muted, #8a90a0)}