/* ===========================================
   WIDGETS: Chatbot Atenea + Modo Editor + Comentarios
   =========================================== */

/* ===== LOGO PERSONALIZADO (admin) ===== */
.seapy-logo-personalizado{
  display:inline-flex !important;
  align-items:center;justify-content:center;
  width:44px;height:44px;
  overflow:hidden;
  background:transparent !important;
}
.seapy-logo-img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
}
/* En el footer (fondo oscuro), si el logo tiene transparencia se ve mejor con
   un leve halo blanco que lo acompañe; ajustar solo si es PNG/JPG, no SVG */
.foot-brand .seapy-logo-personalizado{
  background:rgba(255,255,255,.06) !important;
  border-radius:8px;
  padding:3px;
}

/* ===== MODO EDITOR (cuando ?edit=1) ===== */
body.modo-editor [contenteditable="true"]{
  outline: 1px dashed rgba(200,154,71,.45);
  outline-offset: 4px;
  border-radius: 3px;
  cursor: text;
  transition: outline-color .15s, background .15s;
}
body.modo-editor [contenteditable="true"]:hover{
  outline-color: #c89a47;
  background: rgba(200,154,71,.04);
}
body.modo-editor [contenteditable="true"]:focus{
  outline: 2px solid #c89a47;
  background: rgba(200,154,71,.08);
}
body.modo-editor [contenteditable="true"].edit-guardado{
  outline-color: #2e7d57;
  background: rgba(46,125,87,.1);
}
.editor-banner{
  background:#c89a47;color:#0a2540;
  padding:9px 20px;text-align:center;font-weight:700;font-size:.85rem;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;
  position:sticky;top:0;z-index:9999;
  letter-spacing:.2px;
}
/* Imágenes editables en modo editor */
.img-edit-wrap{position:relative;display:inline-block;line-height:0;max-width:100%}
.img-edit-wrap img.img-editable{
  outline:1px dashed rgba(200,154,71,.5);outline-offset:3px;
  transition:outline-color .15s, opacity .15s;
}
.img-edit-wrap:hover img.img-editable{outline:2px solid #c89a47;opacity:.85}
.img-edit-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(10,37,64,.92);color:#c89a47;
  border:2px solid #c89a47;
  padding:9px 18px;border-radius:980px;
  font-size:.84rem;font-weight:700;cursor:pointer;
  opacity:0;transition:opacity .18s;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  z-index:2;white-space:nowrap;
  box-shadow:0 6px 24px rgba(0,0,0,.4);
}
.img-edit-wrap:hover .img-edit-btn{opacity:1}
.img-edit-btn:hover{background:#c89a47;color:#0a2540}

/* ===== CHATBOT WIDGET ===== */
.chat-launcher{
  position:fixed;bottom:24px;right:24px;
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,#c89a47 0%,#9a7530 100%);
  border:none;cursor:pointer;
  box-shadow:0 10px 30px rgba(200,154,71,.4);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;transition:transform .25s, box-shadow .25s;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
}
.chat-launcher:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 40px rgba(200,154,71,.55)}
.chat-launcher svg{width:30px;height:30px;fill:#fff}
.chat-launcher .badge-dot{
  position:absolute;top:6px;right:6px;
  width:14px;height:14px;border-radius:50%;
  background:#2e7d57;border:2px solid #fff;
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.2);opacity:.75}
}

.chat-panel{
  position:fixed;bottom:100px;right:24px;
  width:380px;max-width:calc(100vw - 48px);
  height:560px;max-height:calc(100vh - 140px);
  background:#fff;border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:none;flex-direction:column;overflow:hidden;
  z-index:9998;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;
}
.chat-panel.abierto{display:flex}

.chat-header{
  background:linear-gradient(135deg,#0a2540 0%,#14406b 100%);
  color:#fff;padding:18px 20px;
  display:flex;align-items:center;gap:12px;
  position:relative;
}
.chat-header .ch-avatar{
  width:42px;height:42px;border-radius:50%;
  background:#c89a47;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.chat-header .ch-avatar svg{width:22px;height:22px;fill:#fff}
.chat-header .ch-info h4{
  font-size:.98rem;font-weight:700;color:#fff;
  margin:0;letter-spacing:-.005em;
}
.chat-header .ch-info p{
  font-size:.72rem;color:#a8b6c6;margin:2px 0 0;
  display:flex;align-items:center;gap:5px;
}
.chat-header .ch-info p::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:#2e7d57;
}
.chat-header .ch-close{
  background:rgba(255,255,255,.12);border:none;color:#fff;
  width:30px;height:30px;border-radius:50%;
  cursor:pointer;font-size:1.2rem;line-height:1;
  margin-left:auto;display:flex;align-items:center;justify-content:center;
}
.chat-header .ch-close:hover{background:rgba(255,255,255,.22)}

.chat-body{
  flex:1;overflow-y:auto;padding:18px 18px 8px;
  background:#FAF6F0;
  display:flex;flex-direction:column;gap:12px;
}
.chat-msg{
  max-width:85%;padding:11px 15px;
  border-radius:18px;font-size:.9rem;line-height:1.5;
  word-wrap:break-word;
}
.chat-msg.bot{
  background:#fff;color:#1d1d1f;
  align-self:flex-start;
  border-bottom-left-radius:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.chat-msg.user{
  background:#0a2540;color:#fff;
  align-self:flex-end;
  border-bottom-right-radius:4px;
}
.chat-msg.bot strong{color:#0a2540}
.chat-msg.bot .cite{
  font-size:.75rem;color:#86868b;
  margin-top:6px;padding-top:6px;
  border-top:1px solid #eee;font-style:italic;
}
.chat-msg.bot .quick{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:10px;
}
.chat-msg.bot .quick button{
  background:#FFF8EE;color:#9a7530;
  border:1px solid #e8d4a8;
  padding:5px 12px;font-size:.78rem;
  border-radius:980px;cursor:pointer;
  font-family:inherit;font-weight:500;
}
.chat-msg.bot .quick button:hover{background:#c89a47;color:#fff;border-color:#c89a47}
.chat-typing{
  align-self:flex-start;
  background:#fff;padding:13px 17px;border-radius:18px;
  border-bottom-left-radius:4px;display:flex;gap:4px;
}
.chat-typing span{
  width:7px;height:7px;border-radius:50%;background:#c89a47;
  animation:typingDot 1.4s infinite;
}
.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-6px);opacity:1}
}

.chat-footer{
  background:#fff;padding:12px 14px;
  border-top:1px solid #eee;
}
.chat-input-row{
  display:flex;align-items:center;gap:8px;
  background:#f4f1ea;border-radius:980px;
  padding:6px 6px 6px 16px;
}
.chat-input-row input{
  flex:1;border:none;background:transparent;
  font-size:.92rem;outline:none;
  font-family:inherit;color:#1d1d1f;
}
.chat-input-row input::placeholder{color:#a1a1a6}
.chat-input-row .btn-mic,
.chat-input-row .btn-send,
.chat-input-row .btn-mute{
  width:36px;height:36px;border-radius:50%;border:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;
}
.chat-input-row .btn-mic{background:#fff;color:#86868b}
.chat-input-row .btn-mic svg{width:18px;height:18px;fill:currentColor}
.chat-input-row .btn-mic:hover{background:#FFF8EE;color:#c89a47}
.chat-input-row .btn-mic.escuchando{background:#a8323a;color:#fff;animation:micPulse 1s infinite}
@keyframes micPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(168,50,58,.6)}
  50%{box-shadow:0 0 0 10px rgba(168,50,58,0)}
}
.chat-input-row .btn-mute{background:#fff;color:#2e7d57}
.chat-input-row .btn-mute svg{width:18px;height:18px;fill:currentColor}
.chat-input-row .btn-mute:hover{background:#EAF5EE}
.chat-input-row .btn-mute.silenciado{background:#f4f1ea;color:#a8323a}
.chat-input-row .btn-mute.silenciado:hover{background:#FFEAEC}
.chat-input-row .btn-send{background:#c89a47;color:#fff}
.chat-input-row .btn-send svg{width:18px;height:18px;fill:#fff}
.chat-input-row .btn-send:hover{background:#9a7530}

.chat-meta{
  font-size:.68rem;color:#a1a1a6;text-align:center;
  padding:6px 0 0;letter-spacing:.3px;
}
.chat-meta strong{color:#c89a47;font-weight:600}

@media (max-width:520px){
  .chat-panel{
    width:calc(100vw - 24px);right:12px;left:12px;
    bottom:88px;
    height:calc(100vh - 120px);
  }
  .chat-launcher{bottom:16px;right:16px;width:56px;height:56px}
  .chat-launcher svg{width:26px;height:26px}
}

/* ===== WIDGET DE COMENTARIOS ===== */
.com-widget{
  max-width:760px;margin:48px auto;padding:32px;
  background:#fff;border-radius:18px;
  box-shadow:0 6px 30px rgba(10,37,64,.08);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;
}
.com-widget h3{
  margin:0 0 6px;font-size:1.4rem;font-weight:700;color:#0a2540;
  letter-spacing:-.01em;
}
.com-widget > p{color:#5a6b80;margin:0 0 22px;font-size:.95rem}
.com-form{display:flex;flex-direction:column;gap:10px}
.com-form input, .com-form textarea{
  border:1px solid #e6ebf1;border-radius:12px;
  padding:11px 14px;font-size:.95rem;
  font-family:inherit;color:#1d1d1f;
  outline:none;transition:border-color .15s, box-shadow .15s;
  background:#fafbfd;
}
.com-form input:focus, .com-form textarea:focus{
  border-color:#c89a47;background:#fff;
  box-shadow:0 0 0 3px rgba(200,154,71,.12);
}
.com-form textarea{resize:vertical;min-height:90px}
.com-form .btn-pri{
  background:#0a2540;color:#fff;border:none;
  padding:12px 22px;border-radius:980px;
  font-size:.92rem;font-weight:600;cursor:pointer;
  font-family:inherit;align-self:flex-start;
  transition:background .15s, transform .1s;
}
.com-form .btn-pri:hover{background:#14406b}
.com-form .btn-pri:active{transform:translateY(1px)}
.com-ok{
  background:#e8f5ed;color:#1f6b46;
  padding:10px 14px;border-radius:10px;
  font-size:.88rem;font-weight:500;
  border:1px solid #c4e1d0;
}
.com-list{margin-top:28px;display:flex;flex-direction:column;gap:14px}
.com-list h4{
  margin:0 0 4px;font-size:.95rem;font-weight:600;
  color:#0a2540;text-transform:uppercase;letter-spacing:1px;
}
.com-item{
  background:#fafbfd;border-radius:12px;padding:14px 16px;
  border-left:3px solid #c89a47;
  font-size:.92rem;line-height:1.5;
}
.com-item .com-q{color:#1d1d1f;margin-bottom:6px}
.com-item .com-q strong{color:#0a2540}
.com-item .com-a{color:#0a2540;font-weight:500;padding-top:6px;border-top:1px dashed #e6ebf1;margin-top:6px}
.com-item .com-date{font-size:.72rem;color:#a1a1a6;margin-top:8px;letter-spacing:.3px}

/* ===== FORMULARIO DE CONTACTO ===== */
.contact-widget{
  max-width:820px;margin:48px auto;padding:40px 44px;
  background:#fff;border-radius:20px;
  box-shadow:0 10px 40px rgba(10,37,64,.1);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;
  position:relative;overflow:hidden;
}
.contact-widget::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#c89a47,#0a2540,#c89a47);
}
.contact-head{margin-bottom:28px}
.contact-head h3{margin:0 0 8px;font-size:1.6rem;font-weight:700;color:#0a2540;letter-spacing:-.015em}
.contact-head p{color:#5a6b80;font-size:.95rem;line-height:1.55;margin:0}

/* Selector empresa / acreedor */
.contact-rol-selector{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;
}
.rol-btn{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;border-radius:14px;
  border:2px solid #e6ebf1;background:#fafbfd;
  cursor:pointer;font-family:inherit;
  font-size:.95rem;color:#3a4a5a;
  transition:all .2s;text-align:left;
}
.rol-btn .rol-icon{font-size:1.5rem;line-height:1}
.rol-btn:hover{border-color:#c89a47;background:#fffbf4}
.rol-btn.activo{border-color:#0a2540;background:#0a2540;color:#fff}
.rol-btn.activo .rol-label strong{color:#c89a47}

/* Campos */
.contact-form{display:flex;flex-direction:column;gap:14px}
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-field{display:flex;flex-direction:column;gap:5px}
.contact-label{font-size:.82rem;font-weight:600;color:#3a4a5a;letter-spacing:.3px;text-transform:uppercase}
.contact-label .req{color:#c89a47}
.contact-form input,
.contact-form select{
  border:1.5px solid #e6ebf1;border-radius:10px;
  padding:12px 14px;font-size:.95rem;
  font-family:inherit;color:#1d1d1f;
  outline:none;transition:border-color .15s,box-shadow .15s,background .15s;
  background:#fafbfd;width:100%;box-sizing:border-box;
}
.contact-form input:focus,
.contact-form select:focus{
  border-color:#c89a47;background:#fff;
  box-shadow:0 0 0 3px rgba(200,154,71,.12);
}
.contact-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.contact-submit{
  background:#0a2540;color:#fff;border:none;
  padding:14px 32px;border-radius:980px;
  font-size:.97rem;font-weight:600;cursor:pointer;
  font-family:inherit;align-self:flex-start;
  transition:background .15s,transform .1s;
  margin-top:6px;
}
.contact-submit:hover{background:#14406b}
.contact-submit:active{transform:translateY(1px)}
.contact-nota{font-size:.78rem;color:#9aabb8;margin:4px 0 0;padding-left:2px}
.contact-ok{
  background:#e8f5ed;color:#1f6b46;
  padding:12px 16px;border-radius:10px;
  font-size:.92rem;font-weight:500;
  border:1px solid #c4e1d0;
}
@media (max-width:640px){
  .contact-widget{padding:28px 22px;margin:30px 12px}
  .contact-row{grid-template-columns:1fr}
  .contact-rol-selector{grid-template-columns:1fr}
  .contact-submit{width:100%;text-align:center;justify-content:center}
}

/* ===== UPLOAD DE DOCUMENTOS (formulario standalone) ===== */
.contact-upload-area{
  display:flex;align-items:center;gap:10px;
  border:2px dashed #d0d8e4;border-radius:10px;
  padding:14px 16px;cursor:pointer;
  font-size:.85rem;color:#5a6b80;
  transition:border-color .2s,background .2s;
  background:#fafbfd;
}
.contact-upload-area:hover{border-color:#c89a47;background:#fffbf4;color:#7a5c1e}
.contact-upload-area input[type="file"]{display:none}
.cup-icon{font-size:1.3rem;line-height:1}
.cup-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.cup-file-chip{
  display:inline-flex;align-items:center;gap:4px;
  background:#eef2f8;border-radius:6px;padding:4px 10px;
  font-size:.78rem;color:#3a4a5a;
}
.ccf-upload-label{
  display:flex;align-items:center;gap:8px;
  background:#f0f4f8;border-radius:8px;padding:9px 12px;
  font-size:.82rem;color:#5a6b80;cursor:pointer;
  border:1.5px dashed #ccd5e0;transition:all .15s;
}
.ccf-upload-label:hover{border-color:#c89a47;color:#7a5c1e}
/* Botón descarga docs en CRM */
.btn-doc-dl{
  display:inline-flex;align-items:center;gap:4px;
  background:#eef2f8;border:none;border-radius:6px;
  padding:3px 8px;font-size:.75rem;color:#1a3550;
  cursor:pointer;margin:2px;transition:background .15s;
}
.btn-doc-dl:hover{background:#d0dcea}

/* ===== FORMULARIO DE CONTACTO DENTRO DEL CHAT ===== */
.chat-form-wrap{background:#f4f7fb!important;border-radius:14px!important;padding:14px 16px!important;max-width:100%!important}
.chat-contact-form{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.ccf-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chat-contact-form input,
.chat-contact-form select{
  border:1.5px solid #dde3ec;border-radius:8px;
  padding:9px 11px;font-size:.83rem;
  font-family:inherit;color:#1d1d1f;
  background:#fff;outline:none;width:100%;box-sizing:border-box;
  transition:border-color .15s;
}
.chat-contact-form input:focus,
.chat-contact-form select:focus{border-color:#c89a47;box-shadow:0 0 0 2px rgba(200,154,71,.12)}
.chat-contact-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.ccf-actions{display:flex;gap:8px;margin-top:4px}
.ccf-btn-send{background:#0a2540;color:#fff;border:none;padding:9px 18px;border-radius:980px;font-size:.83rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.ccf-btn-send:hover{background:#14406b}
.ccf-btn-cancel{background:none;color:#888;border:1px solid #dde3ec;padding:9px 14px;border-radius:980px;font-size:.83rem;cursor:pointer;font-family:inherit;transition:all .15s}
.ccf-btn-cancel:hover{border-color:#aaa;color:#555}
.ccf-ok{background:#e8f5ed;color:#1f6b46;padding:9px 12px;border-radius:8px;font-size:.82rem;font-weight:500;border:1px solid #c4e1d0;margin-top:4px}
@media(max-width:400px){.ccf-row{grid-template-columns:1fr}}

/* ===== BOTÓN FLOTANTE WHATSAPP ===== */
.wa-launcher{
  position:fixed;bottom:24px;left:24px;
  width:62px;height:62px;border-radius:50%;
  background:linear-gradient(135deg,#25d366 0%,#128c7e 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,.45);
  z-index:9997;text-decoration:none;
  transition:transform .25s, box-shadow .25s;
  animation:waPulse 2.4s ease-in-out infinite;
}
.wa-launcher:hover{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 14px 40px rgba(37,211,102,.55);
}
.wa-launcher svg{width:32px;height:32px}
.wa-launcher .wa-tooltip{
  position:absolute;left:74px;
  background:#0a2540;color:#fff;
  padding:7px 12px;border-radius:8px;
  font-size:.82rem;font-weight:600;white-space:nowrap;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  opacity:0;pointer-events:none;
  transition:opacity .18s;
}
.wa-launcher:hover .wa-tooltip{opacity:1}
.wa-launcher .wa-tooltip::before{
  content:"";position:absolute;left:-5px;top:50%;transform:translateY(-50%);
  width:0;height:0;border:5px solid transparent;border-right-color:#0a2540;
}
@keyframes waPulse{
  0%,100%{box-shadow:0 10px 30px rgba(37,211,102,.45)}
  50%{box-shadow:0 10px 30px rgba(37,211,102,.45),0 0 0 14px rgba(37,211,102,0)}
}
@media (max-width:520px){
  .wa-launcher{bottom:16px;left:16px;width:54px;height:54px}
  .wa-launcher svg{width:28px;height:28px}
  .wa-launcher .wa-tooltip{display:none}
}