/* Sufijo de input (kg, °C…)  */
.input-suffix {
    padding: 0 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* TABLA DE PUNTOS DE COCCIÓN — layout base (desktop) */
#tablaPuntosWrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

#tablaPuntosWrap thead th {
    background: #2563eb;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.55rem 0.75rem;
    text-align: left;
}

#tablaPuntosWrap tbody tr {
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    transition: background 0.12s;
}

#tablaPuntosWrap tbody tr:hover {
    background: #f0f9ff;
}

#tablaPuntosWrap tbody td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    color: var(--color-text, #374151);
}

@media (max-width: 480px) {

    /*  Ocultar cabecera de tabla  */
    #tablaPuntosWrap thead {
        display: none;
    }

    /*  Convertir tabla y filas en bloques  */
    #tablaPuntosWrap table,
    #tablaPuntosWrap tbody,
    #tablaPuntosWrap tr {
        display: block;
        width: 100%;
    }

    /*  Cada fila = una card  */
    #tablaPuntosWrap tbody tr {
        background: var(--color-bg-subtle, #f9fafb);
        border: 1.5px solid var(--color-border, #e5e7eb);
        border-radius: 12px;
        padding: 0.75rem 0.85rem;
        margin-bottom: 0.65rem;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    #tablaPuntosWrap tbody tr:has(td[style*="color:#2563eb"]) {
        border-color: #2563eb;
        background: #eff6ff;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.10);
    }

    /*  Cada celda = fila dentro de la card  */
    #tablaPuntosWrap tbody td {
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
        padding: 0.22rem 0;
        border: none;
        font-size: 0.84rem;
        line-height: 1.4;
        color: var(--color-text, #374151);
    }

    /*  Etiqueta antes de cada celda via nth-child  */
    #tablaPuntosWrap tbody td::before {
        content: attr(data-label);
        /* fallback si el JS añade data-label en el futuro */
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted, #6b7280);
        min-width: 90px;
        /* alineación vertical de etiquetas */
        flex-shrink: 0;
    }

    /* Asignación de etiquetas por posición de columna */
    #tablaPuntosWrap tbody td:nth-child(1)::before {
        content: "Punto";
    }

    #tablaPuntosWrap tbody td:nth-child(2)::before {
        content: "Temp. interna";
    }

    #tablaPuntosWrap tbody td:nth-child(3)::before {
        content: "Tiempo est.";
    }

    #tablaPuntosWrap tbody td:nth-child(4)::before {
        content: "Descripción";
    }

    /*  Primera celda (punto): nombre destacado con dot de color  */
    #tablaPuntosWrap tbody td:nth-child(1) {
        font-size: 0.9rem;
        font-weight: 700;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid var(--color-border, #e5e7eb);
        margin-bottom: 0.2rem;
    }

    /*  Celda de tiempo estimado: valor en azul grande  */
    #tablaPuntosWrap tbody td:nth-child(3) {
        font-size: 0.88rem;
    }

    /*  Celda de descripción: color muted, tamaño menor  */
    #tablaPuntosWrap tbody td:nth-child(4) {
        font-size: 0.78rem;
        color: var(--color-text-muted, #6b7280);
        align-items: flex-start;
        /* descripción larga puede ser multilinea */
    }

    /*  Hover en cards  */
    #tablaPuntosWrap tbody tr:hover {
        border-color: #93c5fd;
        background: #f0f9ff;
    }

    /* Resto de fixes móvil */

    /* Sufijo de input: reducido en móvil */
    .input-suffix {
        padding: 0 0.5rem;
        font-size: 0.82rem;
    }

    /* Barra de temperatura: leyenda en columna para 375px */
    .proportion-legend {
        display: flex;
        justify-content: space-between;
        font-size: 0.78rem;
    }

    /* Caja de fórmula SEO: permite salto de línea */
    .formula-box code {
        white-space: pre-wrap;
        word-break: break-word;
        font-size: 0.82rem;
    }
}