/* ══════════════════════════════════════════════════════════════
   BUSCADOR DE CARCASAS — fixhubtec.com/carcasas
   ══════════════════════════════════════════════════════════════
   BORRADOR: la estructura, con lo mínimo para poder mirarla. Los
   colores y las medidas salen de las variables de la vitrina, así que
   ya se ve como el resto del sitio sin decidir nada todavía. */

/* La que scrollea: ancho completo, para que la barra quede pegada a la
   derecha de la pantalla y no flotando al medio. Ver _envolver() en
   tec/js/carcasas.js para por qué son dos cajas. */
.carc-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  width: 100%;
}
/* Y la que centra. */
.carc-envoltura {
  max-width: 1100px;
  margin: 0 auto;
  padding: 26px 20px 60px;
}

/* Una sola línea arriba, centrada sobre la tarjeta. */
.carc-titulo {
  margin: 0 0 22px;
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--vtx);
  text-align: center;
}
/* El encabezado de los resultados ("19 carcasas para tu APPLE A56"),
   centrado en la misma columna que la tarjeta. */
.carc-pregunta {
  margin: 0 0 16px;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  color: var(--vtx);
  text-align: center;
}

/* ── El formulario: marca y modelo ──
   En una tarjeta y con los campos uno debajo del otro, igual que los
   formularios del programa (Mi Empresa → Datos empresa). Antes iban los
   dos en una fila: cabían, pero se leían como dos controles sueltos
   flotando sobre la página en vez de como un formulario que se llena de
   arriba abajo.

   La tarjeta se queda también cuando hay resultados, así que cambiar de
   modelo cuesta un clic y no devolverse. */
.carc-form {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 420px;
  margin: 0 auto 30px;
  padding: 20px;
  border: 1px solid var(--vbo, rgba(255,255,255,0.12));
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
}
.carc-campo { display: flex; flex-direction: column; gap: 6px; }
.carc-campo label { font-size: 12.5px; font-weight: 600; color: var(--vtx3); }

.carc-campo select {
  /* Ancho completo de la tarjeta: en una columna, dos desplegables de
     distinto largo se ven como un error de alineación. */
  width: 100%;
  /* appearance:none saca el estilo del sistema, que en un fondo oscuro
     llega blanco y canta. La flecha se vuelve a dibujar acá (un SVG en
     el fondo) porque sacarle el estilo también le saca la flecha. */
  appearance: none; -webkit-appearance: none;
  padding: 12px 38px 12px 14px;
  border: 1px solid var(--vbo, rgba(255,255,255,0.12));
  border-radius: 11px;
  background-color: rgba(255,255,255,0.04);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9b3c4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 17px;
  color: var(--vtx);
  font: inherit; font-size: 15px;
  cursor: pointer;
}
.carc-campo select:focus { outline: none; border-color: var(--va); }
/* Bloqueado, no "sin efecto": el cursor lo dice antes de que uno lo
   intente. Misma señal que el resto de los campos apagados del proyecto
   (ver .vitg-input:disabled en comun/css/utilidades.css). */
.carc-campo select:disabled { opacity: 0.45; cursor: not-allowed; }
/* Las opciones las dibuja el sistema y no heredan el color del <select>:
   sin esto, en Windows salen texto claro sobre fondo claro. */
.carc-campo select option { background: #1a1620; color: #f2eef6; }

/* ── Los resultados ──
   Son las tarjetas del catálogo (.vit-card, dibujadas por
   VITRINA.htmlCard), así que su aspecto no se define acá: lo único
   propio es cómo se reparten, y para eso se reusa .vit-grid del
   catálogo. Este bloque tenía antes una tarjeta hecha a mano —más
   pobre, sin el difuminado detrás de la foto ni el botón de carrito— y
   se fue entera. */
.carc-grilla { margin-top: 4px; }

.carc-cargando, .carc-vacio, .carc-error {
  color: var(--vtx3); font-size: 15px; text-align: center;
}
.carc-error { color: var(--color-rojo-suave, #ef9a9a); }