[hidden] { display: none !important; }

.page-header { align-items: center; }
.page-header-left h1 { margin: 0; }
.page-search { flex: 1 1 280px; max-width: 480px; margin-left: auto; }
.page-search input { width: 100%; }
.module-notice {
    padding: 12px 16px;
    border: 1px solid var(--primary-ring);
    border-radius: 10px;
    color: var(--text-primary);
    background: var(--bg-panel-soft);
}
.kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-card { padding: 12px 16px; border-radius: 12px; }
.kpi-icon { width: 38px; height: 38px; border-radius: 10px; }
.kpi-copy strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.kpi-copy span { color: var(--text-secondary); letter-spacing: 0.03em; }
.ing-layout {
    grid-template-columns: minmax(280px, 32%) minmax(0, 1fr);
    gap: 0;
    height: max(480px, calc(100dvh - 225px));
    flex-shrink: 0;
}
.ing-list-col, .ing-detail-col { min-height: 0; max-height: none; min-width: 0; }
.ing-list-body, .detail-body { min-height: 0; }
.ing-list-item { padding: 12px 14px; gap: 9px; border-left: 3px solid transparent; }
.ing-list-item > div { min-width: 0; overflow-wrap: anywhere; }
.ing-list-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
.ing-precio { font-size: 0.8rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.count-pill, .detail-tab .tab-count { font-size: 0.8rem; font-weight: 600; }
.detail-tab.active { margin-bottom: -1px; }
.detail-header { padding: 16px 20px; }
.detail-title h2 { overflow-wrap: anywhere; }
.ficha-precio-block { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ficha-precio-block strong { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.val-pct::after { content: none; }
.lote-body { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lote-precios-row strong { text-align: right; }
.modal-box { max-height: calc(100dvh - 40px); display: flex; flex-direction: column; overflow: hidden; }
.modal-box form { display: flex; flex-direction: column; min-height: 0; }
.modal-body { min-height: 0; overflow-y: auto; }
.modal-header, .modal-footer { flex-shrink: 0; }
.field-label { font-weight: 650; letter-spacing: 0.025em; }
button:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 900px) {
    .ing-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
    .ing-list-col { min-height: 220px; max-height: 35vh; border-right: none; border-bottom: 1px solid var(--border-color); }
    .ing-detail-col { min-height: 360px; max-height: 80vh; }
    .page-search { order: 3; flex-basis: 100%; max-width: none; }
    .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .kpi-card { padding: 10px; }
    .kpi-icon { display: none; }
    .kpi-copy span { font-size: 0.64rem; }
    .detail-header, .detail-body { padding: 14px; }
}

@media (max-width: 480px) {
    .page-header { gap: 12px; }
    .page-header-left h1 { font-size: 1.3rem; }
    .page-header-actions .btn { font-size: 0.8rem; }
    .ing-list-filters { grid-template-columns: 1fr 1fr; }
    .fields-row, .ficha-grid, .lote-body { grid-template-columns: minmax(0, 1fr); }
    .modal-body { padding: 12px; }
    .modal-section { padding: 12px; }
}

/* Alta y edición de ingredientes en tres pasos. */
#modal-ingrediente .modal-box { max-width: 680px; }
#form-ingrediente [hidden] { display: none !important; }
.ing-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 20px 20px 0; flex-shrink: 0; }
.ing-steps button { display: flex; align-items: center; gap: 8px; padding: 12px 10px; border: 1px solid var(--border-color); border-radius: 10px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.8rem; text-align: left; cursor: pointer; }
.ing-steps button span { display: grid; place-items: center; width: 25px; height: 25px; flex-shrink: 0; border: 1px solid var(--border-color); border-radius: 50%; font-weight: 800; }
.ing-steps button[aria-current="step"] { background: var(--primary-tint-soft); border-color: var(--primary); color: var(--text-primary); }
.ing-steps button[aria-current="step"] span { background: var(--primary); color: var(--text-on-primary); }
.ing-steps button:focus-visible, .ing-back:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.ing-step-status { margin: 12px 20px 0; color: var(--text-secondary); font-size: 0.8rem; flex-shrink: 0; }
#form-ingrediente .modal-body { min-height: 280px; }
#form-ingrediente .modal-section { margin-bottom: 0; }
#form-ingrediente .modal-footer { display: flex; gap: 10px; }
#ing-cancel { margin-right: auto; }
#ing-back { order: 1; background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); }
#ing-next, #form-ingrediente button[type="submit"] { order: 2; }
#form-ingrediente .check-cards-row { grid-template-columns: 1fr; }
#form-ingrediente .check-card { padding: 15px; }
#form-ingrediente .check-card-copy strong, #form-ingrediente .check-card-copy small { text-transform: none; }
#form-ingrediente .check-card-copy small { margin-top: 5px; line-height: 1.5; }
@media (max-width: 480px) {
    .ing-steps { padding: 12px 12px 0; gap: 5px; }
    .ing-steps button { flex-direction: column; text-align: center; padding: 8px 4px; font-size: 0.72rem; }
    .ing-step-status { margin: 10px 12px 0; }
    #form-ingrediente .modal-body { min-height: 0; }
    #form-ingrediente .modal-footer { flex-wrap: wrap; }
}
@media (max-height: 650px) {
    #form-ingrediente .modal-body { min-height: 0; }
}

/* Compra por secciones, con las mismas señales visuales del ingrediente. */
#form-lote [hidden] { display: none !important; }
.lote-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#form-lote .modal-body { min-height: 290px; }
#form-lote .modal-section { margin-bottom: 0; }
#form-lote .modal-footer { display: flex; gap: 10px; }
#lote-cancel { margin-right: auto; }
#lote-back { order: 1; background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); }
#lote-next, #form-lote button[type="submit"] { order: 2; }
#form-lote .file-preview img { max-height: 100px; object-fit: contain; }
@media (max-width: 600px) {
    .lote-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lote-steps button { flex-direction: row; text-align: left; }
    #form-lote .modal-footer { flex-wrap: wrap; }
}
@media (max-height: 650px), (max-width: 480px) {
    #form-lote .modal-body { min-height: 0; }
}

/* Ficha: jerarquía tranquila y legible, sin mosaico de datos repetidos. */
.ing-layout { height: auto; min-height: 560px; align-items: stretch; }
.ing-list-col { max-height: 850px; }
.ing-detail-col { max-height: none; }
.detail-header { padding: 24px; }
.detail-title h2 { font-size: 1.45rem; line-height: 1.3; }
.detail-title-sub { margin-top: 7px; font-size: 0.88rem; color: var(--text-secondary); gap: 12px; }
.detail-title-color { background: var(--primary-tint-soft) !important; color: var(--primary-soft); border: 1px solid var(--border-color); }
.profile-status { color: var(--text-secondary); border-left: 1px solid var(--border-color); padding-left: 12px; }
#btn-nuevo-lote { background: var(--primary-tint-soft) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
#btn-del-ing { background: transparent; color: var(--text-secondary); border-color: var(--border-color); }
.detail-tabs { padding-left: 24px; }
.detail-body { padding: 26px; overflow: visible; }
.ingredient-profile { display: grid; gap: 22px; color: var(--text-primary); }
.profile-price { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; padding: 26px; background: var(--bg-panel-soft); border: 1px solid var(--border-color); border-radius: 14px; }
.profile-eyebrow { margin: 0 0 12px; color: var(--text-secondary); font-size: 0.83rem; font-weight: 600; }
.profile-amount { color: var(--text-primary); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.profile-amount span { font-size: 0.95rem; color: var(--text-secondary); font-weight: 400; }
.profile-caption { color: var(--text-secondary); font-size: 0.86rem; line-height: 1.65; margin: 12px 0 0; }
.profile-reference { border-left: 1px solid var(--border-color); padding-left: 26px; }
.profile-reference strong { display: block; font-size: 1.1rem; color: var(--text-primary); }
.profile-reference p:not(.profile-eyebrow) { margin: 10px 0 0; color: var(--text-secondary); font-size: 0.86rem; line-height: 1.6; }
.profile-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.profile-section { padding: 24px; border: 1px solid var(--border-color); border-radius: 12px; min-width: 0; }
.profile-section h3 { margin: 0 0 18px; font-size: 1rem; font-weight: 650; color: var(--text-primary); }
.profile-facts { margin: 0; }
.profile-facts > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.profile-facts dt { color: var(--text-secondary); font-size: 0.88rem; }
.profile-facts dd { margin: 0; color: var(--text-primary); font-size: 0.92rem; font-weight: 600; }
.profile-equivalence { margin: 18px 0 0; font-size: 1.1rem; color: var(--primary-soft); }
.profile-stages { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.profile-stages span { border: 1px solid var(--border-color); border-radius: 7px; padding: 7px 10px; font-size: 0.83rem; color: var(--text-primary); background: var(--bg-panel-soft); }
.profile-notes p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.8; }
.profile-footnote { margin: 0; color: var(--text-secondary); font-size: 0.8rem; line-height: 1.6; }
.ing-precio { color: var(--text-primary); }
.ing-estado.on { color: var(--text-secondary); background: var(--bg-panel-soft); border-color: var(--border-color); }
@media (max-width: 1100px) {
    .profile-price, .profile-columns { grid-template-columns: 1fr; }
    .profile-reference { border-left: 0; border-top: 1px solid var(--border-color); padding: 20px 0 0; }
}
@media (max-width: 900px) { .ing-list-col { max-height: 35vh; } }
@media (max-width: 480px) {
    .detail-header, .detail-body { padding: 16px; }
    .profile-price, .profile-section { padding: 18px; }
    .ingredient-profile, .profile-columns { gap: 16px; }
}

/* Listado y compras: misma estética sobria de la ficha aprobada. */
.ing-list-header { padding: 20px 18px; background: transparent; }
.ing-list-title { margin-bottom: 14px; }
.ing-list-item { grid-template-columns: minmax(0, 1fr) auto; padding: 21px 18px; gap: 16px; align-items: center; }
.ing-list-item.active { background: var(--primary-tint-subtle); border-left-color: var(--primary); }
.ing-item-name { font-size: 1rem; line-height: 1.4; margin-bottom: 7px; }
.ing-item-meta { display: block; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.ingredient-list-caption { display: block; color: var(--text-secondary); font-size: 0.76rem; line-height: 1.6; margin-top: 6px; }
.ing-item-right { gap: 6px; max-width: 150px; text-align: right; }
.ing-item-right .ingredient-list-caption { margin: 0; }
.ing-precio { font-size: 1rem; line-height: 1.4; color: var(--text-primary); }
.lote-card { background: transparent; border: 1px solid var(--border-color); border-radius: 12px; box-shadow: none; overflow: hidden; margin-bottom: 22px; }
.lote-head { background: var(--bg-panel-soft); padding: 22px; gap: 18px; align-items: center; }
.lote-fecha-box { background: transparent; border: 0; border-right: 1px solid var(--border-color); border-radius: 0; padding: 0 18px 0 0; min-width: 74px; }
.lote-fecha-box strong { color: var(--text-primary); font-size: 1.6rem; }
.lote-fecha-box small { color: var(--text-secondary); font-size: 0.72rem; letter-spacing: 0.04em; }
.lote-meta { min-width: 0; }
.lote-meta h4 { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; font-size: 1rem; color: var(--text-primary); line-height: 1.5; }
.lote-badge-present { background: transparent; color: var(--text-secondary); border: 0; padding: 0; border-radius: 0; font-size: 0.78rem; font-weight: 400; }
.lote-badge-present i, .lote-badge-proveedor i { display: none; }
.lote-badge-proveedor { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; margin-top: 7px; overflow-wrap: anywhere; }
.lote-acc .btn-icon { color: var(--text-secondary); background: transparent; border-color: var(--border-color); }
.lote-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 24px; gap: 28px; align-items: start; }
.lote-precios, .lote-ticket, .ciclo-vida { padding: 0; background: transparent; border: 0; border-radius: 0; min-width: 0; }
.lote-precios { order: 0; }
.ciclo-vida { order: 1; }
.lote-ticket { order: 2; grid-column: 1 / -1; border-top: 1px solid var(--border-color); padding-top: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.purchase-section-title, .ciclo-head h5 { margin: 0 0 14px; color: var(--text-primary); font-size: 0.95rem; font-weight: 650; }
.lote-ticket .purchase-section-title { width: 100%; margin-bottom: 0; }
.lote-ticket .thumb { width: 130px; height: 90px; object-fit: contain; background: var(--bg-panel-soft); border: 1px solid var(--border-color); border-radius: 8px; }
.lote-precios-row { padding: 12px 0; border-bottom: 1px solid var(--border-color); gap: 16px; }
.lote-precios-row span { font-size: 0.86rem; color: var(--text-secondary); }
.lote-precios-row strong, .lote-precios-row strong.primary, .lote-precios-row strong.success { color: var(--text-primary); font-size: 1rem; font-variant-numeric: tabular-nums; }
.ciclo-head { margin-bottom: 0; align-items: baseline; flex-wrap: wrap; }
.ciclo-head .tag-chip { background: transparent; color: var(--text-secondary); border: 0; padding: 0; }
.etapas-lineales { gap: 0; padding: 0; }
.etapa-lineal, .etapa-lineal.on { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 0; opacity: 1; }
.etapa-lineal::before, .etapa-lineal::after, .etapa-lineal-dot { display: none; }
.etapa-lineal-label { color: var(--text-secondary); font-size: 0.86rem; }
.etapa-lineal-val { color: var(--text-primary); text-align: right; font-size: 0.95rem; }
.etapa-lineal-val small, .etapa-lineal-val small.ok, .etapa-lineal-val small.bad { display: block; margin-top: 5px; color: var(--text-secondary); font-size: 0.75rem; }
.ciclo-resume-row .value, .ciclo-resume-row .value.ok, .ciclo-resume-row .value.warn, .ciclo-resume-row .value.bad { color: var(--text-primary); }
.ciclo-resume-row .label { color: var(--text-secondary); }
.ciclo-empty { background: transparent; border: 0; padding: 8px 0; text-align: left; color: var(--text-secondary); font-size: 0.83rem; line-height: 1.7; }
.purchase-notes { padding: 20px 24px; border-top: 1px solid var(--border-color); }
.purchase-notes span { color: var(--text-secondary); font-size: 0.8rem; }
.purchase-notes p { color: var(--text-primary); font-size: 0.9rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; }
@media (max-width: 1100px) { .lote-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
    .lote-head { padding: 16px; gap: 12px; flex-wrap: wrap; }
    .lote-body, .purchase-notes { padding: 18px; }
    .ing-list-item { padding: 18px 14px; }
}

/* El divisor pertenece al contenedor completo, no a la lista con altura limitada. */
.ing-layout { position: relative; }
.ing-layout::before { content: ''; position: absolute; top: 0; bottom: 0; left: 32%; width: 1px; background: var(--border-color); pointer-events: none; }
.ing-list-col { border-right: 0; }
@media (max-width: 900px) { .ing-layout::before { display: none; } }
/* Alinear el divisor con el ancho real de la columna, incluso en anchos intermedios. */
.ing-layout::before { display: none; }
.ing-detail-col { border-left: 1px solid var(--border-color); }
@media (max-width: 900px) { .ing-detail-col { border-left: 0; } }

/* Formularios: superficies limpias, lectura natural y ayudas agrupadas. */
#form-ingrediente .modal-body, #form-lote .modal-body { padding: 26px; }
#form-ingrediente .modal-section, #form-lote .modal-section { position: relative; background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
/* Conservar el encabezado como destino accesible del foco al cambiar de paso. */
#form-ingrediente .modal-section > h4, #form-lote .modal-section > h4 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#form-ingrediente .field-label, #form-lote .field-label { text-transform: none; letter-spacing: normal; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); line-height: 1.5; }
#form-ingrediente .fields-row, #form-lote .fields-row { gap: 20px; margin-bottom: 22px; }
#form-ingrediente .field-group, #form-lote .field-group { gap: 8px; }
#form-ingrediente .field-input, #form-lote .field-input { font-size: 0.92rem; line-height: 1.5; padding: 11px 13px; }
#form-ingrediente .hint, #form-lote .hint { font-size: 0.85rem; line-height: 1.65; color: var(--text-secondary); }
#form-ingrediente .conversion-note { border-top: 1px solid var(--border-color); padding-top: 14px; }
#ing-conversion-hint { margin: 0; }
#lote-conversion-hint { margin: 0; padding-top: 12px; border-top: 1px solid var(--border-color); }
#lote-factor[readonly] { background: transparent; color: var(--text-primary); border-color: transparent; font-variant-numeric: tabular-nums; }
#lote-importes-preview { margin: 0 0 20px; padding: 0; }
#lote-importes-preview.has-amounts { padding: 18px 20px; border-left: 3px solid var(--primary); background: var(--bg-panel-soft); border-radius: 0 8px 8px 0; color: var(--text-primary); font-size: 0.95rem; line-height: 1.85; font-weight: 600; font-variant-numeric: tabular-nums; }
#form-ingrediente .check-card { background: transparent; border: 0; border-bottom: 1px solid var(--border-color); border-radius: 0; padding: 18px 0; }
#form-ingrediente .check-card:has(input:checked) { background: var(--primary-tint-subtle); }
#form-ingrediente .check-card-copy strong { font-size: 0.93rem; }
#form-ingrediente .check-card-copy small { font-size: 0.85rem; color: var(--text-secondary); font-weight: 400; }
#form-ingrediente .check-card-copy i { color: var(--primary-soft) !important; }
#form-lote .file-label { background: transparent; color: var(--text-secondary); font-weight: 500; text-transform: none; letter-spacing: normal; padding: 18px; }
#form-ingrediente .modal-footer, #form-lote .modal-footer { padding: 18px 26px; }
@media (max-width: 480px) {
    #form-ingrediente .modal-body, #form-lote .modal-body { padding: 20px 16px; }
    #form-ingrediente .fields-row, #form-lote .fields-row { gap: 16px; margin-bottom: 18px; }
    #form-ingrediente .modal-footer, #form-lote .modal-footer { padding: 16px; }
}

/* Encabezado de ingredientes: filtros arriba y búsqueda dentro de la lista. */
.page-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title actions"; align-items: center; gap: 12px 18px; }
.page-header-left { grid-area: title; }
.page-header-actions { grid-area: actions; align-items: center; justify-content: flex-end; }
.page-header .ing-list-filters { display: grid; grid-template-columns: 260px 220px; gap: 10px; min-width: 500px; }
.page-header .ing-list-filters .field-xs { width: 100%; }
.ing-list-header { padding-top: 16px; }
@media (max-width: 900px) {
    .page-header { grid-template-columns: 1fr; grid-template-areas: "title" "actions"; }
    .page-header-actions { justify-content: stretch; }
    .page-header .ing-list-filters { flex: 1 1 auto; min-width: 0; }
    .page-header-actions .btn-primary { flex-shrink: 0; }
}
@media (max-width: 480px) {
    .page-header .ing-list-filters { grid-template-columns: 1fr; width: 100%; }
    .page-header-actions { align-items: stretch; }
    .page-header-actions .btn-primary { width: 100%; }
}
.ing-list-header .page-search { width: 100%; max-width: none; margin: 0; flex: 0 0 auto; }

/* Etiquetas y metadatos se leen al mismo tamaño en portátil y escritorio. */
html:is([data-theme="vino"], [data-theme="black"]) :is(.ing-item-meta, .ingredient-list-caption, .ing-detail-empty span, .ing-empty span, .profile-footnote, .etapa-lineal-val small, .purchase-notes span, .ing-step-status) {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.6;
}
html:is([data-theme="vino"], [data-theme="black"]) :is(.ing-detail-empty p, .ing-empty p) {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}
html:is([data-theme="vino"], [data-theme="black"]) .ing-precio {
    font-size: 1rem;
    font-weight: 700;
}
html:is([data-theme="vino"], [data-theme="black"]) .kpi-copy span {
    font-size: 0.8125rem;
    line-height: 1.5;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}
html:is([data-theme="vino"], [data-theme="black"]) .ing-list-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
html:is([data-theme="vino"], [data-theme="black"]) .ing-item-right {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    max-width: none;
    text-align: left;
}
html:is([data-theme="vino"], [data-theme="black"]) :is(.ing-empty i, .ing-detail-empty i) {
    color: var(--text-tertiary);
    opacity: 0.8;
}
@media (max-width: 1150px) {
    .page-header { grid-template-columns: 1fr; grid-template-areas: "title" "actions"; }
    .page-header-actions { justify-content: stretch; }
    .page-header .ing-list-filters { flex: 1 1 380px; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .page-header .ing-list-filters { grid-template-columns: 1fr; flex-basis: 100%; }
    html:is([data-theme="vino"], [data-theme="black"]) .kpi-grid { grid-template-columns: 1fr; }
    html:is([data-theme="vino"], [data-theme="black"]) .kpi-card { padding: 10px 14px; }
    html:is([data-theme="vino"], [data-theme="black"]) .kpi-copy { display: flex; align-items: baseline; gap: 12px; }
}