diff --git a/modules/turnero/views/chat.php b/modules/turnero/views/chat.php index c5c4ae8..bc75bbb 100644 --- a/modules/turnero/views/chat.php +++ b/modules/turnero/views/chat.php @@ -228,19 +228,30 @@ html, body { height: 100%; overflow: hidden; font-family: -apple-system, BlinkMa #recording-bar .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e53e3e; animation: blink 1s infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} } -/* ── Modal plantilla ── */ -#template-modal { +/* ── Modal plantilla (2 pasos) ── */ +#tpl-modal { display: none; position: fixed; inset: 0; z-index: 1000; - background: rgba(0,0,0,.4); align-items: center; justify-content: center; + background: rgba(0,0,0,.45); align-items: center; justify-content: center; padding: 16px; } -#template-modal.show { display: flex; } -.tpl-card { background: #fff; border-radius: 14px; padding: 24px; width: 340px; box-shadow: 0 8px 32px rgba(0,0,0,.2); } -.tpl-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 16px; } -.tpl-field { margin-bottom: 12px; } -.tpl-field label { font-size: .8rem; color: #555; font-weight: 600; display: block; margin-bottom: 4px; } -.tpl-field input { width: 100%; padding: 8px 10px; border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: .9rem; outline: none; } -.tpl-field input:focus { border-color: #25d366; } -.tpl-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } +#tpl-modal.show { display: flex; } +.tpl-dialog { background: #fff; border-radius: 14px; width: 100%; max-width: 400px; box-shadow: 0 8px 32px rgba(0,0,0,.22); overflow: hidden; } +.tpl-hdr { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid #f1f5f9; font-size: .92rem; font-weight: 700; color: #1e293b; } +.tpl-hdr > span { flex: 1; } +.tpl-close-btn { background: none; border: none; cursor: pointer; color: #94a3b8; font-size: .95rem; padding: 2px 7px; border-radius: 4px; } +.tpl-close-btn:hover { color: #475569; background: #f1f5f9; } +.tpl-back-btn { background: none; border: none; cursor: pointer; color: #64748b; font-size: .85rem; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; } +.tpl-back-btn:hover { background: #f1f5f9; } +.tpl-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; cursor: pointer; border-radius: 8px; margin: 0 6px; transition: background .12s; } +.tpl-item:hover { background: #f0fdf4; } +.tpl-item-name { font-size: .87rem; font-weight: 600; color: #1e293b; } +.tpl-item-meta { font-size: .74rem; color: #64748b; } +.tpl-item-body { font-size: .74rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.tpl-preview-box { background: #f0fdf4; border-left: 3px solid #25d366; border-radius: 0 6px 6px 0; padding: 8px 12px; font-size: .82rem; color: #374151; margin: 10px 16px 2px; white-space: pre-wrap; word-break: break-word; } +.tpl-var-row { padding: 0 16px; } +.tpl-var-row label { font-size: .78rem; font-weight: 600; color: #475569; display: block; margin-bottom: 3px; } +.tpl-var-row input { width: 100%; padding: 7px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: .87rem; outline: none; box-sizing: border-box; } +.tpl-var-row input:focus { border-color: #25d366; } +.tpl-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid #f1f5f9; } .btn-tpl-cancel { padding: 8px 16px; background: #f5f5f5; border: none; border-radius: 8px; cursor: pointer; font-size: .88rem; } .btn-tpl-send { padding: 8px 16px; background: #25d366; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: .88rem; font-weight: 600; } @@ -371,36 +382,41 @@ html, body { height: 100%; overflow: hidden; font-family: -apple-system, BlinkMa - -