/* =============================================================
   MÓDULO: RECETARIO DE SNACKS
   Prefijo de scope: .rec-*
   Custom properties: --rec-*
   Tipografía: Sora (UI) · IBM Plex Mono (cantidades / códigos)
   Compatible con Bootstrap 5
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');


/* ── 2. LAYOUT PRINCIPAL ────────────────────────────────────── */
.rec-module {
  min-height: 100vh;
  padding: 1.5rem 1rem 3rem;
}

.rec-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
  border-bottom: 1.5px solid var(--rec-border);
}

.rec-header__icon {
  width: 44px;
  height: 44px;
  background: var(--rec-amber);
  border-radius: var(--rec-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rec-text-inverse);
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(217,119,6,.30);
}

.rec-header__title {
  font-size: var(--rec-text-xl);
  font-weight: 700;
  color: var(--rec-text-primary);
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.rec-header__sub {
  font-size: var(--rec-text-sm);
  color: var(--rec-text-muted);
  margin: 2px 0 0;
}

.rec-header__actions {
  margin-left: auto;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* ── 3. GRID DE RECETAS ─────────────────────────────────────── */
.rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

/* ── 4. CARD DE RECETA ──────────────────────────────────────── */
.rec-card {
  background: #fff;
  border-radius: var(--rec-radius-lg);
  box-shadow: var(--rec-shadow);
  border: 1px solid var(--rec-border-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--rec-transition), transform var(--rec-transition);
  position: relative;
}

.rec-card:hover {
  box-shadow: var(--rec-shadow-md);
  transform: translateY(-2px);
}

/* Franja lateral de categoría — la firma visual */
.rec-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--rec-cat-color, var(--rec-amber));
  border-radius: var(--rec-radius-lg) 0 0 var(--rec-radius-lg);
}

.rec-card--salado   { --rec-cat-color: var(--rec-cat-salado);   }
.rec-card--dulce    { --rec-cat-color: var(--rec-cat-dulce);    }
.rec-card--saludable{ --rec-cat-color: var(--rec-cat-saludable);}
.rec-card--picante  { --rec-cat-color: var(--rec-cat-picante);  }
.rec-card--neutro   { --rec-cat-color: var(--rec-cat-neutro);   }

.rec-card__body {
  padding: 1.1rem 1.1rem 1.1rem 1.35rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.rec-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}

.rec-card__name {
  font-size: var(--rec-text-md);
  font-weight: 600;
  color: var(--rec-text-primary);
  line-height: 1.3;
  margin: 0;
}

.rec-card__code {
  font-family: var(--rec-font-mono);
  font-size: var(--rec-text-xs);
  color: var(--rec-text-muted);
  letter-spacing: .04em;
  margin-top: 2px;
}

.rec-card__desc {
  font-size: var(--rec-text-sm);
  color: var(--rec-text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rec-card__meta {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: .5rem;
}

.rec-card__footer {
  padding: .65rem 1.1rem .65rem 1.35rem;
  background: var(--rec-surface);
  border-top: 1px solid var(--rec-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

/* ── 5. BADGES Y CHIPS ──────────────────────────────────────── */
.rec-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .6rem;
  border-radius: var(--rec-radius-pill);
  font-size: var(--rec-text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}

.rec-badge--salado   { background: #FEF3C7; color: #92400E; }
.rec-badge--dulce    { background: #FCE7F3; color: #9D174D; }
.rec-badge--saludable{ background: #DCFCE7; color: #14532D; }
.rec-badge--picante  { background: #FEE2E2; color: #991B1B; }
.rec-badge--neutro   { background: #EDE9FE; color: #4C1D95; }

.rec-badge--info {
  background: #EDE9FE;
  color: #4C1D95;
  font-family: var(--rec-font-mono);
  font-size: var(--rec-text-xs);
  font-weight: 500;
}

.rec-badge--primary {
  background: var(--primary-light);
  color: var(--info-dark);
  font-family: var(--rec-font-mono);
  font-size: var(--rec-text-xs);
  font-weight: 500;
}

.rec-badge--danger {
  background: var(--rec-danger-light);
  color: #991B1B;
  font-family: var(--rec-font-mono);
  font-size: var(--rec-text-xs);
  font-weight: 500;
}

.rec-badge--success {
  background: var(--rec-success-light);
  color:  #14532D;
  font-family: var(--rec-font-mono);
  font-size: var(--rec-text-xs);
  font-weight: 500;
}

.rec-badge--tiempo {
  background: var(--rec-surface);
  color: var(--rec-text-secondary);
  font-family: var(--rec-font-mono);
  font-size: var(--rec-text-xs);
  font-weight: 500;
}

.rec-badge--porciones {
  background: var(--rec-amber-light);
  color: var(--rec-amber-dark);
  font-family: var(--rec-font-mono);
  font-weight: 600;
}

.rec-badge--dificultad-facil  { background: var(--rec-success-light); color: #14532D; }
.rec-badge--dificultad-medio  { background: var(--rec-warning-light);  color: #78350F; }
.rec-badge--dificultad-dificil{ background: var(--rec-danger-light);   color: #7F1D1D; }

/* Chip seleccionable (para filtros) */
.rec-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .75rem;
  border-radius: var(--rec-radius-pill);
  font-size: var(--rec-text-sm);
  font-weight: 500;
  border: 1.5px solid var(--rec-border);
  background: #fff;
  color: var(--rec-text-secondary);
  cursor: pointer;
  transition: all var(--rec-transition);
  user-select: none;
}

.rec-chip:hover {
  border-color: var(--rec-amber);
  color: var(--rec-amber);
  background: var(--rec-amber-light);
}

.rec-chip.active,
.rec-chip:has(input:checked) {
  border-color: var(--rec-amber);
  background: var(--rec-amber-light);
  color: var(--rec-amber-dark);
  font-weight: 600;
}

.rec-chip input[type="radio"],
.rec-chip input[type="checkbox"] {
  display: none;
}

/* ── 6. FORMULARIO DE RECETA ────────────────────────────────── */
.rec-form-card {
  background: #fff;
  border-radius: var(--rec-radius-lg);
  box-shadow: var(--rec-shadow);
  border: 1px solid var(--rec-border-soft);
  overflow: hidden;
}

.rec-form-card__header {
  padding: 1rem 1.4rem;
  background: var(--rec-surface);
  border-bottom: 1px solid var(--rec-border);
  display: flex;
  align-items: center;
  gap: .75rem;
}

.rec-form-card__header-title {
  font-size: var(--rec-text-md);
  font-weight: 600;
  margin: 0;
  color: var(--rec-text-primary);
}

.rec-form-card__body {
  padding: 1.4rem;
}

/* Labels */
.rec-label {
  display: block;
  font-size: var(--rec-text-sm);
  font-weight: 600;
  color: var(--rec-text-secondary);
  margin-bottom: .4rem;
  letter-spacing: .01em;
}

.rec-label--required::after {
  content: ' *';
  color: var(--rec-danger);
}

/* Inputs */
.rec-input {
  display: block;
  width: 100%;
  padding: .5rem .8rem;
  font-family: var(--rec-font-ui);
  font-size: var(--rec-text-base);
  color: var(--rec-text-primary);
  background: #fff;
  border: 1.5px solid var(--rec-border);
  border-radius: var(--rec-radius);
  transition: border-color var(--rec-transition), box-shadow var(--rec-transition);
  outline: none;
  line-height: 1.5;
}

.rec-input:focus {
  border-color: var(--rec-amber);
  box-shadow: 0 0 0 3px rgba(217,119,6,.14);
}

.rec-input::placeholder {
  color: var(--rec-text-muted);
  font-weight: 400;
}

.rec-input.is-invalid {
  border-color: var(--rec-danger);
}

.rec-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220,38,38,.13);
}

.rec-input.is-valid {
  border-color: var(--rec-success);
}

.rec-input--mono {
  font-family: var(--rec-font-mono);
  letter-spacing: .04em;
}

textarea.rec-input {
  resize: vertical;
  min-height: 80px;
}

select.rec-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8A29E' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}

/* Mensaje de validación */
.rec-feedback {
  font-size: var(--rec-text-xs);
  margin-top: .3rem;
  font-weight: 500;
}
.rec-feedback--invalid { color: var(--rec-danger); }
.rec-feedback--valid   { color: var(--rec-success); }

/* ── 7. STEPPER DE PORCIONES ────────────────────────────────── */
.rec-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--rec-border);
  border-radius: var(--rec-radius);
  overflow: hidden;
  background: #fff;
}

.rec-stepper__btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--rec-surface);
  color: var(--rec-text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--rec-transition), color var(--rec-transition);
  flex-shrink: 0;
}

.rec-stepper__btn:hover {
  background: var(--rec-amber-light);
  color: var(--rec-amber);
}

.rec-stepper__btn:active {
  background: var(--rec-amber-mid);
}

.rec-stepper__val {
  min-width: 52px;
  text-align: center;
  font-family: var(--rec-font-mono);
  font-size: var(--rec-text-md);
  font-weight: 600;
  color: var(--rec-text-primary);
  border-left: 1px solid var(--rec-border);
  border-right: 1px solid var(--rec-border);
  padding: 0 .5rem;
  user-select: none;
  line-height: 36px;
}

/* ── 8. TABLA DE INGREDIENTES ───────────────────────────────── */
.rec-table-wrap {
  border: 1px solid var(--rec-border);
  border-radius: var(--rec-radius);
  overflow: hidden;
  background: #fff;
}

.rec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rec-text-sm);
}

.rec-table thead {
  background: var(--rec-surface);
}

.rec-table thead th {
  padding: .6rem .85rem;
  font-size: var(--rec-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rec-text-muted);
  border-bottom: 1.5px solid var(--rec-border);
  white-space: nowrap;
}

.rec-table tbody td {
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--rec-border-soft);
  color: var(--rec-text-primary);
  vertical-align: middle;
}

.rec-table tbody tr:last-child td {
  border-bottom: none;
}

.rec-table tbody tr:hover td {
  background: var(--rec-cream-bg);
}

.rec-table__qty {
  font-family: var(--rec-font-mono);
  font-weight: 600;
  color: var(--rec-amber-dark);
  font-size: var(--rec-text-sm);
  white-space: nowrap;
}

.rec-table__unit {
  font-family: var(--rec-font-mono);
  font-size: var(--rec-text-xs);
  color: var(--rec-text-muted);
}

.rec-table__actions {
  display: flex;
  gap: .3rem;
  justify-content: flex-end;
}

/* Fila de agregar ingrediente */
.rec-table__add-row td {
  padding: .45rem .85rem;
  background: var(--rec-cream-bg);
  border-top: 1.5px dashed var(--rec-border);
}

/* ── 9. PASOS DE PREPARACIÓN ────────────────────────────────── */
.rec-steps {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.rec-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.rec-step__num {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: var(--rec-amber);
  color: #fff;
  font-family: var(--rec-font-mono);
  font-size: var(--rec-text-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(217,119,6,.25);
  margin-top: .15rem;
  flex-shrink: 0;
}

.rec-step__content {
  flex: 1;
  background: #fff;
  border: 1.5px solid var(--rec-border);
  border-radius: var(--rec-radius);
  padding: .65rem .9rem;
  font-size: var(--rec-text-sm);
  color: var(--rec-text-primary);
  line-height: 1.55;
  transition: border-color var(--rec-transition);
}

.rec-step__content:focus-within {
  border-color: var(--rec-amber);
  box-shadow: 0 0 0 3px rgba(217,119,6,.10);
}

.rec-step__remove {
  align-self: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--rec-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--rec-transition), color var(--rec-transition);
  flex-shrink: 0;
}

.rec-step__remove:hover {
  background: var(--rec-danger-light);
  color: var(--rec-danger);
}

/* ── 10. PANEL LATERAL DE RESUMEN ───────────────────────────── */
.rec-summary {
  background: #fff;
  border: 1.5px solid var(--rec-border);
  border-radius: var(--rec-radius-lg);
  overflow: hidden;
  box-shadow: var(--rec-shadow-sm);
}

.rec-summary__header {
  background: var(--rec-amber);
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
}

.rec-summary__title {
  font-size: var(--rec-text-md);
  font-weight: 700;
  margin: 0;
  letter-spacing: -.01em;
}

.rec-summary__body {
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.rec-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--rec-text-sm);
  gap: .5rem;
}

.rec-summary__row-label {
  color: var(--rec-text-secondary);
  font-weight: 500;
}

.rec-summary__row-val {
  font-family: var(--rec-font-mono);
  font-weight: 600;
  color: var(--rec-text-primary);
  font-size: var(--rec-text-sm);
}

.rec-summary__divider {
  border: none;
  border-top: 1px dashed var(--rec-border);
  margin: .2rem 0;
}

.rec-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: .4rem;
  font-weight: 700;
  font-size: var(--rec-text-base);
  color: var(--rec-text-primary);
}

.rec-summary__total-val {
  font-family: var(--rec-font-mono);
  font-size: var(--rec-text-lg);
  color: var(--rec-amber);
}

.rec-summary__footer {
  padding: .85rem 1.1rem;
  background: var(--rec-surface);
  border-top: 1px solid var(--rec-border-soft);
}


/* ── 12. ALERTAS ────────────────────────────────────────────── */
.rec-alert {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border-radius: var(--rec-radius);
  border-left: 4px solid transparent;
  font-size: var(--rec-text-sm);
}

.rec-alert__icon {
  font-size: 1.1rem;
  margin-top: .05rem;
  flex-shrink: 0;
}

.rec-alert__text { flex: 1; line-height: 1.5; }
.rec-alert__title { font-weight: 700; margin-bottom: .15rem; }

.rec-alert--success {
  background: var(--rec-success-light);
  border-color: var(--rec-success);
  color: #14532D;
}
.rec-alert--warning {
  background: var(--rec-warning-light);
  border-color: var(--rec-warning);
  color: #78350F;
}
.rec-alert--danger {
  background: var(--rec-danger-light);
  border-color: var(--rec-danger);
  color: #7F1D1D;
}
.rec-alert--info {
  background: var(--rec-info-light);
  border-color: var(--rec-info);
  color: #0C4A6E;
}

/* ── 13. BARRA DE FILTROS ───────────────────────────────────── */
.rec-filters {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  padding: .9rem 1.1rem;
  background: #fff;
  border: 1px solid var(--rec-border);
  border-radius: var(--rec-radius-lg);
  margin-bottom: 1.25rem;
}

.rec-filters__label {
  font-size: var(--rec-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--rec-text-muted);
  margin-right: .25rem;
  white-space: nowrap;
}

.rec-search-wrap {
  flex: 1;
  min-width: 200px;
  max-width: 340px;
  position: relative;
}

.rec-search-wrap .rec-input {
  padding-left: 2.2rem;
  font-size: var(--rec-text-sm);
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
}

.rec-search-icon {
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rec-text-muted);
  font-size: .9rem;
  pointer-events: none;
}

/* ── 14. INDICADOR DE STOCK / DISPONIBILIDAD ────────────────── */
.rec-stock {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--rec-text-xs);
  font-family: var(--rec-font-mono);
  font-weight: 600;
}

.rec-stock__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rec-stock--ok    .rec-stock__dot { background: var(--rec-success); }
.rec-stock--bajo  .rec-stock__dot { background: var(--rec-warning); }
.rec-stock--agotado .rec-stock__dot { background: var(--rec-danger); }

.rec-stock--ok    { color: var(--rec-success); }
.rec-stock--bajo  { color: var(--rec-warning); }
.rec-stock--agotado { color: var(--rec-danger); }

/* ── 15. ESTADO VACÍO ───────────────────────────────────────── */
.rec-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--rec-text-muted);
}

.rec-empty__icon {
  font-size: 2.8rem;
  opacity: .5;
}

.rec-empty__title {
  font-size: var(--rec-text-md);
  font-weight: 600;
  color: var(--rec-text-secondary);
  margin: 0;
}

.rec-empty__sub {
  font-size: var(--rec-text-sm);
  max-width: 260px;
  line-height: 1.5;
  margin: 0;
}

/* ── 16. DIVISOR DE SECCIÓN ─────────────────────────────────── */
.rec-section-title {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: var(--rec-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--rec-text-muted);
  margin-bottom: .9rem;
}

.rec-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rec-border);
}

/* ── 17. TOOLTIP NUTRICIONAL ─────────────────────────────────── */
.rec-nutricion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

.rec-nutricion__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .6rem .5rem;
  background: var(--rec-surface);
  border-radius: var(--rec-radius);
  text-align: center;
}

.rec-nutricion__val {
  font-family: var(--rec-font-mono);
  font-size: var(--rec-text-lg);
  font-weight: 700;
  color: var(--rec-amber);
  line-height: 1;
}

.rec-nutricion__label {
  font-size: var(--rec-text-xs);
  color: var(--rec-text-muted);
  margin-top: .2rem;
  font-weight: 500;
}

/* ── 18. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .rec-module { padding: 1rem .75rem 2.5rem; }

  .rec-header {
    flex-wrap: wrap;
  }

  .rec-header__actions {
    width: 100%;
    margin-left: 0;
  }

  .rec-grid {
    grid-template-columns: 1fr;
  }

  .rec-filters {
    gap: .4rem;
    padding: .7rem .85rem;
  }

  .rec-search-wrap {
    max-width: 100%;
    width: 100%;
  }

  .rec-table thead { display: none; }

  .rec-table tbody td {
    display: block;
    padding: .35rem .85rem;
  }

  .rec-table tbody td::before {
    content: attr(data-label);
    font-size: var(--rec-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rec-text-muted);
    display: block;
    margin-bottom: .15rem;
  }

  .rec-table tbody tr {
    display: block;
    border-bottom: 1.5px solid var(--rec-border);
    padding: .4rem 0;
  }

  .rec-table tbody tr:last-child { border-bottom: none; }

  .rec-nutricion { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .rec-header__title { font-size: var(--rec-text-lg); }

  .rec-btn--lg {
    padding: .55rem 1.1rem;
    font-size: var(--rec-text-base);
  }
}

/* ── 19. REDUCCIÓN DE MOVIMIENTO ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rec-card,
  .rec-btn,
  .rec-chip,
  .rec-input {
    transition: none;
  }
}

/* VISTAS */
    .rec-view { display:none; }
    .rec-view.active { display:block; }

    /* STATS */
    .rec-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.75rem; margin-bottom:1.5rem; }
    .rec-stat { background:#fff; border:1px solid var(--rec-border-soft); border-radius:var(--rec-radius); padding:.85rem 1rem; }
    .rec-stat__num { display:block; font-family:var(--rec-font-mono); font-size:var(--rec-text-xl); font-weight:700; color:var(--rec-amber); line-height:1; }
    .rec-stat__label { display:block; font-size:var(--rec-text-xs); color:var(--rec-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-top:.2rem; }

    /* CARD DE RECETA */
    .rec-prod-card {
      background:#fff; 
      border:1px solid var(--rec-border-soft) !important;
      border-radius:var(--rec-radius-lg) !important; 
      box-shadow:var(--rec-shadow-sm);
      overflow:hidden; display:flex; flex-direction:column; position:relative;
      transition:box-shadow var(--rec-transition), transform var(--rec-transition);
    }
    .rec-prod-card:hover { box-shadow:var(--rec-shadow-md); transform:translateY(-2px); }
    .rec-prod-card::before {
      content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
      background:var(--rec-cat-color,var(--rec-amber));
      border-radius:var(--rec-radius-lg) 0 0 var(--rec-radius-lg);
    }
    .rec-prod-card--salado    { --rec-cat-color:#D97706; }
    .rec-prod-card--dulce     { --rec-cat-color:#DB2777; }
    .rec-prod-card--saludable { --rec-cat-color:#16A34A; }
    .rec-prod-card--picante   { --rec-cat-color:#DC2626; }
    .rec-prod-card--neutro    { --rec-cat-color:#7C3AED; }

    .rec-prod-card__body { padding:.95rem 1rem .95rem 1.25rem; flex:1; display:flex; flex-direction:column; gap:.5rem; }
    .rec-prod-card__name { font-size:var(--rec-text-md); font-weight:700; color:var(--rec-text-primary); margin:0; line-height:1.25; }
    .rec-prod-card__code { font-family:var(--rec-font-mono); font-size:var(--rec-text-xs); color:var(--rec-text-muted); }
    .rec-prod-card__desc { font-size:var(--rec-text-sm); color:var(--rec-text-secondary); line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .rec-prod-card__chips { display:flex; gap:.4rem; flex-wrap:wrap; }
    .rec-prod-card__footer { padding:.6rem 1rem .6rem 1.25rem; background:var(--rec-surface); border-top:1px solid var(--rec-border-soft); display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
    .rec-prod-card__precio { font-family:var(--rec-font-mono); font-size:var(--rec-text-lg); font-weight:700; color:var(--rec-amber-dark); }
    .rec-prod-card__precio-label { font-size:var(--rec-text-xs); color:var(--rec-text-muted); font-weight:500; }

    /* PANEL DETALLE */
    .rec-detail-panel { background:#fff; border:1px solid var(--rec-border-soft); border-radius:var(--rec-radius-lg); overflow:hidden; box-shadow:var(--rec-shadow); display:none; flex-direction:column; animation:rec-fadein .18s ease; }
    .rec-detail-panel.visible { display:flex; }
    @keyframes rec-fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
    .rec-detail-panel__hdr { padding:.85rem 1.1rem; background:var(--rec-surface); border-bottom:1px solid var(--rec-border); display:flex; align-items:center; gap:.65rem; }
    .rec-detail-panel__title { font-size:var(--rec-text-md); font-weight:700; margin:0; flex:1; }
    .rec-detail-panel__body { padding:1.1rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
    .rec-drow { display:flex; justify-content:space-between; align-items:center; font-size:var(--rec-text-sm); padding:.4rem 0; border-bottom:1px solid var(--rec-border-soft); }
    .rec-drow:last-child { border-bottom:none; }
    .rec-drow__lbl { color:var(--rec-text-secondary); font-weight:500; }
    .rec-drow__val { font-family:var(--rec-font-mono); font-weight:600; color:var(--rec-text-primary); font-size:var(--rec-text-sm); }

    /* TABLA INGREDIENTES DETALLE */
    .rec-ing-tbl { width:100%; border-collapse:collapse; font-size:var(--rec-text-sm); }
    .rec-ing-tbl th { font-size:var(--rec-text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--rec-text-muted); padding:.4rem .6rem; border-bottom:1.5px solid var(--rec-border); background:var(--rec-surface); text-align:left; }
    .rec-ing-tbl td { padding:.45rem .6rem; border-bottom:1px solid var(--rec-border-soft); color:var(--rec-text-primary); }
    .rec-ing-tbl tr:last-child td { border-bottom:none; }
    .rec-ing-tbl .qty { font-family:var(--rec-font-mono); font-weight:600; color:var(--rec-amber-dark); }

    /* FORM SECCIONES */
    .rec-fsec { background:#fff; border:1px solid var(--rec-border-soft); border-radius:var(--rec-radius-lg); overflow:hidden; box-shadow:var(--rec-shadow-sm); margin-bottom:1.25rem; }
    .rec-fsec__hdr { padding:.7rem 1.2rem; background:var(--rec-surface); border-bottom:1px solid var(--rec-border); display:flex; align-items:center; gap:.55rem; font-size:var(--rec-text-sm); font-weight:700; color:var(--rec-text-secondary); }
    .rec-fsec__hdr i { color:var(--rec-amber); }
    .rec-fsec__body { padding:1.1rem 1.2rem; }

    
    .btnIng-del { width:32px; height:32px; border:1px solid var(--rec-border); background:#fff; border-radius:var(--rec-radius-sm); color:var(--rec-text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--rec-transition); flex-shrink:0; }
    .btnIng-del:hover { border-color:var(--rec-danger); color:var(--rec-danger); background:var(--rec-danger-light); }

    

    /* EMPTY STATE */
    .rec-empty-st { 
      display:flex; 
      flex-direction:column; 
      align-items:center; 
      gap:.65rem; 
      padding:3.5rem 1.5rem; 
      text-align:center; 
      color:var(--text-muted) !important;
    }
    .rec-empty-st i { font-size:2.5rem; opacity:.4; }
    .rec-empty-st p { font-size:var(--rec-text-sm); margin:0; max-width:240px; line-height:1.5; }

    /* PAGINACIÓN */
    .rec-pager { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1rem; padding:.6rem .25rem; }
    .rec-pager__info { font-size:var(--rec-text-xs); color:var(--rec-text-muted); font-family:var(--rec-font-mono); white-space:nowrap; }
    .rec-pager__controls { display:flex; align-items:center; gap:.35rem; }
    .rec-pager__btn {
      width:34px; height:34px; border-radius:var(--rec-radius); border:1.5px solid var(--rec-border);
      background:#fff; color:var(--rec-text-secondary); cursor:pointer;
      display:flex; align-items:center; justify-content:center; font-size:1rem;
      transition:all var(--rec-transition);
    }
    .rec-pager__btn:hover:not(:disabled) { border-color:var(--rec-amber); color:var(--rec-amber); background:var(--rec-amber-light); }
    .rec-pager__btn:disabled { opacity:.35; cursor:not-allowed; }
    .rec-pager__dots { display:flex; align-items:center; gap:.3rem; padding:0 .2rem; }
    .rec-pager__dot {
      width:7px; height:7px; border-radius:50%; background:var(--rec-border);
      cursor:pointer; transition:all var(--rec-transition); border:none; padding:0;
    }
    .rec-pager__dot.active { background:var(--rec-amber); width:20px; border-radius:4px; }
    .rec-pager__dot:hover:not(.active) { background:var(--rec-text-muted); }

    /* TOAST */
    .rec-toast { position:fixed; bottom:1.5rem; right:1.5rem; background:var(--rec-text-primary); color:var(--rec-text-inverse); padding:.7rem 1.1rem; border-radius:var(--rec-radius); font-size:var(--rec-text-sm); font-weight:600; display:flex; align-items:center; gap:.5rem; box-shadow:var(--rec-shadow-md); z-index:9999; opacity:0; transform:translateY(12px); transition:opacity .22s ease, transform .22s ease; pointer-events:none; }
    .rec-toast.show { opacity:1; transform:translateY(0); }
    .rec-toast i { color:#4ade80; }

    
/* IMAGEN EN CARD */
.rec-prod-card__img {
  width:100%; height:140px; object-fit:cover;
  display:block; border-bottom:1px solid var(--rec-border-soft);
}
.rec-prod-card__img-placeholder {
  width:100%; height:140px;
  background:linear-gradient(135deg,var(--rec-surface) 0%,var(--rec-surface-alt) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35rem; border-bottom:1px solid var(--rec-border-soft);
  color:var(--rec-text-muted); font-size:var(--rec-text-xs); font-weight:600;
}
.rec-prod-card__img-placeholder i { font-size:2rem; opacity:.35; }
/* La franja lateral debe quedar sobre la imagen */
.rec-prod-card::before { z-index:1; }

/* IMAGEN EN DETALLE */
.rec-detail-img {
  width:100%; max-height:200px; object-fit:cover;
  border-radius:var(--rec-radius); border:1px solid var(--rec-border-soft);
}
.rec-detail-img-placeholder {
  width:100%; height:120px;
  background:var(--rec-surface);
  border-radius:var(--rec-radius); border:1px dashed var(--rec-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--rec-text-muted); font-size:var(--rec-text-sm); gap:.4rem;
}

/*----------- AQUI EMPIEZA LO QUE DEJARE ----------------------------------*/

/* SELECTOR CATEGORÍA */
.rec-sel { display:flex; gap:.5rem; flex-wrap:wrap; }
.rec-opt { display:flex; align-items:center; gap:.35rem; padding:.35rem .8rem; border-radius:var(--rec-radius-pill); border:1.5px solid var(--rec-border); background:#fff; font-size:var(--rec-text-sm); font-weight:600; cursor:pointer; transition:all var(--rec-transition); user-select:none; }
.rec-opt input { display:none; }
.rec-opt--salado.sel    { border-color:#D97706; background:#FEF3C7; color:#92400E; }
.rec-opt--dulce.sel     { border-color:#DB2777; background:#FCE7F3; color:#9D174D; }
.rec-opt--saludable.sel { border-color:#16A34A; background:#DCFCE7; color:#14532D; }
.rec-opt--picante.sel   { border-color:#DC2626; background:#FEE2E2; color:#991B1B; }
.rec-opt--neutro.sel    { border-color:#7C3AED; background:#EDE9FE; color:#4C1D95; }

/* FILA INGREDIENTE FORMULARIO */
.rec-ing-row { 
  display:grid; 
  grid-template-columns:1fr 90px 90px 32px; 
  gap:.5rem; 
  align-items:center; 
  margin-bottom:.5rem; 
}

/* ── 11. PANEL DETALLES ────────────────────────────────────────────── */

.rec-detail-panel__body .desc {
  font-size:var(--rec-text-sm);
  color:var(--rec-text-secondary);
  margin:0;
  line-height:1.55;
}

.rec-drow__val.precio{ color:var(--rec-amber); font-size:var(--rec-text-md) }

/* ── 11. BOTONES ────────────────────────────────────────────── */
.rec-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .48rem 1.1rem;
  border-radius: var(--rec-radius);
  font-family: var(--rec-font-ui);
  font-size: var(--rec-text-sm);
  font-weight: 600;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--rec-transition);
  text-decoration: none;
  white-space: nowrap;
  outline: none;
  line-height: 1.4;
}

.rec-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(217,119,6,.30);
}

/* Primario */
.rec-btn--primary {
  background: var(--rec-amber);
  color: #fff;
  border-color: var(--rec-amber);
}
.rec-btn--primary:hover {
  background: var(--rec-amber-hover);
  border-color: var(--rec-amber-hover);
}

/* Secundario (outline) */
.rec-btn--secondary {
  background: transparent;
  color: var(--rec-text-secondary);
  border-color: var(--rec-border);
}
.rec-btn--secondary:hover {
  border-color: var(--rec-amber);
  color: var(--rec-amber);
  background: var(--rec-amber-light);
}

/* Warning (outline) */
.rec-btn--warning {
  background: transparent;
  border-color: var(--rec-amber);
  color: var(--rec-amber);  
}
.rec-btn--warning:hover {
  border-color: var(--rec-amber);
  color: var(--rec-amber);
  background: var(--rec-amber-light);
}

/* Peligro */
.rec-btn--danger {
  background: transparent;
  color: var(--rec-danger);
  border-color: var(--rec-danger);
}
.rec-btn--danger:hover {
  background: var(--rec-danger-light);
}

/* Fantasma / icono */
.rec-btn--ghost {
  background: transparent;
  color: var(--rec-text-muted);
  border-color: transparent;
  padding: .38rem .55rem;
}
.rec-btn--ghost:hover {
  background: var(--rec-surface);
  color: var(--rec-text-secondary);
}

/* Tamaños */
.rec-btn--sm {
  padding: .28rem .7rem;
  font-size: var(--rec-text-xs);
}

.rec-btn--lg {
  padding: .65rem 1.5rem;
  font-size: var(--rec-text-md);
  border-radius: var(--rec-radius-lg);
}

.rec-btn--block {
  width: 100%;
  justify-content: center;
}

.rec-btn:disabled,
.rec-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.rec-ing-row__badge {
  display:none; align-items:center; gap:.2rem;
  font-size:.65rem; color:var(--rec-success); font-weight:700;
  position:absolute; top:-.55rem; left:.5rem; background:#fff; padding:0 .3rem;
}
.rec-ing-row.is-catalogo .rec-ing-row__badge { display:inline-flex; }

/* AUTOCOMPLETE DE INGREDIENTES */
.f-searchInput-wrap { position:relative; }

.f-searchInput-list {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:#fff; border:1.5px solid var(--rec-border);
  border-radius:var(--rec-radius); box-shadow:var(--rec-shadow-md);
  max-height:240px; overflow-y:auto; z-index:50;
  display:none; padding:.3rem;
}
.f-searchInput-list.open { display:block; }
.f-searchInput-item {
  display:flex; align-items:center; gap:.6rem;
  padding:.45rem .6rem; border-radius:var(--rec-radius-sm);
  cursor:pointer; transition:background var(--rec-transition);
}
.f-searchInput-item:hover, .f-searchInput-item.active { background:var(--rec-amber-light); }
.f-searchInput-item__icon {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:var(--rec-surface); display:flex; align-items:center; justify-content:center;
  font-size:.85rem;
}
.f-searchInput-item__body { flex:1; min-width:0; }
.f-searchInput-item__name { font-size:var(--rec-text-sm); font-weight:600; color:var(--rec-text-primary); line-height:1.25; }
.f-searchInput-item__meta { font-size:var(--rec-text-xs); color:var(--rec-text-muted); display:flex; gap:.5rem; align-items:center; }
.f-searchInput-item__costo { font-family:var(--rec-font-mono); font-weight:600; color:var(--rec-amber-dark); font-size:var(--rec-text-xs); flex-shrink:0; }
.f-searchInput-empty { padding:.75rem; text-align:center; font-size:var(--rec-text-xs); color:var(--rec-text-muted); }

.rec-ing-row.is-catalogo input[data-role="nombre"] {
  border-color:var(--rec-success); background:var(--rec-success-light);
  font-weight:600; color:var(--rec-success);
}
.rec-ing-row__badge {
  display:none; align-items:center; gap:.2rem;
  font-size:.65rem; color:var(--rec-success); font-weight:700;
  position:absolute; top:-.55rem; left:.5rem; background:#fff; padding:0 .3rem;
}
.rec-ing-row.is-catalogo .rec-ing-row__badge { display:inline-flex; }

/* NAV TABS */
.rec-nav-tabs { display:flex; gap:.25rem; border-bottom:2px solid var(--rec-border); margin-bottom:1.5rem; }
.rec-nav-tab {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1.1rem;
  font-family:var(--rec-font-ui); font-size:var(--rec-text-sm); font-weight:600;
  color:var(--rec-text-muted); border:none; background:transparent;
  border-bottom:2.5px solid transparent; margin-bottom:-2px;
  cursor:pointer; transition:color var(--rec-transition), border-color var(--rec-transition);
}
.rec-nav-tab:hover { color:var(--rec-text-secondary); }
.rec-nav-tab.active { color:var(--rec-amber); border-bottom-color:var(--rec-amber); }

/* VISTAS */
.rec-view { display:none; }
.rec-view.active { display:block; }

/* STATS */
.rec-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.75rem; margin-bottom:1.5rem; }
.rec-stat { background:#fff; border:1px solid var(--rec-border-soft); border-radius:var(--rec-radius); padding:.85rem 1rem; }
.rec-stat__num { display:block; font-family:var(--rec-font-mono); font-size:var(--rec-text-xl); font-weight:700; color:var(--rec-amber); line-height:1; }
.rec-stat__label { display:block; font-size:var(--rec-text-xs); color:var(--rec-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-top:.2rem; }

/* CARD DE RECETA */
.rec-prod-card {
  background:#fff; border:1px solid var(--rec-border-soft);
  border-radius:var(--rec-radius-lg); box-shadow:var(--rec-shadow-sm);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition:box-shadow var(--rec-transition), transform var(--rec-transition);
}
.rec-prod-card:hover { box-shadow:var(--rec-shadow-md); transform:translateY(-2px); }
.rec-prod-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--rec-cat-color,var(--rec-amber));
  border-radius:var(--rec-radius-lg) 0 0 var(--rec-radius-lg);
}
.rec-prod-card--salado    { --rec-cat-color:#D97706; }
.rec-prod-card--dulce     { --rec-cat-color:#DB2777; }
.rec-prod-card--saludable { --rec-cat-color:#16A34A; }
.rec-prod-card--picante   { --rec-cat-color:#DC2626; }
.rec-prod-card--neutro    { --rec-cat-color:#7C3AED; }

.rec-prod-card__body { padding:.95rem 1rem .95rem 1.25rem; flex:1; display:flex; flex-direction:column; gap:.5rem; }
.rec-prod-card__name { font-size:var(--rec-text-md); font-weight:700; color:var(--rec-text-primary); margin:0; line-height:1.25; }
.rec-prod-card__code { font-family:var(--rec-font-mono); font-size:var(--rec-text-xs); color:var(--rec-text-muted); }
.rec-prod-card__desc { font-size:var(--rec-text-sm); color:var(--rec-text-secondary); line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rec-prod-card__chips { display:flex; gap:.4rem; flex-wrap:wrap; }
.rec-prod-card__footer { padding:.6rem 1rem .6rem 1.25rem; background:var(--rec-surface); border-top:1px solid var(--rec-border-soft); display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.rec-prod-card__precio { font-family:var(--rec-font-mono); font-size:var(--rec-text-lg); font-weight:700; color:var(--rec-amber-dark); }
.rec-prod-card__precio-label { font-size:var(--rec-text-xs); color:var(--rec-text-muted); font-weight:500; }

/* PANEL DETALLE */
.rec-detail-panel { background:#fff; border:1px solid var(--rec-border-soft); border-radius:var(--rec-radius-lg); overflow:hidden; box-shadow:var(--rec-shadow); display:none; flex-direction:column; animation:rec-fadein .18s ease; }
.rec-detail-panel.visible { display:flex; }
@keyframes rec-fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.rec-detail-panel__hdr { padding:.85rem 1.1rem; background:var(--rec-surface); border-bottom:1px solid var(--rec-border); display:flex; align-items:center; gap:.65rem; }
.rec-detail-panel__title { font-size:var(--rec-text-md); font-weight:700; margin:0; flex:1; }
.rec-detail-panel__body { padding:1.1rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.rec-drow { display:flex; justify-content:space-between; align-items:center; font-size:var(--rec-text-sm); padding:.4rem 0; border-bottom:1px solid var(--rec-border-soft); }
.rec-drow:last-child { border-bottom:none; }
.rec-drow__lbl { color:var(--rec-text-secondary); font-weight:500; }
.rec-drow__val { font-family:var(--rec-font-mono); font-weight:600; color:var(--rec-text-primary); font-size:var(--rec-text-sm); }

/* TABLA INGREDIENTES DETALLE */
.rec-ing-tbl { width:100%; border-collapse:collapse; font-size:var(--rec-text-sm); }
.rec-ing-tbl th { font-size:var(--rec-text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--rec-text-muted); padding:.4rem .6rem; border-bottom:1.5px solid var(--rec-border); background:var(--rec-surface); text-align:left; }
.rec-ing-tbl td { padding:.45rem .6rem; border-bottom:1px solid var(--rec-border-soft); color:var(--rec-text-primary); }
.rec-ing-tbl tr:last-child td { border-bottom:none; }
.rec-ing-tbl .qty { font-family:var(--rec-font-mono); font-weight:600; color:var(--rec-amber-dark); }

/* FORM SECCIONES */
.rec-fsec { background:#fff; border:1px solid var(--rec-border-soft); border-radius:var(--rec-radius-lg); overflow:hidden; box-shadow:var(--rec-shadow-sm); margin-bottom:1.25rem; }
.rec-fsec__hdr { padding:.7rem 1.2rem; background:var(--rec-surface); border-bottom:1px solid var(--rec-border); display:flex; align-items:center; gap:.55rem; font-size:var(--rec-text-sm); font-weight:700; color:var(--rec-text-secondary); }
.rec-fsec__hdr i { color:var(--rec-amber); }
.rec-fsec__body { padding:1.1rem 1.2rem; }

/* FILA INGREDIENTE FORMULARIO */
.rec-ing-row { display:grid; grid-template-columns:1fr 90px 90px 32px; gap:.5rem; align-items:start; margin-bottom:.9rem; }
.rec-ing-row .rec-ac-wrap,
.rec-ing-row > input[data-role="cantidad"],
.rec-ing-row > select[data-role="unidad"],
.rec-ing-row > .rec-ing-del { margin-top:0; }
.rec-ing-del { width:32px; height:32px; border:1px solid var(--rec-border); background:#fff; border-radius:var(--rec-radius-sm); color:var(--rec-text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--rec-transition); flex-shrink:0; }
.rec-ing-del:hover { border-color:var(--rec-danger); color:var(--rec-danger); background:var(--rec-danger-light); }

/* SELECTOR CATEGORÍA */
.rec-cat-sel { display:flex; gap:.5rem; flex-wrap:wrap; }
.rec-cat-opt { display:flex; align-items:center; gap:.35rem; padding:.35rem .8rem; border-radius:var(--rec-radius-pill); border:1.5px solid var(--rec-border); background:#fff; font-size:var(--rec-text-sm); font-weight:600; cursor:pointer; transition:all var(--rec-transition); user-select:none; }
.rec-cat-opt input { display:none; }
.rec-cat-opt--salado.sel    { border-color:#D97706; background:#FEF3C7; color:#92400E; }
.rec-cat-opt--dulce.sel     { border-color:#DB2777; background:#FCE7F3; color:#9D174D; }
.rec-cat-opt--saludable.sel { border-color:#16A34A; background:#DCFCE7; color:#14532D; }
.rec-cat-opt--picante.sel   { border-color:#DC2626; background:#FEE2E2; color:#991B1B; }
.rec-cat-opt--neutro.sel    { border-color:#7C3AED; background:#EDE9FE; color:#4C1D95; }

/* EMPTY STATE */
.rec-empty-st { display:flex; flex-direction:column; align-items:center; gap:.65rem; padding:3.5rem 1.5rem; text-align:center; color:var(--rec-text-muted); }
.rec-empty-st i { font-size:2.5rem; opacity:.4; }
.rec-empty-st p { font-size:var(--rec-text-sm); margin:0; max-width:240px; line-height:1.5; }

/* PAGINACIÓN */
.rec-pager { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1rem; padding:.6rem .25rem; }
.rec-pager__info { font-size:var(--rec-text-xs); color:var(--rec-text-muted); font-family:var(--rec-font-mono); white-space:nowrap; }
.rec-pager__controls { display:flex; align-items:center; gap:.35rem; }
.rec-pager__btn {
  width:34px; height:34px; border-radius:var(--rec-radius); border:1.5px solid var(--rec-border);
  background:#fff; color:var(--rec-text-secondary); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
  transition:all var(--rec-transition);
}
.rec-pager__btn:hover:not(:disabled) { border-color:var(--rec-amber); color:var(--rec-amber); background:var(--rec-amber-light); }
.rec-pager__btn:disabled { opacity:.35; cursor:not-allowed; }
.rec-pager__dots { display:flex; align-items:center; gap:.3rem; padding:0 .2rem; }
.rec-pager__dot {
  width:7px; height:7px; border-radius:50%; background:var(--rec-border);
  cursor:pointer; transition:all var(--rec-transition); border:none; padding:0;
}
.rec-pager__dot.active { background:var(--rec-amber); width:20px; border-radius:4px; }
.rec-pager__dot:hover:not(.active) { background:var(--rec-text-muted); }

/* IMAGEN EN CARD */
.rec-prod-card__img {
  width:100%; height:140px; object-fit:cover;
  display:block; border-bottom:1px solid var(--rec-border-soft);
}
.rec-prod-card__img-placeholder {
  width:100%; height:140px;
  background:linear-gradient(135deg,var(--rec-surface) 0%,var(--rec-surface-alt) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35rem; border-bottom:1px solid var(--rec-border-soft);
  color:var(--rec-text-muted); font-size:var(--rec-text-xs); font-weight:600;
}
.rec-prod-card__img-placeholder i { font-size:2rem; opacity:.35; }
/* La franja lateral debe quedar sobre la imagen */
.rec-prod-card::before { z-index:1; }

/* IMAGEN EN DETALLE */
.rec-detail-img {
  width:100%; max-height:200px; object-fit:cover;
  border-radius:var(--rec-radius); border:1px solid var(--rec-border-soft);
}
.rec-detail-img-placeholder {
  width:100%; height:120px;
  background:var(--rec-surface);
  border-radius:var(--rec-radius); border:1px dashed var(--rec-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--rec-text-muted); font-size:var(--rec-text-sm); gap:.4rem;
}

/* AUTOCOMPLETE DE INGREDIENTES */
.rec-ac-wrap { position:relative; }
.rec-ac-list {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:#fff; border:1.5px solid var(--rec-border);
  border-radius:var(--rec-radius); box-shadow:var(--rec-shadow-md);
  max-height:240px; overflow-y:auto; z-index:50;
  display:none; padding:.3rem;
}
.rec-ac-list.open { display:block; }
.rec-ac-item {
  display:flex; align-items:center; gap:.6rem;
  padding:.45rem .6rem; border-radius:var(--rec-radius-sm);
  cursor:pointer; transition:background var(--rec-transition);
}
.rec-ac-item:hover, .rec-ac-item.active { background:var(--rec-amber-light); }
.rec-ac-item__icon {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:var(--rec-surface); display:flex; align-items:center; justify-content:center;
  font-size:.85rem;
}
.rec-ac-item__body { flex:1; min-width:0; }
.rec-ac-item__name { font-size:var(--rec-text-sm); font-weight:600; color:var(--rec-text-primary); line-height:1.25; }
.rec-ac-item__meta { font-size:var(--rec-text-xs); color:var(--rec-text-muted); display:flex; gap:.5rem; align-items:center; }
.rec-ac-item__costo { font-family:var(--rec-font-mono); font-weight:600; color:var(--rec-amber-dark); font-size:var(--rec-text-xs); flex-shrink:0; }
.rec-ac-empty { padding:.75rem; text-align:center; font-size:var(--rec-text-xs); color:var(--rec-text-muted); }
.rec-ac-new {
  display:flex; align-items:center; gap:.5rem;
  padding:.45rem .6rem; margin-top:.15rem;
  border-top:1px dashed var(--rec-border);
  font-size:var(--rec-text-xs); color:var(--rec-amber-dark); font-weight:600;
  cursor:pointer; border-radius:var(--rec-radius-sm);
}
.rec-ac-new:hover { background:var(--rec-amber-light); }
.rec-ing-row.is-catalogo input[data-role="nombre"] {
  border-color:var(--rec-success); background:var(--rec-success-light);
  font-weight:600; color:var(--rec-success);
}
.rec-ing-row__badge {
  display:none; align-items:center; gap:.2rem;
  font-size:.65rem; color:var(--rec-success); font-weight:700;
  position:absolute; top:-.55rem; left:.5rem; background:#fff; padding:0 .3rem;
}
.rec-ing-row.is-catalogo .rec-ing-row__badge { display:inline-flex; }

/* UPLOAD ZONE */
.rec-upload-zone {
  border:2px dashed var(--rec-border);
  border-radius:var(--rec-radius);
  background:#fff;
  padding:1.5rem 1rem;
  text-align:center;
  cursor:pointer;
  transition:all var(--rec-transition);
  position:relative;
}
.rec-upload-zone:hover,
.rec-upload-zone.dragover {
  border-color:var(--rec-amber);
  background:var(--rec-amber-light);
}
.rec-upload-zone input[type=file] {
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.rec-upload-zone__icon { font-size:1.8rem; color:var(--rec-amber); opacity:.7; }
.rec-upload-zone__text { font-size:var(--rec-text-sm); color:var(--rec-text-secondary); margin:.35rem 0 0; font-weight:500; }
.rec-upload-zone__hint { font-size:var(--rec-text-xs); color:var(--rec-text-muted); margin:.15rem 0 0; }

/* PREVIEW en formulario */
.rec-img-preview-wrap {
  position:relative; display:none;
  border-radius:var(--rec-radius); overflow:hidden;
  border:1px solid var(--rec-border-soft);
}
.rec-img-preview-wrap.visible { display:block; }
.rec-img-preview { width:100%; max-height:180px; object-fit:cover; display:block; }
.rec-img-preview-del {
  position:absolute; top:.4rem; right:.4rem;
  width:28px; height:28px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:.8rem;
  transition:background var(--rec-transition);
}
.rec-img-preview-del:hover { background:var(--rec-danger); }

/* MODO DE VENTA — toggles y badges */
.rec-modo-selector {
  display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: .25rem;
}
.rec-modo-opt { cursor: pointer; user-select: none; display: block; }
.rec-modo-opt input { display: none; }
.rec-modo-opt__card {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .75rem .85rem;
  border: 2px solid var(--rec-border);
  border-radius: var(--rec-radius);
  background: #fff;
  transition: all var(--rec-transition);
}
.rec-modo-opt__card:hover { border-color: var(--rec-amber); background: var(--rec-amber-light); }
.rec-modo-opt input:checked + .rec-modo-opt__card {
  border-color: var(--rec-amber);
  background: var(--rec-amber-light);
  box-shadow: 0 0 0 3px rgba(217,119,6,.12);
}
.rec-modo-opt__icon {
  width: 34px; height: 34px; border-radius: var(--rec-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; flex-shrink: 0;
}
.rec-modo-opt__icon--stock   { background: #DCFCE7; color: #16A34A; }
.rec-modo-opt__icon--demanda { background: var(--rec-amber-light); color: var(--rec-amber-dark); }
.rec-modo-opt__body { flex: 1; min-width: 0; }
.rec-modo-opt__name {
  font-size: var(--rec-text-sm); font-weight: 700;
  color: var(--rec-text-primary); line-height: 1.2; margin-bottom: .15rem;
}
.rec-modo-opt__desc {
  font-size: var(--rec-text-xs); color: var(--rec-text-muted); line-height: 1.4;
}
.rec-modo-opt__radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--rec-border);
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; color: transparent; flex-shrink: 0; margin-top: .1rem;
  transition: all var(--rec-transition);
}
.rec-modo-opt input:checked + .rec-modo-opt__card .rec-modo-opt__radio {
  background: var(--rec-amber); border-color: var(--rec-amber); color: #fff;
}

/* Panel de ingredientes al vender — aparece si es bajo demanda */
.rec-demanda-panel {
  display: none; animation: rec-fadein .18s ease;
  background: var(--rec-amber-light);
  border: 1.5px solid var(--rec-amber-mid);
  border-radius: var(--rec-radius); padding: .75rem 1rem;
  margin-top: .65rem; font-size: var(--rec-text-xs);
  color: var(--rec-amber-dark); font-weight: 500; line-height: 1.5;
}
.rec-demanda-panel.visible { display: flex; gap: .6rem; align-items: flex-start; }
.rec-demanda-panel i { flex-shrink: 0; margin-top: .1rem; font-size: .95rem; }

/* Badge de modo en la card y en el detalle */
.rec-badge--demanda {
  background: var(--rec-amber-light); color: var(--rec-amber-dark);
  font-family: var(--rec-font-mono);
}
.rec-badge--stock-propio {
  background: #DCFCE7; color: #14532D;
}

/* Fila de ingredientes en detalle — con cantidad ajustada */
.rec-ing-ajuste {
  font-family: var(--rec-font-mono); font-size: var(--rec-text-xs);
  color: var(--rec-amber-dark); font-weight: 700;
}

/* TOAST */
.rec-toast { position:fixed; bottom:1.5rem; right:1.5rem; background:var(--rec-text-primary); color:var(--rec-text-inverse); padding:.7rem 1.1rem; border-radius:var(--rec-radius); font-size:var(--rec-text-sm); font-weight:600; display:flex; align-items:center; gap:.5rem; box-shadow:var(--rec-shadow-md); z-index:9999; opacity:0; transform:translateY(12px); transition:opacity .22s ease, transform .22s ease; pointer-events:none; }
.rec-toast.show { opacity:1; transform:translateY(0); }
.rec-toast i { color:#4ade80; }