*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{
--primary:#2563eb;
--primary-dark:#1d4ed8;
--primary-soft:#eff6ff;
--dark:#0f172a;
--text:#334155;
--muted:#64748b;
--line:#e2e8f0;
--bg:#f6f8fb;
--white:#ffffff;
--shadow:0 20px 45px rgba(15,23,42,.08);
}

body{
font-family:'Inter',sans-serif;
background:
radial-gradient(circle at top right,rgba(37,99,235,.11),transparent 36%),
linear-gradient(180deg,#ffffff 0%,#f6f8fb 100%);
color:var(--dark);
min-height:100vh;
line-height:1.7;
}

.topbar{
width:100%;
height:76px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 7%;
background:rgba(255,255,255,.96);
border-bottom:1px solid var(--line);
position:sticky;
top:0;
z-index:1000;
backdrop-filter:blur(14px);
}

.logo{
font-size:1.45rem;
font-weight:900;
letter-spacing:-.03em;
color:var(--primary);
}

.back-btn{
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 17px;
border-radius:14px;
font-size:.92rem;
font-weight:900;
background:var(--primary-soft);
color:var(--primary);
border:1px solid #dbeafe;
transition:.25s;
}

.back-btn:hover{
transform:translateY(-2px);
background:#dbeafe;
}

.premium-container{
width:100%;
max-width:980px;
margin:auto;
padding:58px 20px 80px;
}

.premium-card{
background:white;
border:1px solid var(--line);
border-radius:30px;
box-shadow:var(--shadow);
padding:38px;
}

.premium-head{
margin-bottom:28px;
}

.mini-badge{
display:inline-flex;
padding:8px 14px;
border-radius:999px;
background:var(--primary-soft);
color:var(--primary);
font-size:.72rem;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:18px;
}

.premium-head h1{
font-size:clamp(2rem,5vw,3.4rem);
line-height:1.05;
letter-spacing:-.055em;
font-weight:900;
color:var(--dark);
margin-bottom:16px;
}

.premium-desc{
max-width:760px;
font-size:1rem;
color:#64748b;
line-height:1.9;
}

.section-subtitle{
font-size:1.35rem;
font-weight:900;
letter-spacing:-.035em;
margin-bottom:14px;
color:#0f172a;
}

.empty-text{
color:#94a3b8;
font-weight:700;
font-size:.96rem;
margin-bottom:16px;
}

.consultas-tabs{
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:20px;
}

.tab-consulta{
background:#f8fafc;
border:1px solid #e2e8f0;
border-radius:16px;
padding:14px 16px;
cursor:pointer;
transition:.25s;
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
}

.tab-consulta:hover,
.tab-consulta.active{
border-color:#bfdbfe;
background:#eff6ff;
}

.tab-texto{
font-size:.95rem;
font-weight:800;
color:#334155;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:70%;
}

.estado-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:5px 11px;
border-radius:999px;
font-size:.75rem;
font-weight:900;
line-height:1;
}

.estado-pendiente{
background:#fef3c7;
color:#92400e;
}

.estado-respondida{
background:#dbeafe;
color:#1d4ed8;
}

.btn-nueva{
width:100%;
background:#f8fafc;
border:2px dashed #cbd5e1;
color:#64748b;
padding:15px;
border-radius:17px;
font-family:'Inter',sans-serif;
font-size:.96rem;
font-weight:900;
cursor:pointer;
transition:.25s;
}

.btn-nueva:hover{
border-color:var(--primary);
color:var(--primary);
background:#eff6ff;
}

.chat-header{
display:flex;
align-items:center;
gap:14px;
margin-bottom:18px;
}

.btn-volver-chat{
background:#eff6ff;
border:1px solid #dbeafe;
padding:9px 14px;
border-radius:13px;
font-size:.9rem;
font-weight:900;
cursor:pointer;
color:var(--primary);
font-family:'Inter',sans-serif;
}

.chat-title-wrap{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
min-width:0;
}

.chat-title{
font-weight:900;
font-size:1rem;
color:#0f172a;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:420px;
}

.chat-box{
background:#f8fafc;
border:1px solid #e2e8f0;
border-radius:22px;
padding:18px;
min-height:300px;
max-height:420px;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:12px;
margin-bottom:16px;
}

.chat-empty{
text-align:center;
color:#94a3b8;
margin:auto;
font-size:.94rem;
font-weight:700;
}

.bubble-user{
align-self:flex-end;
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:white;
padding:12px 15px;
border-radius:18px 18px 4px 18px;
max-width:82%;
font-size:.94rem;
line-height:1.6;
position:relative;
}

.bubble-admin{
align-self:flex-start;
background:white;
color:#111827;
padding:12px 15px;
border-radius:18px 18px 18px 4px;
max-width:82%;
font-size:.94rem;
line-height:1.6;
border:1px solid #e2e8f0;
box-shadow:0 6px 16px rgba(15,23,42,.06);
}

.bubble-admin .admin-label{
font-size:.72rem;
font-weight:900;
color:var(--primary);
display:block;
margin-bottom:4px;
}

.bubble-user .time,
.bubble-admin .time{
font-size:.68rem;
opacity:.65;
display:block;
margin-top:6px;
text-align:right;
}

.chat-input-row{
display:flex;
gap:10px;
align-items:center;
}

.chat-input-row textarea{
flex:1;
padding:14px 16px;
border-radius:16px;
border:1px solid #e2e8f0;
font-family:'Inter',sans-serif;
font-size:.94rem;
resize:none;
outline:none;
height:52px;
min-height:52px;
max-height:52px;
transition:.25s;
line-height:1.4;
}

.chat-input-row textarea:focus{
border-color:var(--primary);
box-shadow:0 0 0 5px rgba(37,99,235,.10);
background:white;
}

.btn-send{
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:white;
border:none;
height:52px;
padding:0 18px;
border-radius:16px;
font-size:.94rem;
font-weight:900;
cursor:pointer;
font-family:'Inter',sans-serif;
transition:.25s;
flex-shrink:0;
}

.btn-send:hover{
transform:translateY(-2px);
}

@media(max-width:650px){
.topbar{
height:68px;
padding:0 5%;
}

.logo{
font-size:1.16rem;
}

.back-btn{
padding:8px 13px;
font-size:.84rem;
}

.premium-container{
padding:34px 14px 60px;
}

.premium-card{
padding:26px 22px;
border-radius:24px;
}

.premium-head h1{
font-size:2.1rem;
}

.chat-header{
align-items:flex-start;
flex-direction:column;
}

.chat-title{
max-width:100%;
}

.chat-input-row{
align-items:stretch;
flex-direction:column;
}

.btn-send{
width:100%;
}

.tab-consulta{
align-items:flex-start;
flex-direction:column;
}

.tab-texto{
max-width:100%;
}
}

/* Ajustes v41: imágenes en consultas Premium */
.consulta-actions-user{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.btn-eliminar-consulta{
  background:#fee2e2;
  border:none;
  color:#dc2626;
  border-radius:8px;
  padding:4px 10px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
  line-height:1;
  display:inline-flex;
  align-items:center;
  font-family:'Inter',sans-serif;
}

.btn-eliminar-consulta:hover{
  background:#fecaca;
  transform:translateY(-1px);
}

.btn-attach{
  height:52px;
  border:none;
  border-radius:16px;
  padding:0 16px;
  background:#eff6ff;
  color:var(--primary);
  border:1px solid #dbeafe;
  font-size:.9rem;
  font-weight:900;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  transition:.25s;
  flex-shrink:0;
}

.btn-attach:hover{
  transform:translateY(-2px);
  background:#dbeafe;
}

.image-preview{
  align-items:center;
  gap:12px;
  width:100%;
  background:#eff6ff;
  border:1px solid #dbeafe;
  border-radius:18px;
  padding:10px;
  margin-bottom:12px;
}

.image-preview img{
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:14px;
  flex-shrink:0;
}

.image-preview-info{
  flex:1;
  min-width:0;
}

.image-preview-info strong{
  display:block;
  color:#0f172a;
  font-size:.86rem;
  font-weight:900;
  line-height:1.2;
}

.image-preview-info span{
  display:block;
  color:#64748b;
  font-size:.76rem;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:2px;
}

.btn-remove-image{
  border:none;
  border-radius:999px;
  background:#fee2e2;
  border:1px solid #fecaca;
  color:#dc2626;
  padding:8px 12px;
  font-size:.78rem;
  font-weight:900;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  flex-shrink:0;
}

.bubble-text{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.chat-message-image{
  display:block;
  width:100%;
  max-width:260px;
  max-height:260px;
  object-fit:cover;
  border-radius:16px;
  margin-top:8px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.22);
}

.bubble-admin .chat-message-image{
  border-color:#e2e8f0;
}

.image-deleted-note{
  margin-top:8px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(15,23,42,.08);
  font-size:.82rem;
  font-weight:800;
}

.bubble-admin .image-deleted-note{
  background:#f1f5f9;
  color:#64748b;
}

.consulta-modal-form{
  text-align:left;
}

.swal-consulta-textarea{
  width:100%;
  min-height:138px;
  resize:vertical;
  outline:none;
  border:1px solid #dbeafe;
  border-radius:16px;
  padding:14px 15px;
  color:#0f172a;
  background:#f8fafc;
  font-family:'Inter',sans-serif;
  font-size:.95rem;
  line-height:1.6;
}

.swal-file-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:12px;
  padding:10px 14px;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid #dbeafe;
  color:#2563eb;
  font-size:.86rem;
  font-weight:900;
  cursor:pointer;
}

.swal-file-input{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
}

.swal-file-help{
  color:#64748b;
  font-size:.78rem;
  font-weight:600;
  margin-top:8px;
  line-height:1.5;
}

.chat-image-popup{
  border-radius:24px!important;
  overflow:hidden!important;
  padding:0 0 18px 0!important;
}

.chat-image-popup .swal2-image{
  margin:0!important;
  display:block!important;
  width:100%!important;
  max-height:420px!important;
  object-fit:contain!important;
  border-radius:0!important;
  background:#0f172a!important;
}

.chat-image-popup-close{
  color:white!important;
  font-size:18px!important;
  background:rgba(0,0,0,.55)!important;
  border-radius:50%!important;
  width:32px!important;
  height:32px!important;
  top:8px!important;
  right:8px!important;
  position:absolute!important;
}

@media(max-width:650px){
  .consulta-actions-user{
    width:100%;
    justify-content:space-between;
  }

  .btn-attach,
  .btn-send{
    width:100%;
  }

  .image-preview{
    align-items:flex-start;
  }

  .chat-message-image{
    max-width:100%;
  }
}


/* Ajustes v55: ocultar botón nativo de archivo en nueva consulta */


/* Ajustes v56: chat Premium en una sola fila y nombre de imagen seleccionada */
.file-input-consulta{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
}

.chat-input-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:10px !important;
  width:100%;
}

.chat-input-row .btn-attach{
  width:auto !important;
  min-width:86px;
  height:56px;
  padding:0 18px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.chat-input-row textarea{
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  height:56px;
  min-height:56px;
  max-height:56px;
}

.chat-input-row .btn-send{
  width:56px !important;
  min-width:56px;
  height:56px;
  padding:0;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.swal-file-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.swal-file-row .swal-file-label{
  margin-top:0;
}

.swal-file-name{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  max-width:100%;
  padding:8px 12px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#64748b;
  font-size:.78rem;
  font-weight:800;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.swal-file-name.has-file{
  background:#ecfdf5;
  border-color:#bbf7d0;
  color:#059669;
}

@media(max-width:650px){
  .chat-input-row{
    flex-direction:row !important;
    align-items:center !important;
    gap:8px !important;
  }

  .chat-input-row .btn-attach{
    width:auto !important;
    min-width:74px;
    height:54px;
    padding:0 13px;
    border-radius:17px;
  }

  .chat-input-row textarea{
    width:auto !important;
    height:54px;
    min-height:54px;
    max-height:54px;
    padding:14px 13px;
    font-size:.92rem;
  }

  .chat-input-row .btn-send{
    width:54px !important;
    min-width:54px;
    height:54px;
    border-radius:17px;
  }

  .swal-file-row{
    gap:8px;
  }

  .swal-file-name{
    max-width:100%;
  }
}