/* ============================================================
   REMAQ — Componentes reutilizables
   Todos los módulos (clientes, OT, inventario, cartera, etc.)
   deben construirse ÚNICAMENTE con estas clases — nadie debe
   inventar un botón o una tabla distintos. Si un módulo necesita
   algo que no está aquí, se agrega aquí (no localmente en el
   módulo), para que el resto los herede.
   ============================================================ */

/* --- Botones --- */

.rq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rq-space-2);
  padding: var(--rq-space-2) var(--rq-space-4);
  border: 1px solid transparent;
  border-radius: var(--rq-radio);
  font-weight: 600;
  font-size: 0.95em;
  cursor: pointer;
  background: var(--rq-color-superficie);
  color: var(--rq-color-texto);
  transition: background 0.15s ease, border-color 0.15s ease;
  min-height: 40px;
}

.rq-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.rq-btn--primario { background: var(--rq-color-marca); border-color: var(--rq-color-marca); color: var(--rq-blanco); }
.rq-btn--primario:hover:not(:disabled) { background: var(--rq-color-marca-hover); border-color: var(--rq-color-marca-hover); }

.rq-btn--secundario { background: var(--rq-blanco); border-color: var(--rq-color-borde); color: var(--rq-color-texto); }
.rq-btn--secundario:hover:not(:disabled) { background: var(--rq-gris-100); }

.rq-btn--peligro { background: var(--rq-peligro); border-color: var(--rq-peligro); color: var(--rq-blanco); }
.rq-btn--peligro:hover:not(:disabled) { filter: brightness(0.92); }

.rq-btn--texto { background: none; border-color: transparent; color: var(--rq-color-marca); padding-left: var(--rq-space-2); padding-right: var(--rq-space-2); }
.rq-btn--texto:hover:not(:disabled) { text-decoration: underline; background: none; }

.rq-btn--pequeno { min-height: 32px; padding: var(--rq-space-1) var(--rq-space-3); font-size: 0.85em; }
.rq-btn--ancho-completo { width: 100%; }

/* --- Tarjetas --- */

.rq-tarjeta {
  background: var(--rq-color-superficie);
  border: 1px solid var(--rq-color-borde);
  border-radius: var(--rq-radio);
  box-shadow: var(--rq-sombra-1);
  padding: var(--rq-space-4);
}

.rq-tarjeta__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--rq-space-3);
}

.rq-tarjeta-resumen {
  background: var(--rq-color-superficie);
  border: 1px solid var(--rq-color-borde);
  border-radius: var(--rq-radio);
  padding: var(--rq-space-3) var(--rq-space-4);
}
.rq-tarjeta-resumen__valor { font-size: 1.4rem; font-weight: 700; }
.rq-tarjeta-resumen__etiqueta { color: var(--rq-color-texto-secundario); font-size: 0.85em; }

/* --- Formularios --- */

.rq-campo { margin-bottom: var(--rq-space-4); }
.rq-campo label {
  display: block;
  margin-bottom: var(--rq-space-1);
  font-weight: 600;
  font-size: 0.9em;
}
.rq-campo__ayuda { font-size: 0.82em; color: var(--rq-color-texto-secundario); margin-top: var(--rq-space-1); }
.rq-campo__error { font-size: 0.82em; color: var(--rq-peligro); margin-top: var(--rq-space-1); }

.rq-input, .rq-select, .rq-textarea {
  width: 100%;
  padding: var(--rq-space-2) var(--rq-space-3);
  border: 1px solid var(--rq-color-borde);
  border-radius: var(--rq-radio-sm);
  background: var(--rq-color-superficie);
  min-height: 40px;
}

.rq-input:focus, .rq-select:focus, .rq-textarea:focus {
  outline: none;
  border-color: var(--rq-color-marca);
  box-shadow: 0 0 0 3px var(--rq-azul-100);
}

.rq-input--error, .rq-select--error, .rq-textarea--error { border-color: var(--rq-peligro); }

.rq-textarea { min-height: 100px; resize: vertical; }

.rq-form-fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--rq-space-4);
}
@media (min-width: 640px) {
  .rq-form-fila--2 { grid-template-columns: 1fr 1fr; }
  .rq-form-fila--3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* --- Badges de estado --- */

.rq-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--rq-space-2);
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 600;
  white-space: nowrap;
}
.rq-badge--exito { background: var(--rq-exito-bg); color: var(--rq-exito); }
.rq-badge--alerta { background: var(--rq-alerta-bg); color: var(--rq-alerta); }
.rq-badge--peligro { background: var(--rq-peligro-bg); color: var(--rq-peligro); }
.rq-badge--info { background: var(--rq-info-bg); color: var(--rq-info); }
.rq-badge--neutro { background: var(--rq-gris-100); color: var(--rq-gris-700); }

/* --- Tablas --- */

.rq-tabla-envoltorio { overflow-x: auto; border: 1px solid var(--rq-color-borde); border-radius: var(--rq-radio); background: var(--rq-color-superficie); }
.rq-tabla { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.rq-tabla th {
  text-align: left;
  padding: var(--rq-space-3);
  background: var(--rq-gris-100);
  color: var(--rq-color-texto-secundario);
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.rq-tabla td { padding: var(--rq-space-3); border-top: 1px solid var(--rq-color-borde); vertical-align: middle; }
.rq-tabla tbody tr:hover { background: var(--rq-gris-100); }
.rq-tabla__fila-clicable { cursor: pointer; }
.rq-tabla__vacio { text-align: center; padding: var(--rq-space-6); color: var(--rq-color-texto-secundario); }

/* --- Modal --- */

.rq-modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(11, 29, 51, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
  padding: 0;
}
@media (min-width: 640px) {
  .rq-modal-fondo { align-items: center; padding: var(--rq-space-4); }
}

.rq-modal {
  background: var(--rq-color-superficie);
  border-radius: var(--rq-radio) var(--rq-radio) 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--rq-sombra-2);
}
@media (min-width: 640px) {
  .rq-modal { border-radius: var(--rq-radio); }
}

.rq-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rq-space-4);
  border-bottom: 1px solid var(--rq-color-borde);
  position: sticky;
  top: 0;
  background: var(--rq-color-superficie);
}
.rq-modal__cuerpo { padding: var(--rq-space-4); }
.rq-modal__pie {
  padding: var(--rq-space-4);
  border-top: 1px solid var(--rq-color-borde);
  display: flex;
  justify-content: flex-end;
  gap: var(--rq-space-2);
  position: sticky;
  bottom: 0;
  background: var(--rq-color-superficie);
}
.rq-modal__btn-cerrar { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--rq-color-texto-secundario); line-height: 1; }

/* --- Toasts --- */

.rq-toasts {
  position: fixed;
  top: calc(var(--rq-topbar-alto) + var(--rq-space-3));
  right: var(--rq-space-3);
  left: var(--rq-space-3);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--rq-space-2);
  pointer-events: none;
}
@media (min-width: 640px) { .rq-toasts { left: auto; width: 340px; } }

.rq-toast {
  pointer-events: auto;
  border-radius: var(--rq-radio);
  padding: var(--rq-space-3) var(--rq-space-4);
  box-shadow: var(--rq-sombra-2);
  font-size: 0.92em;
  animation: rq-toast-entrada 0.15s ease;
}
.rq-toast--exito { background: var(--rq-exito-bg); color: var(--rq-exito); border: 1px solid var(--rq-exito); }
.rq-toast--error { background: var(--rq-peligro-bg); color: var(--rq-peligro); border: 1px solid var(--rq-peligro); }
.rq-toast--info { background: var(--rq-info-bg); color: var(--rq-info); border: 1px solid var(--rq-info); }

@keyframes rq-toast-entrada {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Estado de carga / vacío / error --- */

.rq-spinner {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rq-girar 0.6s linear infinite;
}
@keyframes rq-girar { to { transform: rotate(360deg); } }

.rq-estado-vacio {
  text-align: center;
  padding: var(--rq-space-8) var(--rq-space-4);
  color: var(--rq-color-texto-secundario);
}

.rq-pestanas { display: flex; gap: var(--rq-space-1); border-bottom: 1px solid var(--rq-color-borde); margin-bottom: var(--rq-space-4); overflow-x: auto; }
.rq-pestana {
  padding: var(--rq-space-2) var(--rq-space-3);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--rq-color-texto-secundario);
  font-weight: 600;
  white-space: nowrap;
}
.rq-pestana--activa { color: var(--rq-color-marca); border-bottom-color: var(--rq-color-marca); }

.rq-paginacion { display: flex; align-items: center; justify-content: center; gap: var(--rq-space-3); padding: var(--rq-space-4) 0; }

.rq-toast { white-space: pre-line; }
.rq-campo__error { white-space: pre-line; }

/* Pestañas en celular: sombra a la derecha indica que hay más (QA 20, H12). */
.rq-pestanas { scrollbar-width: thin; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(to right, #000 85%, transparent); }
@media (min-width: 640px) { .rq-pestanas { mask-image: none; } }
/* Botón cerrar de modal con área táctil de 44 px (QA 20, H13). */
.rq-modal__btn-cerrar { min-width: 44px; min-height: 44px; }
/* Texto largo de informes conserva saltos de línea (QA 20, H11). */
.rq-texto-preformateado { white-space: pre-wrap; word-break: break-word; }

/* --- Re-prueba QA (V1.4.1) --- */
/* Montos largos con centavos no se salen de las tarjetas resumen (QA 20 N4, QA 04). */
.rq-tarjeta-resumen { min-width: 0; }
.rq-tarjeta-resumen__valor {
  font-size: clamp(1.05rem, 4.2vw, 1.4rem);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
/* Ítems de cotización en celular: la descripción ocupa todo el ancho (antes
   solo se veían ~12 caracteres — QA 20 H13). */
@media (max-width: 640px) {
  .rq-cot-items thead { display: none; }
  .rq-cot-items tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--rq-space-2);
    padding: var(--rq-space-2) 0;
    border-bottom: 1px solid var(--rq-color-borde);
  }
  .rq-cot-items td { display: block; padding: 0; border: 0; }
  .rq-cot-items td:first-child { grid-column: 1 / -1; }
  .rq-cot-items .rq-cot-item-desc { width: 100%; }
}

/* V1.5: en pantallas táctiles todos los botones miden al menos 44 px (guía de accesibilidad móvil). */
@media (pointer: coarse) {
  .rq-btn { min-height: 44px; }
  .rq-btn--pequeno { min-height: 44px; }
}

/* El atributo hidden siempre oculta, aunque la clase defina display (agente OT V1.5). */
[hidden] { display: none !important; }

/* V1.5 (QA 17): pestañas y barra del editor con objetivo táctil de 44 px. */
@media (pointer: coarse) {
  .rq-pestana { min-height: 44px; }
  .rq-editor__barra button { min-width: 44px; min-height: 44px; }
}