/**
 * Proyecto Coordenadas Quilmes — Estilos Studio Edition (Anti-Slop & Iconografía Vectorial)
 * Importa la base institucional y refina contenedores de iconos, micro-layouts y tipografía.
 */
@import url('coordenadas.css');

/* ==========================================================================
   1. Estilos Base de Iconografía Vectorial (Lucide/Feather Compliant)
   ========================================================================== */
.cq-icon {
  display: inline-block;
  vertical-align: -0.15em;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
  transition: transform 0.2s ease, stroke 0.2s ease;
}

/* Contenedores de Icono en Chips de Búsqueda */
.cq-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cq-quick-chip .cq-chip-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cq-primary, #7a61a1);
}

.cq-quick-chip:hover .cq-chip-svg {
  transform: translateY(-1px);
}

/* ==========================================================================
   2. Cuestionario de la Brújula: Contenedores Ópticos de Iconos
   ========================================================================== */
.cq-b-option-btn .cq-b-opt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(122, 97, 161, 0.08);
  border: 1px solid rgba(122, 97, 161, 0.15);
  color: var(--cq-primary, #7a61a1);
  flex-shrink: 0;
  margin-right: 14px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cq-b-option-btn:hover .cq-b-opt-icon {
  background: rgba(122, 97, 161, 0.16);
  border-color: rgba(122, 97, 161, 0.35);
  transform: scale(1.05);
}

.cq-b-option-btn.is-previously-selected .cq-b-opt-icon {
  background: var(--cq-primary, #7a61a1);
  border-color: var(--cq-primary, #7a61a1);
  color: #ffffff;
}

/* ==========================================================================
   3. Fase A (Caminos Sugeridos): Tile de Perfil y Cruces Vocacionales
   ========================================================================== */
.cq-studio-path-tile {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(122, 97, 161, 0.12), rgba(13, 107, 103, 0.12));
  border: 1.5px solid rgba(122, 97, 161, 0.25);
  color: var(--cq-primary, #7a61a1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(122, 97, 161, 0.08);
}
.cq-results-main-path-card .cq-studio-path-tile {
  margin-bottom: 0;
  flex-shrink: 0;
}

/* Intersección Dual sin Emojis Pegados */
.cq-studio-inter-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(13, 107, 103, 0.08);
  border: 1px solid rgba(13, 107, 103, 0.2);
  border-radius: 999px;
  margin-bottom: 12px;
}

.cq-studio-inter-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #0d6b67;
}

.cq-studio-inter-plus {
  font-size: 13px;
  font-weight: 700;
  color: #0d6b67;
  opacity: 0.7;
}

.cq-studio-inter-label {
  font-size: 12px;
  font-weight: 600;
  color: #0d6b67;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   4. Fase B: Tabs y Tarjetas de la Brújula
   ========================================================================== */
.cq-results-tabs-nav .cq-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Pastillas 2x2 en Mundo Laboral sin Semáforos */
.cq-labor-pill {
  font-weight: 600;
  letter-spacing: 0.1px;
}

/* Viñetas Limpias en Tarjetas de Derechos Legales (Sustituto de 📌) */
.cq-tip-bullet-studio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(13, 107, 103, 0.12);
  color: #0d6b67;
  margin-right: 10px;
  flex-shrink: 0;
}

/* Icono en Caja de Acción CV */
.cq-next-step-icon-studio {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px solid rgba(122, 97, 161, 0.2);
  color: var(--cq-primary, #7a61a1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(122, 97, 161, 0.1);
  flex-shrink: 0;
}

/* ==========================================================================
   5. Hoja A4 Imprimible del Armador de CV (Micro-SVGs de Contacto)
   ========================================================================== */
.cq-cv-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cq-cv-contact-svg {
  color: #4a5568;
  vertical-align: -0.1em;
}

/* Tarjetas de Disponibilidad y Preferencias */
.cq-a4-avail-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: #fcfbfe;
  border-radius: 4px;
  padding: 4px 8px;
  border-left: 2.5px solid var(--cq-primary, #7a61a1);
}

@media print {
  .cq-cv-contact-svg {
    color: #1a202c !important;
    stroke-width: 2px !important;
  }
  .cq-a4-avail-item {
    background: transparent !important;
    border-left: 2px solid #7a61a1 !important;
    padding: 2px 4px !important;
  }
}