@charset "UTF-8";
/* ====================================================================
   components.css — componentes de producto del front público.
   Carga después de base.css. Stub inicial; se irá ampliando con
   MachineCard, TechnologyHero, SpecTable, FAQAccordion, etc.
   ==================================================================== */

/* --- Grid de tecnologías / máquinas -------------------------------- */
.grid-cards {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* --- Card de máquina ---------------------------------------------- */
.machine-card {
  display: flex;
  flex-direction: column;
  background: var(--df-paper);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.machine-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.machine-card .img {
  background: var(--df-ink-100);
  aspect-ratio: 4 / 3;
}
.machine-card .body { padding: var(--sp-5); }
.machine-card h3 { margin-bottom: var(--sp-2); }
.machine-card .chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.chip {
  display: inline-block;
  font-size: var(--fs-meta);
  background: var(--df-ink-100);
  color: var(--df-ink-700);
  padding: 2px var(--sp-3);
  border-radius: var(--radius-pill);
}

/* --- FAQ accordion (usa <details>) -------------------------------- */
details.faq {
  border-bottom: var(--border-thin);
  padding-block: var(--sp-4);
}
details.faq > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--df-ink-900);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::after {
  content: "+";
  font-size: 1.4em;
  color: var(--df-magenta-700);
  transition: transform var(--t-fast);
}
details.faq[open] > summary::after { content: "−"; }

/* --- Formularios -------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field label { font-weight: 500; font-size: var(--fs-small); color: var(--df-ink-700); }
.field input,
.field textarea,
.field select {
  font: inherit;
  padding: var(--sp-3) var(--sp-4);
  border: var(--border-base);
  border-radius: var(--radius-sm);
  background: var(--df-paper);
  color: var(--df-ink-900);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  min-height: 44px;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--df-magenta-500);
  box-shadow: var(--focus-ring);
}
.field .error-msg { color: var(--df-danger); font-size: var(--fs-small); }

.form-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; }

/* --- Mensajes / alerts -------------------------------------------- */
.alert {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  margin-bottom: var(--sp-5);
}
.alert.info    { background: #E8F1FB; border-color: #BBD4F0; color: #1A4F8F; }
.alert.success { background: #E5F4EC; border-color: #B6DFC6; color: #155F3F; }
.alert.warning { background: #FBF1E2; border-color: #F0D7AE; color: #8A560F; }
.alert.danger  { background: #F8E5E2; border-color: #ECB7AE; color: #7A2419; }