.bs-risk-badge{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:var(--radius-sm,4px);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.bs-risk-badge--high{background:var(--risk-high);color:#fff}
.bs-risk-badge--moderate{background:var(--risk-moderate);color:#fff}
.bs-risk-badge--low{background:var(--risk-low);color:#fff}
.bs-risk-badge--sm{font-size:.6rem;padding:.15rem .45rem}
@keyframes bsspin{to{transform:rotate(360deg)}}
.ficha-layout{max-width:80rem;margin:0 auto;padding:1.5rem 1rem;display:grid;grid-template-columns:320px 1fr;gap:2rem;min-height:100vh}
.ficha-sidebar{display:flex;flex-direction:column}
.ficha-identity{background:#fff;border:1px solid var(--color-border,#e2e8f0);border-radius:var(--radius-xl,12px);padding:1.5rem;text-align:center;position:sticky;top:1.5rem}
.ficha-identity__name{font-size:1.15rem;font-weight:800;color:var(--color-text,#0f172a);line-height:1.3;margin:0 0 .25rem}
.ficha-identity__brand{font-size:.85rem;color:var(--color-text-muted,#94a3b8);font-weight:500;margin:0 0 1rem}
.ficha-edit-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;padding:.6rem 1rem;background:var(--color-primary,#0F766E);color:#fff;font-size:.8rem;font-weight:700;border-radius:var(--radius-md,6px);text-decoration:none;transition:background .15s;margin-bottom:1rem}
.ficha-edit-btn:hover{background:var(--color-primary-dark,#0D6560);color:#fff}
.ficha-identity__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-bottom:1.25rem}
.ficha-tag{font-size:.7rem;font-family:var(--font-mono,'JetBrains Mono',monospace);padding:.2rem .5rem;background:var(--color-surface,#f8fafc);color:var(--color-text-secondary,#475569);border-radius:var(--radius-sm,4px)}
.ficha-risk-badge{display:flex;align-items:center;justify-content:center;width:100%;padding:.6rem 1rem;border-radius:var(--radius-md,6px);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin-bottom:.4rem}
.ficha-risk-badge--high{background:#dc2626}
.ficha-risk-badge--moderate{background:#b45309}
.ficha-risk-badge--low{background:#047857}
.ficha-risk-disclaimer{font-size:.6rem;color:var(--color-text-muted,#94a3b8);text-transform:uppercase;letter-spacing:.04em;margin:0 0 1rem}
.ficha-validate-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;padding:.7rem 1rem;background:#0f172a;color:#fff;font-size:.8rem;font-weight:700;border:none;border-radius:var(--radius-md,6px);cursor:pointer;transition:background .15s}
.ficha-validate-btn:hover{background:#1e293b}
.ficha-validate-hint{font-size:.6rem;color:var(--color-text-muted,#94a3b8);margin:.35rem 0 0}
.ficha-main{display:flex;flex-direction:column;gap:1.5rem}
.ficha-verdict{border-radius:var(--radius-xl,12px);padding:1.25rem 1.5rem;border:1px solid transparent;border-left:5px solid}
.ficha-verdict--high{background:#fef2f2;border-color:#fecaca;border-left-color:#dc2626}
.ficha-verdict--moderate{background:#fffbeb;border-color:#fde68a;border-left-color:#d97706}
.ficha-verdict--low{background:#f0fdf4;border-color:#bbf7d0;border-left-color:#059669;color:#166534}
.ficha-verdict__header{display:flex;align-items:center;gap:.75rem;margin-bottom:.4rem}
.ficha-verdict__count{font-size:.85rem;font-weight:600;color:#475569}
.ficha-verdict__desc{font-size:.8rem;color:#64748b;margin:0}
.ficha-section{display:flex;flex-direction:column;gap:.75rem}
.ficha-section__title{font-size:1rem;font-weight:800;color:var(--color-text,#0f172a);text-transform:uppercase;letter-spacing:-.01em;margin:0;display:flex;align-items:center;gap:.5rem}
.ficha-section__bar{display:block;width:4px;height:1.25rem;background:var(--color-primary,#0F766E);border-radius:2px;flex-shrink:0}
.ficha-motivos{display:flex;flex-direction:column;gap:.6rem}
.ficha-motivo{background:#fff;border:1px solid var(--color-border,#e2e8f0);border-left:4px solid var(--color-border,#e2e8f0);border-radius:var(--radius-md,6px);padding:1rem 1.25rem}
.ficha-motivo--high{border-left-color:#dc2626}
.ficha-motivo--moderate{border-left-color:#d97706}
.ficha-motivo--low{border-left-color:#059669}
.ficha-motivo__header{display:flex;align-items:flex-start;gap:.6rem}
.ficha-motivo__text{font-size:.85rem;color:var(--color-text,#0f172a);font-weight:500;line-height:1.6;margin:0;flex:1}
.ficha-motivo__legal{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--color-border,#e2e8f0);font-size:.7rem;color:var(--color-text-muted,#94a3b8);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.ficha-motivo__legal-label{font-weight:700;color:#475569}
.ficha-motivo__link{font-weight:600;color:var(--color-primary,#0F766E);text-decoration:none;margin-left:auto}
.ficha-motivo__link:hover{text-decoration:underline}
.ficha-motivos__empty{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:var(--radius-lg,8px);padding:1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.ficha-motivos__empty svg{color:#059669}
.ficha-motivos__empty-title{font-size:.95rem;font-weight:700;color:#166534;margin:0}
.ficha-motivos__empty-desc{font-size:.8rem;color:#15803d;margin:0}
.ficha-nutri-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}
.ficha-nutri-card{background:#fff;border:1px solid var(--color-border,#e2e8f0);border-radius:var(--radius-md,6px);padding:.75rem .5rem;text-align:center;border-bottom:3px solid transparent;position:relative;overflow:hidden}
.ficha-nutri-card__value{font-size:1.5rem;font-weight:800;color:var(--color-text,#0f172a);margin-bottom:.2rem}
.ficha-nutri-card__label{font-size:.65rem;font-weight:700;color:var(--color-text-muted,#94a3b8);text-transform:uppercase;letter-spacing:.04em}
.ficha-refs-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.ficha-ref-card{background:#fff;border:1px solid var(--color-border,#e2e8f0);border-radius:var(--radius-md,6px);padding:1.25rem}
.ficha-ref-card--wide{grid-column:1/-1}
.ficha-ref-card--alert{background:#fef2f2;border-color:#fecaca}
.ficha-ref-card__heading{font-size:.65rem;font-weight:700;color:var(--color-text-muted,#94a3b8);text-transform:uppercase;letter-spacing:.08em;margin:0 0 .75rem}
.ficha-ref-card__heading--alert{color:#f87171}
.ficha-ref-card__empty{font-size:.85rem;color:var(--color-text-muted,#94a3b8);font-style:italic;margin:0}
.ficha-aditivos-wrap{display:flex;flex-wrap:wrap;gap:.3rem}
.ficha-aditivo-tag{font-size:.7rem;font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:600;padding:.2rem .55rem;background:var(--color-surface,#f8fafc);color:var(--color-text,#0f172a);border:1px solid var(--color-border,#e2e8f0);border-radius:var(--radius-sm,4px)}
.ficha-aditivo-tag--alert{background:#fecaca;color:#991b1b;border-color:#fca5a5}
.ficha-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem}
.ficha-detail-grid dt{font-size:.7rem;font-weight:700;color:var(--color-text-muted,#94a3b8);text-transform:uppercase;margin-bottom:.2rem}
.ficha-detail-grid dd{font-size:.85rem;color:var(--color-text,#0f172a);line-height:1.6;margin:0}
.ficha-footer{padding-top:1.5rem;margin-top:.5rem;border-top:1px solid var(--color-border,#e2e8f0);text-align:center;font-size:.65rem;color:var(--color-text-muted,#94a3b8);text-transform:uppercase;letter-spacing:.04em}
@media(max-width:1024px){.ficha-layout{grid-template-columns:1fr}.ficha-identity{position:static}}
@media(max-width:640px){.ficha-nutri-grid{grid-template-columns:1fr 1fr}.ficha-refs-grid{grid-template-columns:1fr}.ficha-detail-grid{grid-template-columns:1fr}}

.ficha-sellos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.ficha-sello{display:inline-flex;align-items:center;gap:8px;background:#1a1a1a;color:#fff;font-weight:700;font-size:.78rem;padding:7px 14px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}
.ficha-sello__icon{color:#e74c3c;font-size:.95rem}
.ficha-sello__value{color:#999;font-weight:400;font-size:.72rem}
.ficha-sello__text{color:#fff;font-size:inherit}
/* Historial table */
/* Editar - risk row colors */
.risk-row--alto{border-left:3px solid #ef4444}.risk-row--alto:hover{background:#fef2f2}
.risk-row--moderado{border-left:3px solid #f97316}.risk-row--moderado:hover{background:#fff7ed}
.risk-row--bajo{border-left:3px solid #22c55e}.risk-row--bajo:hover{background:#f0fdf4}
tr.risk-row--alto:hover td,tr.risk-row--moderado:hover td,tr.risk-row--bajo:hover td{background:transparent}

/* === Global (ex base.html) === */
/* Tooltips */
[data-tooltip] {
position: relative;
cursor: help;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #1e293b;
color: #fff;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 400;
white-space: normal;
max-width: 280px;
z-index: 9999;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
pointer-events: none;
}

/* Toast container */
#toast-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99999;
display: flex;
flex-direction: column;
gap: 8px;
}
.toast-global {
padding: 12px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #fff;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
display: flex;
align-items: center;
gap: 8px;
animation: toast-in 0.3s ease;
max-width: 360px;
}
.toast-global.toast-success { background: var(--status-success, #22c55e); }
.toast-global.toast-error   { background: var(--status-error, #dc2626); }
.toast-global.toast-warning { background: var(--status-warning, #f59e0b); }
.toast-global.toast-info    { background: var(--status-info, #0F766E); }
.toast-close {
background: none;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
padding: 0 0 0 8px;
opacity: 0.8;
line-height: 1;
}
.toast-close:hover { opacity: 1; }
@keyframes toast-in {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}

/* Ghost variant for back link */
.ficha-volver-btn {
    background: transparent;
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-secondary, #64748b);
}
.ficha-sello__text{color:#fff;font-size:inherit}

/* Tabla gestion de productos - editar.html */
table[aria-label="Lista de productos"] td{padding-top:14px!important;padding-bottom:14px!important}
table[aria-label="Lista de productos"] tbody tr+tr{border-top:1px solid #e2e8f0!important}

/* ============================================================
   Bloque de estado de revisión en la ficha
   ============================================================ */
.ficha-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md, 8px);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    border: 1px solid transparent;
}
.ficha-status svg { flex-shrink: 0; }
.ficha-status small {
    font-weight: 400;
    opacity: 0.75;
    margin-left: 0.25rem;
}
.ficha-status a {
    margin-left: 0.25rem;
    font-weight: 700;
    text-decoration: none;
    opacity: 0.8;
}
.ficha-status a:hover { opacity: 1; text-decoration: underline; }

.ficha-status--validado {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}
.ficha-status--validado a { color: #166534; }

.ficha-status--en-revision {
    background: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
}
.ficha-status--en-revision a { color: #1e40af; }

.ficha-status--pendiente {
    background: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
}
.ficha-status--pendiente a { color: #92400e; }

.ficha-validate-btn--revert {
    background: #f3f4f6;
    color: #374151;
}
.ficha-validate-btn--revert:hover {
    background: #e5e7eb;
    color: #111827;
}

/* Botón "Siguiente pendiente" */
.ficha-siguiente-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.6rem 1rem;
    margin-top: 0.5rem;
    background: #f0fdfa;
    color: #0f766e;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid #5eead4;
    border-radius: var(--radius-md, 6px);
    text-decoration: none;
    transition: background 0.15s;
}
.ficha-siguiente-btn:hover {
    background: #ccfbf1;
}

/* Desglose de puntos en la ficha */
.ficha-desglose {
    margin: 0.5rem 0;
    font-size: 0.75rem;
}
.ficha-desglose summary {
    cursor: pointer;
    color: var(--color-primary, #0f766e);
    font-weight: 600;
    padding: 0.25rem 0;
}
.ficha-desglose summary:hover { text-decoration: underline; }
.ficha-desglose ul {
    list-style: none;
    padding: 0.5rem 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.ficha-desglose li {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.25rem 0;
    border-bottom: 1px solid #f3f4f6;
}
.ficha-desglose li:last-child { border-bottom: none; }
.ficha-desglose li > span:first-child {
    font-weight: 700;
    color: #0f766e;
    font-family: monospace;
}
.ficha-desglose li > span:nth-child(2) {
    color: #374151;
}
.ficha-desglose li > small {
    grid-column: 2;
    color: #6b7280;
    font-size: 0.7rem;
}

/* Estados especiales de las tarjetas nutricionales */
.fn-nodata {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #9ca3af;
    font-style: italic;
}
.ficha-nutri-card--nodata {
    opacity: 0.75;
}
.ficha-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #d97706;
    border-radius: var(--radius-md, 8px);
    font-size: 0.8rem;
    color: #92400e;
}
.ficha-warning svg {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #d97706;
}

/* Chips de filtros activos */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem 0.3rem 0.75rem;
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #5eead4;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}
.filter-chip strong {
    font-weight: 700;
    color: #115e59;
}
.filter-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #ccfbf1;
    color: #0f766e;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s;
}
.filter-chip__x:hover {
    background: #5eead4;
    color: #115e59;
}
.filter-chip--clear {
    background: #fff;
    color: #6b7280;
    border-color: #e5e7eb;
    padding: 0.3rem 0.75rem;
    font-weight: 600;
    text-decoration: none;
}
.filter-chip--clear:hover {
    background: #f9fafb;
    color: #374151;
}

/* Guía didáctica colapsada */
.guia-busqueda summary {
    list-style: none;
}
.guia-busqueda summary::-webkit-details-marker {
    display: none;
}
.guia-busqueda summary::before {
    content: "▶ ";
    display: inline-block;
    margin-right: 0.25rem;
    transition: transform 0.15s;
    font-size: 0.7rem;
}
.guia-busqueda[open] summary::before {
    content: "▼ ";
}

/* Paginación */
.paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
}
.paginacion__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    transition: all 0.15s;
}
.paginacion__btn:hover {
    background: #f9fafb;
    border-color: #0f766e;
    color: #0f766e;
}
.paginacion__btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.paginacion__btn--disabled:hover {
    background: #fff;
    border-color: #d1d5db;
    color: #374151;
}
.paginacion__info {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

/* Tarjetas de resultado rediseñadas */
.tarjeta-resultado {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
}
.tarjeta-resultado:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.tarjeta-resultado--alto { border-left-color: #dc2626; }
.tarjeta-resultado--moderado { border-left-color: #d97706; }
.tarjeta-resultado--bajo { border-left-color: #059669; }

.tarjeta-resultado__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.tarjeta-resultado__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    margin: 0;
    flex: 1;
}
.tarjeta-resultado__meta {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

.tarjeta-resultado__data {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #6b7280;
    padding: 0.4rem 0;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
}
.tarjeta-resultado__data strong {
    color: #374151;
    font-weight: 700;
}

.tarjeta-resultado__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
}
.tarjeta-resultado__precio {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f766e;
}

/* Estados dentro de la tarjeta */
.estado {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
}
.estado--validado { color: #166534; }
.estado--revisado { color: #1e40af; }
.estado--en-revision { color: #92400e; }
.estado--pendiente { color: #6b7280; }

/* Barra flotante de acciones en lote */
.barra-lote {
    position: fixed;
    top: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: #0f172a;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(20, 184, 166, 0.4);
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 100;
    animation: barraSlideTop 0.2s ease-out;
}
@keyframes barraSlide {
    from { transform: translate(-50%, 100%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}
.barra-lote__actions {
    display: flex;
    gap: 0.5rem;
}
.barra-lote .btn--primary {
    background: #14b8a6;
    color: #0f172a;
}
.barra-lote .btn--primary:hover {
    background: #5eead4;
}
.barra-lote .btn--ghost {
    color: #cbd5e1;
}
.barra-lote .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Forzar que hidden siempre oculte, aunque haya display:flex */
.barra-lote[hidden] {
    display: none !important;
}

@keyframes barraSlideTop {
    from { transform: translate(-50%, -100%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* ============================================================
   FASE 4 — Panel KPIs compactos
   ============================================================ */
.kpi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.25rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.15s ease;
    overflow: hidden;
}
.kpi-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
.kpi-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.kpi-card__icon {
    font-size: 1.25rem;
}
.kpi-card__value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}
.kpi-card__bottom {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.kpi-card__label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.kpi-card__pct {
    font-size: 0.7rem;
    color: #6b7280;
    font-weight: 600;
}
.kpi-card__info {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #9ca3af;
    background: transparent;
    border: none;
    cursor: help;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}
.kpi-card:hover .kpi-card__info {
    opacity: 1;
}
.kpi-card__info:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    right: 0;
    width: 220px;
    padding: 0.5rem 0.75rem;
    background: #1f2937;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.4;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 20;
    text-transform: none;
    letter-spacing: normal;
}
.kpi-card__link {
    position: absolute;
    inset: 0;
    text-decoration: none;
    z-index: 1;
}

/* Skeleton */
.skeleton {
    position: relative;
    overflow: hidden;
    background: #f3f4f6;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton::after { animation: none; }
}

/* Error con boton Reintentar */
.lista-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    text-align: center;
}
.lista-error__msg {
    font-size: 0.8rem;
    color: #6b7280;
}
.lista-error__btn {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0f766e;
    background: transparent;
    border: 1px solid #5eead4;
    border-radius: 6px;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}
.lista-error__btn:hover {
    background: #f0fdfa;
}

/* Fase 4 - Ajustes visuales */
.kpi-card__icon {
    font-size: 1rem;
}
.kpi-card__info:hover::after {
    top: calc(100% + 0.5rem);
    right: 0;
}
.kpi-card {
    padding: 0.875rem 1rem;
}
.kpi-card__value {
    font-size: 1.375rem;
}

/* Fase 4 - Fix tooltip y iconos */
.kpi-card__icon {
    font-size: 0.9rem !important;
}
.kpi-card__info {
    top: 0.35rem !important;
    right: 0.35rem !important;
    font-size: 0.7rem !important;
}
.kpi-card__info:hover::after {
    content: attr(data-tooltip);
    position: fixed !important;
    top: auto !important;
    bottom: 1rem !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 280px !important;
    padding: 0.6rem 0.875rem !important;
    background: #1f2937 !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
    z-index: 9999 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    pointer-events: none;
}
.kpi-card__value {
    font-size: 1.5rem !important;
}


/* ============================================================
   AUTH + ERROR (ex auth-error.css)
   ============================================================ */
/* auth-error.css - Estilos combinados para error.html y login.html */

/* --- error-card styles --- */
.error-card {
    background: var(--color-surface);
    padding: 2.5rem 2rem;
    max-width: 460px;
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.error-card svg { color: var(--risk-high); margin-bottom: 1rem; }
.error-card h1 { font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.5rem; }
.error-card p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.5; margin-bottom: 1rem; }
.error-card .codigo { font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-text-muted); }
.error-card a {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.85rem;
}
.error-card a:hover { opacity: 0.9; }

/* --- login-card styles --- */
.login-card {
    background: var(--color-surface);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 380px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.login-brand { text-align: center; margin-bottom: 2rem; }
.login-brand svg { color: var(--header-bg); }
.login-brand h1 { font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin-top: 0.75rem; }
.login-brand p { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.25rem; }
.form-group { margin-bottom: 1rem; }
.form-group label {
    display: block; font-size: 0.8rem; font-weight: 600;
    color: var(--color-text-secondary); margin-bottom: 0.35rem;
}
.form-group input {
    width: 100%; padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    font-size: 0.9rem; font-family: inherit;
    background: var(--color-surface); color: var(--color-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group input:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(15,118,110,0.1);
}
.btn-login {
    width: 100%; padding: 0.65rem; margin-top: 0.5rem;
    background: var(--color-primary); color: #fff; border: none;
    border-radius: var(--radius-md); font-weight: 600; font-size: 0.9rem;
    font-family: inherit; cursor: pointer; transition: background 0.15s;
}
.btn-login:hover { background: var(--color-primary-hover); }
.flash { padding: 0.6rem 0.75rem; border-radius: var(--radius-md); margin-bottom: 1rem; font-size: 0.85rem; }
.flash-error { background: var(--risk-high-bg); color: var(--risk-high); }
.flash-success { background: var(--risk-low-bg); color: var(--risk-low); }
.login-footer { text-align: center; font-size: 0.75rem; color: var(--color-text-muted); margin-top: 1.5rem; }
/* test */
/* --- wrapper centrador para login --- */
.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 2rem 1rem;
}

/* --- wrapper centrador para error --- */
.error-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 2rem 1rem;
}

/* Acciones del error: botones alineados */
.error-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* === UX-3B: base legal colapsable en ficha === */
.ficha-motivo__legal-details {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border, #e2e8f0);
}
.ficha-motivo__legal-summary {
    font-size: 0.75rem;
    color: var(--color-text-muted, #94a3b8);
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    user-select: none;
}
.ficha-motivo__legal-summary::-webkit-details-marker {
    display: none;
}
.ficha-motivo__legal-summary::before {
    content: "▸";
    transition: transform 0.15s;
    display: inline-block;
}
.ficha-motivo__legal-details[open] .ficha-motivo__legal-summary::before {
    transform: rotate(90deg);
}
.ficha-motivo__legal-summary:hover {
    color: var(--color-primary, #0F766E);
}
.ficha-motivo__legal-details[open] .ficha-motivo__legal {
    margin-top: 0.5rem;
}

/* === Fase 7A: padding responsive en contenedores principales (movil) === */
@media (max-width: 640px) {
  .max-w-7xl.mx-auto,
  .max-w-5xl.mx-auto,
  .max-w-3xl.mx-auto,
  .max-w-2xl.mx-auto {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* === Fase 7B: evitar scroll horizontal global en movil === */
@media (max-width: 640px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .main-content {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* === Fase 7C: cards de productos para movil === */
.editar-tabla-desktop { display: block; }
.editar-cards-mobile { display: none; }

@media (max-width: 767px) {
    .editar-tabla-desktop { display: none !important; }
    .editar-cards-mobile { display: block !important; }
}

.producto-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-left: 4px solid #e5e7eb;
    transition: box-shadow 0.15s;
}
.producto-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.producto-card--alto { border-left-color: #dc2626; }
.producto-card--moderado { border-left-color: #d97706; }
.producto-card--bajo { border-left-color: #059669; }
.producto-card__top {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.producto-card__top input[type="checkbox"] {
    margin-top: 0.2rem;
}

/* ============================================================
   Checkboxes mas grandes y accesibles (WCAG 2.5.5)
   Aplicado a los de /editar (tabla desktop + cards mobile)
   ============================================================ */
input[type="checkbox"].check-producto,
input[type="checkbox"]#check-todos,
input[type="checkbox"]#check-todos-mobile {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--color-primary, #0f766e);
    vertical-align: middle;
}

/* Movil: un poco mas grande para dedos */
@media (max-width: 767px) {
    input[type="checkbox"].check-producto,
    input[type="checkbox"]#check-todos-mobile {
        width: 24px;
        height: 24px;
    }
}
.producto-card__info {
    flex: 1;
    min-width: 0;
}
.producto-card__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.2rem;
    line-height: 1.3;
    word-break: break-word;
}
.producto-card__marca {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
}
.producto-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}
.producto-card__riesgo {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #f3f4f6;
    color: #4b5563;
}
.producto-card__riesgo--alto {
    background: #fef2f2;
    color: #991b1b;
}
.producto-card__riesgo--moderado {
    background: #fffbeb;
    color: #92400e;
}
.producto-card__riesgo--bajo {
    background: #ecfdf5;
    color: #166534;
}

/* === Fase 7D: cabecera editar responsive === */
.editar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.editar-header__count {
    flex-shrink: 0;
}
.editar-header__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}
.editar-header__search input {
    flex: 1;
    min-width: 0;
}
.editar-header__nuevo {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #0F766E;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}
.editar-header__nuevo:hover {
    background: #0D6560;
    color: #fff;
}
@media (max-width: 640px) {
    .editar-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .editar-header__count {
        order: 1;
        text-align: center;
        margin-bottom: 0.25rem;
    }
    .editar-header__search {
        order: 2;
        width: 100%;
    }
    .editar-header__nuevo {
        order: 3;
        width: 100%;
        justify-content: center;
        padding: 0.65rem 1rem;
    }
}

/* === IA-3: buscador + acciones en home === */
.home-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}
.home-acciones__search {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    min-width: 280px;
}
.home-acciones__input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #fff;
}
.home-acciones__input:focus {
    outline: none;
    border-color: #0F766E;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);
}
.home-acciones__botones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.home-acciones__nuevo {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.85rem;
    background: #0F766E;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}
.home-acciones__nuevo:hover {
    background: #0D6560;
    color: #fff;
}

@media (max-width: 640px) {
    .home-acciones {
        flex-direction: column;
        align-items: stretch;
    }
    .home-acciones__search {
        min-width: 0;
        width: 100%;
    }
    .home-acciones__botones {
        width: 100%;
        justify-content: flex-start;
    }
    .home-acciones__nuevo {
        flex: 1;
        justify-content: center;
    }
}

/* === IA-8: motivos agrupados por severidad === */
.ficha-motivos-grupos { display: flex; flex-direction: column; gap: 1rem; }
.ficha-motivo-grupo { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.ficha-motivo-grupo--high { border-left: 4px solid #dc2626; }
.ficha-motivo-grupo--moderate { border-left: 4px solid #d97706; }
.ficha-motivo-grupo--low { border-left: 4px solid #059669; }

.ficha-motivo-grupo__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.ficha-motivo-grupo--high .ficha-motivo-grupo__title { background: #fef2f2; }
.ficha-motivo-grupo--moderate .ficha-motivo-grupo__title { background: #fffbeb; }
.ficha-motivo-grupo--low .ficha-motivo-grupo__title { background: #ecfdf5; }
.ficha-motivo-grupo__icon { font-size: 0.9rem; }
.ficha-motivo-grupo__count { font-weight: 400; color: #64748b; font-size: 0.75rem; }

.ficha-motivo-grupo__lista { list-style: none; margin: 0; padding: 0; }
.ficha-motivo-grupo__item { padding: 0.6rem 1rem; border-bottom: 1px solid #f1f5f9; }
.ficha-motivo-grupo__item:last-child { border-bottom: none; }

.ficha-motivo-grupo__row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ficha-motivo-grupo__nombre { font-size: 0.85rem; font-weight: 500; color: #0f172a; flex: 1; min-width: 140px; }
.ficha-motivo-grupo__medido {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    color: #475569;
    white-space: nowrap;
}
.ficha-motivo-grupo__puntos {
    font-size: 0.7rem;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    white-space: nowrap;
}

/* === IA-9: bases legales agrupadas === */
.ficha-motivos-grupo__legal {
    border-top: 1px solid #e2e8f0;
    padding: 0.6rem 1rem;
    background: #fafbfc;
}
.ficha-motivos-grupo__legal-summary {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    user-select: none;
}
.ficha-motivos-grupo__legal-summary::-webkit-details-marker { display: none; }
.ficha-motivos-grupo__legal-summary::before {
    content: "▸";
    display: inline-block;
    transition: transform 0.15s;
}
.ficha-motivos-grupo__legal[open] .ficha-motivos-grupo__legal-summary::before {
    transform: rotate(90deg);
}
.ficha-motivos-grupo__legal-summary:hover { color: #0F766E; }
.ficha-motivos-grupo__legal-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-size: 0.72rem;
    color: #475569;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.ficha-motivos-grupo__legal-list li {
    padding: 0.3rem 0;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
}
.ficha-motivos-grupo__legal-list li:last-child { border-bottom: none; }
.ficha-motivos-grupo__legal-list strong { color: #0f172a; }
.ficha-motivos-grupo__legal-list .ficha-motivo__link { margin-left: 0.25rem; }

/* === IA-10: titulo con contador + subtitulo === */
.ficha-section__count {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    margin-left: 0.25rem;
}
.ficha-section__desc {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0 0 0.9rem;
    line-height: 1.5;
}

/* === IA-11: mas espacio entre grupos === */
.ficha-motivos-grupos { gap: 1.5rem; }
.ficha-motivo-grupo { box-shadow: 0 1px 2px rgba(0,0,0,0.03); }

/* === IA-13: subtitulo neutro en KPI cards === */
.kpi-card__hint {
    display: block;
    font-size: 0.65rem;
    color: #94a3b8;
    margin-top: 0.35rem;
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.01em;
}

/* === FIX: dialog nativo centrado (Tailwind resetea margin) === */
dialog.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    max-width: min(420px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
}
dialog.modal[open] {
    display: block;
}

/* === F2b: fuentes de sinergias === */
.ficha-motivos-grupo__tipo-fuente {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
}
.ficha-motivos-grupo__fuente-texto {
    flex: 1;
    min-width: 150px;
}
.ficha-motivos-grupo__fuente-links {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

/* === Warning de aditivos en ficha === */
.ficha-motivo-grupo__warning {
    display: block;
    font-size: 0.72rem;
    color: #92400e;
    margin-top: 0.2rem;
    padding-left: 0.1rem;
    font-weight: 500;
}

/* === Footer global === */
.site-footer {
    max-width: 80rem;
    margin: 3rem auto 0;
    padding: 1.5rem 1.5rem 2rem;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}
.site-footer__disclaimer {
    font-size: 0.75rem;
    color: #64748b;
    max-width: 40rem;
    margin: 0 auto 0.75rem;
    line-height: 1.5;
}
.site-footer__links {
    font-size: 0.8rem;
    margin: 0;
}
.site-footer__links a {
    color: #0F766E;
    text-decoration: none;
    font-weight: 600;
}
.site-footer__links a:hover {
    text-decoration: underline;
}


/* KPI dot: punto de color que hereda del color del numero */
.kpi-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}


/* Fix: forzar color de KPIs con clases Tailwind (mayor especificidad) */
.kpi-card__value.text-red-600 { color: #dc2626; }
.kpi-card__value.text-amber-600 { color: #d97706; }
.kpi-card__value.text-green-600 { color: #16a34a; }
.kpi-card__value.text-emerald-600 { color: #059669; }
.kpi-card__value.text-slate-700 { color: #334155; }


/* ============================================================
   Tabla historial: anchos fijos + truncado controlado
   Anadido 2026-09-19 (fix layout roto por clases Tailwind purgadas)
   ============================================================ */

.historial-tabla {
    table-layout: auto;
    width: 100%;
    min-width: 900px;
}

/* Anchuras eliminadas: el navegador ajusta segun el contenido */

.historial-tabla td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;  /* permite partir palabras largas */
    word-break: break-word;
    vertical-align: top;
}

/* Producto: permite varias lineas */
.historial-tabla td:nth-child(3) {
    white-space: normal;
    word-break: break-word;
}


/* ============================================================
   Historial: cards mobile (sustituyen a la tabla en <768px)
   ============================================================ */

/* Por defecto: cards ocultas, tabla visible */
.historial-cards-mobile { display: none; }

/* En movil: tabla oculta, cards visibles */
@media (max-width: 767px) {
    .historial-tabla-wrap { display: none; }
    .historial-cards-mobile { display: flex; flex-direction: column; gap: 0.75rem; }
}

.historial-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.historial-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.historial-card__fecha {
    font-size: 0.75rem;
    color: #6b7280;
}

.historial-card__producto {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.95rem;
    line-height: 1.3;
    text-decoration: none;
}
.historial-card__producto:hover {
    color: #0f766e;
    text-decoration: underline;
}

.historial-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #6b7280;
    flex-wrap: wrap;
}

.historial-card__campo {
    font-family: monospace;
    background: #f3f4f6;
    color: #374151;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
}

.historial-card__diff {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    background: #f9fafb;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    overflow: hidden;
}

.historial-card__antes {
    color: #dc2626;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45%;
}

.historial-card__flecha {
    color: #9ca3af;
    flex-shrink: 0;
}

.historial-card__despues {
    color: #16a34a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45%;
}


/* Categoria FoodEx2 en las cards de Explorar */
.tarjeta-resultado__categoria {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0.15rem 0 0.5rem;
    line-height: 1.3;
}