/* =====================================================
   INCI ECO SCANNER · estilos específicos
   Carga después de style.css (hereda variables)
   ===================================================== */

.inci-target-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 40%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    pointer-events: none;
    z-index: 1001;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
}

.inci-target-corners::before,
.inci-target-corners::after,
.inci-target-corners > span::before,
.inci-target-corners > span::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: var(--color-text);
    border-style: solid;
    border-width: 0;
}

.inci-target-corners::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.inci-target-corners::after  { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.inci-target-corners > span::before { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.inci-target-corners > span::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

.inci-target-hint {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    background: rgba(0, 0, 0, 0.55);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 1002;
}

.inci-scan-line {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    box-shadow: 0 0 8px var(--color-gold);
    animation: inciScan 2.4s linear infinite;
    z-index: 1001;
    pointer-events: none;
}

@keyframes inciScan {
    0%   { top: 30%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 70%; opacity: 0; }
}

/* =====================================================
   VIEWFINDER decorativo en portada (state-intro)
   Reutiliza .inci-target-corners y .inci-scan-line
   con scan-line más lenta + checklist borrosa de fondo
   ===================================================== */
.inci-viewfinder-page {
    position: relative;
    max-width: 380px;
    margin: 0 auto 30px;
    padding: 38px 22px 28px;
    isolation: isolate;
}

/* Esquinas alineadas con los bordes del wrapper */
.inci-viewfinder-page .inci-target-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

/* Override: en portada las esquinas son ligeramente más grandes para
   compensar la línea fina sobre el wrapper más pequeño */
.inci-viewfinder-page .inci-target-corners::before,
.inci-viewfinder-page .inci-target-corners::after,
.inci-viewfinder-page .inci-target-corners > span::before,
.inci-viewfinder-page .inci-target-corners > span::after {
    width: 26px;
    height: 26px;
}

/* Scan-line: misma estética dorada, ritmo más calmado, barre toda la zona */
.inci-viewfinder-page .inci-scan-line {
    animation-name: inciScanPage;
    animation-duration: 4.5s;
    z-index: 3;
    opacity: 0.7;
}

@keyframes inciScanPage {
    0%   { top: 4%;  opacity: 0; }
    14%  { opacity: 0.85; }
    86%  { opacity: 0.85; }
    100% { top: 96%; opacity: 0; }
}

/* Checklist borrosa de ingredientes (fondo) */
.inci-bg-checklist {
    position: absolute;
    inset: 16px 18px;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
}

.inci-bg-checklist span {
    /* Color del ingrediente: por defecto gris muted; los .is-bad sobrescriben */
    --col-dim: var(--color-text-muted);
    --col-active: var(--color-text);
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--col-dim);
    line-height: 1;
    /* Blur fijo: se mantiene incluso cuando el item está activo */
    filter: blur(1.6px);
    opacity: 0.08;
    font-weight: 400;
    white-space: nowrap;
    transform-origin: left center;
    transform: translateX(0) scale(1);
    will-change: opacity, transform;
    animation: inciChecklist 12s linear infinite;
}

/* Ingredientes nocivos: rojo en ambos estados (dim y activo) */
.inci-bg-checklist span.is-bad {
    --col-dim: #B85042;
    --col-active: #B85042;
}

/* Ingredientes eco / orgánicos certificados (marca convencional: asterisco *)
   pintan en verde accent en ambos estados */
.inci-bg-checklist span.is-eco {
    --col-dim: var(--color-accent);
    --col-active: var(--color-accent);
}

/* Nota: filter NO se incluye en keyframes para que el blur quede inmutable */
@keyframes inciChecklist {
    0%, 78%, 100% {
        opacity: 0.08;
        color: var(--col-dim);
        font-weight: 400;
        letter-spacing: 0.18em;
        transform: translateX(0) scale(1);
    }
    82%, 92% {
        opacity: 0.30;
        color: var(--col-active);
        font-weight: 600;
        letter-spacing: 0.19em;
        transform: translateX(5px) scale(1.08);
    }
    96% {
        opacity: 0.15;
        color: var(--col-dim);
        font-weight: 500;
        letter-spacing: 0.18em;
        transform: translateX(2px) scale(1.02);
    }
}

/* Delays escalonados → la checklist se ilumina de arriba abajo */
.inci-bg-checklist span:nth-child(1)  { animation-delay: -11s; }
.inci-bg-checklist span:nth-child(2)  { animation-delay: -10s; }
.inci-bg-checklist span:nth-child(3)  { animation-delay:  -9s; }
.inci-bg-checklist span:nth-child(4)  { animation-delay:  -8s; }
.inci-bg-checklist span:nth-child(5)  { animation-delay:  -7s; }
.inci-bg-checklist span:nth-child(6)  { animation-delay:  -6s; }
.inci-bg-checklist span:nth-child(7)  { animation-delay:  -5s; }
.inci-bg-checklist span:nth-child(8)  { animation-delay:  -4s; }
.inci-bg-checklist span:nth-child(9)  { animation-delay:  -3s; }
.inci-bg-checklist span:nth-child(10) { animation-delay:  -2s; }
.inci-bg-checklist span:nth-child(11) { animation-delay:  -1s; }
.inci-bg-checklist span:nth-child(12) { animation-delay:   0s; }

/* Contenido por encima de la checklist (texto, botón) */
.inci-viewfinder-content {
    position: relative;
    z-index: 2;
}

/* Accesibilidad: usuarios con reducción de movimiento activada */
@media (prefers-reduced-motion: reduce) {
    .inci-bg-checklist span {
        animation: none;
        opacity: 0.08;
        filter: blur(1.6px);
        transform: translateX(0) scale(1);
    }
}

/* === Score eco === */
.eco-score-ring {
    --ring-size: 160px;
    --ring-thickness: 14px;
    --ring-color: var(--color-accent);
    --ring-pct: 0;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 50%;
    background: conic-gradient(var(--ring-color) calc(var(--ring-pct) * 1%), #E5E0D8 0);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    position: relative;
}

.eco-score-ring::before {
    content: "";
    position: absolute;
    width: calc(var(--ring-size) - var(--ring-thickness) * 2);
    height: calc(var(--ring-size) - var(--ring-thickness) * 2);
    background: var(--color-bg);
    border-radius: 50%;
}

.eco-score-value {
    position: relative;
    font-family: var(--font-serif);
    font-size: 42px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1;
}

.eco-score-label {
    position: relative;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.eco-score-stack { display: flex; flex-direction: column; align-items: center; }

.eco-compat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #5C6B50;
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 16px;
    font-weight: 600;
    margin-bottom: 14px;
    box-shadow: 0 2px 6px rgba(92, 107, 80, 0.25);
}
.eco-compat-badge--certified {
    background: #3A4735;
}

/* === Saper self-match card (anti-troll) === */
.saper-self-card {
    background: linear-gradient(135deg, #FCFAF7 0%, #F4EFE6 100%);
    border: 1.5px solid #5C6B50;
    border-radius: 16px;
    padding: 26px 22px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(92, 107, 80, 0.10);
}
.saper-self-badge {
    display: inline-block;
    background: #5C6B50;
    color: #fff;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 14px;
    font-weight: 600;
    margin-bottom: 14px;
}
.saper-self-title {
    font-family: Georgia, serif;
    font-weight: 500;
    font-size: 22px;
    color: #1A1A1A;
    margin-bottom: 4px;
    line-height: 1.25;
}
.saper-self-sub {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 14px;
}
.saper-self-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.saper-self-msg {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.65;
    margin-bottom: 20px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}
.saper-self-cta {
    display: inline-block;
}

/* === Verdict card === */
.verdict-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 16px;
    text-align: center;
    border-left: 4px solid var(--color-accent);
}

.verdict-label {
    font-family: var(--font-serif);
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 8px;
    color: var(--color-text);
}

.verdict-desc {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* === Bloques ingredientes === */
.ingredient-block {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
}

.ingredient-block-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    margin-bottom: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ingredient-block-title .dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ingredient-pill {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 14px;
    font-size: 11px;
    margin: 3px 4px 3px 0;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.ingredient-pill.bad  { border-color: #E5B5AE; background: #FBEFEC; color: #8C2E20; }
.ingredient-pill.good { border-color: #C8D5BB; background: #ECF1E2; color: #3A4735; }

.ingredient-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 0;
    border-bottom: 1px dashed var(--color-border);
    font-size: 12px;
}

.ingredient-row:last-child { border-bottom: none; }
.ingredient-row .ing-name {
    flex: 1 1 auto;
    min-width: 0;             /* clave: permite que el flex item encoja sin romper palabras */
    padding-right: 10px;
    overflow-wrap: break-word; /* sólo parte palabras imposibles, no caracter a caracter */
    word-break: normal;
    line-height: 1.4;
}
.ingredient-row .ing-tag {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 10px;
    /* El badge nunca ocupa más del 33% del row: si el texto no cabe,
       se parte en varias líneas dentro del propio badge en lugar de
       comerse el espacio del nombre del ingrediente */
    max-width: 33%;
    flex: 0 0 auto;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    line-height: 1.3;
    align-self: flex-start;
}
.ing-tag.tag-bio     { background: #ECF1E2; color: #3A4735; border: 1px solid #C8D5BB; }
.ing-tag.tag-natural { background: #F1ECE2; color: #6B5A2E; border: 1px solid #E0D4B8; }
.ing-tag.tag-bad     { background: #FBEFEC; color: #8C2E20; border: 1px solid #E5B5AE; }
.ing-tag.tag-neutral { background: var(--color-bg-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* === Stats grid === */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.stat-cell {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}
.stat-cell .stat-num {
    font-family: var(--font-serif);
    font-size: 26px;
    color: var(--color-accent);
    line-height: 1;
}
.stat-cell .stat-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin-top: 6px;
}

/* === Saper recommendation card === */
.saper-card {
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-white) 100%);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 12px;
}
.saper-card-header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-gold);
    margin-bottom: 8px;
    font-weight: 500;
}
.saper-card-title {
    font-family: var(--font-serif);
    font-size: 18px;
    margin-bottom: 4px;
    color: var(--color-text);
}
.saper-card-sub  { font-size: 12px; color: var(--color-text-muted); margin-bottom: 12px; }
.saper-card-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.saper-meta-pill {
    font-size: 10px;
    padding: 4px 9px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}
.saper-meta-pill.eco-pct {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

/* === Confidence warning === */
.confidence-warning {
    background: #FFF8E6;
    border: 1px solid #E8D49A;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 12px;
    color: #6B5A2E;
    line-height: 1.5;
}

/* === Loader INCI === */
.inci-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
}
.inci-loader-dots {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}
.inci-loader-dots span {
    width: 10px;
    height: 10px;
    background: var(--color-accent);
    border-radius: 50%;
    animation: inciDot 1.2s ease-in-out infinite;
}
.inci-loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.inci-loader-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes inciDot {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50%      { opacity: 1; transform: scale(1); }
}

.inci-loader-step {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 16px;
    letter-spacing: 0.05em;
}

/* === Botón secundario gold para acción "probar otro" === */
.btn-restart {
    margin-top: 20px;
    text-align: center;
}

/* === Texto INCI bruto === */
.inci-raw-text {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 11px;
    color: var(--color-text-muted);
    font-family: 'Courier New', monospace;
    line-height: 1.5;
    word-break: break-word;
    margin-bottom: 16px;
    max-height: 140px;
    overflow-y: auto;
}

/* === Header del producto escaneado === */
.scanned-header {
    text-align: center;
    margin-bottom: 18px;
}
.scanned-brand {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-muted);
}
.scanned-name {
    font-family: var(--font-serif);
    font-size: 22px;
    margin-top: 4px;
    color: var(--color-text);
}
.scanned-cert-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.cert-chip {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 4px 8px;
    background: var(--color-accent);
    color: white;
    border-radius: 12px;
}