/* ============================================================================ * NormaViva Pro · /css/add-to-project.css * Shared modal "Agregar a proyecto" reused by fallos / sii / leyes drawers. * Owned by frontend agent · 2026-04-26 * Depends on tokens declared in /pro-site/_shared.css (.pro-site scope). * ========================================================================= */ /* Wrapper auto-injected into . Keep prefix `a2p-` to avoid collisions. */ .a2p-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(11, 30, 63, .58); backdrop-filter: blur(4px) saturate(140%); -webkit-backdrop-filter: blur(4px) saturate(140%); display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .22s var(--pro-ease-out, cubic-bezier(.22,.61,.36,1)); } .a2p-backdrop[data-open="true"] { display: flex; opacity: 1; } .a2p-modal { background: var(--pro-surface, #ffffff); border: 1px solid var(--pro-line, #e2e8f0); border-radius: var(--pro-r-lg, 16px); box-shadow: var(--pro-shadow-lg, 0 30px 60px -20px rgba(11,30,63,.25), 0 10px 20px -6px rgba(11,30,63,.10)); max-width: 480px; width: 100%; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; transform: translateY(14px) scale(.985); opacity: 0; transition: transform .26s var(--pro-ease-out, cubic-bezier(.22,.61,.36,1)), opacity .22s var(--pro-ease-out, cubic-bezier(.22,.61,.36,1)); } .a2p-backdrop[data-open="true"] .a2p-modal { transform: translateY(0) scale(1); opacity: 1; } .a2p-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 14px; border-bottom: 1px solid var(--pro-line, #e2e8f0); } .a2p-title { font-size: 18px; font-weight: 700; color: var(--pro-navy-900, #0b1e3f); font-family: var(--pro-font-display, "Source Serif 4", Georgia, serif); letter-spacing: -.01em; margin: 0; line-height: 1.25; } .a2p-eyebrow { display: block; font-family: var(--pro-font-sans, "Inter", system-ui, sans-serif); font-size: 11px; font-weight: 600; color: var(--pro-mute, #64748b); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; } .a2p-close { background: transparent; border: 0; padding: 4px 8px; color: var(--pro-mute, #64748b); cursor: pointer; border-radius: var(--pro-r-sm, 8px); font-size: 22px; line-height: 1; transition: background var(--pro-dur-fast, .15s) ease, color var(--pro-dur-fast, .15s) ease; } .a2p-close:hover { background: var(--pro-bg-alt, #f1f5f9); color: var(--pro-navy-800, #11294f); } .a2p-close:focus-visible { outline: 2px solid var(--pro-navy-500, #2d5a9e); outline-offset: 2px; } .a2p-body { padding: 18px 24px 6px; overflow-y: auto; flex: 1 1 auto; } .a2p-doc { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--pro-r-md, 12px); background: var(--pro-bg-alt, #f1f5f9); border-left: 3px solid var(--pro-gold-500, #f59e0b); font-size: 14px; color: var(--pro-body, #334155); line-height: 1.45; } .a2p-doc strong { color: var(--pro-navy-800, #11294f); display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; } .a2p-field { margin-bottom: 14px; } .a2p-label { display: block; font-size: 13px; font-weight: 600; color: var(--pro-navy-800, #11294f); margin-bottom: 6px; } .a2p-select { width: 100%; padding: 10px 12px; border: 1px solid var(--pro-line-strong, #cbd5e1); border-radius: var(--pro-r-sm, 8px); background: var(--pro-surface, #ffffff); color: var(--pro-ink, #0f1f3d); font-family: inherit; font-size: 14px; line-height: 1.4; transition: border-color var(--pro-dur-fast, .15s) ease, box-shadow var(--pro-dur-fast, .15s) ease; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; } .a2p-select:focus { outline: none; border-color: var(--pro-navy-500, #2d5a9e); box-shadow: var(--pro-shadow-focus, 0 0 0 3px rgba(27,58,107,.18)); } .a2p-select:disabled { background-color: var(--pro-bg-alt, #f1f5f9); color: var(--pro-mute, #64748b); cursor: not-allowed; } .a2p-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--pro-line-strong, #cbd5e1); border-radius: var(--pro-r-sm, 8px); background: var(--pro-surface, #ffffff); color: var(--pro-ink, #0f1f3d); font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; min-height: 64px; max-height: 140px; transition: border-color var(--pro-dur-fast, .15s) ease, box-shadow var(--pro-dur-fast, .15s) ease; } .a2p-textarea:focus { outline: none; border-color: var(--pro-navy-500, #2d5a9e); box-shadow: var(--pro-shadow-focus, 0 0 0 3px rgba(27,58,107,.18)); } .a2p-counter { margin-top: 4px; font-size: 11px; color: var(--pro-mute, #64748b); text-align: right; } .a2p-counter[data-over="true"] { color: var(--pro-danger, #dc2626); font-weight: 600; } .a2p-empty { padding: 22px 18px; text-align: center; border: 1px dashed var(--pro-line-strong, #cbd5e1); border-radius: var(--pro-r-md, 12px); background: var(--pro-bg, #fafbfc); color: var(--pro-body, #334155); } .a2p-empty p { margin: 0 0 12px; font-size: 14px; } .a2p-empty .a2p-cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--pro-r-sm, 8px); background: var(--pro-navy-700, #1b3a6b); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: background var(--pro-dur-fast, .15s) ease; } .a2p-empty .a2p-cta:hover { background: var(--pro-navy-800, #11294f); color: #fff; text-decoration: none; } .a2p-error { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--pro-r-sm, 8px); background: var(--pro-danger-50, #fee2e2); color: var(--pro-danger-700, #991b1b); font-size: 13px; } .a2p-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 24px 22px; border-top: 1px solid var(--pro-line, #e2e8f0); background: var(--pro-bg, #fafbfc); } .a2p-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: var(--pro-r-sm, 8px); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--pro-dur-fast, .15s) ease, color var(--pro-dur-fast, .15s) ease, border-color var(--pro-dur-fast, .15s) ease, transform var(--pro-dur-fast, .15s) ease; } .a2p-btn:active { transform: translateY(1px); } .a2p-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; } .a2p-btn--ghost { background: transparent; color: var(--pro-body, #334155); border-color: var(--pro-line-strong, #cbd5e1); } .a2p-btn--ghost:hover:not([disabled]) { background: var(--pro-bg-alt, #f1f5f9); color: var(--pro-navy-800, #11294f); } .a2p-btn--primary { background: linear-gradient(180deg, var(--pro-navy-700, #1b3a6b), var(--pro-navy-800, #11294f)); color: #fff; border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 4px 14px -4px rgba(11,30,63,.35); } .a2p-btn--primary:hover:not([disabled]) { background: linear-gradient(180deg, var(--pro-navy-800, #11294f), var(--pro-navy-900, #0b1e3f)); } .a2p-btn:focus-visible { outline: 2px solid var(--pro-gold-500, #f59e0b); outline-offset: 2px; } .a2p-spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: a2p-spin .7s linear infinite; } @keyframes a2p-spin { to { transform: rotate(360deg); } } @media (max-width: 600px) { .a2p-modal { max-height: 92vh; } .a2p-head, .a2p-body, .a2p-actions { padding-left: 18px; padding-right: 18px; } .a2p-title { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .a2p-backdrop, .a2p-modal { transition: none; } }