/* DPQRS Lookup - production styles (light blue, responsive, accessible) */
.dpqrs-card{
  max-width: 760px;
  margin: 24px auto;
  padding: 22px;
  border-radius: 18px;
  background: #f3f9ff;
  border: 1px solid #cfe6ff;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.dpqrs-title{
  font-size: 22px;
  margin: 0 0 8px 0;
  color: #0b3a6d;
}
.dpqrs-subtitle{
  margin: 0 0 18px 0;
  color: #2a5db0;
  font-size: 14px;
}
.dpqrs-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: end;
}
@media (max-width: 640px){
  .dpqrs-grid{ grid-template-columns: 1fr; }
}
.dpqrs-card label{
  color: #0b3a6d;
  font-weight: 600;
  margin-bottom: 8px;
  display: block; /* Para que el margen funcione */
}
.dpqrs-card input.form-text, .dpqrs-card input.form-email{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #b7d7ff;
  background: #ffffff;
}
.dpqrs-card input.form-text:focus, .dpqrs-card input.form-email:focus{
  outline: none;
  border-color: #4aa3ff;
  box-shadow: 0 0 0 3px rgba(74,163,255,.25);
}
/*.dpqrs-actions{
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}*/
.dpqrs-actions {
  position: sticky;
  top: 20px;
  background: #ffffff;
  padding: 16px 0;
  z-index: 10;
}


.dpqrs-actions .button--primary{
  background: #0b3a6d;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
}
.dpqrs-actions .button--primary:hover{
  background: #0b3a6d;
}
.dpqrs-hint{
  font-size: 12px;
  color: #2a5db0;
  margin-top: 8px;
}
.dpqrs-result{
  margin-top: 18px;
  padding: 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #cfe6ff;
}
.dpqrs-result .table{
  width: 100%;
  border-collapse: collapse;
}
.dpqrs-result .table th, .dpqrs-result .table td{
  padding: 10px 10px;
  border-bottom: 1px solid #e7f2ff;
  vertical-align: top;
}
.dpqrs-result .table th{
  text-align: left;
  color: #0b3a6d;
  width: 34%;
  background: #f7fbff;
}
.dpqrs-badge{
  display:inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e7f2ff;
  color:#0b3a6d;
  font-size: 12px;
  font-weight: 600;
}
.dpqrs-loading{
  display:none;
  margin-top: 10px;
  align-items:center;
  gap: 10px;
  color:#0b3a6d;
}
.dpqrs-loading.is-active{ display:flex; }
.dpqrs-spinner{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid rgba(47,128,237,.25);
  border-top-color: rgba(47,128,237,.95);
  animation: dpqrsSpin 0.9s linear infinite;
}
@keyframes dpqrsSpin { to { transform: rotate(360deg); } }


.dpqrs-inputgroup{display:flex;align-items:center;gap:10px}
.dpqrs-prefix{padding:12px 14px;border:1px solid #cfe6ff;border-radius:14px;background:#f2f8ff;color:#0b3a6d;font-weight:700;white-space:nowrap}
.dpqrs-inputgroup input{flex:1}

/* Joined PQRSF field: looks like a single control */
.dpqrs-join{
  display:flex;
  align-items:stretch;
  gap:0;
  margin-top:6px;
}



.dpqrs-join__input{
  flex:1;
}

.dpqrs-join__input input{
  width:100%;
  height:100%;
  border:1px solid #cfe6ff;
  border-top-left-radius:0 !important;
  border-bottom-left-radius:0 !important;
  border-top-right-radius:14px;
  border-bottom-right-radius:14px;
  height: 55px !important;
  margin-top: -6px;
} /*
* Contenedor join
.dpqrs-join {
  display: flex;
  align-items: stretch;
  width: 100%;
} 

* Prefijo DPQRS-
.dpqrs-join__prefix {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: #ffffff;
  border-right: 0;
  border-radius: 10px 0 0 10px;
  font-weight: 600;
  color: #0b3a6d;
  height: 44px;
  box-sizing: border-box;
  margin-top: 14%; 
} */

/* Input del número */
.dpqrs-join input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #b7d7ff;
  background: #ffffff;
}

/* Focus consistente */
.dpqrs-join input:focus {
  outline: none;
  border-color: #4aa3ff;
  box-shadow: 0 0 0 3px rgba(74,163,255,.25);
}

/* Hint */
.dpqrs-hint-match {
  margin-top: 12px;
  font-size: 13px;
  color: #555;
}
/* Columna Campo */
.dpqrs-result table td:first-child {
  font-weight: 600;
  color: #2381e6;
  background: #f2f7ff;
  width: 30%;
  vertical-align: top;
  border-right: 1px solid #c7dbf3;
}
/* Columna Valor */
.dpqrs-result table td:last-child {
  max-width: 100%;
  overflow-x: auto;
  background: #ffffff;
  color: #333;
}
.dpqrs-result table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #c7dbf3;
  border-radius: 10px;
  overflow: hidden;
  table-layout: fixed; /* CLAVE: Fuerza a la tabla a no salirse */
  word-wrap: break-word; /* Rompe palabras largas */
}

.dpqrs-result table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e3eefc;
  word-break: break-word; /* Rompe URLs o correos largos */
  overflow-wrap: break-word;
  vertical-align: top;
}
/* Bloque de comentarios */
.dpqrs-result .dpqrs-comment {
  background: #eaf3ff;
  border: 1px solid #0b3a6d;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  color: #0b3a6d;
}

/* Autor del comentario */
.dpqrs-result .dpqrs-comment strong {
  color: #0b3a6d;
  font-weight: 700;
}

/* Fecha */
.dpqrs-result .dpqrs-comment .dpqrs-comment-date {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 6px;
}

/* Texto del comentario */
.dpqrs-result .dpqrs-comment-body {
  margin-top: 6px;
  white-space: pre-wrap;
}