/* ====== TARJETA MENSAJE — Widget v3.0 ====== */
.tm-wrap { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; border:1px solid #e8e8e8; border-radius:10px; overflow:hidden; margin:16px 0 8px; transition:border-color .2s; box-sizing:border-box; }
.tm-wrap * { box-sizing:border-box; }
.tm-wrap.active { border-color:#1D9E75; }
.tm-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:#fafafa; cursor:pointer; user-select:none; gap:10px; }
.tm-wrap.active .tm-header { background:#f0faf5; }
.tm-header-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.tm-ico  { font-size:18px; flex-shrink:0; }
.tm-lbl  { font-size:14px; font-weight:600; color:#1a1108; line-height:1.3; }
.tm-sub  { font-size:12px; color:#888; margin-top:1px; }
.tm-header-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tm-tag  { font-size:12px; font-weight:600; color:#0F6E56; border:1px solid #1D9E75; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.tm-pill { all:unset; box-sizing:border-box!important; width:40px!important; height:22px!important; border-radius:11px!important; background:#ccc!important; position:relative!important; cursor:pointer!important; transition:background .2s!important; flex-shrink:0!important; display:inline-block!important; }
.tm-pill.on { background:#0F6E56!important; }
.tm-pill::after { content:''!important; position:absolute!important; top:3px!important; left:3px!important; width:16px!important; height:16px!important; border-radius:50%!important; background:#fff!important; transition:transform .2s!important; }
.tm-pill.on::after { transform:translateX(18px)!important; }
.tm-cta-row { padding:10px 14px 12px; border-top:1px solid #f0f0f0; background:#fff; }
.tm-open-btn { all:unset; box-sizing:border-box!important; display:block!important; width:100%!important; padding:11px!important; border-radius:7px!important; border:1.5px solid #1D9E75!important; color:#0F6E56!important; font-size:13px!important; font-weight:600!important; text-align:center!important; cursor:pointer!important; transition:all .15s!important; font-family:inherit!important; }
.tm-open-btn:hover { background:#f0faf5!important; }
/* Popup */
.tm-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:999999; align-items:center; justify-content:center; padding:16px; }
.tm-overlay.open { display:flex; }
.tm-modal { background:#fff; border-radius:12px; max-width:520px; width:100%; max-height:92vh; overflow-y:auto; position:relative; padding:24px; animation:pp-fade-in .2s ease; }
.tm-close { all:unset; position:absolute!important; top:12px!important; right:14px!important; width:28px!important; height:28px!important; border-radius:50%!important; background:#f0f0f0!important; cursor:pointer!important; display:flex!important; align-items:center!important; justify-content:center!important; font-size:13px!important; color:#555!important; box-sizing:border-box!important; transition:background .15s!important; }
.tm-close:hover { background:#e0e0e0!important; color:#c0392b!important; }
.tm-modal-title { font-size:16px; font-weight:700; color:#1a1108; margin:0 0 16px; padding-right:30px; }
.tm-inp-lbl { display:block; font-size:13px; color:#555; margin-bottom:6px; }
.tm-inp-lbl small { opacity:.7; font-size:11px; }
.tm-textarea { width:100%!important; min-height:120px!important; padding:10px 12px!important; border:1px solid #ddd!important; border-radius:7px!important; font-size:14px!important; font-family:inherit!important; color:#222!important; resize:vertical!important; outline:none!important; background:#fff!important; box-shadow:none!important; transition:border-color .15s!important; }
.tm-textarea:focus { border-color:#0F6E56!important; box-shadow:0 0 0 2px rgba(29,158,117,.1)!important; }
.tm-char-info { font-size:11px; color:#aaa; margin-top:4px; text-align:right; }
.tm-err-msg  { font-size:12px; color:#c0392b; margin-top:4px; min-height:14px; }
.tm-upload-zone { border:1.5px dashed #ccc; border-radius:7px; padding:16px; text-align:center; cursor:pointer; background:#fafafa; transition:border-color .15s; }
.tm-upload-zone:hover { border-color:#1D9E75; }
.tm-upload-zone.done  { border-color:#1D9E75; background:#f0faf5; border-style:solid; }
.tm-upl-ico  { font-size:22px; margin-bottom:4px; }
.tm-upl-txt  { font-size:12px; color:#666; }
.tm-file-done { display:flex; align-items:center; gap:8px; margin-top:6px; font-size:12px; }
.tm-file-done span:first-child { color:#0F6E56; font-weight:500; flex:1; }
.tm-file-change { color:#1D9E75; cursor:pointer; text-decoration:underline; }
.tm-confirm-btn { all:unset; box-sizing:border-box!important; display:block!important; width:100%!important; margin-top:18px!important; padding:13px!important; border-radius:7px!important; background:#1a1108!important; color:#F5E6C0!important; font-size:14px!important; font-weight:600!important; text-align:center!important; cursor:pointer!important; transition:opacity .15s!important; font-family:inherit!important; }
.tm-confirm-btn:disabled { opacity:.35!important; cursor:not-allowed!important; }
.tm-confirm-btn:not(:disabled):hover { opacity:.85!important; }
.tm-loader { text-align:center; padding:10px; font-size:13px; color:#888; }
.tm-spinner { display:inline-block; width:14px; height:14px; border:2px solid #ddd; border-top-color:#0F6E56; border-radius:50%; animation:pp-fade-in 0s; vertical-align:middle; margin-right:6px; animation:tm-spin .7s linear infinite; }
@keyframes tm-spin { to { transform:rotate(360deg); } }
.tm-file-delete { color:#c0392b; cursor:pointer; text-decoration:underline; margin-left:4px; }
.tm-file-delete:hover { color:#922b21; }

/* Ensure overlay shows correctly when opened via JS css() */
.tm-overlay[style*="flex"] { display: flex !important; }