/* ============================================================
   Composición garantizada — barras de nutrientes por grupo
   Plugin: composicion_plugin
   ============================================================ */

.composicion-card {
    background: #ffffff;
    border: 1px solid #e6e8eb;
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    margin: 1.25rem 0;
    /* responde al ancho del propio card (vive en una columna variable) */
    container-type: inline-size;
    container-name: composicion;
}

.composicion-titulo {
    font-size: 1.35rem;
    font-weight: 800;
    color: #005e3d;               /* verde oscuro corporativo */
    margin: 0 0 1.25rem;
}

.composicion-grupos {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---- Grupo de aporte ---- */
.comp-grupo + .comp-grupo {
    padding-top: 1.5rem;
    border-top: 1px solid #eef0f2;
}

.comp-grupo-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.comp-grupo-icono {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comp-grupo-icono svg {
    width: 20px;
    height: 20px;
}

.comp-grupo-icono-texto {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
}

.comp-grupo-label {
    font-size: 1.05rem;
    font-weight: 700;             /* negrita */
}

/* ---- Filas de nutrientes ---- */
.comp-filas {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding-left: calc(40px + 0.75rem); /* alinear con el texto del header */
}

.comp-fila {
    display: grid;
    grid-template-columns: minmax(150px, 230px) 1fr auto;
    align-items: center;
    gap: 1rem;
}

.comp-fila-nombre {
    font-size: 0.95rem;
    font-weight: 700;             /* negrita en todo el bloque */
    color: #2c3540;
}

.comp-fila-valor {
    font-size: 0.95rem;
    font-weight: 700;             /* negrita */
    color: #0b0b0b;
    min-width: 56px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- Barra ---- */
.comp-bar {
    display: block;
    width: 100%;
    height: 9px;
    background: #eef1f4;
    border-radius: 999px;
    overflow: hidden;
}

.comp-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    min-width: 4px;
    transform: scaleX(1);         /* sin JS: barra completa y proporcional */
    transform-origin: left center;
}

/* Con JS las barras saltan a 0 SIN animar (transition:none), y solo el paso
   0 -> 1 (al añadir comp-animar) lleva la transición. Así no hay encogido previo. */
.comp-js .comp-bar-fill {
    transform: scaleX(0);
    transition: none;
}
.comp-js.comp-animar .comp-bar-fill {
    transform: scaleX(1);
    transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Animación escalonada por fila (delay sobre el estado animado) */
.comp-js.comp-animar .comp-fila:nth-child(2) .comp-bar-fill { transition-delay: 0.12s; }
.comp-js.comp-animar .comp-fila:nth-child(3) .comp-bar-fill { transition-delay: 0.24s; }
.comp-js.comp-animar .comp-fila:nth-child(4) .comp-bar-fill { transition-delay: 0.36s; }
.comp-js.comp-animar .comp-fila:nth-child(5) .comp-bar-fill { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
    .comp-js .comp-bar-fill,
    .comp-js.comp-animar .comp-bar-fill { transition: none !important; transform: scaleX(1); }
}

/* ---- Indicador cualitativo (píldora suelta con check verde) ---- */
.comp-indicadores {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.comp-indicador {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid #cfe9d8;
    background: #f3faf5;
    border-radius: 12px;
}

.comp-indicador-check {
    flex: 0 0 auto;
    display: flex;
    color: #1f7a44;
}
.comp-indicador-check svg {
    width: 20px;
    height: 20px;
}

.comp-indicador-texto {
    font-size: 0.95rem;
    color: #2c3540;
}
.comp-indicador-texto strong {
    font-weight: 700;
    color: #1f7a44;
}

/* ---- Nota al pie ---- */
.composicion-nota {
    font-size: 0.82rem;
    color: #5f6b7a;
    margin: 1.25rem 0 0;
}

/* ============================================================
   Color hex exacto (cargado desde Excel) vía variables inline
   ============================================================ */
.comp-grupo--hex .comp-grupo-icono { background: var(--comp-tint); color: var(--comp-color); }
.comp-grupo--hex .comp-grupo-label { color: var(--comp-color); }
.comp-grupo--hex .comp-bar-fill    { background: var(--comp-color); }

/* ============================================================
   Paleta por color de grupo (icono circular + relleno de barra)
   ============================================================ */
.comp-grupo--verde   .comp-grupo-icono { background: #e3f3e9; color: #1f7a44; }
.comp-grupo--verde   .comp-grupo-label { color: #1f7a44; }
.comp-grupo--verde   .comp-bar-fill    { background: #1f7a44; }

.comp-grupo--azul    .comp-grupo-icono { background: #e4edf9; color: #1c5fb0; }
.comp-grupo--azul    .comp-grupo-label { color: #1c5fb0; }
.comp-grupo--azul    .comp-bar-fill    { background: #1c5fb0; }

.comp-grupo--naranja .comp-grupo-icono { background: #fdeede; color: #c9740d; }
.comp-grupo--naranja .comp-grupo-label { color: #c9740d; }
.comp-grupo--naranja .comp-bar-fill    { background: #e0850f; }

.comp-grupo--morado  .comp-grupo-icono { background: #efe6f7; color: #7a3ea3; }
.comp-grupo--morado  .comp-grupo-label { color: #7a3ea3; }
.comp-grupo--morado  .comp-bar-fill    { background: #7a3ea3; }

.comp-grupo--teal    .comp-grupo-icono { background: #ddf2f1; color: #0f7c75; }
.comp-grupo--teal    .comp-grupo-label { color: #0f7c75; }
.comp-grupo--teal    .comp-bar-fill    { background: #0f7c75; }

.comp-grupo--dorado  .comp-grupo-icono { background: #faf0d6; color: #a87d0c; }
.comp-grupo--dorado  .comp-grupo-label { color: #a87d0c; }
.comp-grupo--dorado  .comp-bar-fill    { background: #d4a017; }

.comp-grupo--gris    .comp-grupo-icono { background: #eceef1; color: #4b5563; }
.comp-grupo--gris    .comp-grupo-label { color: #4b5563; }
.comp-grupo--gris    .comp-bar-fill    { background: #6b7280; }

/* ============================================================
   Responsive — basado en el ANCHO DEL CARD (container query).
   Cuando la columna es estrecha, el nombre va arriba y la
   barra + valor quedan en una segunda fila (la barra nunca
   desaparece).
   ============================================================ */
@container composicion (max-width: 460px) {
    .comp-filas { padding-left: 0; }

    .comp-fila {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "nombre nombre"
            "bar    valor";
        gap: 0.3rem 0.75rem;
    }
    .comp-fila-nombre { grid-area: nombre; }
    .comp-bar         { grid-area: bar; }
    .comp-fila-valor  { grid-area: valor; }
}

/* Fallback para navegadores sin soporte de container queries */
@supports not (container-type: inline-size) {
    @media (max-width: 768px) {
        .comp-filas { padding-left: 0; }
        .comp-fila {
            grid-template-columns: 1fr auto;
            grid-template-areas:
                "nombre nombre"
                "bar    valor";
            gap: 0.3rem 0.75rem;
        }
        .comp-fila-nombre { grid-area: nombre; }
        .comp-bar         { grid-area: bar; }
        .comp-fila-valor  { grid-area: valor; }
    }
}

@container composicion (max-width: 380px) {
    .composicion-card { padding: 1.1rem 1rem; }
}